<?php
/**
 * Samen STERK — Veelgestelde vragen
 */

define('SHARED_PATH', dirname(__DIR__) . '/shared');
require_once SHARED_PATH . '/includes/site-config.php';
init_site('samensterk');
require_once SHARED_PATH . '/includes/config.php';
require_once SHARED_PATH . '/includes/auth.php';
require_once SHARED_PATH . '/includes/layout.php';

render_head([
    'title'       => 'Veelgestelde vragen — Samen STERK | Reanimatie.nl',
    'description' => 'Alles wat je wilt weten over Samen STERK: abonnement, AED plaatsing, opzeggen en meer.',
    'css'         => ['/samen-sterk/css/samensterk.css'],
]);
render_topbar();

$faqs = [
    ['cat' => 'Algemeen', 'items' => [
        ['v' => 'Wat is Samen STERK?',
         'a' => 'Samen STERK is een abonnementsdienst van Reanimatie.nl waarmee buurten, sportclubs, scholen en bedrijven samen een AED (Automatische Externe Defibrillator) financieren. Voor slechts € ' . number_format(SAMEN_STERK_BEDRAG, 2, ',', '.') . ' per maand per persoon zorgen we samen voor een hartveilig Nederland.'],
        ['v' => 'Hoe werkt het?',
         'a' => 'Het is simpel: iemand stelt een locatie voor waar een AED nodig is. Reanimatie.nl beoordeelt of het een geschikte plek is. Zodra er ' . SAMEN_STERK_DOEL . ' deelnemers zijn ingeschreven, plaatsen wij een professionele AED. Alle kosten voor aanschaf, onderhoud en beheer zijn voor ons.'],
        ['v' => 'Waarom een AED in mijn buurt?',
         'a' => 'In Nederland krijgen jaarlijks 17.000 mensen een hartstilstand buiten het ziekenhuis. De overlevingskans daalt elke minuut met 10%. Een AED binnen 6 minuten bereikbaar kan het verschil maken tussen leven en dood. Hoe meer AED\'s, hoe veiliger uw buurt.'],
        ['v' => 'Wie beheert de AED?',
         'a' => 'Reanimatie.nl neemt het volledige beheer op zich: aanschaf, installatie, onderhoud, vervanging van elektroden en batterij, en registratie bij HartslagNU. U hoeft zich nergens zorgen over te maken.'],
    ]],
    ['cat' => 'Abonnement & betaling', 'items' => [
        ['v' => 'Hoeveel kost het?',
         'a' => '€ ' . number_format(SAMEN_STERK_BEDRAG, 2, ',', '.') . ' per maand inclusief BTW. Geen eenmalige kosten, geen verrassingen.'],
        ['v' => 'Wanneer start mijn betaling?',
         'a' => 'Bij inschrijving wordt een eerste betaling van € ' . number_format(SAMEN_STERK_BEDRAG, 2, ',', '.') . ' gedaan om je betaalmethode te verifiëren. Het maandelijkse abonnement start pas wanneer er ' . SAMEN_STERK_DOEL . ' deelnemers zijn bereikt op jouw locatie.'],
        ['v' => 'Hoe betaal ik?',
         'a' => 'Betaling verloopt automatisch via Mollie (iDEAL, creditcard, SEPA incasso). Na de eerste betaling wordt maandelijks automatisch afgeschreven.'],
        ['v' => 'Kan ik opzeggen?',
         'a' => 'Ja, je kunt altijd opzeggen met een opzegtermijn van 1 maand. In elke bevestigingsmail staat een persoonlijke opzeglink. Na opzegging loopt je abonnement nog 30 dagen door.'],
        ['v' => 'Krijg ik een factuur?',
         'a' => 'Ja, elke maand ontvang je automatisch een factuur via BergIX, ons facturatiesysteem.'],
        ['v' => 'Wat gebeurt er als ik opzeg en het aantal onder de ' . SAMEN_STERK_DOEL . ' komt?',
         'a' => 'De overige deelnemers ontvangen een email om nieuwe leden te werven. De AED blijft staan zolang er actieve abonnees zijn. Reanimatie.nl neemt contact op als het aantal structureel te laag wordt.'],
    ]],
    ['cat' => 'Locatie & AED', 'items' => [
        ['v' => 'Kan ik zelf een locatie voorstellen?',
         'a' => 'Ja! Iedereen kan een locatie aanvragen via het portaal. Reanimatie.nl beoordeelt of de locatie geschikt is (bereikbaarheid, dekking, veiligheid). Na goedkeuring wordt de actiepagina zichtbaar en kun je deelnemers werven.'],
        ['v' => 'Hoeveel deelnemers zijn nodig?',
         'a' => SAMEN_STERK_DOEL . ' deelnemers per locatie. Zodra dit aantal is bereikt, plaatsen wij de AED. Meer deelnemers is altijd welkom — bij 30+ deelnemers plaatsen we een tweede AED in de buurt.'],
        ['v' => 'Hoe lang heb ik om ' . SAMEN_STERK_DOEL . ' deelnemers te verzamelen?',
         'a' => 'Er is geen tijdslimiet. De actie blijft open totdat het doel is bereikt. Neem de tijd om je buurt te informeren.'],
        ['v' => 'Wat voor AED wordt er geplaatst?',
         'a' => 'Wij plaatsen een professionele AED met buitenkast (indien buiten) of wandbeugel (indien binnen). Het exacte model hangt af van de locatie. Alle AED\'s zijn CE-gekeurd en voldoen aan de Nederlandse richtlijnen.'],
        ['v' => 'Wordt de AED geregistreerd bij HartslagNU?',
         'a' => 'Ja! Elke AED wordt geregistreerd bij HartslagNU. Dit betekent dat wanneer iemand 112 belt voor een hartstilstand, vrijwillige hulpverleners naar de dichtstbijzijnde AED worden gestuurd.'],
        ['v' => 'Wat als de AED kapot gaat?',
         'a' => 'Alle kosten voor reparatie en vervanging zijn voor Reanimatie.nl. De AED is opgenomen in ons professionele inventarisatiesysteem met automatische vervaldatum-bewaking. Wij vervangen elektroden en batterijen op tijd.'],
    ]],
    ['cat' => 'Delen & werven', 'items' => [
        ['v' => 'Hoe kan ik deelnemers werven?',
         'a' => 'Op je actiepagina vind je deelknoppen voor WhatsApp, email en een kopieerbare link. Deel deze met je buren, via social media, op het prikbord van de supermarkt, bij de sportclub — overal waar je buurtgenoten bereikt.'],
        ['v' => 'Kan ik een persoonlijk verhaal toevoegen?',
         'a' => 'Ja! Bij het aanvragen van een locatie kun je een persoonlijke introductietekst schrijven. Dit wordt getoond op je actiepagina en helpt om mensen te overtuigen.'],
        ['v' => 'Kan ik zien wie er meedoen?',
         'a' => 'Ja, op de actiepagina worden de namen van alle deelnemers getoond (tenzij ze anoniem willen blijven).'],
    ]],
];
?>

<main class="page-content" role="main">

    <section class="ss-hero" style="padding:80px 0 48px;">
        <div class="container" style="text-align:center;position:relative;z-index:1;">
            <h1 style="font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;color:#fff;margin-bottom:8px;">Veelgestelde vragen</h1>
            <p style="color:rgba(255,255,255,.7);font-size:1rem;">Alles wat je wilt weten over Samen STERK.</p>
        </div>
    </section>

    <section class="section">
        <div class="container" style="max-width:800px;">

            <?php foreach ($faqs as $cat): ?>
            <h2 style="font-size:1.2rem;font-weight:700;margin:32px 0 16px;color:var(--primary);"><i class="fa-solid fa-circle-question" style="color:#e63946;"></i> <?= $cat['cat'] ?></h2>

            <?php foreach ($cat['items'] as $faq): ?>
            <div class="card" style="padding:0;margin-bottom:8px;overflow:hidden;cursor:pointer;" onclick="this.querySelector('.faq-answer').style.display=this.querySelector('.faq-answer').style.display==='none'?'':'none';this.querySelector('.faq-chevron').classList.toggle('fa-chevron-down');this.querySelector('.faq-chevron').classList.toggle('fa-chevron-up');">
                <div style="padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;">
                    <div style="font-weight:600;font-size:.95rem;"><?= htmlspecialchars($faq['v']) ?></div>
                    <i class="fa-solid fa-chevron-down faq-chevron" style="color:var(--text-muted);font-size:.8rem;flex-shrink:0;transition:.2s;"></i>
                </div>
                <div class="faq-answer" style="display:none;padding:0 20px 16px;font-size:.9rem;color:var(--text-secondary);line-height:1.7;border-top:1px solid var(--border-light);">
                    <div style="padding-top:12px;"><?= $faq['a'] ?></div>
                </div>
            </div>
            <?php endforeach; ?>
            <?php endforeach; ?>

            <!-- CTA -->
            <div style="text-align:center;margin-top:40px;">
                <p style="font-size:1rem;color:var(--text-secondary);margin-bottom:16px;">Staat je vraag er niet bij?</p>
                <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
                    <a href="mailto:info@reanimatie.nl" class="btn btn-primary" style="background:var(--primary);min-height:48px;">
                        <i class="fa-solid fa-envelope"></i> Stuur ons een email
                    </a>
                    <a href="/samen-sterk/" class="btn" style="background:var(--bg-secondary);color:var(--text-secondary);min-height:48px;">
                        <i class="fa-solid fa-arrow-left"></i> Terug naar Samen STERK
                    </a>
                </div>
            </div>

        </div>
    </section>

</main>

<?php render_footer(); ?>