@php
$heroTitle = $heroTitle ?? 'Welcome to Our Business';
$heroSubtitle = $heroSubtitle ?? 'Professional solutions for modern businesses';
$heroButton = $heroButton ?? 'Get Started';
$heroButtonLink = $heroButtonLink ?? '#contact';
$heroImage = $heroImage ?? null;
@endphp

<section class="hero-section">
    <div class="container">
        <div class="row align-items-center min-vh-100">
            <div class="col-lg-6" data-aos="fade-right">
                <h1 class="hero-title">{{ $heroTitle }}</h1>
                <p class="hero-subtitle">{{ $heroSubtitle }}</p>
                <div class="hero-buttons">
                    <a href="{{ $heroButtonLink }}" class="btn btn-gradient btn-lg">
                        {{ $heroButton }}
                        <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                    @if(isset($heroSecondaryButton))
                    <a href="{{ $heroSecondaryButtonLink ?? '#' }}" class="btn btn-outline-primary btn-lg ms-3">
                        {{ $heroSecondaryButton }}
                    </a>
                    @endif
                </div>
            </div>
            @if($heroImage)
            <div class="col-lg-6" data-aos="fade-left">
                <img src="{{ $heroImage }}" alt="Hero" class="img-fluid hero-image">
            </div>
            @endif
        </div>
    </div>
    <div class="hero-shape">
        <svg viewBox="0 0 1440 320" preserveAspectRatio="none">
            <path fill="#ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
    </div>
</section>

<style>
.hero-section {
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-gradient {
    background: white;
    color: var(--primary-color);
    padding: 0.875rem 2.5rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    color: var(--primary-color);
}

.hero-image {
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.hero-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }
}
</style>