@extends('marketing.layout')

@section('title', 'Pricing — Certified')
@section('description', __('Eerlijke prijzen voor je eigen certificaatbeheer. Start gratis met maximaal 5 certificaten — inclusief 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">
                {{ __('Overzicht 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én verlopen certificaat kost je 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-3">
            @foreach ([
                ['title' => __('Europese hosting'), 'body' => __('Al je data in EU-datacenters, volledig AVG-proof.')],
                ['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 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: €19 per jaar voor Certified Starter, €49 per jaar voor Certified Pro, beide inclusief 21% 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' => __('Heb ik een verwerkersovereenkomst nodig bij een betaald pakket?'), 'a' => __('Meestal niet — gebruik je Certified voor jezelf, dan ben je geen verwerkingsverantwoordelijke. Wil je er als zzp\'er of eenmanszaak toch één voor je administratie, dan staat de standaard verwerkersovereenkomst gratis voor je klaar op de DPA-pagina.')],
        ['q' => __('Zijn er kosten per OCR-scan?'), 'a' => __('Nee, je betaalt nooit per scan. OCR zit bij Certified Starter en Certified Pro inbegrepen; bij het Gratis-pakket vul je certificaten handmatig in.')],
    ],
])

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

@endsection