@extends('marketing.layout')

@section('title', __('Security & privacy').' — Certified')
@section('description', __("Hoe Certified je certificaten beschermt: 100% Europese hosting, AES-256 versleuteld delen en keuze uit Europese OCR-providers. Volledig AVG/GDPR-compliant."))

@section('content')

{{-- ============ HEADER ============ --}}
<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 -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-3xl px-4 pt-36 pb-16 text-center sm:px-6 sm:pt-44 sm:pb-20">
        <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">
            🇪🇺 {{ __('Privacy-by-design, gebouwd in Europa') }}
        </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-5xl dark:text-white">
            {{ __('Security & privacy als fundament,') }} <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">{{ __('niet als bijzaak') }}</span>
        </h1>
        <p class="animate-fade-in-up mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-slate-600 [animation-delay:200ms] dark:text-slate-400">
            {{ __("Certified bewaart documenten met bijzondere persoonsgegevens — je VOG en andere gevoelige diploma's en certificaten. Op deze pagina lees je precies hoe we die gegevens beschermen.") }}
        </p>
    </div>
</section>

{{-- ============ PILLARS IN DETAIL ============ --}}
<section class="mx-auto max-w-5xl space-y-8 px-4 pb-20 sm:px-6">
    @foreach ([
        [
            'kicker' => '01 — '.__('Hosting & jurisdictie'),
            'title' => __('100% Europese hosting, onder Europees recht'),
            'body' => __('Alle applicatie- en documentdata staat in Europese datacenters. We gebruiken bewust geen Amerikaanse hyperscalers: je data valt daardoor niet onder de Amerikaanse CLOUD Act en blijft volledig binnen de reikwijdte van de AVG/GDPR. Back-ups worden versleuteld opgeslagen, eveneens binnen de EU.'),
            'points' => [__('Datacenters in de EU, data verlaat Europa nooit'), __('Geen Amerikaanse cloudproviders in de keten'), __('Versleutelde back-ups binnen de EU')],
        ],
        [
            'kicker' => '02 — '.__('Versleuteling'),
            'title' => __('Versleuteld in rust, onderweg en bij het delen'),
            'body' => __('Je documenten worden versleuteld opgeslagen en al het verkeer loopt via TLS. Deel je een certificaat met iemand anders, dan gebeurt dat via een AES-256 versleutelde ZIP met een apart verstuurd wachtwoord, of via een ondertekende link die na 48 uur automatisch onbruikbaar wordt. API-sleutels van OCR-providers slaan we versleuteld op.'),
            'points' => [__('AES-256 versleutelde ZIP-exports'), __('Ondertekende deel-links met een maximale geldigheid van 48 uur'), __('TLS voor al het verkeer, versleutelde opslag van API-sleutels')],
        ],
        [
            'kicker' => '03 — '.__('OCR-verwerking'),
            'title' => __('Jij kiest welke Europese partij je documenten leest'),
            'body' => __('Voor de automatische tekstherkenning kies je zelf een verwerker: Klippa (Nederland) of Mistral AI (Frankrijk) — beide Europese bedrijven onder Europese jurisdictie. Wil je helemaal geen externe verwerking? Zet OCR dan simpelweg uit en vul velden handmatig in. Jouw data, jouw keuze.'),
            'points' => [__('Klippa: Nederlandse document-AI specialist'), __('Mistral AI: Frans AI-bedrijf, EU-gehost'), __('OCR volledig uitschakelbaar per account')],
        ],
        [
            'kicker' => '04 — '.__('Toegang & isolatie'),
            'title' => __('Strikte scheiding tussen accounts'),
            'body' => __("Jij ziet uitsluitend je eigen certificaten — afgedwongen op databaseniveau, niet alleen in de interface. Inloggen kan met wachtwoord of passkeys, en documenten die je deelt zijn alleen bereikbaar via cryptografisch ondertekende URL's die niet te raden of te vervalsen zijn."),
            'points' => [__('Data-isolatie afgedwongen op databaseniveau'), __('Ondersteuning voor passkeys (phishing-bestendig inloggen)'), __("Cryptografisch ondertekende deel-URL's")],
        ],
    ] as $block)
        <article class="group rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition-all duration-300 hover:border-emerald-300/70 hover:shadow-xl hover:shadow-emerald-500/5 sm:p-10 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-emerald-500/30">
            <p class="font-mono text-xs font-semibold tracking-widest text-emerald-600 uppercase dark:text-emerald-400">{{ $block['kicker'] }}</p>
            <h2 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 dark:text-white">{{ $block['title'] }}</h2>
            <p class="mt-4 max-w-3xl text-base leading-relaxed text-slate-600 dark:text-slate-400">{{ $block['body'] }}</p>
            <ul class="mt-6 grid gap-3 sm:grid-cols-3">
                @foreach ($block['points'] as $point)
                    <li class="flex items-start gap-2.5 rounded-xl bg-slate-50 p-3.5 text-sm text-slate-600 dark:bg-slate-800/60 dark:text-slate-300">
                        <svg class="mt-0.5 size-4 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>
        </article>
    @endforeach
</section>

{{-- ============ AVG BANNER ============ --}}
<section class="border-y border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/40">
    <div class="mx-auto flex max-w-5xl flex-col items-center gap-6 px-4 py-14 text-center sm:px-6">
        <span class="flex size-14 items-center justify-center rounded-2xl bg-emerald-100 dark:bg-emerald-500/15">
            <svg class="size-7 text-emerald-600 dark: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="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>
        <h2 class="max-w-2xl text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-white">
            {{ __('Verwerkersovereenkomst op aanvraag') }}
        </h2>
        <p class="max-w-2xl text-base leading-relaxed text-slate-600 dark:text-slate-400">
            {{ __('Gebruik je Certified voor je eigen certificaten, dan heb je geen verwerkersovereenkomst nodig — je bent zelf geen verwerkingsverantwoordelijke onder de AVG. Werk je als zzp\'er of eenmanszaak en wil je er voor je eigen administratie toch één, dan staat de standaard verwerkersovereenkomst voor je klaar.') }}
        </p>
        <a
            href="{{ route('marketing.dpa') }}"
            class="inline-flex items-center gap-2 text-sm font-semibold text-emerald-700 transition-colors hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-300"
        >
            {{ __('Bekijk de verwerkersovereenkomst') }}
            <span aria-hidden="true">&rarr;</span>
        </a>
    </div>
</section>

{{-- ============ FAQ ============ --}}
@include('marketing.partials.faq', [
    'faqTitle' => __('Vragen over security'),
    'faqSubtitle' => __('De vragen die we het vaakst krijgen over privacy en gegevensbescherming.'),
    'faqs' => [
        ['q' => __('Valt mijn data onder de Amerikaanse CLOUD Act?'), 'a' => __('Nee. Certified draait uitsluitend op Europese infrastructuur van Europese leveranciers. Er is geen Amerikaanse partij in de hostingketen, dus de CLOUD Act is niet van toepassing op jouw data.')],
        ['q' => __('Wat gebeurt er met een document tijdens de OCR-scan?'), 'a' => __('Het document wordt via een beveiligde verbinding naar de door jou gekozen Europese provider (Klippa of Mistral AI) gestuurd, die er tekst uit herkent en het resultaat teruggeeft. Wil je dit niet, dan zet je OCR uit en vul je de velden handmatig in.')],
        ['q' => __('Hoe lang blijft een gedeelde link geldig?'), 'a' => __('Maximaal 48 uur. Daarna is de ondertekende URL cryptografisch ongeldig en kan niemand het document meer openen — ook niet met de oude link. Versleutelde ZIP-exports blijven beveiligd met AES-256 en het apart verstuurde wachtwoord.')],
        ['q' => __('Wie kan er bij mijn certificaten?'), 'a' => __('Alleen jij, vanuit je eigen account. De scheiding tussen accounts wordt op databaseniveau afgedwongen. Onze eigen medewerkers hebben geen toegang tot documentinhoud, behalve wanneer jij daar bij een supportverzoek expliciet toestemming voor geeft.')],
        ['q' => __('Kan ik al mijn data exporteren of laten verwijderen?'), 'a' => __('Ja. Je kunt op elk moment al je certificaten en metadata exporteren. Zeg je op, dan verwijderen we je data — inclusief back-ups — binnen 30 dagen definitief, conform de AVG.')],
    ],
])

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

@endsection