@extends('layouts.base')

@section('body')
<header class="sticky top-0 z-50 bg-brand-500 backdrop-blur">
    <div class="container mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3">
        <a href="{{ route('landing') }}" class="flex items-center gap-3">
            <x-logo variant="white" class="h-9 w-auto md:h-11"/>
        </a>

        <nav class="hidden items-center gap-1 lg:flex">
            <a href="#how-it-works" class="rounded-full px-4 py-2 font-semibold text-white/90 transition hover:bg-white/10 hover:text-white">{{ __('nav.features') }}</a>
            <a href="#diet-systems" class="rounded-full px-4 py-2 font-semibold text-white/90 transition hover:bg-white/10 hover:text-white">{{ __('nav.diets') }}</a>
            <a href="#audience" class="rounded-full px-4 py-2 font-semibold text-white/90 transition hover:bg-white/10 hover:text-white">{{ __('nav.for_who') }}</a>
            <a href="#pricing" class="rounded-full px-4 py-2 font-semibold text-white/90 transition hover:bg-white/10 hover:text-white">{{ __('nav.pricing') }}</a>
        </nav>

        <div class="flex items-center gap-2">
            <x-language-switcher tone="dark"/>
            <a href="{{ route('login') }}" class="hidden rounded-full border-2 border-white/40 px-4 py-2 font-semibold text-white transition hover:border-white hover:bg-white/10 sm:inline-flex">
                {{ __('landing.consultant_login') }}
            </a>
            <a href="#demo" class="inline-flex items-center justify-center rounded-full !px-5 !py-2.5 text-sm font-bold text-brand-700 bg-white transition hover:bg-white/90">{{ __('landing.hero_cta_primary') }}</a>
        </div>
    </div>
</header>

<main>
    @yield('content')
</main>

<footer class="mt-24 bg-brand-500 text-white/80">
    <div class="container mx-auto max-w-7xl px-4 py-14">
        <div class="grid gap-10 md:grid-cols-3">
            <div>
                <x-logo variant="white" class="h-11 w-auto"/>
                <p class="mt-4 max-w-sm text-sm leading-relaxed text-white/70">{{ __('landing.footer_tagline') }}</p>
            </div>
            <div>
                <h4 class="mb-3 text-sm font-bold uppercase tracking-wide text-white">{{ __('nav.home') }}</h4>
                <ul class="space-y-2 list-none ps-0 text-sm">
                    <li><a href="#how-it-works" class="text-white/70 no-underline transition hover:text-white">{{ __('nav.features') }}</a></li>
                    <li><a href="#diet-systems" class="text-white/70 no-underline transition hover:text-white">{{ __('nav.diets') }}</a></li>
                    <li><a href="#pricing" class="text-white/70 no-underline transition hover:text-white">{{ __('nav.pricing') }}</a></li>
                    <li><a href="{{ route('login') }}" class="text-white/70 no-underline transition hover:text-white">{{ __('landing.consultant_login') }}</a></li>
                </ul>
            </div>
            <div>
                <h4 class="mb-3 text-sm font-bold uppercase tracking-wide text-white">{{ __('nav.contact') }}</h4>
                <a href="#demo" class="inline-flex items-center justify-center rounded-full !px-5 !py-2.5 text-sm font-bold text-brand-700 bg-white transition hover:bg-white/90">{{ __('landing.form_submit') }}</a>
            </div>
        </div>

        <div class="mt-12 border-t border-white/15 pt-6 text-sm text-white/60">
            &copy; {{ date('Y') }} Smart Carb. {{ __('landing.footer_rights') }}
        </div>
    </div>
</footer>
@endsection