@props(['data' => []])

@php
    $ps = $publicSettings ?? $themeSettings ?? [];
    $primaryUrl = is_array($data['cta_primary'] ?? null)
        ? ($data['cta_primary']['url'] ?? '/book')
        : ($ps['cta.primary_url'] ?? '/book');
    $primaryText = is_array($data['cta_primary'] ?? null)
        ? ($data['cta_primary']['text'] ?? 'Book Consultation')
        : (is_string($data['cta_primary'] ?? null) ? $data['cta_primary'] : ($ps['cta.primary_text'] ?? 'Book Consultation'));
    $secondaryUrl = is_array($data['cta_secondary'] ?? null)
        ? ($data['cta_secondary']['url'] ?? '/services')
        : ($ps['cta.secondary_url'] ?? '/services');
    $secondaryText = is_array($data['cta_secondary'] ?? null)
        ? ($data['cta_secondary']['text'] ?? 'Learn More')
        : (is_string($data['cta_secondary'] ?? null) ? $data['cta_secondary'] : ($ps['cta.secondary_text'] ?? 'Learn More'));
    $dark = ($data['variant'] ?? 'light') === 'dark';
@endphp

@if($dark)
    <section class="relative isolate overflow-hidden bg-[#030712] public-hero text-white">
        <div class="home-hero-mesh pointer-events-none absolute inset-0" aria-hidden="true">
            <div class="home-orb home-orb-1 opacity-30"></div>
            <div class="home-grid absolute inset-0 opacity-10"></div>
        </div>
        <div class="container-page relative z-10">
            @if(!empty($data['breadcrumbs']))
                <x-breadcrumbs :items="$data['breadcrumbs']" dark class="mb-8 !px-0 !py-0" />
            @endif
            <div class="grid items-center gap-12 lg:grid-cols-2">
                <div>
                    @if(!empty($data['badge']))
                        <span class="home-eyebrow-dark">{{ $data['badge'] }}</span>
                    @endif
                    <h1 class="mt-6 text-[clamp(2.25rem,5vw,3.5rem)] font-bold leading-tight tracking-tight">{{ $data['headline'] ?? '' }}</h1>
                    <p class="mt-6 text-lg leading-relaxed text-slate-400">{{ $data['subheadline'] ?? '' }}</p>
                    <div class="mt-10 flex flex-wrap gap-4">
                        <x-ui.button :href="$primaryUrl" size="lg" class="shadow-xl shadow-emerald-500/25" data-track-cta="hero-primary">{{ $primaryText }}</x-ui.button>
                        <x-ui.button :href="$secondaryUrl" variant="secondary" size="lg" class="border-white/20 bg-white/5 text-white hover:bg-white/10" data-track-cta="hero-secondary">{{ $secondaryText }}</x-ui.button>
                    </div>
                </div>
                <div class="premium-card border-white/10 bg-white/5 p-10 backdrop-blur-sm">
                    <div class="text-center">
                        <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-accent shadow-lg">
                            <svg class="h-10 w-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </div>
                        <p class="mt-6 text-lg font-semibold">Vetted remote professionals</p>
                        <p class="mt-2 text-sm text-slate-400">Matched to your business in days</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@else
    <section class="section-padding border-b border-border bg-[#f8fafc]">
        <div class="container-page">
            <div class="grid items-center gap-12 lg:grid-cols-2">
                <div>
                    @if(!empty($data['badge']))
                        <span class="home-eyebrow">{{ $data['badge'] }}</span>
                    @endif
                    <h1 class="mt-4 text-[clamp(2.25rem,5vw,3.25rem)] font-bold leading-tight tracking-tight text-secondary">{{ $data['headline'] ?? '' }}</h1>
                    <p class="mt-6 text-lg text-muted">{{ $data['subheadline'] ?? '' }}</p>
                    <div class="mt-8 flex flex-wrap gap-4">
                        <x-ui.button :href="$primaryUrl" data-track-cta="hero-primary">{{ $primaryText }}</x-ui.button>
                        <x-ui.button :href="$secondaryUrl" variant="secondary" data-track-cta="hero-secondary">{{ $secondaryText }}</x-ui.button>
                    </div>
                </div>
                <div class="premium-card p-10">
                    <div class="text-center">
                        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                            <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </div>
                        <p class="mt-5 font-semibold text-secondary">Australian business standards</p>
                        <p class="mt-2 text-sm text-muted">Timezone-aligned · Pre-vetted · Ready to start</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif