@extends('layouts.app')

@section('title', 'Pricing')
@section('meta_description', 'One price for the whole studio, however many artists. Free for one artist, $29.99 a month for up to six, with consent forms, client records and the request queue on every tier.')

@php
    // One source for the visible FAQ and the FAQPage schema below, so a Q&A
    // edited in one place can never disagree with the other.
    $faqs = [
        'Does adding an artist cost more?' => 'No. The price covers the studio, and Starter carries six artists at $29.99. You are never billed per head, so hiring does not change your bill until you outgrow the tier.',
        'Can I move my existing clients over?' => 'Yes. Get in touch and we will help you bring across client records and upcoming bookings.',
        'What happens if I cancel?' => 'Your studio stays reachable so you can export what you need. Nothing is deleted the moment you stop paying.',
        'Do I need Stripe to take deposits?' => 'No. You can record a deposit as taken in person or by transfer. Connecting Stripe adds paying online.',
        'Is there a free plan?' => 'Yes. Solo is free for one artist, with no time limit and no card. There is also a live demo if you would rather look before signing up at all.',
        'Who can see my studio\'s data?' => 'Only your studio. Client records, consent forms and galleries are scoped to you and nobody else can reach them.',
    ];
@endphp

{{-- Rich-result eligible: Google can render these questions directly under the
     search listing. Built from the same $faqs the page renders, and encoded
     with json_encode so the output is guaranteed-valid JSON. --}}
@section('schema')
    @php
        $faqSchema = [
            '@context' => 'https://schema.org',
            '@type' => 'FAQPage',
            'mainEntity' => collect($faqs)->map(fn ($answer, $question) => [
                '@type' => 'Question',
                'name' => $question,
                'acceptedAnswer' => ['@type' => 'Answer', 'text' => $answer],
            ])->values()->all(),
        ];
    @endphp
    <script type="application/ld+json">
    {!! json_encode($faqSchema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!}
    </script>
@endsection

@section('content')

<!-- ─────────────────────────  plans  ───────────────────────── -->
<section class="mx-auto max-w-6xl px-6 pt-16 pb-20 sm:pt-20">
    <div class="max-w-2xl">
        <p class="eyebrow mb-5">Pricing</p>
        <h1 class="display text-[clamp(2.2rem,5.5vw,3.6rem)]">Priced per studio, not per artist.</h1>
        <p class="mt-6 text-lg leading-relaxed" style="color: var(--ink-soft);">
            Most software in this category charges for every chair you fill, so growing costs you twice.
            A six-artist shop pays Booksy about $150 a month. Here it's $29.99 for the shop,
            and free while you're working on your own.
        </p>
    </div>

    @include('billing.partials.plan-cards')

    <p class="mt-8 text-sm" style="color: var(--muted);">
        Solo needs no card at all. Paid plans bill monthly through PayPal, and you can cancel
        from your settings whenever you like.
    </p>
</section>

<!-- ─────────────────────  what you get on any plan  ───────────────────── -->
<section class="border-y rule" style="background: var(--surface);">
    <div class="mx-auto max-w-6xl px-6 py-20">
        <div class="grid gap-12 lg:grid-cols-[1fr_1.2fr] lg:gap-20">
            <div>
                <p class="eyebrow mb-5">On every plan</p>
                <h2 class="display text-[clamp(1.7rem,3.6vw,2.5rem)]">The parts nobody should pay extra for.</h2>
                <p class="mt-5 text-lg leading-relaxed" style="color: var(--ink-soft);">
                    Consent, client records and the request queue are how the product works, not
                    upsells. They're on the cheapest plan too.
                </p>
            </div>

            <dl class="grid gap-px sm:grid-cols-2" style="background: var(--rule);">
                @foreach([
                    'Request queue'    => 'Clients send the idea before they see a calendar. You review, then offer times.',
                    'Consent forms'    => 'Signed before the session, timestamped to the appointment, kept on file.',
                    'Client records'   => 'Every session, reference and note in one place per person.',
                    'Reminders'        => 'Email before the session so fewer people forget they booked.',
                ] as $title => $body)
                    <div class="p-6" style="background: var(--surface);">
                        <dt class="text-sm font-semibold">{{ $title }}</dt>
                        <dd class="mt-2 text-sm leading-relaxed" style="color: var(--muted);">{{ $body }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>
    </div>
</section>

<!-- ─────────────────────────  comparison  ───────────────────────── -->
<section class="mx-auto max-w-6xl px-6 py-20">
    <p class="eyebrow mb-5">Side by side</p>
    <h2 class="display text-[clamp(1.7rem,3.6vw,2.5rem)]">Where the plans differ.</h2>

    <div class="mt-10 overflow-x-auto border rule" style="background: var(--surface);">
        <table class="min-w-full text-sm">
            <caption class="sr-only">Plan limits compared</caption>
            <thead>
                <tr style="background: var(--paper);">
                    <th scope="col" class="px-5 py-4 text-left font-semibold">Limit</th>
                    @foreach($plans as $plan)
                        <th scope="col" class="px-5 py-4 text-left font-semibold">{{ $plan->name }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach([
                    ['label' => 'Clients',                 'column' => 'max_clients'],
                    ['label' => 'Appointments per month',  'column' => 'max_appointments_per_month'],
                    ['label' => 'Artists',                 'column' => 'max_artists'],
                    ['label' => 'SMS per month',           'column' => 'max_sms_per_month'],
                ] as $row)
                    <tr class="border-t rule">
                        <th scope="row" class="px-5 py-4 text-left font-medium">{{ $row['label'] }}</th>
                        @foreach($plans as $plan)
                            <td class="px-5 py-4 tabular-nums" style="color: var(--ink-soft);">
                                @if($plan->{$row['column']} === null)
                                    Unlimited
                                @elseif((int) $plan->{$row['column']} === 0)
                                    {{-- A zero allowance is "not included", not a quantity. --}}
                                    <span aria-label="Not included" style="color: var(--muted);">—</span>
                                @else
                                    {{ number_format($plan->{$row['column']}) }}
                                @endif
                            </td>
                        @endforeach
                    </tr>
                @endforeach

                @foreach([
                    ['label' => 'Take payments online',    'column' => 'allows_payment_processing'],
                    ['label' => 'Marketing automation',    'column' => 'allows_marketing_automation'],
                    ['label' => 'Advanced analytics',      'column' => 'allows_advanced_analytics'],
                    ['label' => 'White-label branding',    'column' => 'allows_white_label'],
                ] as $row)
                    <tr class="border-t rule">
                        <th scope="row" class="px-5 py-4 text-left font-medium">{{ $row['label'] }}</th>
                        @foreach($plans as $plan)
                            <td class="px-5 py-4">
                                @if($plan->{$row['column']})
                                    <svg viewBox="0 0 16 16" fill="none" class="size-4" role="img" aria-label="Included">
                                        <path d="M2.5 8.5l3.5 3.5 7.5-9" stroke="var(--stencil)" stroke-width="2" stroke-linecap="square"/>
                                    </svg>
                                @else
                                    <span aria-label="Not included" style="color: var(--muted);">—</span>
                                @endif
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</section>

<!-- ─────────────────────────  questions  ───────────────────────── -->
<section class="border-t rule" style="background: var(--surface);">
    <div class="mx-auto max-w-6xl px-6 py-20">
        <p class="eyebrow mb-5">Questions</p>
        <h2 class="display text-[clamp(1.7rem,3.6vw,2.5rem)]">Before you decide.</h2>

        <dl class="mt-10 grid gap-x-14 gap-y-9 lg:grid-cols-2">
            @foreach($faqs as $question => $answer)
                <div>
                    <dt class="text-sm font-semibold">{{ $question }}</dt>
                    <dd class="mt-2 text-sm leading-relaxed" style="color: var(--muted);">{{ $answer }}</dd>
                </div>
            @endforeach
        </dl>
    </div>
</section>

<!-- ─────────────────────────  close  ───────────────────────── -->
<section class="mx-auto max-w-6xl px-6 py-24">
    <div class="mx-auto max-w-2xl text-center">
        <h2 class="display text-[clamp(1.9rem,4.5vw,3rem)]">Start free. Decide later.</h2>
        <p class="mt-6 text-lg leading-relaxed" style="color: var(--ink-soft);">
            One artist runs on Solo for nothing, with no card and no countdown. Move up when
            you hire, not before.
        </p>
        <div class="mt-9 flex flex-wrap justify-center gap-3">
            <a href="{{ route('register') }}" class="btn btn-primary px-6 py-3.5">Start free</a>
            <a href="{{ route('demo') }}" class="btn btn-outline px-6 py-3.5">Open the demo studio</a>
        </div>
    </div>
</section>

@endsection