<?php
/**
 * Installeer Reanimatie.nl als app — instructies voor iPhone, Android, Desktop.
 */
$__shared = __DIR__ . '/shared';
if (!is_dir($__shared)) $__shared = dirname(__DIR__) . '/shared';
define('SHARED_PATH', $__shared);
require_once SHARED_PATH . '/includes/site-config.php';
init_site('hub');
require_once SHARED_PATH . '/includes/config.php';
require_once SHARED_PATH . '/includes/auth.php';
require_once SHARED_PATH . '/includes/layout.php';

render_head([
    'title'       => 'Reanimatie.nl als app installeren — iPhone, Android & Desktop',
    'description' => 'Installeer Reanimatie.nl als app op uw beginscherm. Werkt op iPhone, Android en desktop. 1 minuut werk.',
    'canonical'   => SITE_URL . '/installeer',
    'css'         => ['/css/modules.css'], // legacy module-styling (.vac-hero, .feat-card, etc)
]);
render_topbar();
?>

<main class="page-content" role="main">
<section class="vac-hero">
    <div class="container">
        <div class="vac-hero__badge"><i class="fa-solid fa-mobile-screen"></i> App installeren</div>
        <h1>Reanimatie.nl als <span class="vac-hero__accent">app</span> op uw telefoon</h1>
        <p class="vac-hero__lead">Geen Play Store of App Store nodig — installeer direct via uw browser. Snel toegang, werkt offline, push-meldingen mogelijk.</p>
    </div>
</section>

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

<div class="installeer-tabs" style="display:flex;gap:8px;margin:24px 0;flex-wrap:wrap;">
    <button class="installeer-tab active" data-tab="iphone"><i class="fa-brands fa-apple"></i> iPhone / iPad</button>
    <button class="installeer-tab" data-tab="android"><i class="fa-brands fa-android"></i> Android</button>
    <button class="installeer-tab" data-tab="desktop"><i class="fa-solid fa-desktop"></i> Desktop</button>
</div>

<div class="installeer-content active" id="tab-iphone">
    <h2 style="margin-bottom:8px;">iPhone / iPad — 4 stappen</h2>
    <p style="color:var(--text-secondary);margin-bottom:24px;"><strong>Belangrijk:</strong> gebruik <strong>Safari</strong> (geen Chrome of Firefox). Alleen Safari kan PWA's installeren op iOS.</p>

    <ol class="installeer-steps">
        <li><strong>Open deze pagina in Safari</strong> op uw iPhone of iPad.</li>
        <li>Tik op het <strong>deel-icoon</strong> onderaan: <span class="ios-share-icon">⬆</span> (vierkantje met pijl omhoog)</li>
        <li>Scroll in de lijst en tik op <strong>"Zet op beginscherm"</strong></li>
        <li>Tik rechtsboven op <strong>"Voeg toe"</strong> — klaar!</li>
    </ol>
    <p style="background:#fef9c3;border-left:3px solid #fbbf24;padding:12px 16px;border-radius:6px;margin-top:24px;font-size:14px;">
        💡 Het Reanimatie-icoon staat nu op uw beginscherm tussen uw andere apps. Tik erop om de app te starten — full-screen, zonder browser-balk.
    </p>
</div>

<div class="installeer-content" id="tab-android" style="display:none;">
    <h2 style="margin-bottom:8px;">Android — 3 stappen</h2>
    <p style="color:var(--text-secondary);margin-bottom:24px;">Werkt in <strong>Chrome</strong>, <strong>Edge</strong>, <strong>Samsung Internet</strong> en <strong>Firefox</strong>.</p>

    <ol class="installeer-steps">
        <li><strong>Open deze pagina in uw browser</strong> op Android.</li>
        <li>Onderaan verschijnt een <strong>"Installeren"-banner</strong> — tik daarop. Of: open het menu (3 puntjes ⋮) → <strong>"App installeren"</strong> / <strong>"Toevoegen aan startscherm"</strong>.</li>
        <li>Bevestig met <strong>"Installeren"</strong>. Het icoon verschijnt in uw app-lade én op uw startscherm.</li>
    </ol>
    <p style="background:#dbeafe;border-left:3px solid #3b82f6;padding:12px 16px;border-radius:6px;margin-top:24px;font-size:14px;">
        💡 Eenmaal geïnstalleerd opent de app full-screen — voelt als een echte app uit de Play Store.
    </p>
</div>

<div class="installeer-content" id="tab-desktop" style="display:none;">
    <h2 style="margin-bottom:8px;">Desktop (Windows / Mac / Linux)</h2>
    <p style="color:var(--text-secondary);margin-bottom:24px;">Werkt in <strong>Chrome</strong>, <strong>Edge</strong> en <strong>Brave</strong> op desktop.</p>

    <ol class="installeer-steps">
        <li>Open deze pagina in uw desktop-browser.</li>
        <li>In de adresbalk verschijnt rechts een <strong>install-icoon 📲</strong> — klik erop.</li>
        <li>Bevestig met <strong>"Installeren"</strong>. Reanimatie.nl staat nu op uw bureaublad / Start menu / Applications folder.</li>
    </ol>
    <p style="background:#d1fae5;border-left:3px solid #16a34a;padding:12px 16px;border-radius:6px;margin-top:24px;font-size:14px;">
        💡 De app opent in een eigen venster — zonder tab-bar of adresbalk. Perfect voor snelle toegang.
    </p>
</div>

<h2 style="margin-top:48px;">Wat krijgt u?</h2>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px;">
    <div class="feat-card"><i class="fa-solid fa-bolt"></i><h3>Snel laden</h3><p>Pagina's openen direct, ook bij langzame verbinding.</p></div>
    <div class="feat-card"><i class="fa-solid fa-wifi"></i><h3>Werkt offline</h3><p>Bekijk eerder geopende pagina's zonder internet.</p></div>
    <div class="feat-card"><i class="fa-solid fa-bell"></i><h3>Push-meldingen</h3><p>Cursus-reminders, AED-alarmen — direct op uw scherm.</p></div>
    <div class="feat-card"><i class="fa-solid fa-rotate"></i><h3>Auto-update</h3><p>Altijd de nieuwste versie zonder iets te installeren.</p></div>
</div>

</div>
</section>
</main>

<style>
.installeer-tab { padding:10px 18px; border:1px solid var(--border); background:#fff; border-radius:8px; font-weight:600; cursor:pointer; font-size:14px; color:var(--text-secondary); transition:all .15s; }
.installeer-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.installeer-tab:hover { transform:translateY(-1px); }
.installeer-steps { padding-left:20px; }
.installeer-steps li { margin-bottom:14px; line-height:1.6; font-size:15px; }
.ios-share-icon { display:inline-flex; width:28px; height:28px; background:#3b82f6; color:#fff; border-radius:6px; align-items:center; justify-content:center; margin:0 4px; font-size:14px; vertical-align:middle; }
.feat-card { padding:20px; background:#fff; border-radius:12px; border:1px solid var(--border); }
.feat-card i { font-size:1.6rem; color:var(--accent); margin-bottom:8px; display:block; }
.feat-card h3 { font-size:1rem; margin-bottom:6px; color:var(--primary-dark); }
.feat-card p { font-size:.88rem; color:var(--text-secondary); line-height:1.5; }
</style>

<script>
document.querySelectorAll('.installeer-tab').forEach(tab => {
    tab.addEventListener('click', () => {
        document.querySelectorAll('.installeer-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.installeer-content').forEach(c => c.style.display = 'none');
        tab.classList.add('active');
        document.getElementById('tab-' + tab.dataset.tab).style.display = 'block';
    });
});
// Auto-detect platform en switch tab
const ua = navigator.userAgent;
if (/iPad|iPhone|iPod/.test(ua)) document.querySelector('[data-tab="iphone"]').click();
else if (/Android/.test(ua)) document.querySelector('[data-tab="android"]').click();
</script>

<?php render_footer(); ?>
