@extends('marketing.layout')

@section('title', 'Certified — '.__('Al je certificaten op één plek. Nooit meer verlopen.'))

@section('content')

{{-- ============ HERO ============ --}}
<section class="relative overflow-hidden">
    <div class="pointer-events-none absolute inset-0 bg-grid-slate [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,black,transparent)]" aria-hidden="true"></div>
    <div class="pointer-events-none absolute inset-0 bg-noise" aria-hidden="true"></div>
    <div class="pointer-events-none absolute -top-40 left-1/2 h-125 w-200 -translate-x-1/2 rounded-full bg-gradient-to-br from-emerald-400/20 via-teal-400/10 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 max-w-3xl text-center">
            <p class="animate-fade-in-up inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-1.5 text-sm font-medium text-emerald-700 dark:border-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400">
                <span class="relative flex size-2">
                    <span class="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-60"></span>
                    <span class="relative inline-flex size-2 rounded-full bg-emerald-500"></span>
                </span>
                {{ __("Voor iedereen die zijn eigen certificaten, diploma's en VOG's wil bijhouden") }}
            </p>

            <h1 class="animate-fade-in-up mt-8 text-4xl font-bold tracking-tight text-balance text-slate-900 [animation-delay:100ms] sm:text-6xl dark:text-white">
                {{ __('Al je certificaten op één plek.') }}
                <span class="bg-gradient-to-r from-emerald-600 to-teal-500 bg-clip-text text-transparent dark:from-emerald-400 dark:to-teal-300">{{ __('Nooit meer per ongeluk verlopen.') }}</span>
            </h1>

            <p class="animate-fade-in-up mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-pretty text-slate-600 [animation-delay:200ms] sm:text-xl dark:text-slate-400">
                {{ __("Certified scant je VOG, diploma's en certificaten automatisch in, bewaakt elke vervaldatum en deelt ze alleen versleuteld — zonder Excel-lijstjes, losse mapjes of kwetsbare e-mailbijlagen.") }}
            </p>

            <div class="animate-fade-in-up mt-10 flex flex-col items-center justify-center gap-4 [animation-delay:300ms] sm:flex-row">
                <a
                    href="{{ route('register') }}"
                    class="group w-full rounded-xl bg-emerald-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-emerald-600/25 transition-all duration-200 hover:-translate-y-0.5 hover:bg-emerald-500 hover:shadow-xl hover:shadow-emerald-500/30 active:translate-y-0 sm:w-auto"
                >
                    {{ __('Start gratis') }}
                    <span class="inline-block transition-transform duration-200 group-hover:translate-x-1" aria-hidden="true">&rarr;</span>
                </a>
                <a
                    href="#features"
                    class="w-full rounded-xl border border-slate-300 bg-white/60 px-8 py-3.5 text-base font-semibold text-slate-700 backdrop-blur transition-colors duration-200 hover:border-emerald-500 hover:text-emerald-700 sm:w-auto dark:border-slate-700 dark:bg-slate-900/60 dark:text-slate-200 dark:hover:border-emerald-500 dark:hover:text-emerald-400"
                >{{ __('Ontdek hoe het werkt') }}</a>
            </div>

            <p class="animate-fade-in-up mt-6 text-sm text-slate-500 [animation-delay:400ms] dark:text-slate-400">
                {{ __('Gratis tot 5 certificaten') }} &middot; {{ __('Geen creditcard nodig') }} &middot; 🇪🇺 {{ __('Europese hosting') }}
            </p>
        </div>

        {{-- Dashboard mock-up --}}
        <div class="animate-fade-in-up relative mx-auto mt-20 max-w-5xl [animation-delay:500ms]">
            <div class="pointer-events-none absolute -inset-6 rounded-3xl bg-gradient-to-r from-emerald-500/15 via-teal-500/10 to-emerald-500/15 blur-2xl" aria-hidden="true"></div>

            <div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl shadow-slate-900/10 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/40" aria-hidden="true">
                {{-- Browser chrome --}}
                <div class="flex items-center gap-2 border-b border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
                    <span class="size-3 rounded-full bg-red-400"></span>
                    <span class="size-3 rounded-full bg-amber-400"></span>
                    <span class="size-3 rounded-full bg-emerald-400"></span>
                    <span class="mx-auto flex items-center gap-1.5 rounded-md bg-white px-16 py-1 text-xs text-slate-400 shadow-sm dark:bg-slate-800 dark:text-slate-500">
                        <svg class="size-3 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
                        app.certified.eu
                    </span>
                </div>

                <div class="flex">
                    {{-- Sidebar skeleton --}}
                    <div class="hidden w-44 shrink-0 space-y-1 border-r border-slate-200 p-4 sm:block dark:border-slate-800">
                        <div class="mb-5 flex items-center gap-2">
                            <span class="flex size-6 items-center justify-center rounded-md bg-gradient-to-br from-emerald-500 to-teal-600">
                                <svg class="size-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                            </span>
                            <span class="text-xs font-semibold text-slate-700 dark:text-slate-200">Certified</span>
                        </div>
                        <div class="rounded-md bg-emerald-50 px-2.5 py-1.5 text-xs font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">{{ __('Certificaten') }}</div>
                        <div class="px-2.5 py-1.5 text-xs text-slate-400 dark:text-slate-500">{{ __('Categorieën') }}</div>
                        <div class="px-2.5 py-1.5 text-xs text-slate-400 dark:text-slate-500">{{ __('Reminders') }}</div>
                        <div class="px-2.5 py-1.5 text-xs text-slate-400 dark:text-slate-500">{{ __('Instellingen') }}</div>
                    </div>

                    <div class="min-w-0 flex-1 p-4 sm:p-6">
                        {{-- Stat cards --}}
                        <div class="grid grid-cols-3 gap-3">
                            <div class="rounded-xl border border-slate-200 p-3 dark:border-slate-800">
                                <p class="text-[10px] font-medium tracking-wide text-slate-400 uppercase sm:text-xs">{{ __('Geldig') }}</p>
                                <p class="mt-1 text-lg font-bold text-emerald-600 sm:text-2xl dark:text-emerald-400">12</p>
                            </div>
                            <div class="rounded-xl border border-slate-200 p-3 dark:border-slate-800">
                                <p class="text-[10px] font-medium tracking-wide text-slate-400 uppercase sm:text-xs">{{ __('Verloopt bijna') }}</p>
                                <p class="mt-1 text-lg font-bold text-amber-500 sm:text-2xl">1</p>
                            </div>
                            <div class="rounded-xl border border-slate-200 p-3 dark:border-slate-800">
                                <p class="text-[10px] font-medium tracking-wide text-slate-400 uppercase sm:text-xs">{{ __('Verlopen') }}</p>
                                <p class="mt-1 text-lg font-bold text-red-500 sm:text-2xl">1</p>
                            </div>
                        </div>

                        {{-- Chart skeleton --}}
                        <div class="mt-4 rounded-xl border border-slate-200 p-4 dark:border-slate-800">
                            <div class="flex items-center justify-between">
                                <div class="h-2.5 w-28 rounded bg-slate-200 dark:bg-slate-700"></div>
                                <div class="h-2.5 w-14 rounded bg-slate-100 dark:bg-slate-800"></div>
                            </div>
                            <div class="mt-4 flex h-20 items-end gap-1.5 sm:gap-2">
                                @foreach ([35, 55, 40, 70, 50, 85, 60, 90, 75, 100, 65, 80] as $height)
                                    <div class="flex-1 rounded-t bg-gradient-to-t from-emerald-500/70 to-teal-400/70 transition-all duration-500 hover:from-emerald-500 hover:to-teal-400" style="height: {{ $height }}%"></div>
                                @endforeach
                            </div>
                        </div>

                        {{-- Certificate table skeleton --}}
                        <div class="mt-4 overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800">
                            <div class="grid grid-cols-[1fr_auto_auto] items-center gap-3 border-b border-slate-200 bg-slate-50 px-4 py-2 text-[10px] font-semibold tracking-wide text-slate-400 uppercase sm:text-xs dark:border-slate-800 dark:bg-slate-950/50">
                                <span>{{ __('Certificaat') }}</span><span class="hidden sm:block">{{ __('Verloopt') }}</span><span>{{ __('Status') }}</span>
                            </div>
                            @foreach ([
                                ['VCA Basis', '14-09-2027', __('Geldig'), 'emerald'],
                                ['EHBO Diploma', '02-08-2026', __('Verloopt bijna'), 'amber'],
                                ['VOG (Verklaring Omtrent Gedrag)', '28-11-2028', __('Geldig'), 'emerald'],
                                ['Code 95 nascholing', '01-07-2026', __('Verlopen'), 'red'],
                            ] as [$name, $date, $status, $color])
                                <div class="grid grid-cols-[1fr_auto_auto] items-center gap-3 border-b border-slate-100 px-4 py-2.5 text-xs last:border-0 dark:border-slate-800/60">
                                    <span class="truncate font-medium text-slate-700 dark:text-slate-300">{{ $name }}</span>
                                    <span class="hidden text-slate-400 tabular-nums sm:block">{{ $date }}</span>
                                    <span @class([
                                        'rounded-full px-2 py-0.5 text-[10px] font-semibold whitespace-nowrap',
                                        'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400' => $color === 'emerald',
                                        'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400' => $color === 'amber',
                                        'bg-red-100 text-red-700 dark:bg-red-500/15 dark:text-red-400' => $color === 'red',
                                    ])>{{ $status }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ============ SOCIAL PROOF STRIP ============ --}}
<section class="border-y border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/40" aria-label="{{ __('Soorten certificaten') }}">
    <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <p class="text-center text-sm font-medium text-slate-500 dark:text-slate-400">
            {{ __('Voor elk certificaat dat je zelf bijhoudt') }}
        </p>
        <div class="mt-5 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-sm font-semibold tracking-wide text-slate-400 dark:text-slate-500">
            <span>{{ __('VOG') }}</span><span aria-hidden="true">&middot;</span>
            <span>{{ __("Diploma's & getuigschriften") }}</span><span aria-hidden="true">&middot;</span>
            <span>{{ __('EHBO & BHV') }}</span><span aria-hidden="true">&middot;</span>
            <span>{{ __('VCA & veiligheidscertificaten') }}</span><span aria-hidden="true">&middot;</span>
            <span>{{ __('Vakdiploma\'s (Code 95, ADR, heftruck)') }}</span>
        </div>
    </div>
</section>

{{-- ============ FEATURES ============ --}}
<section id="features" class="scroll-mt-20 py-20 sm:py-28">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center">
            <p class="text-sm font-semibold tracking-widest text-emerald-600 uppercase dark:text-emerald-400">{{ __('Features') }}</p>
            <h2 class="mt-3 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
                {{ __('Van scan tot reminder tot veilig delen') }}
            </h2>
            <p class="mt-4 text-lg leading-relaxed text-slate-500 dark:text-slate-400">
                {{ __('Drie pijlers die samen je hele certificatenbeheer afdekken — zonder handwerk.') }}
            </p>
        </div>

        {{-- Pillar A: OCR demo --}}
        <div class="mt-20 grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
            <div>
                <span class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-xs font-bold tracking-wide text-emerald-700 uppercase dark:bg-emerald-500/15 dark:text-emerald-400">
                    <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
                    {{ __('Automatische OCR-scan') }}
                </span>
                <h3 class="mt-5 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-white">
                    {{ __('Upload een foto of PDF, wij vullen de rest in') }}
                </h3>
                <p class="mt-4 text-lg leading-relaxed text-slate-600 dark:text-slate-400">
                    {{ __('Sleep je certificaat in Certified en de OCR-engine herkent automatisch de titel, uitgever en vervaldatum. Geen overtypwerk, geen tikfouten in vervaldatums — en jij kiest zelf welke Europese OCR-provider je document verwerkt.') }}
                </p>
                <ul class="mt-6 space-y-3 text-base text-slate-600 dark:text-slate-300">
                    @foreach ([
                        __('Herkent titel, uitgever en vervaldatum in seconden'),
                        __('Keuze uit Europese providers: Klippa of Mistral AI'),
                        __("Werkt met PDF, JPG en PNG — ook met scans en foto's"),
                    ] as $point)
                        <li class="flex items-start gap-3">
                            <svg class="mt-1 size-4.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                            {{ $point }}
                        </li>
                    @endforeach
                </ul>
            </div>

            {{-- Interactive OCR mock --}}
            <div x-data="ocrDemo" class="rounded-3xl border border-slate-200 bg-slate-50 p-6 shadow-sm sm:p-8 dark:border-slate-800 dark:bg-slate-900/60">
                <div class="grid gap-6 sm:grid-cols-2">
                    {{-- Mock document being scanned --}}
                    <div class="relative overflow-hidden rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-800" aria-hidden="true">
                        <div x-show="state === 'scanning'" x-cloak class="animate-scan-beam absolute inset-x-0 h-0.75 bg-gradient-to-r from-transparent via-emerald-500 to-transparent shadow-[0_0_12px_2px_--alpha(var(--color-emerald-500)/60%)]"></div>

                        <div class="flex items-center gap-2">
                            <span class="flex size-8 items-center justify-center rounded-lg bg-red-100 text-[10px] font-bold text-red-600 dark:bg-red-500/15 dark:text-red-400">PDF</span>
                            <div>
                                <p class="text-xs font-semibold text-slate-700 dark:text-slate-200">ehbo-diploma.pdf</p>
                                <p class="text-[10px] text-slate-400">248 kB</p>
                            </div>
                        </div>
                        <div class="mt-4 space-y-2">
                            <div class="h-2 w-3/4 rounded bg-slate-200 dark:bg-slate-600"></div>
                            <div class="h-2 w-full rounded bg-slate-100 dark:bg-slate-700"></div>
                            <div class="h-2 w-5/6 rounded bg-slate-100 dark:bg-slate-700"></div>
                            <div class="mt-4 h-2 w-2/3 rounded bg-slate-200 dark:bg-slate-600"></div>
                            <div class="h-2 w-1/2 rounded bg-slate-100 dark:bg-slate-700"></div>
                        </div>
                        <div class="mt-5 flex items-center justify-between">
                            <div class="size-10 rounded-full border-2 border-dashed border-slate-300 dark:border-slate-600"></div>
                            <div class="h-2 w-16 rounded bg-slate-200 dark:bg-slate-600"></div>
                        </div>
                    </div>

                    {{-- Extracted fields --}}
                    <div class="flex flex-col justify-between">
                        <div class="space-y-3">
                            @foreach ([['title', __('Titel')], ['issuer', __('Uitgever')], ['expires', __('Vervaldatum')]] as [$field, $label])
                                <div>
                                    <p class="text-[10px] font-semibold tracking-wide text-slate-400 uppercase">{{ $label }}</p>
                                    <div class="mt-1 flex h-8 items-center rounded-lg border border-slate-200 bg-white px-2.5 text-xs font-medium text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100">
                                        <span x-text="fields.{{ $field }}"></span>
                                        <span x-show="state === 'typing' || state === 'scanning'" x-cloak class="animate-caret-blink ml-0.5 inline-block h-3.5 w-0.5 bg-emerald-500" aria-hidden="true"></span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Progress + trigger --}}
                <div class="mt-6">
                    <div x-show="state === 'scanning' || state === 'typing'" x-cloak>
                        <div class="flex items-center justify-between text-xs font-medium">
                            <span class="text-slate-500 dark:text-slate-400" x-text="state === 'scanning' ? '{{ __('Document scannen…') }}' : '{{ __('Velden invullen…') }}'"></span>
                            <span class="text-emerald-600 tabular-nums dark:text-emerald-400" x-text="Math.round(progress) + '%'"></span>
                        </div>
                        <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700">
                            <div class="h-full rounded-full bg-gradient-to-r from-emerald-500 to-teal-400 transition-all duration-150" :style="`width: ${progress}%`"></div>
                        </div>
                    </div>

                    <button
                        type="button"
                        @click="scan"
                        x-show="state === 'idle' || state === 'done'"
                        class="group flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-emerald-400/60 px-4 py-3 text-sm font-semibold text-emerald-700 transition-all duration-200 hover:border-emerald-500 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-500/10"
                    >
                        <svg class="size-4.5 transition-transform duration-200 group-hover:-translate-y-0.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" /></svg>
                        <span x-text="state === 'done' ? '{{ __('Scan opnieuw') }}' : '{{ __('Probeer de demo-scan') }}'"></span>
                    </button>

                    <p x-show="state === 'done'" x-cloak class="mt-3 flex items-center justify-center gap-1.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
                        <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                        {{ __('Certificaat herkend en ingevuld — klaar om op te slaan') }}
                    </p>
                </div>
            </div>
        </div>

        {{-- Pillar B: Reminders timeline --}}
        <div class="mt-24 grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
            <div class="order-1 lg:order-2">
                <span class="inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-xs font-bold tracking-wide text-amber-700 uppercase dark:bg-amber-500/15 dark:text-amber-400">
                    <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
                    {{ __('Slimme reminders') }}
                </span>
                <h3 class="mt-5 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-white">
                    {{ __('Op tijd gewaarschuwd, elke keer weer') }}
                </h3>
                <p class="mt-4 text-lg leading-relaxed text-slate-600 dark:text-slate-400">
                    {{ __('Certified controleert dagelijks alle vervaldatums en stuurt automatisch reminders — ruim op tijd om een certificaat te verlengen. Verloopt er toch iets? Dan krijg je direct een urgente melding, zodat het nooit onopgemerkt blijft.') }}
                </p>
                <p class="mt-4 text-base text-slate-500 dark:text-slate-400">
                    {{ __('Jij bepaalt zelf hoeveel maanden van tevoren je gewaarschuwd wilt worden.') }}
                </p>
            </div>

            {{-- Timeline visual --}}
            <div class="relative order-2 lg:order-1" aria-label="{{ __('Voorbeeld van de reminder-tijdlijn') }}">
                <div class="absolute top-0 bottom-0 left-5 w-px bg-gradient-to-b from-emerald-400 via-amber-400 to-red-400 sm:left-6" aria-hidden="true"></div>

                <div class="space-y-6">
                    {{-- -2 months --}}
                    <div class="relative flex gap-5 sm:gap-6">
                        <span class="relative z-10 flex size-10 shrink-0 items-center justify-center rounded-full border-4 border-white bg-emerald-500 shadow-md sm:size-12 dark:border-slate-950">
                            <svg class="size-4.5 text-white sm:size-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
                        </span>
                        <div class="flex-1 rounded-2xl border border-emerald-200 bg-emerald-50/60 p-4 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-emerald-500/10 sm:p-5 dark:border-emerald-500/25 dark:bg-emerald-500/5">
                            <div class="flex items-center justify-between gap-2">
                                <p class="text-xs font-bold tracking-wide text-emerald-700 uppercase dark:text-emerald-400">{{ __('2 maanden van tevoren') }}</p>
                                <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400">{{ __('Reminder') }}</span>
                            </div>
                            <p class="mt-2 text-sm font-semibold text-slate-800 dark:text-slate-200">{{ __('Je BHV-diploma verloopt over 2 maanden') }}</p>
                            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ __('Rustig de tijd om een herhalingscursus in te plannen.') }}</p>
                        </div>
                    </div>

                    {{-- -1 month --}}
                    <div class="relative flex gap-5 sm:gap-6">
                        <span class="relative z-10 flex size-10 shrink-0 items-center justify-center rounded-full border-4 border-white bg-amber-500 shadow-md sm:size-12 dark:border-slate-950">
                            <svg class="size-4.5 text-white sm:size-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                        </span>
                        <div class="flex-1 rounded-2xl border border-amber-200 bg-amber-50/60 p-4 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-amber-500/10 sm:p-5 dark:border-amber-500/25 dark:bg-amber-500/5">
                            <div class="flex items-center justify-between gap-2">
                                <p class="text-xs font-bold tracking-wide text-amber-700 uppercase dark:text-amber-400">{{ __('1 maand van tevoren') }}</p>
                                <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-500/15 dark:text-amber-400">{{ __('Herinnering') }}</span>
                            </div>
                            <p class="mt-2 text-sm font-semibold text-slate-800 dark:text-slate-200">{{ __('Nog geen nieuw certificaat geüpload') }}</p>
                            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ __('Certified herinnert je opnieuw zolang het niet is verlengd.') }}</p>
                        </div>
                    </div>

                    {{-- Expired today --}}
                    <div class="relative flex gap-5 sm:gap-6">
                        <span class="relative z-10 flex size-10 shrink-0 items-center justify-center rounded-full border-4 border-white bg-red-500 shadow-md sm:size-12 dark:border-slate-950">
                            <svg class="size-4.5 text-white sm:size-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>
                        </span>
                        <div class="flex-1 rounded-2xl border border-red-200 bg-red-50/60 p-4 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-red-500/10 sm:p-5 dark:border-red-500/25 dark:bg-red-500/5">
                            <div class="flex items-center justify-between gap-2">
                                <p class="text-xs font-bold tracking-wide text-red-700 uppercase dark:text-red-400">{{ __('Vandaag verlopen') }}</p>
                                <span class="rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-semibold text-red-700 dark:bg-red-500/15 dark:text-red-400">{{ __('Urgent') }}</span>
                            </div>
                            <p class="mt-2 text-sm font-semibold text-slate-800 dark:text-slate-200">{{ __('Direct een urgente melding in je inbox') }}</p>
                            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ __('Zo mis je nooit de deadline om het op tijd te verlengen.') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Pillar C: Secure sharing --}}
        <div class="mt-24">
            <div class="mx-auto max-w-2xl text-center">
                <span class="inline-flex items-center gap-2 rounded-full bg-teal-100 px-3 py-1 text-xs font-bold tracking-wide text-teal-700 uppercase dark:bg-teal-500/15 dark:text-teal-400">
                    <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
                    {{ __('Veilig delen') }}
                </span>
                <h3 class="mt-5 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-white">
                    {{ __('Stop met certificaten mailen als losse bijlage') }}
                </h3>
                <p class="mt-4 text-lg leading-relaxed text-slate-600 dark:text-slate-400">
                    {{ __('Je VOG of diploma als onbeveiligde bijlage naar een nieuwe werkgever of instantie mailen is vragen om problemen. Certified deelt je documenten alleen versleuteld en tijdelijk.') }}
                </p>
            </div>

            <div class="relative mt-12 grid gap-6 lg:grid-cols-2 lg:gap-10">
                <span class="absolute top-1/2 left-1/2 z-10 hidden size-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-slate-200 bg-white text-sm font-bold text-slate-400 shadow-lg lg:flex dark:border-slate-700 dark:bg-slate-900 dark:text-slate-500" aria-hidden="true">VS</span>

                {{-- The old way --}}
                <div class="rounded-3xl border border-red-200/70 bg-red-50/40 p-6 transition-all duration-300 hover:shadow-lg hover:shadow-red-500/5 sm:p-8 dark:border-red-500/20 dark:bg-red-500/5">
                    <div class="flex items-center gap-3">
                        <span class="flex size-10 items-center justify-center rounded-xl bg-red-100 dark:bg-red-500/15">
                            <svg class="size-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
                        </span>
                        <h4 class="text-lg font-bold text-slate-900 dark:text-white">{{ __('E-mailbijlage') }} <span class="font-medium text-red-600 dark:text-red-400">({{ __('oude manier') }})</span></h4>
                    </div>

                    {{-- Mock email --}}
                    <div class="mt-6 rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-800" aria-hidden="true">
                        <p class="text-xs text-slate-400">{{ __('Aan') }}: hr@nieuwewerkgever.nl</p>
                        <p class="mt-1 text-sm font-semibold text-slate-700 dark:text-slate-200">FW: FW: {{ __('Mijn VOG — zie bijlage') }}</p>
                        <div class="mt-3 inline-flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 dark:border-red-500/25 dark:bg-red-500/10">
                            <svg class="size-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /></svg>
                            <span class="text-xs font-medium text-red-700 dark:text-red-400">vog.pdf</span>
                        </div>
                    </div>

                    <ul class="mt-6 space-y-3 text-sm">
                        @foreach ([
                            __('Bijlage blijft voor altijd in inboxen en op mailservers staan'),
                            __('Geen controle: doorsturen, kopiëren en lekken kan ongemerkt'),
                            __('Onbeveiligd verstuurd — een onnodig risico op misbruik van je gegevens'),
                        ] as $risk)
                            <li class="flex items-start gap-3">
                                <svg class="mt-0.5 size-4.5 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
                                <span class="text-slate-600 dark:text-slate-300">{!! $risk !!}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>

                {{-- The Certified way --}}
                <div class="rounded-3xl border border-emerald-300/70 bg-emerald-50/40 p-6 shadow-lg shadow-emerald-500/5 transition-all duration-300 hover:shadow-xl hover:shadow-emerald-500/10 sm:p-8 dark:border-emerald-500/25 dark:bg-emerald-500/5">
                    <div class="flex items-center gap-3">
                        <span class="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="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" /></svg>
                        </span>
                        <h4 class="text-lg font-bold text-slate-900 dark:text-white">{{ __('Delen met') }} <span class="text-emerald-600 dark:text-emerald-400">Certified</span></h4>
                    </div>

                    {{-- Mock share --}}
                    <div class="mt-6 rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-800" aria-hidden="true">
                        <div class="flex items-center gap-2">
                            <svg class="size-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
                            <span class="truncate font-mono text-xs text-slate-500 dark:text-slate-400">certified.eu/shared/…?signature=a8f3</span>
                        </div>
                        <div class="mt-3 flex flex-wrap items-center gap-2">
                            <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-[10px] font-semibold text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400">🔒 {{ __('AES-256 versleuteld') }}</span>
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-semibold text-slate-600 dark:bg-slate-700 dark:text-slate-300">⏱ {{ __('Verloopt over 48 uur') }}</span>
                        </div>
                    </div>

                    <ul class="mt-6 space-y-3 text-sm">
                        @foreach ([
                            __('AES-256 versleutelde ZIP met een apart verstuurd wachtwoord'),
                            __('Tijdelijke ondertekende URL die na 48 uur automatisch verloopt'),
                            __('Privacyvriendelijk: geen kopieën die ergens blijven rondslingeren'),
                        ] as $benefit)
                            <li class="flex items-start gap-3">
                                <svg class="mt-0.5 size-4.5 shrink-0 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                                <span class="text-slate-600 dark:text-slate-300">{!! $benefit !!}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ============ TRUST / PRIVACY ============ --}}
<section class="relative overflow-hidden bg-slate-900 py-20 sm:py-28 dark:bg-slate-900/60">
    <div class="pointer-events-none absolute inset-0 bg-grid-slate opacity-40 [mask-image:radial-gradient(ellipse_60%_60%_at_50%_40%,black,transparent)]" aria-hidden="true"></div>
    <div class="pointer-events-none absolute -bottom-32 left-1/2 h-64 w-150 -translate-x-1/2 rounded-full bg-emerald-500/10 blur-3xl" aria-hidden="true"></div>

    <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center">
            <p class="text-sm font-semibold tracking-widest text-emerald-400 uppercase">{{ __('Europese privacy & security') }}</p>
            <h2 class="mt-3 text-3xl font-bold tracking-tight text-white sm:text-4xl">
                {{ __('Gevoelige gegevens verdienen Europese waarborgen') }}
            </h2>
            <p class="mt-4 text-lg leading-relaxed text-slate-400">
                {{ __("Documenten zoals een VOG bevatten bijzondere persoonsgegevens. Daarom is Certified vanaf de eerste regel code gebouwd op privacy-by-design — en blijft je data binnen de EU.") }}
            </p>
        </div>

        <div class="mt-14 grid gap-6 md:grid-cols-3">
            @foreach ([
                [
                    'icon' => 'M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418',
                    'title' => __('100% Europese hosting'),
                    'body' => __('Al je data staat in Europese datacenters, onder Europees recht. Geen Amerikaanse cloud, geen CLOUD Act, volledig AVG/GDPR-compliant.'),
                ],
                [
                    'icon' => 'M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z',
                    'title' => __('AES-256 versleuteld delen'),
                    'body' => __('Certificaten die je deelt worden verpakt in een AES-256 versleutelde ZIP. Links zijn ondertekend en verlopen automatisch na 48 uur.'),
                ],
                [
                    'icon' => 'M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z',
                    'title' => __('Europese OCR-providers'),
                    'body' => __('Kies zelf wie je documenten leest: Klippa (Nederland) of Mistral AI (Frankrijk). Je documenten verlaten Europa nooit — jij houdt de regie.'),
                ],
            ] as $card)
                <div class="group rounded-2xl border border-slate-700/80 bg-slate-800/50 p-7 backdrop-blur transition-all duration-300 hover:-translate-y-1 hover:border-emerald-500/40 hover:bg-slate-800/80 hover:shadow-xl hover:shadow-emerald-500/5">
                    <span class="flex size-12 items-center justify-center rounded-xl bg-emerald-500/15 transition-colors duration-300 group-hover:bg-emerald-500/25">
                        <svg class="size-6 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $card['icon'] }}" /></svg>
                    </span>
                    <h3 class="mt-5 text-lg font-bold text-white">{{ $card['title'] }}</h3>
                    <p class="mt-3 text-sm leading-relaxed text-slate-400">{{ $card['body'] }}</p>
                </div>
            @endforeach
        </div>

        <div class="mt-12 text-center">
            <a
                href="{{ route('marketing.security') }}"
                class="group inline-flex items-center gap-2 text-base font-semibold text-emerald-400 transition-colors hover:text-emerald-300"
            >
                {{ __('Lees alles over security & privacy') }}
                <span class="transition-transform duration-200 group-hover:translate-x-1" aria-hidden="true">&rarr;</span>
            </a>
        </div>
    </div>
</section>

{{-- ============ PRICING ============ --}}
<section class="py-20 sm:py-28" aria-label="{{ __('Prijzen') }}">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="mx-auto mb-14 max-w-2xl text-center">
            <p class="text-sm font-semibold tracking-widest text-emerald-600 uppercase dark:text-emerald-400">Pricing</p>
            <h2 class="mt-3 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
                {{ __('Eerlijke prijzen, geen verrassingen') }}
            </h2>
            <p class="mt-4 text-lg text-slate-500 dark:text-slate-400">
                {{ __('Start gratis en groei mee wanneer je meer certificaten beheert. Elk pakket bevat reminders en veilig delen; OCR zit bij Certified Starter en Certified Pro.') }}
            </p>
        </div>

        @include('marketing.partials.pricing-grid')
    </div>
</section>

{{-- ============ FAQ ============ --}}
@include('marketing.partials.faq', ['faqs' => [
    ['q' => __('Is Certified geschikt voor gevoelige documenten, zoals een VOG?'), 'a' => __('Ja, daar is Certified juist voor gebouwd. Je documenten staan versleuteld op Europese servers, worden nooit als open bijlage gedeeld en zijn alleen toegankelijk met jouw account. Delen met anderen gebeurt via een tijdelijke ondertekende link of een AES-256 versleutelde ZIP.')],
    ['q' => __('Hoe werkt de automatische OCR-scan?'), 'a' => __('Je uploadt een PDF of foto van je certificaat. Onze OCR-engine herkent automatisch de titel, uitgever en vervaldatum en vult die voor je in. Jij controleert en slaat op — dat is alles. Je kiest zelf welke Europese provider (Klippa of Mistral AI) de verwerking doet. OCR is beschikbaar bij Certified Starter en Certified Pro; bij het Gratis-pakket vul je de gegevens handmatig in.')],
    ['q' => __('Wanneer krijg ik een reminder als een certificaat bijna verloopt?'), 'a' => __('Standaard ontvang je twee maanden van tevoren een e-mail, en daarna opnieuw zolang je het certificaat niet hebt verlengd. Verloopt een certificaat vandaag, dan krijg je direct een urgente melding. Het aantal maanden stel je zelf in bij je instellingen.')],
    ['q' => __('Waar wordt mijn data opgeslagen?'), 'a' => __('Uitsluitend in Europese datacenters, onder Europees recht. We gebruiken geen Amerikaanse cloudproviders, waardoor je data niet onder de Amerikaanse CLOUD Act valt. Zo voldoe je aantoonbaar aan de AVG.')],
    ['q' => __('Kan ik Certified eerst vrijblijvend proberen?'), 'a' => __('Zeker. Het Gratis-pakket is voor altijd gratis en laat je tot 5 certificaten beheren — zonder creditcard. Groei je eruit, dan upgrade je eenvoudig naar Certified Starter (15 certificaten) of Certified Pro.')],
    ['q' => __('Heb ik een verwerkersovereenkomst nodig?'), 'a' => __('Gebruik je Certified puur voor je eigen certificaten? Dan heb je geen verwerkersovereenkomst nodig — je bent geen verwerkingsverantwoordelijke in de zin van de AVG. Werk je als zzp\'er of eenmanszaak en wil je er toch één voor je eigen administratie, dan kun je die downloaden op onze DPA-pagina.')],
]])

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

@endsection