@php
    $tiers = config('plans.tiers');
    $sym = config('plans.currency_symbol');
@endphp

<x-public-layout description="DigiStack — schedule meetings, set availability, send invites and get automatic reminders across every time zone.">
    {{-- ───────────────── Hero ───────────────── --}}
    <section class="relative overflow-hidden">
        <div class="absolute inset-0 -z-10 bg-gradient-to-b from-brand-50 via-white to-white dark:from-gray-900 dark:via-gray-900 dark:to-gray-900"></div>
        <div class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
            <div class="mx-auto max-w-3xl text-center">
                <span class="inline-flex items-center rounded-full bg-brand-100 px-3 py-1 text-sm font-medium text-brand-700 dark:bg-brand-900/40 dark:text-brand-300">✨ AI-assisted meeting scheduling</span>
                <h1 class="mt-6 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl lg:text-6xl">
                    Plan meetings the <span class="text-brand-600 dark:text-brand-400">smart</span> way
                </h1>
                <p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-300">
                    Schedule meetings, manage recurring events, invite attendees, and never miss a thing with automatic email reminders — across every time zone.
                </p>
                <div class="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
                    <a href="{{ route('register') }}" class="rounded-xl bg-brand-600 px-6 py-3 text-base font-semibold text-white shadow-sm transition hover:bg-brand-700">Start free</a>
                    <a href="{{ route('pricing') }}" class="rounded-xl border border-gray-300 px-6 py-3 text-base font-semibold text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">View pricing</a>
                </div>
                <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Free plan includes 5 meetings / month. No credit card required.</p>
            </div>

            {{-- Mock app preview --}}
            <div class="mx-auto mt-16 max-w-4xl">
                <div class="rounded-2xl border border-gray-200 bg-white p-2 shadow-2xl dark:border-gray-800 dark:bg-gray-800">
                    <div class="rounded-xl bg-gray-50 p-4 dark:bg-gray-900">
                        <div class="mb-3 flex items-center gap-1.5">
                            <span class="h-3 w-3 rounded-full bg-red-400"></span>
                            <span class="h-3 w-3 rounded-full bg-amber-400"></span>
                            <span class="h-3 w-3 rounded-full bg-emerald-400"></span>
                        </div>
                        <div class="grid grid-cols-7 gap-1 text-center text-xs">
                            @foreach (['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] as $d)
                                <div class="py-1 font-semibold text-gray-400">{{ $d }}</div>
                            @endforeach
                            @for ($i = 1; $i <= 21; $i++)
                                <div class="relative h-12 rounded bg-white py-1 text-gray-400 dark:bg-gray-800">
                                    {{ $i }}
                                    @if (in_array($i, [3, 8, 9, 15, 19]))
                                        <span class="absolute inset-x-1 bottom-1 truncate rounded bg-brand-500/90 px-1 text-[9px] text-white">Meeting</span>
                                    @endif
                                </div>
                            @endfor
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ───────────────── Trusted by ───────────────── --}}
    <section class="border-y border-gray-100 bg-gray-50 py-10 dark:border-gray-800 dark:bg-gray-950">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <p class="text-center text-sm font-medium uppercase tracking-wide text-gray-400">Trusted by teams who value their time</p>
            <div class="mt-6 flex flex-wrap items-center justify-center gap-x-10 gap-y-4 opacity-60">
                @foreach (['Acme Inc', 'Globex', 'Initech', 'Umbrella', 'Hooli', 'Soylent'] as $brand)
                    <span class="text-lg font-bold text-gray-400 dark:text-gray-500">{{ $brand }}</span>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ───────────────── Feature highlights ───────────────── --}}
    <section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center">
            <h2 class="text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">Everything you need to schedule</h2>
            <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">A focused toolset for planning meetings without the chaos.</p>
        </div>
        <div class="mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            @php
                $features = [
                    ['Smart calendar', 'Month, week and day views powered by a fast, modern calendar.', 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'],
                    ['AI title suggestions', 'Describe your meeting and let AI suggest a clear, professional title.', 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z'],
                    ['Recurring meetings', 'Daily, weekly or monthly — set it once and DigiStack handles the rest.', 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'],
                    ['Email reminders', 'Automatic reminders 1 day, 1 hour and 15 minutes before each meeting.', 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'],
                    ['Timezone aware', 'Everyone sees meeting times in their own timezone — no more confusion.', 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ['Attendee invites', 'Send calendar invites with .ics attachments and track who responds.', 'M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87m6-1.13a4 4 0 100-8 4 4 0 000 8z'],
                ];
            @endphp
            @foreach ($features as [$t, $d, $icon])
                <div class="group rounded-2xl border border-gray-200 bg-white p-6 transition hover:border-brand-300 hover:shadow-md dark:border-gray-800 dark:bg-gray-800/50 dark:hover:border-brand-700">
                    <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-300">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $icon }}"/></svg>
                    </div>
                    <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">{{ $t }}</h3>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">{{ $d }}</p>
                </div>
            @endforeach
        </div>
        <div class="mt-10 text-center">
            <a href="{{ route('features') }}" class="text-sm font-semibold text-brand-600 hover:underline dark:text-brand-400">Explore all features →</a>
        </div>
    </section>

    {{-- ───────────────── How it works ───────────────── --}}
    <section class="bg-gray-50 py-20 dark:bg-gray-950">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="mx-auto max-w-2xl text-center">
                <h2 class="text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">Up and running in 3 steps</h2>
            </div>
            <div class="mt-14 grid gap-8 md:grid-cols-3">
                @php
                    $steps = [
                        ['1', 'Sign up & pick a plan', 'Create your free account in seconds and choose the plan that fits.'],
                        ['2', 'Set your timezone', 'Tell DigiStack your timezone so every meeting shows the right time.'],
                        ['3', 'Schedule & invite', 'Create meetings, add attendees, and let automatic reminders do the chasing.'],
                    ];
                @endphp
                @foreach ($steps as [$n, $t, $d])
                    <div class="relative rounded-2xl border border-gray-200 bg-white p-8 dark:border-gray-800 dark:bg-gray-800">
                        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-brand-600 text-lg font-bold text-white">{{ $n }}</span>
                        <h3 class="mt-5 text-lg font-semibold text-gray-900 dark:text-white">{{ $t }}</h3>
                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">{{ $d }}</p>
                    </div>
                @endforeach
            </div>
            <div class="mt-10 text-center">
                <a href="{{ route('how-it-works') }}" class="text-sm font-semibold text-brand-600 hover:underline dark:text-brand-400">See how it works in detail →</a>
            </div>
        </div>
    </section>

    {{-- ───────────────── Pricing preview ───────────────── --}}
    <section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center">
            <h2 class="text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">Simple, honest pricing</h2>
            <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">Start free. Upgrade when you need more.</p>
        </div>
        <div class="mt-14 grid gap-6 lg:grid-cols-4">
            @foreach ($tiers as $tier)
                <div class="relative flex flex-col rounded-2xl border bg-white p-6 dark:bg-gray-800 {{ $tier['popular'] ? 'border-brand-500 ring-2 ring-brand-500' : 'border-gray-200 dark:border-gray-800' }}">
                    @if ($tier['popular'])
                        <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-brand-600 px-3 py-0.5 text-xs font-semibold text-white">Most popular</span>
                    @endif
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ $tier['name'] }}</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ $tier['tagline'] }}</p>
                    <p class="mt-4"><span class="text-3xl font-bold text-gray-900 dark:text-white">{{ $sym }}{{ $tier['monthly'] }}</span><span class="text-sm text-gray-500 dark:text-gray-400">/mo</span></p>
                    <a href="{{ route('register') }}" class="mt-5 rounded-lg px-4 py-2 text-center text-sm font-semibold {{ $tier['popular'] ? 'bg-brand-600 text-white hover:bg-brand-700' : 'border border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700' }}">{{ $tier['cta'] }}</a>
                    <ul class="mt-6 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                        @foreach (array_slice($tier['features'], 0, 4) as $f)
                            <li class="flex gap-2"><svg class="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>{{ $f }}</li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>
        <div class="mt-10 text-center">
            <a href="{{ route('pricing') }}" class="text-sm font-semibold text-brand-600 hover:underline dark:text-brand-400">Compare all plans →</a>
        </div>
    </section>

    {{-- ───────────────── Testimonials ───────────────── --}}
    <section class="bg-gray-50 py-20 dark:bg-gray-950">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="mx-auto max-w-2xl text-center">
                <h2 class="text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">Loved by busy people</h2>
            </div>
            <div class="mt-14 grid gap-8 md:grid-cols-3">
                @php
                    $quotes = [
                        ['DigiStack cut my scheduling time in half. The reminders alone are worth it.', 'Priya S.', 'Product Manager'],
                        ['Finally a scheduler that gets time zones right. My remote team relies on it daily.', 'Marcus L.', 'Engineering Lead'],
                        ['The AI title suggestions are weirdly good. Setup took five minutes.', 'Aisha R.', 'Freelance Consultant'],
                    ];
                @endphp
                @foreach ($quotes as [$q, $name, $role])
                    <figure class="rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-800">
                        <blockquote class="text-gray-700 dark:text-gray-200">“{{ $q }}”</blockquote>
                        <figcaption class="mt-4 flex items-center gap-3">
                            <span class="flex h-9 w-9 items-center justify-center rounded-full bg-brand-100 text-sm font-bold text-brand-700 dark:bg-brand-900 dark:text-brand-300">{{ strtoupper(substr($name, 0, 1)) }}</span>
                            <div>
                                <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ $name }}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">{{ $role }}</div>
                            </div>
                        </figcaption>
                    </figure>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ───────────────── FAQ ───────────────── --}}
    <section class="mx-auto max-w-3xl px-4 py-20 sm:px-6 lg:px-8">
        <h2 class="text-center text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">Frequently asked questions</h2>
        <div class="mt-12 divide-y divide-gray-200 dark:divide-gray-800" x-data="{ open: 0 }">
            @php
                $faqs = [
                    ['Is there a free plan?', 'Yes — the Free plan includes 5 meetings per month, the calendar, and email reminders. No credit card required.'],
                    ['Can I cancel anytime?', 'Absolutely. You can downgrade or cancel from your billing page at any time; you keep access until the end of the billing period.'],
                    ['Does DigiStack support recurring meetings?', 'Yes, on the Starter plan and above you can create daily, weekly or monthly recurring meetings.'],
                    ['Do attendees need an account?', 'No. Attendees receive an email invite with an .ics file and can accept or decline with one click — no sign-up needed.'],
                    ['Which time zones are supported?', 'All of them. Each user sets their own timezone and sees every meeting converted to their local time.'],
                    ['How do payments work?', 'Subscriptions are billed monthly (or yearly) via our payment provider. You get an invoice for every payment.'],
                ];
            @endphp
            @foreach ($faqs as $i => [$q, $a])
                <div class="py-4">
                    <button @click="open = (open === {{ $i }} ? null : {{ $i }})" class="flex w-full items-center justify-between text-left">
                        <span class="font-medium text-gray-900 dark:text-white">{{ $q }}</span>
                        <svg class="h-5 w-5 shrink-0 text-gray-400 transition-transform" :class="open === {{ $i }} ? 'rotate-180' : ''" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div x-show="open === {{ $i }}" x-collapse x-cloak class="mt-2 text-sm text-gray-600 dark:text-gray-400">{{ $a }}</div>
                </div>
            @endforeach
        </div>
    </section>

    {{-- ───────────────── Final CTA ───────────────── --}}
    <section class="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
        <div class="rounded-3xl bg-brand-600 px-8 py-14 text-center">
            <h2 class="text-3xl font-bold text-white sm:text-4xl">Ready to organize your meetings?</h2>
            <p class="mx-auto mt-3 max-w-xl text-brand-100">Join DigiStack and bring order to your calendar in minutes.</p>
            <a href="{{ route('register') }}" class="mt-8 inline-block rounded-xl bg-white px-6 py-3 text-base font-semibold text-brand-700 transition hover:bg-brand-50">Get started — it's free</a>
        </div>
    </section>
</x-public-layout>