@extends('marketing.layout')

@section('title', 'Pricing — Certified')
@section('description', 'Eerlijke prijzen voor veilig certificaatbeheer. Start gratis met maximaal 5 certificaten — inclusief OCR, slimme reminders en AVG-proof delen.')

@section('content')

{{-- ============ HEADER + GRID ============ --}}
<section class="relative overflow-hidden">
    <div class="pointer-events-none absolute inset-0 bg-grid-slate [mask-image:radial-gradient(ellipse_70%_50%_at_50%_0%,black,transparent)]" aria-hidden="true"></div>
    <div class="pointer-events-none absolute -top-32 left-1/2 h-100 w-175 -translate-x-1/2 rounded-full bg-gradient-to-br from-emerald-400/15 to-transparent blur-3xl" aria-hidden="true"></div>

    <div class="relative mx-auto max-w-7xl px-4 pt-36 pb-20 sm:px-6 sm:pt-44 lg:px-8">
        <div class="mx-auto mb-14 max-w-2xl text-center">
            <p class="animate-fade-in-up text-sm font-semibold tracking-widest text-emerald-600 uppercase dark:text-emerald-400">Pricing</p>
            <h1 class="animate-fade-in-up mt-3 text-4xl font-bold tracking-tight text-balance text-slate-900 [animation-delay:100ms] sm:text-5xl dark:text-white">
                Compliance hoeft niet duur te zijn
            </h1>
            <p class="animate-fade-in-up mx-auto mt-5 max-w-xl text-lg leading-relaxed text-slate-600 [animation-delay:200ms] dark:text-slate-400">
                E&eacute;n verlopen certificaat kost al snel meer dan een jaar Certified. Start gratis en betaal pas als je meer certificaten beheert.
            </p>
        </div>

        <div class="animate-fade-in-up [animation-delay:300ms]">
            @include('marketing.partials.pricing-grid')
        </div>
    </div>
</section>

{{-- ============ VALUE REASSURANCE ============ --}}
<section class="border-y border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/40" aria-label="Inbegrepen bij elk pakket">
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        <h2 class="text-center text-2xl font-bold tracking-tight text-slate-900 dark:text-white">Inbegrepen bij elk pakket</h2>
        <div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ([
                ['title' => 'Europese hosting', 'body' => 'Alle data in EU-datacenters, volledig AVG-proof.'],
                ['title' => 'Automatische OCR', 'body' => 'Titel, uitgever en vervaldatum automatisch herkend.'],
                ['title' => 'Slimme reminders', 'body' => 'E-mail op het moment dat jij instelt, plus urgente meldingen.'],
                ['title' => 'Veilig delen', 'body' => 'Ondertekende links (48u) en AES-256 versleutelde ZIP\'s.'],
            ] as $item)
                <div class="rounded-2xl border border-slate-200 bg-white p-6 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-900/5 dark:border-slate-800 dark:bg-slate-900 dark:hover:shadow-black/30">
                    <span class="mx-auto flex size-10 items-center justify-center rounded-xl bg-emerald-100 dark:bg-emerald-500/15">
                        <svg class="size-5 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                    </span>
                    <h3 class="mt-4 text-base font-semibold text-slate-900 dark:text-white">{{ $item['title'] }}</h3>
                    <p class="mt-2 text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $item['body'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ============ FAQ ============ --}}
@include('marketing.partials.faq', [
    'faqTitle' => 'Vragen over prijzen',
    'faqSubtitle' => 'Alles over facturering, opzeggen en overstappen.',
    'faqs' => [
        ['q' => 'Is het Gratis-pakket echt gratis?', 'a' => 'Ja, voor altijd. Je beheert er tot 5 certificaten mee, inclusief OCR-scan, reminders en veilig delen. Geen creditcard, geen verborgen kosten — pas als je meer dan 5 certificaten wilt bewaken, stap je over op een betaald pakket.'],
        ['q' => 'Hoe werkt de facturering?', 'a' => 'Betaalde pakketten worden één keer per jaar gefactureerd: €12,50 per jaar voor Starter, €45 per jaar voor Onbeperkt, beide exclusief btw. Je ontvangt een factuur die je direct in je administratie kunt verwerken.'],
        ['q' => 'Wat gebeurt er als ik over mijn certificatenlimiet ga?', 'a' => 'Niets ergs — je data blijft gewoon staan. We sturen een melding en je kunt eenvoudig upgraden naar het volgende pakket. We verwijderen nooit certificaten omdat je over een limiet heen bent.'],
        ['q' => 'Kan ik tussentijds upgraden, downgraden of opzeggen?', 'a' => 'Upgraden kan op elk moment; je betaalt alleen het verschil voor de rest van het jaar. Downgraden of opzeggen gaat in bij de volgende verlengingsdatum. Na opzegging kun je al je data exporteren; daarna verwijderen we alles definitief binnen 30 dagen.'],
        ['q' => 'Zit de verwerkersovereenkomst bij de prijs in?', 'a' => 'Ja, bij de betaalde pakketten leveren we een standaard verwerkersovereenkomst zonder extra kosten.'],
        ['q' => 'Zijn er kosten per OCR-scan?', 'a' => 'Nee. OCR-scans zitten bij elk pakket inbegrepen — ook bij Gratis. Je betaalt nooit per scan.'],
    ],
])

{{-- ============ BOTTOM CTA ============ --}}
@include('marketing.partials.cta')

@endsection