@extends('layouts.app')

@section('title', 'Join the Community')

@section('content')
    <div class="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">

        <div class="mx-auto max-w-2xl text-center">
            <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl">Join the community</h1>
            <p class="mt-5 text-lg text-slate-400">
                Unlock every premium prompt, get new drops each week, and compare notes
                with creators shipping the same formats.
            </p>
        </div>

        @php
            $plans = [
                [
                    'key' => 'monthly',
                    'name' => 'Monthly',
                    'price' => '₹499',
                    'period' => '/month',
                    'highlight' => false,
                    'features' => ['Every premium prompt', 'Weekly new drops', 'Community access', 'Cancel anytime'],
                ],
                [
                    'key' => 'yearly',
                    'name' => 'Yearly',
                    'price' => '₹3,999',
                    'period' => '/year',
                    'highlight' => true,
                    'features' => ['Everything in Monthly', 'Two months free', 'Early access to new formats', 'Priority prompt requests'],
                ],
                [
                    'key' => 'lifetime',
                    'name' => 'Lifetime',
                    'price' => '₹9,999',
                    'period' => 'once',
                    'highlight' => false,
                    'features' => ['Everything, forever', 'All future drops included', 'No renewals', 'Founding member badge'],
                ],
            ];
        @endphp

        <div class="mt-14 grid gap-6 lg:grid-cols-3">
            @foreach ($plans as $plan)
                <div class="surface relative flex flex-col p-7 {{ $plan['highlight'] ? 'border-brand-500/60 ring-1 ring-brand-500/30' : '' }}">
                    @if ($plan['highlight'])
                        <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-brand-600 to-fuchsia-600 px-3 py-1 text-[11px] font-bold uppercase tracking-wide text-white">
                            Most popular
                        </span>
                    @endif

                    <h2 class="text-lg font-bold">{{ $plan['name'] }}</h2>

                    <p class="mt-4">
                        <span class="text-4xl font-extrabold text-white">{{ $plan['price'] }}</span>
                        <span class="text-sm text-slate-500">{{ $plan['period'] }}</span>
                    </p>

                    <ul class="mt-6 flex-1 space-y-3 text-sm text-slate-300">
                        @foreach ($plan['features'] as $feature)
                            <li class="flex items-start gap-2.5">
                                <span class="mt-0.5 text-emerald-400">✓</span>
                                <span>{{ $feature }}</span>
                            </li>
                        @endforeach
                    </ul>

                    <div class="mt-7">
                        @auth
                            @if (auth()->user()->hasPremiumAccess())
                                <span class="btn btn-ghost w-full cursor-default">You're already a member</span>
                            @else
                                <form method="POST" action="{{ route('membership.upgrade') }}">
                                    @csrf
                                    <input type="hidden" name="plan" value="{{ $plan['key'] }}">
                                    <button type="submit" class="btn w-full py-3 {{ $plan['highlight'] ? 'btn-primary' : 'btn-ghost' }}">
                                        Choose {{ $plan['name'] }}
                                    </button>
                                </form>
                            @endif
                        @else
                            <a href="{{ route('register') }}" class="btn w-full py-3 {{ $plan['highlight'] ? 'btn-primary' : 'btn-ghost' }}">
                                Get started
                            </a>
                        @endauth
                    </div>
                </div>
            @endforeach
        </div>

        <p class="mt-10 text-center text-xs text-slate-500">
            Demo build — checkout is simulated and no payment is taken.
            See the <a href="{{ route('legal', 'refunds') }}" class="underline hover:text-slate-300">refund policy</a>.
        </p>

        {{-- FAQ --}}
        <section class="mx-auto mt-20 max-w-3xl">
            <h2 class="text-2xl font-extrabold tracking-tight">Common questions</h2>

            @php
                $faqs = [
                    ['Do the prompts work with any AI video tool?', 'They are written to be tool-agnostic. Each prompt notes the generator it was tested against, and most transfer with minor tweaks.'],
                    ['How often are new prompts added?', 'New drops land weekly. Members get them the moment they publish.'],
                    ['Can I use these commercially?', 'Yes. Anything you generate with a prompt is yours to publish and monetise.'],
                    ['What if it is not for me?', 'Cancel anytime from your account page. Refunds follow the posted refund policy.'],
                ];
            @endphp

            <dl class="mt-7 space-y-3">
                @foreach ($faqs as [$question, $answer])
                    <details class="surface group p-5">
                        <summary class="cursor-pointer list-none font-semibold text-white marker:hidden">
                            <span class="flex items-center justify-between gap-4">
                                {{ $question }}
                                <span class="text-slate-500 transition group-open:rotate-45">+</span>
                            </span>
                        </summary>
                        <p class="mt-3 text-sm leading-relaxed text-slate-400">{{ $answer }}</p>
                    </details>
                @endforeach
            </dl>
        </section>
    </div>
@endsection