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

<x-public-layout title="Pricing" description="DigiStack pricing — Free, Starter, Pro and Business plans. Start free, upgrade anytime.">
    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8" x-data="{ yearly: false }">
        <div class="mx-auto max-w-2xl text-center">
            <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Pricing that scales with you</h1>
            <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">Start on the Free plan. Upgrade the moment you need more meetings.</p>

            {{-- Billing toggle --}}
            <div class="mt-8 inline-flex items-center gap-3 rounded-full border border-gray-200 bg-white p-1 dark:border-gray-800 dark:bg-gray-800">
                <button @click="yearly = false" :class="!yearly ? 'bg-brand-600 text-white' : 'text-gray-600 dark:text-gray-300'" class="rounded-full px-4 py-1.5 text-sm font-semibold transition">Monthly</button>
                <button @click="yearly = true" :class="yearly ? 'bg-brand-600 text-white' : 'text-gray-600 dark:text-gray-300'" class="rounded-full px-4 py-1.5 text-sm font-semibold transition">Yearly <span class="ml-1 rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-bold text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300">−20%</span></button>
            </div>
        </div>

        {{-- Plan cards --}}
        <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-4xl font-bold text-gray-900 dark:text-white">{{ $sym }}<span x-text="yearly ? {{ $tier['yearly'] }} : {{ $tier['monthly'] }}"></span></span>
                        <span class="text-sm text-gray-500 dark:text-gray-400">/mo</span>
                    </p>
                    <p class="mt-1 h-4 text-xs text-gray-400" x-show="yearly && {{ $tier['monthly'] }} > 0" x-cloak>billed annually</p>
                    <a href="{{ route('register') }}" class="mt-5 rounded-lg px-4 py-2.5 text-center text-sm font-semibold transition {{ $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.5 text-sm text-gray-600 dark:text-gray-400">
                        @foreach ($tier['features'] 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>

        {{-- Comparison table --}}
        <div class="mt-20">
            <h2 class="text-center text-2xl font-bold text-gray-900 dark:text-white">Compare every feature</h2>
            <div class="mt-8 overflow-x-auto">
                <table class="w-full min-w-[640px] border-separate border-spacing-0 text-sm">
                    <thead>
                        <tr>
                            <th class="sticky left-0 bg-white p-4 text-left font-medium text-gray-500 dark:bg-gray-900 dark:text-gray-400"></th>
                            @foreach ($tiers as $tier)
                                <th class="p-4 text-center font-semibold text-gray-900 dark:text-white {{ $tier['popular'] ? 'rounded-t-xl bg-brand-50 dark:bg-brand-900/30' : '' }}">{{ $tier['name'] }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($comparison as $row)
                            <tr class="border-t border-gray-100 dark:border-gray-800">
                                <td class="sticky left-0 bg-white p-4 font-medium text-gray-700 dark:bg-gray-900 dark:text-gray-200">{{ $row['label'] }}</td>
                                @foreach ($row['values'] as $idx => $val)
                                    <td class="p-4 text-center {{ ($tiers[$idx]['popular'] ?? false) ? 'bg-brand-50/50 dark:bg-brand-900/20' : '' }}">
                                        @if ($val === true)
                                            <svg class="mx-auto h-5 w-5 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>
                                        @elseif ($val === false)
                                            <span class="text-gray-300 dark:text-gray-600">—</span>
                                        @else
                                            <span class="font-medium text-gray-700 dark:text-gray-200">{{ $val }}</span>
                                        @endif
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Billing FAQ --}}
        <div class="mx-auto mt-20 max-w-3xl">
            <h2 class="text-center text-2xl font-bold text-gray-900 dark:text-white">Billing questions</h2>
            <div class="mt-8 divide-y divide-gray-200 dark:divide-gray-800" x-data="{ open: null }">
                @php
                    $faqs = [
                        ['Can I switch plans later?', 'Yes — upgrade or downgrade anytime from your billing page. Upgrades take effect immediately; downgrades at the next billing cycle.'],
                        ['What happens if I exceed my meeting limit?', 'You will be prompted to upgrade. Existing meetings are never deleted — you just can\'t create new ones until you upgrade or the month resets.'],
                        ['Do you offer refunds?', 'If something goes wrong, contact us within 14 days of a charge and we will make it right.'],
                        ['Is there a discount for annual billing?', 'Yes — paying yearly saves you roughly 20% compared to monthly.'],
                        ['Will I get an invoice?', 'Every successful payment generates an invoice you can download from your billing page.'],
                    ];
                @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>
        </div>

        <div class="mt-16 rounded-3xl bg-brand-600 px-8 py-12 text-center">
            <h2 class="text-2xl font-bold text-white">Still deciding?</h2>
            <p class="mx-auto mt-2 max-w-lg text-brand-100">Start on the Free plan — no credit card, no commitment.</p>
            <a href="{{ route('register') }}" class="mt-6 inline-block rounded-xl bg-white px-6 py-3 font-semibold text-brand-700 hover:bg-brand-50">Create free account</a>
        </div>
    </section>
</x-public-layout>