@extends('layouts.public')

@section('title', $site['site_brand'] ?? 'Undangan Digital')
@section('nav_class', 'nav-on-hero')
@section('hide_footer', true)

@push('styles')
<style>
    .nav-on-hero .brand,
    .nav-on-hero .nav-links a { color: #fff; }

    .hero {
        position: relative;
        min-height: 100vh;
        display: grid;
        align-items: end;
        overflow: hidden;
        color: #fff;
    }

    .hero-media {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(10, 24, 18, 0.28) 0%, rgba(10, 24, 18, 0.72) 70%, rgba(10, 24, 18, 0.9) 100%),
            url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2000&q=80') center/cover;
        animation: drift 18s ease-in-out alternate infinite;
        transform-origin: center;
    }

    .hero-content {
        position: relative;
        z-index: 2;
        width: min(880px, calc(100% - 2.5rem));
        margin: 0 auto 4.5rem;
        animation: rise .9s ease both;
    }

    .hero-brand {
        font-family: var(--font-display);
        font-size: clamp(2.8rem, 9vw, 5.8rem);
        font-weight: 560;
        letter-spacing: -0.04em;
        line-height: .95;
        margin: 0 0 1rem;
    }

    .hero-copy {
        max-width: 28rem;
        margin: 0 0 1.75rem;
        font-size: 1.08rem;
        line-height: 1.7;
        color: rgba(255,255,255,.88);
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .hero-hint {
        margin-top: 1.5rem;
        font-size: .9rem;
        color: rgba(255,255,255,.72);
        animation: fadeIn 1.4s ease both;
    }

    .hero-content .social-links {
        margin-top: 1.15rem;
        animation: fadeIn 1.55s ease both;
    }

    @media (max-width: 640px) {
        .hero-content { margin-bottom: 3rem; }
        .btn { width: 100%; }
        .hero-content .social-link { width: 100%; }
    }
</style>
@endpush

@section('content')
    <section class="hero">
        <div class="hero-media" aria-hidden="true"></div>
        <div class="hero-content">
            <h1 class="hero-brand">{{ $site['hero_title'] }}</h1>
            <p class="hero-copy">{{ $site['hero_subtitle'] }}</p>
            <div class="hero-actions">
                <a class="btn btn-primary" href="/paket">{{ $site['hero_cta_primary'] }}</a>
                <a class="btn btn-ghost" href="/tema">{{ $site['hero_cta_secondary'] }}</a>
            </div>
            <p class="hero-hint">{{ $site['hero_hint'] }}</p>
            @include('partials.social-links', ['variant' => 'hero'])
        </div>
    </section>
@endsection