@php
    $heroPv = __('budgets.landing.hero_preview');
    $how = __('budgets.landing.how');
    $trust = __('budgets.landing.trust');
    $features = __('budgets.landing.features');
    $pricing = __('budgets.landing.pricing');
    $footer = __('budgets.landing.footer');
    $chartHeights = [40, 65, 45, 80, 55, 70, 90, 60, 75, 50, 85, 65];
    $previewLabels = [$heroPv['balance'], $heroPv['income'], $heroPv['expenses'], $heroPv['saved']];
    $previewValues = $heroPv['values'] ?? ['12.450,00 €', '4.200,00 €', '2.180,00 €', '2.020,00 €'];
    $previewTones = ['text-foreground', 'text-primary', 'text-expense', 'text-primary'];
    $isAuthenticated = auth()->check();
    $loginUrl = $isAuthenticated ? route('dashboard') : route('login');
    $getStartedUrl = $isAuthenticated ? route('onboarding') : route('register');
@endphp

<div>
<a href="#content" class="sr-only focus:not-sr-only focus:absolute focus:left-6 focus:top-6 focus:z-[100] focus:rounded-lg focus:bg-background focus:px-4 focus:py-2 focus:text-foreground">
    {{ __('budgets.landing.skip_content') }}
</a>

<header
    x-data="{ scrolled: false }"
    @scroll.window="scrolled = (window.scrollY || 0) > 20"
    :class="scrolled ? 'bg-background/92 border-b border-border/60 shadow-[0_4px_20px_rgba(15,23,42,0.04)]' : 'bg-background/80 sm:bg-background/0 border-b border-border/30 sm:border-transparent'"
    class="fixed top-0 left-0 right-0 z-50 transition-all duration-200 backdrop-blur-xl"
>
    <div class="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between">
        <a href="{{ url('/') }}" wire:navigate class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
                <i data-lucide="wallet" class="w-4 h-4 text-primary-foreground"></i>
            </div>
            <span class="font-semibold text-foreground text-lg tracking-[-0.02em]">{{ $brandName }}</span>
        </a>
        <nav class="hidden sm:flex items-center gap-8 text-sm" aria-label="{{ __('budgets.landing.nav_primary_aria') }}">
            <a href="#features" class="text-foreground/60 hover:text-foreground transition-colors">{{ __('budgets.landing.nav_features') }}</a>
            <a href="#pricing" class="text-foreground/60 hover:text-foreground transition-colors">{{ __('budgets.landing.nav_pricing') }}</a>
        </nav>
        <div class="flex items-center gap-3">
            <form method="post" action="{{ route('locale.update') }}" class="inline-flex items-center gap-2">
                @csrf
                <select name="lang" onchange="this.form.submit()" class="rounded-lg border border-border bg-background px-2 py-1 text-xs text-foreground outline-none" aria-label="{{ __('budgets.landing.language_label') }}">
                    @foreach (\App\Support\LocaleOptions::available() as $loc)
                        <option value="{{ $loc }}" @selected(app()->getLocale() === $loc)>{{ __('budgets.landing.lang_options.'.$loc) }}</option>
                    @endforeach
                </select>
            </form>
            <a href="{{ $loginUrl }}" wire:navigate class="inline-flex items-center justify-center h-9 rounded-full px-3 text-sm font-semibold text-foreground/70 hover:text-foreground hover:bg-foreground/5">{{ __('budgets.landing.nav_login') }}</a>
            <a href="{{ $getStartedUrl }}" wire:navigate class="inline-flex items-center justify-center h-9 rounded-full px-4 text-sm font-semibold bg-primary text-primary-foreground hover:bg-primary/90">{{ __('budgets.landing.nav_get_started') }}</a>
        </div>
    </div>
</header>

<main id="content" class="min-h-screen bg-background text-foreground pt-16">
    {{-- Hero (matches HeroSection.tsx) --}}
    <section class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden pb-24 sm:pb-28">
        <div class="absolute inset-0 bg-gradient-to-b from-background via-background/85 to-background"></div>
        <div class="absolute inset-0 pointer-events-none opacity-[0.06] mix-blend-soft-light" style="background-image:url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E&quot;)"></div>
        <div class="absolute top-1/4 left-1/4 w-[500px] h-[500px] rounded-full bg-primary/10 blur-[120px]"></div>
        <div class="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] rounded-full bg-info/8 blur-[100px]"></div>
        <div class="absolute inset-0 opacity-[0.02]" style="background-image: linear-gradient(hsl(160 60% 45% / 0.3) 1px, transparent 1px), linear-gradient(90deg, hsl(160 60% 45% / 0.3) 1px, transparent 1px); background-size: 84px 84px;"></div>

        <div class="relative z-10 container max-w-6xl mx-auto px-6 text-center">
            <div class="mb-8 inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/88 px-4 py-2 animate-fade-in">
                <i data-lucide="sparkles" class="w-4 h-4 text-primary"></i>
                <span class="text-sm font-medium text-primary">{{ __('budgets.landing.hero_badge') }}</span>
            </div>
            <h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight text-foreground leading-[1.05] mb-6">
                {{ __('budgets.landing.hero_title1') }}<br />
                <span class="text-gradient-primary">{{ __('budgets.landing.hero_title2') }}</span>
            </h1>
            <p class="text-lg sm:text-xl text-foreground/55 max-w-2xl mx-auto mb-10 leading-relaxed">{{ __('budgets.landing.hero_subtitle') }}</p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="{{ $getStartedUrl }}" wire:navigate class="inline-flex h-12 items-center gap-2 rounded-full bg-primary px-8 text-base font-semibold text-primary-foreground shadow-glow hover:bg-primary/90">
                    {{ __('budgets.landing.hero_start') }}
                    <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </a>
                <a href="#features" class="inline-flex h-12 items-center justify-center rounded-full border border-border/60 px-8 text-base font-semibold text-foreground/70 hover:bg-foreground/5 hover:text-foreground hover:border-border/80">
                    {{ __('budgets.landing.hero_demo') }}
                </a>
            </div>
            <div class="mt-10 flex flex-wrap items-center justify-center gap-x-10 gap-y-4 text-sm text-foreground/50">
                <div class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-primary"></span>{{ __('budgets.landing.hero_trust1') }}</div>
                <div class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-primary"></span>{{ __('budgets.landing.hero_trust2') }}</div>
                <div class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-primary"></span>{{ __('budgets.landing.hero_trust3') }}</div>
            </div>

            <div class="mt-20 relative w-full max-w-4xl mx-auto animate-fade-in">
                <div class="absolute -inset-4 rounded-3xl bg-gradient-to-b from-primary/20 to-transparent blur-xl"></div>
                <div class="relative rounded-3xl border border-border/60 bg-background/92 p-1">
                    <div class="bg-background rounded-2xl p-6 sm:p-8 border border-border/40">
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
                            @foreach ($previewLabels as $i => $label)
                                <div class="bg-foreground/5 rounded-xl p-4 text-left">
                                    <p class="text-xs text-foreground/40 mb-1">{{ $label }}</p>
                                    <p class="text-lg font-bold {{ $previewTones[$i] ?? 'text-foreground' }}">{{ $previewValues[$i] ?? '—' }}</p>
                                </div>
                            @endforeach
                        </div>
                        <div class="flex items-end gap-2 h-32">
                            @foreach ($chartHeights as $h)
                                <div class="flex-1 rounded-t-md bg-gradient-to-t from-primary/30 to-primary/60 transition-all duration-500" style="height: {{ $h }}%"></div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- How it works (HowItWorksSection.tsx) --}}
    <section class="py-24 bg-background border-t border-border/40">
        <div class="container max-w-6xl mx-auto px-6">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-3xl sm:text-4xl font-bold tracking-tight mb-4">
                        {{ $how['title_1'] }}<br />
                        <span class="text-gradient-primary">{{ $how['title_2'] }}</span>
                    </h2>
                    <p class="text-muted-foreground text-lg max-w-xl">{{ $how['subtitle'] }}</p>
                    <ol class="mt-10 space-y-6">
                        @foreach ($how['steps'] as $step)
                            <li class="flex gap-4">
                                <div class="w-11 h-11 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center flex-none">
                                    <i data-lucide="{{ $step['icon'] }}" class="w-5 h-5 text-primary"></i>
                                </div>
                                <div>
                                    <h3 class="text-base font-semibold mb-1">{{ $step['title'] }}</h3>
                                    <p class="text-sm text-muted-foreground leading-relaxed">{{ $step['description'] }}</p>
                                </div>
                            </li>
                        @endforeach
                    </ol>
                </div>
                <div class="relative">
                    <div class="absolute -inset-4 bg-gradient-to-b from-primary/10 to-transparent blur-2xl rounded-3xl"></div>
                    <div class="relative rounded-3xl border border-border/60 bg-card/70 backdrop-blur-sm p-6 sm:p-8">
                        <p class="text-xs font-semibold text-muted-foreground mb-4">{{ $how['snapshot_label'] }}</p>
                        <div class="grid grid-cols-3 gap-3">
                            @foreach ($how['snapshot_cards'] as $item)
                                <div class="rounded-2xl border border-border/50 bg-background/50 p-4">
                                    <p class="text-[11px] text-muted-foreground mb-2">{{ $item['label'] }}</p>
                                    <p class="text-lg font-bold {{ $item['tone'] }}">{{ $item['value'] }}</p>
                                </div>
                            @endforeach
                        </div>
                        <div class="mt-6 rounded-2xl border border-border/50 bg-background/50 p-4">
                            <div class="flex items-center justify-between mb-4">
                                <p class="text-sm font-semibold">{{ $how['subscription_health'] }}</p>
                                <p class="text-xs text-muted-foreground">{{ $how['updated_now'] }}</p>
                            </div>
                            <div class="space-y-3">
                                @foreach ($how['subscription_rows'] as $row)
                                    <div class="flex items-center justify-between gap-4">
                                        <p class="text-sm text-foreground">{{ $row['name'] }}</p>
                                        <p class="text-xs font-medium {{ $row['tone'] }}">{{ $row['status'] }}</p>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Trust (TrustSection.tsx) --}}
    <section class="py-16 border-t border-b border-border/60 bg-background">
        <div class="container max-w-6xl mx-auto px-6">
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
                @foreach ($trust as $item)
                    <div class="text-center">
                        <div class="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-3">
                            <i data-lucide="{{ $item['icon'] }}" class="w-5 h-5 text-primary"></i>
                        </div>
                        <h3 class="font-semibold text-sm mb-1">{{ $item['label'] }}</h3>
                        <p class="text-xs text-muted-foreground">{{ $item['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Feature overviews (FeatureOverviewsSection.tsx) --}}
    <section id="features" class="py-24 bg-background relative scroll-mt-24">
        <div class="container max-w-6xl mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl sm:text-4xl font-bold tracking-tight mb-4">
                    {{ __('budgets.landing.features_intro_title') }}<span class="text-gradient-primary">{{ __('budgets.landing.features_intro_gradient') }}</span>
                </h2>
                <p class="text-muted-foreground text-lg max-w-2xl mx-auto">{{ __('budgets.landing.features_intro_subtitle') }}</p>
            </div>
            <div class="space-y-14 sm:space-y-16">
                @foreach ($features as $idx => $feature)
                    @php $flip = $idx % 2 === 1; @endphp
                    <div class="grid lg:grid-cols-2 gap-12 items-center">
                        <div class="{{ $flip ? 'lg:order-2' : '' }}">
                            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-border/60 bg-card/40 backdrop-blur-sm mb-5">
                                <i data-lucide="{{ $feature['icon'] }}" class="w-4 h-4 text-primary"></i>
                                <span class="text-sm font-medium text-foreground/70">{{ $feature['preview_title'] }}</span>
                            </div>
                            <h3 class="text-2xl sm:text-3xl font-bold tracking-tight mb-4">{{ $feature['title'] }}</h3>
                            <p class="text-muted-foreground text-base leading-relaxed mb-6">{{ $feature['description'] }}</p>
                            <ul class="space-y-3">
                                @foreach ($feature['bullets'] as $b)
                                    <li class="flex items-start gap-3">
                                        <span class="mt-1 w-1.5 h-1.5 rounded-full bg-primary flex-none"></span>
                                        <span class="text-sm text-foreground/80 leading-relaxed">{{ $b }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="{{ $flip ? 'lg:order-1' : '' }}">
                            <div class="relative">
                                <div class="absolute -inset-4 bg-gradient-to-b from-primary/10 to-transparent blur-2xl rounded-3xl"></div>
                                <div class="relative rounded-3xl border border-border/60 bg-card/70 backdrop-blur-sm p-6 sm:p-8">
                                    <div class="flex items-center justify-between gap-4 mb-5">
                                        <div class="flex items-center gap-3">
                                            <div class="w-10 h-10 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center">
                                                <i data-lucide="{{ $feature['icon'] }}" class="w-5 h-5 text-primary"></i>
                                            </div>
                                            <div>
                                                <p class="text-xs font-semibold text-muted-foreground mb-1">{{ __('budgets.landing.feature_focus') }}</p>
                                                <p class="text-sm font-semibold text-foreground/90">{{ $feature['title'] }}</p>
                                            </div>
                                        </div>
                                        <div class="text-xs text-muted-foreground/80">{{ __('budgets.landing.feature_updated') }}</div>
                                    </div>
                                    <div class="grid grid-cols-3 gap-3 mb-5">
                                        @foreach ($feature['preview_metrics'] as $m)
                                            <div class="rounded-2xl border border-border/50 bg-background/50 p-4">
                                                <p class="text-[11px] text-muted-foreground mb-2">{{ $m['label'] }}</p>
                                                <p class="text-lg font-bold {{ $m['tone'] }}">{{ $m['value'] }}</p>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="rounded-2xl border border-border/50 bg-background/50 p-4">
                                        <div class="flex items-center justify-between mb-4">
                                            <p class="text-sm font-semibold text-foreground/90">{{ __('budgets.landing.feature_insights') }}</p>
                                            <p class="text-xs text-muted-foreground">{{ __('budgets.landing.feature_glance') }}</p>
                                        </div>
                                        <div class="space-y-3">
                                            @foreach ($feature['preview_list'] as $row)
                                                <div class="flex items-center justify-between gap-4">
                                                    <p class="text-sm text-foreground/80">{{ $row['label'] }}</p>
                                                    <p class="text-xs font-medium {{ $row['tone'] }}">{{ $row['status'] }}</p>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Pricing (PricingSection.tsx) --}}
    <section id="pricing" class="scroll-mt-24 py-24 sm:py-32 bg-muted/20 relative" x-data="{ billing: 'monthly' }">
        <div class="container max-w-5xl mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl sm:text-4xl font-bold tracking-tight mb-4">{{ $pricing['title'] }}</h2>
                <p class="text-muted-foreground text-lg">{{ $pricing['subtitle'] }}</p>
                <div class="mt-8 flex items-center justify-center">
                    <div class="inline-flex rounded-full border border-border/60 bg-background/60 p-1">
                        <button type="button" @click="billing = 'monthly'" :class="billing === 'monthly' ? 'bg-background shadow-sm text-foreground' : 'text-foreground/60 hover:text-foreground'" class="px-4 py-2 text-sm rounded-full transition-colors">{{ $pricing['monthly'] }}</button>
                        <button type="button" @click="billing = 'annual'" :class="billing === 'annual' ? 'bg-background shadow-sm text-foreground' : 'text-foreground/60 hover:text-foreground'" class="px-4 py-2 text-sm rounded-full transition-colors">{{ $pricing['annual'] }}</button>
                    </div>
                </div>
                <p class="mt-3 text-xs text-muted-foreground/80">{{ $pricing['discount_note'] }}</p>
            </div>
            <div class="grid sm:grid-cols-2 gap-8 max-w-4xl mx-auto">
                @foreach ($pricing['plans'] as $plan)
                    <div class="relative rounded-3xl p-8 border transition-all duration-200 backdrop-blur-sm {{ ! empty($plan['highlighted']) ? 'bg-foreground text-background border-primary/40 shadow-glow' : 'bg-card/60 border-border/60 hover:bg-card/80' }}">
                        @if (! empty($plan['highlighted']))
                            <div class="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-primary text-primary-foreground text-xs font-semibold">{{ $pricing['most_popular'] }}</div>
                        @endif
                        <h3 class="text-xl font-bold mb-1 {{ ! empty($plan['highlighted']) ? 'text-background' : '' }}">{{ $plan['name'] }}</h3>
                        <p class="text-sm mb-6 {{ ! empty($plan['highlighted']) ? 'text-background/50' : 'text-muted-foreground' }}">{{ $plan['description'] }}</p>
                        <div class="flex items-baseline gap-1 mb-8">
                            @if (isset($plan['monthly_price']))
                                <span x-show="billing === 'monthly'" class="text-4xl font-extrabold {{ ! empty($plan['highlighted']) ? 'text-background' : '' }}">{{ $plan['monthly_price'] }}</span>
                                <span x-show="billing === 'monthly'" class="text-sm {{ ! empty($plan['highlighted']) ? 'text-background/50' : 'text-muted-foreground' }}">{{ $plan['monthly_period'] }}</span>
                                <span x-show="billing === 'annual'" class="text-4xl font-extrabold {{ ! empty($plan['highlighted']) ? 'text-background' : '' }}" style="display: none">{{ $plan['annual_price'] }}</span>
                                <span x-show="billing === 'annual'" class="text-sm {{ ! empty($plan['highlighted']) ? 'text-background/50' : 'text-muted-foreground' }}" style="display: none">{{ $plan['annual_period'] }}</span>
                            @else
                                <span class="text-4xl font-extrabold">{{ $plan['price'] }}</span>
                                <span class="text-sm text-muted-foreground">{{ $plan['period'] }}</span>
                            @endif
                        </div>
                        <ul class="space-y-3 mb-8">
                            @foreach ($plan['features'] as $f)
                                <li class="flex items-start gap-3 text-sm">
                                    <i data-lucide="check" class="w-4 h-4 mt-0.5 shrink-0 text-primary"></i>
                                    <span class="{{ ! empty($plan['highlighted']) ? 'text-background/80' : 'text-muted-foreground' }}">{{ $f }}</span>
                                </li>
                            @endforeach
                        </ul>
                        <a href="{{ $getStartedUrl }}" wire:navigate class="flex w-full items-center justify-center rounded-full h-12 font-semibold {{ ! empty($plan['highlighted']) ? 'bg-primary text-primary-foreground hover:bg-primary/90' : 'bg-secondary text-secondary-foreground hover:bg-secondary/80' }}">
                            {{ $plan['cta'] }}
                        </a>
                    </div>
                @endforeach
            </div>
            <p class="mt-10 text-center text-xs text-muted-foreground/80">{{ $pricing['trial_footer'] }}</p>
        </div>
    </section>

    {{-- Footer (FooterSection.tsx) --}}
    <footer class="py-12 bg-background text-muted-foreground border-t border-border/60">
        <div class="container max-w-6xl mx-auto px-6">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-6">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
                        <i data-lucide="wallet" class="w-4 h-4 text-primary-foreground"></i>
                    </div>
                    <span class="font-semibold text-foreground text-lg tracking-[-0.02em]">{{ $brandName }}</span>
                </div>
                <div class="flex flex-wrap items-center justify-center gap-6 sm:gap-8 text-sm">
                    <a href="#" class="text-muted-foreground hover:text-foreground transition-colors">{{ $footer['privacy'] }}</a>
                    <a href="#" class="text-muted-foreground hover:text-foreground transition-colors">{{ $footer['terms'] }}</a>
                    <a href="#" class="text-muted-foreground hover:text-foreground transition-colors">{{ $footer['support'] }}</a>
                    <a href="#" class="text-muted-foreground hover:text-foreground transition-colors">{{ $footer['blog'] }}</a>
                </div>
                <div class="text-center sm:text-right text-xs text-muted-foreground/80 max-w-md">
                    <p>
                        {{ $footer['credit'] }}
                        <a href="https://instagram.com/augustogsa" target="_blank" rel="noreferrer" class="underline underline-offset-4 hover:text-foreground">{{ $footer['instagram'] }}</a>.
                    </p>
                </div>
            </div>
        </div>
    </footer>
</main>
</div>