@extends('layouts.public')

@section('title', config('app.name') . ' — ' . __('landing.hero_title'))
@section('meta_description', __('landing.hero_subtitle'))

@section('content')

{{-- ============================ HERO ============================ --}}
<section class="relative overflow-hidden bg-gradient-to-b from-brand-50 via-white to-white">
    <div class="pointer-events-none absolute -top-32 end-[-8rem] h-[28rem] w-[28rem] rounded-full bg-brand-200/40 blur-3xl"></div>
    <div class="pointer-events-none absolute top-40 start-[-10rem] h-80 w-80 rounded-full bg-accent-gold/20 blur-3xl"></div>

    <div class="container relative mx-auto max-w-7xl px-4 py-16 lg:py-24">
        <div class="grid items-center gap-12 lg:grid-cols-2">
            <div>
                <span class="section-eyebrow">{{ __('landing.hero_eyebrow') }}</span>
                <h1 class="text-4xl leading-tight md:text-5xl lg:text-6xl">{{ __('landing.hero_title') }}</h1>
                <p class="mt-6 max-w-xl text-lg leading-relaxed text-ink-500">{{ __('landing.hero_subtitle') }}</p>

                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="#demo" class="btn-brand">{{ __('landing.hero_cta_primary') }}</a>
                    <a href="#how-it-works" class="btn-ghost">{{ __('landing.hero_cta_secondary') }}</a>
                </div>

                <dl class="mt-12 grid max-w-lg grid-cols-3 gap-6">
                    <div>
                        <dt class="numeric text-3xl font-extrabold text-brand-600">5</dt>
                        <dd class="mt-1 text-sm text-ink-500">{{ __('landing.hero_stat_1') }}</dd>
                    </div>
                    <div>
                        <dt class="numeric text-3xl font-extrabold text-brand-600">90</dt>
                        <dd class="mt-1 text-sm text-ink-500">{{ __('landing.hero_stat_2') }}</dd>
                    </div>
                    <div>
                        <dt class="numeric text-3xl font-extrabold text-brand-600">2</dt>
                        <dd class="mt-1 text-sm text-ink-500">{{ __('landing.hero_stat_3') }}</dd>
                    </div>
                </dl>
            </div>

            {{-- Menu preview mock --}}
            <div class="relative">
                <div class="rounded-4xl border border-ink-100 bg-white p-6 shadow-card">
                    <div class="flex items-center justify-between border-b border-ink-100 pb-4">
                        <div>
                            <p class="text-xs font-bold uppercase tracking-wide text-ink-400">{{ __('patients.target_calories') }}</p>
                            <p class="numeric text-3xl font-extrabold text-ink-900">1,840 <span class="text-base font-semibold text-ink-400">{{ __('common.kcal') }}</span></p>
                        </div>
                        <span class="badge-sc bg-brand-100 text-brand-800">{{ __('landing.diet_deficit', ['percent' => 20]) }}</span>
                    </div>

                    <div class="mt-4 grid grid-cols-3 gap-3 text-center">
                        @foreach ([['patients.protein', '138', 'bg-brand-50 text-brand-700'], ['patients.carbs', '184', 'bg-amber-50 text-amber-700'], ['patients.fat', '61', 'bg-sky-50 text-sky-700']] as [$key, $value, $tone])
                            <div class="rounded-2xl {{ $tone }} px-3 py-3">
                                <p class="numeric text-xl font-extrabold">{{ $value }}{{ __('common.grams') }}</p>
                                <p class="text-xs font-semibold">{{ __($key) }}</p>
                            </div>
                        @endforeach
                    </div>

                    <ul class="mt-5 space-y-3 list-none ps-0">
                        @foreach ([['breakfast', '460'], ['snack_am', '184'], ['lunch', '644'], ['snack_pm', '184'], ['dinner', '368']] as [$slot, $kcal])
                            <li class="flex items-center justify-between rounded-2xl bg-ink-50 px-4 py-3">
                                <span class="font-semibold text-ink-800">{{ __('menus.slots.' . $slot) }}</span>
                                <span class="numeric text-sm font-bold text-brand-700">{{ $kcal }} {{ __('common.kcal') }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="absolute -bottom-6 start-6 rounded-2xl bg-brand-500 px-5 py-3 text-white shadow-card">
                    <p class="text-xs text-white/70">{{ __('patients.bmr') }} → {{ __('patients.tdee') }}</p>
                    <p class="numeric text-lg font-bold">1,512 → 2,300 {{ __('common.kcal') }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ======================= HOW IT WORKS ========================= --}}
<section id="how-it-works" class="py-20 lg:py-28">
    <div class="container mx-auto max-w-7xl px-4">
        <div class="mx-auto max-w-3xl text-center">
            <span class="section-eyebrow">{{ __('landing.how_eyebrow') }}</span>
            <h2 class="text-3xl md:text-4xl">{{ __('landing.how_title') }}</h2>
            <p class="mt-4 text-lg leading-relaxed text-ink-500">{{ __('landing.how_subtitle') }}</p>
        </div>

        <ol class="relative mt-14 list-none space-y-6 ps-0">
            @foreach ([1, 2, 3, 4, 5] as $step)
                <li class="card-sc flex flex-col gap-4 md:flex-row md:items-start md:gap-8">
                    <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-brand-gradient text-2xl font-extrabold text-white shadow-brand">
                        <span class="numeric">{{ $step }}</span>
                    </div>
                    <div>
                        <h3 class="text-xl">{{ __('landing.step_' . $step . '_title') }}</h3>
                        <p class="mt-2 leading-relaxed text-ink-500">{{ __('landing.step_' . $step . '_body') }}</p>
                    </div>
                </li>
            @endforeach
        </ol>

        {{-- The equation, spelled out --}}
        <div class="mt-12 rounded-4xl bg-ink-900 p-8 text-white lg:p-12">
            <div class="grid gap-8 lg:grid-cols-3">
                <div>
                    <p class="text-sm font-bold uppercase tracking-wide text-brand-400">Mifflin-St Jeor</p>
                    <p class="numeric mt-3 text-lg font-semibold leading-relaxed">
                        BMR = 10 × kg + 6.25 × cm − 5 × age <span class="text-brand-400">+ 5</span> / <span class="text-brand-400">− 161</span>
                    </p>
                </div>
                <div>
                    <p class="text-sm font-bold uppercase tracking-wide text-brand-400">TDEE</p>
                    <p class="numeric mt-3 text-lg font-semibold leading-relaxed">
                        BMR × 1.20 … 1.90
                    </p>
                    <p class="mt-2 text-sm text-ink-300">{{ __('patients.activity.sedentary') }} → {{ __('patients.activity.athlete') }}</p>
                </div>
                <div>
                    <p class="text-sm font-bold uppercase tracking-wide text-brand-400">{{ __('patients.target_calories') }}</p>
                    <p class="numeric mt-3 text-lg font-semibold leading-relaxed">
                        TDEE × (1 + adjustment)
                    </p>
                    <p class="mt-2 text-sm text-ink-300">−20% … +10%, floored at 1,200 / 1,500 {{ __('common.kcal') }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ======================= DIET SYSTEMS ========================= --}}
<section id="diet-systems" class="bg-ink-50 py-20 lg:py-28">
    <div class="container mx-auto max-w-7xl px-4">
        <div class="mx-auto max-w-3xl text-center">
            <span class="section-eyebrow">{{ __('landing.diets_eyebrow') }}</span>
            <h2 class="text-3xl md:text-4xl">{{ __('landing.diets_title') }}</h2>
            <p class="mt-4 text-lg leading-relaxed text-ink-500">{{ __('landing.diets_subtitle') }}</p>
        </div>

        <div class="mt-14 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($dietTypes as $diet)
                @php
                    $adjustment = (float) $diet->calorie_adjustment;
                    $mealCount = count($diet->mealDistribution());
                @endphp
                <article class="card-sc flex h-full flex-col">
                    <div class="flex items-start justify-between gap-3">
                        <h3 class="text-xl">{{ $diet->name }}</h3>
                        @if ($diet->requires_medical_clearance)
                            <span class="badge-sc bg-amber-100 text-amber-800">{{ __('landing.diet_clearance') }}</span>
                        @endif
                    </div>

                    <p class="mt-3 flex-1 text-sm leading-relaxed text-ink-500">{{ $diet->description }}</p>

                    <div class="mt-5 space-y-3 border-t border-ink-100 pt-5">
                        <div>
                            <p class="mb-1.5 text-xs font-bold uppercase tracking-wide text-ink-400">{{ __('landing.diet_macros') }}</p>
                            <div class="flex h-2.5 overflow-hidden rounded-full bg-ink-100">
                                <div class="bg-brand-500" style="width: {{ $diet->protein_percent }}%"></div>
                                <div class="bg-amber-400" style="width: {{ $diet->carb_percent }}%"></div>
                                <div class="bg-sky-400" style="width: {{ $diet->fat_percent }}%"></div>
                            </div>
                            <div class="numeric mt-2 flex justify-between text-xs font-semibold text-ink-500">
                                <span>{{ __('patients.protein') }} {{ $diet->protein_percent }}%</span>
                                <span>{{ __('patients.carbs') }} {{ $diet->carb_percent }}%</span>
                                <span>{{ __('patients.fat') }} {{ $diet->fat_percent }}%</span>
                            </div>
                        </div>

                        <div class="flex items-center justify-between text-sm">
                            <span class="font-semibold text-ink-500">{{ __('landing.diet_adjustment') }}</span>
                            <span class="badge-sc {{ $adjustment < 0 ? 'bg-brand-100 text-brand-800' : ($adjustment > 0 ? 'bg-sky-100 text-sky-800' : 'bg-ink-100 text-ink-700') }}">
                                @if ($adjustment < 0)
                                    {{ __('landing.diet_deficit', ['percent' => abs((int) round($adjustment * 100))]) }}
                                @elseif ($adjustment > 0)
                                    {{ __('landing.diet_surplus', ['percent' => (int) round($adjustment * 100)]) }}
                                @else
                                    {{ __('landing.diet_maintenance') }}
                                @endif
                            </span>
                        </div>

                        <div class="flex items-center justify-between text-sm">
                            <span class="font-semibold text-ink-500">{{ __('landing.diet_meals') }}</span>
                            <span class="font-bold text-ink-800">{{ __('landing.diet_meals_count', ['count' => $mealCount]) }}</span>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>

{{-- ========================== AUDIENCE ========================== --}}
<section id="audience" class="py-20 lg:py-28">
    <div class="container mx-auto max-w-7xl px-4">
        <div class="mx-auto max-w-3xl text-center">
            <span class="section-eyebrow">{{ __('landing.audience_eyebrow') }}</span>
            <h2 class="text-3xl md:text-4xl">{{ __('landing.audience_title') }}</h2>
        </div>

        <div class="mt-14 grid gap-6 lg:grid-cols-2">
            @foreach ([['club', 'bg-brand-gradient'], ['clinic', 'bg-ink-gradient']] as [$key, $tone])
                <article class="overflow-hidden rounded-4xl border border-ink-100 shadow-card">
                    <div class="{{ $tone }} px-8 py-8 text-white">
                        <h3 class="text-2xl text-white">{{ __('landing.' . $key . '_title') }}</h3>
                        <p class="mt-3 leading-relaxed text-white/85">{{ __('landing.' . $key . '_body') }}</p>
                    </div>
                    <ul class="list-none space-y-4 bg-white px-8 py-8 ps-8">
                        @foreach ([1, 2, 3, 4] as $i)
                            <li class="flex items-start gap-3">
                                <svg class="mt-0.5 h-5 w-5 shrink-0 text-brand-500" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                                </svg>
                                <span class="font-medium text-ink-700">{{ __('landing.' . $key . '_point_' . $i) }}</span>
                            </li>
                        @endforeach
                    </ul>
                </article>
            @endforeach
        </div>
    </div>
</section>

{{-- ========================== FEATURES ========================== --}}
<section class="bg-ink-50 py-20 lg:py-28">
    <div class="container mx-auto max-w-7xl px-4">
        <div class="mx-auto max-w-3xl text-center">
            <span class="section-eyebrow">{{ __('landing.features_eyebrow') }}</span>
            <h2 class="text-3xl md:text-4xl">{{ __('landing.features_title') }}</h2>
        </div>

        <div class="mt-14 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            @foreach ([1, 2, 3, 4, 5, 6] as $i)
                <div class="card-sc">
                    <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-600">
                        <span class="numeric text-lg font-extrabold">{{ str_pad((string) $i, 2, '0', STR_PAD_LEFT) }}</span>
                    </div>
                    <h3 class="text-lg">{{ __('landing.feature_' . $i . '_title') }}</h3>
                    <p class="mt-2 text-sm leading-relaxed text-ink-500">{{ __('landing.feature_' . $i . '_body') }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- =========================== PRICING ========================== --}}
<section id="pricing" class="py-20 lg:py-28">
    <div class="container mx-auto max-w-7xl px-4">
        <div class="mx-auto max-w-3xl text-center">
            <span class="section-eyebrow">{{ __('landing.pricing_eyebrow') }}</span>
            <h2 class="text-3xl md:text-4xl">{{ __('landing.pricing_title') }}</h2>
            <p class="mt-4 text-lg leading-relaxed text-ink-500">{{ __('landing.pricing_subtitle') }}</p>

            <div class="mt-8 inline-flex items-center gap-3 rounded-full border border-ink-200 bg-white px-5 py-3">
                <span class="font-semibold text-ink-700">{{ __('landing.pricing_monthly') }}</span>
                <div class="form-check form-switch m-0">
                    <input class="form-check-input m-0" type="checkbox" role="switch" id="billingToggle" data-billing-toggle>
                </div>
                <span class="font-semibold text-ink-700">{{ __('landing.pricing_yearly') }}</span>
                <span class="badge-sc bg-brand-100 text-brand-800">{{ __('landing.pricing_yearly_note') }}</span>
            </div>
        </div>

        <div class="mt-14 grid gap-6 lg:grid-cols-3">
            @foreach ($plans as $plan)
                <article class="relative flex h-full flex-col rounded-4xl border-2 bg-white p-8 shadow-card
                    {{ $plan->is_featured ? 'border-brand-500 lg:-mt-4 lg:mb-4' : 'border-ink-100' }}">

                    @if ($plan->is_featured)
                        <span class="absolute -top-4 start-1/2 -translate-x-1/2 rounded-full bg-brand-500 px-4 py-1.5 text-sm font-bold text-white shadow-brand rtl:translate-x-1/2">
                            {{ __('billing.most_popular') }}
                        </span>
                    @endif

                    <h3 class="text-2xl">{{ $plan->name }}</h3>
                    <p class="mt-2 min-h-12 text-sm text-ink-500">{{ $plan->tagline }}</p>

                    <div class="my-6 border-y border-ink-100 py-6">
                        <div data-price-monthly>
                            <span class="numeric text-4xl font-extrabold text-ink-900">{{ number_format((float) $plan->monthly_price, 0) }}</span>
                            <span class="font-semibold text-ink-500">{{ $plan->currency }} {{ __('common.per_month') }}</span>
                        </div>
                        <div data-price-yearly class="d-none">
                            <span class="numeric text-4xl font-extrabold text-ink-900">{{ number_format((float) $plan->yearly_price, 0) }}</span>
                            <span class="font-semibold text-ink-500">{{ $plan->currency }} {{ __('common.per_year') }}</span>
                            @if ($plan->yearlySavingPercent() > 0)
                                <p class="mt-1 text-sm font-bold text-brand-600">{{ __('billing.save_percent', ['percent' => $plan->yearlySavingPercent()]) }}</p>
                            @endif
                        </div>
                    </div>

                    <ul class="mb-8 flex-1 list-none space-y-3 ps-0">
                        @foreach ($plan->highlights() as $highlight)
                            <li class="flex items-start gap-2.5 text-sm">
                                <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                                </svg>
                                <span class="text-ink-700">{{ $highlight }}</span>
                            </li>
                        @endforeach
                    </ul>

                    <a href="#demo"
                       class="{{ $plan->is_featured ? 'btn-brand' : 'btn-ghost' }} w-full">
                        {{ __('landing.pricing_cta', ['plan' => $plan->name]) }}
                    </a>
                </article>
            @endforeach
        </div>

        <p class="mt-8 text-center font-medium text-ink-500">
            {{ __('landing.pricing_trial', ['days' => config('smartcarb.trial_days')]) }}
        </p>
    </div>
</section>

{{-- =========================== DEMO FORM ======================== --}}
<section id="demo" class="bg-ink-900 py-20 text-white lg:py-28">
    <div class="container mx-auto max-w-7xl px-4">
        <div class="grid gap-12 lg:grid-cols-2 lg:items-start">
            <div>
                <h2 class="text-3xl text-white md:text-4xl">{{ __('landing.cta_title') }}</h2>
                <p class="mt-4 max-w-lg text-lg leading-relaxed text-ink-300">{{ __('landing.cta_body') }}</p>

                <div class="mt-10 space-y-4">
                    @foreach ([1, 2, 3] as $i)
                        <div class="flex items-start gap-4 rounded-2xl bg-white/5 p-5">
                            <span class="numeric flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-500 font-bold">{{ $i }}</span>
                            <div>
                                <p class="font-bold text-white">{{ __('landing.step_' . $i . '_title') }}</p>
                                <p class="mt-1 text-sm text-ink-300">{{ Str::limit(__('landing.step_' . $i . '_body'), 110) }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="rounded-4xl bg-white p-8 text-ink-800 shadow-card">
                <h3 class="text-2xl">{{ __('landing.form_title') }}</h3>

                <div class="mt-5">
                    <x-alerts/>
                </div>

                <form method="POST" action="{{ route('leads.store') }}" class="space-y-4">
                    @csrf

                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label for="name" class="field-label">{{ __('landing.form_name') }}</label>
                            <input id="name" name="name" type="text" value="{{ old('name') }}" required class="field-input">
                        </div>
                        <div>
                            <label for="organisation" class="field-label">{{ __('landing.form_organisation') }}</label>
                            <input id="organisation" name="organisation" type="text" value="{{ old('organisation') }}" class="field-input">
                        </div>
                    </div>

                    <div>
                        <label for="segment" class="field-label">{{ __('landing.form_segment') }}</label>
                        <select id="segment" name="segment" class="field-input" required>
                            @foreach (__('landing.form_segments') as $value => $label)
                                <option value="{{ $value }}" @selected(old('segment') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label for="email" class="field-label">{{ __('landing.form_email') }}</label>
                            <input id="email" name="email" type="email" value="{{ old('email') }}" required class="field-input">
                        </div>
                        <div>
                            <label for="phone" class="field-label">{{ __('landing.form_phone') }}</label>
                            <input id="phone" name="phone" type="tel" value="{{ old('phone') }}" required dir="ltr" class="field-input">
                        </div>
                    </div>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label for="team_size" class="field-label">{{ __('landing.form_team_size') }}</label>
                            <input id="team_size" name="team_size" type="number" min="1" value="{{ old('team_size') }}" class="field-input">
                        </div>
                        <div>
                            <label for="interested_plan_id" class="field-label">{{ __('landing.form_plan') }}</label>
                            <select id="interested_plan_id" name="interested_plan_id" class="field-input">
                                <option value="">{{ __('common.none') }}</option>
                                @foreach ($plans as $plan)
                                    <option value="{{ $plan->id }}" @selected((int) old('interested_plan_id') === $plan->id)>{{ $plan->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div>
                        <label for="message" class="field-label">{{ __('landing.form_message') }}</label>
                        <textarea id="message" name="message" rows="3" class="field-input">{{ old('message') }}</textarea>
                    </div>

                    <button type="submit" class="btn-brand w-full">{{ __('landing.form_submit') }}</button>
                </form>
            </div>
        </div>
    </div>
</section>

@endsection