<?php
/**
 * offerte-aanvragen.php — Multi-step wizard (stap voor stap, niet alles tegelijk)
 */
@include '/home/www.itlive.nl/public_html/subdomains/public/sites.itlive.nl/CLIENTS/preview-basepath.php';
require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/klanten-db.php';
require_once __DIR__ . '/includes/email-templates.php';

$_oa_kc_wz  = json_decode((string)@file_get_contents(__DIR__ . '/data/klant-config.json'), true) ?: [];
$_oa_wa_raw = preg_replace('/[^0-9]/', '', (string)($_oa_kc_wz['contact']['mobiel'] ?? '0623552389'));
$_oa_wa_intl = '31' . ltrim($_oa_wa_raw, '0');

$pre_van   = trim(htmlspecialchars($_GET['pcv']       ?? '', ENT_QUOTES, 'UTF-8'));
$pre_naar  = trim(htmlspecialchars($_GET['pcn']       ?? '', ENT_QUOTES, 'UTF-8'));
$pre_m3    = trim(htmlspecialchars($_GET['m3']        ?? '', ENT_QUOTES, 'UTF-8'));
$pre_prijs = trim(htmlspecialchars($_GET['indicatie'] ?? '', ENT_QUOTES, 'UTF-8'));
$pre_bron  = trim(htmlspecialchars($_GET['bron']      ?? 'website', ENT_QUOTES, 'UTF-8'));
$pre_km    = trim(htmlspecialchars($_GET['km']        ?? '', ENT_QUOTES, 'UTF-8'));

$form_sent  = false;
$form_error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['email'])) {
    $naam    = trim(($_POST['voornaam'] ?? '') . ' ' . ($_POST['achternaam'] ?? ''));
    $email   = trim($_POST['email']     ?? '');
    $tel     = trim($_POST['telefoon']  ?? '');
    $van     = trim($_POST['van_full']  ?? '');
    $naar    = trim($_POST['naar_full'] ?? '');
    $datum   = trim($_POST['datum']     ?? '');
    $dienst  = trim($_POST['dienst']    ?? '');
    $m3      = trim($_POST['m3']        ?? '');
    $prijs   = trim($_POST['indicatie'] ?? '');
    $bericht = trim($_POST['bericht']   ?? '');
    $bron    = trim($_POST['bron']      ?? 'offerte-aanvragen');
    $privacy = !empty($_POST['privacy']);

    if (!$email || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $form_error = IS_EN ? 'Please enter a valid email address.' : 'Vul een geldig e-mailadres in.';
    } elseif (!$privacy) {
        $form_error = IS_EN ? 'Please agree to the privacy policy.' : 'Ga akkoord met de privacyverklaring.';
    } else {
        $lead_id = lead_opslaan([
            'naam'           => trim($naam) ?: 'Onbekend',
            'email'          => $email,
            'telefoon'       => $tel,
            'verhuizen_van'  => $van,
            'verhuizen_naar' => $naar,
            'verhuisdatum'   => $datum ?: null,
            'bericht'        => ($dienst ? "Type: $dienst\n" : '') . ($m3 ? "Volume: {$m3}m³\nIndicatie: $prijs\n\n" : '') . $bericht,
            'bron'           => $bron,
        ]);
        if ($lead_id) {
            $to = defined('EMAIL') ? EMAIL : 'info@hetverhuizteam.com';
            $lead_data = [
                'id'             => $lead_id,
                'naam'           => trim($naam) ?: 'Onbekend',
                'email'          => $email,
                'telefoon'       => $tel,
                'dienst'         => $dienst,
                'verhuizen_van'  => $van,
                'verhuizen_naar' => $naar,
                'verhuisdatum'   => $datum,
                'bericht'        => ($prijs ? "Indicatie: $prijs\n" : '') . ($m3 ? "Volume: {$m3}m³\n" : '') . $bericht,
                'bron'           => $bron,
            ];
            // Spam-filter
            require_once __DIR__ . '/includes/lead-spam-filter.php';
            $lead_data['ip'] = $_SERVER['REMOTE_ADDR'] ?? '';
            $spam_check = lead_should_notify($lead_data);
            lead_log_decision((int)$lead_id, $spam_check);

            if ($spam_check['notify']) {
                if (function_exists('email_new_lead_admin') && function_exists('send_email')) {
                    $subject = "📦 Offerte-aanvraag van " . $lead_data['naam'] . ($van ? " ($van → $naar)" : '');
                    send_email($to, $subject, email_new_lead_admin($lead_data));
                    if (function_exists('email_new_lead_client')) {
                        send_email($email, 'Aanvraag ontvangen — Het Verhuizteam', email_new_lead_client($lead_data));
                    }
                } else {
                    $body = "Naam: {$lead_data['naam']}\nEmail: $email\nTel: $tel\nVan: $van\nNaar: $naar\nDatum: $datum\nType: $dienst\n" . ($prijs ? "Indicatie: $prijs\n" : '') . ($bericht ? "\n$bericht" : '');
                    $_oa_host = preg_replace('#^https?://(www\.)?#', '', (defined('SITE_URL') ? SITE_URL : 'hetverhuizteam.com'));
                    @mail($to, "Offerte van " . $lead_data['naam'], $body, "From: " . (defined('SITE_NAME') ? SITE_NAME : 'De Verhuizing') . " <noreply@{$_oa_host}>\r\nReply-To: $email\r\nContent-Type: text/plain; charset=UTF-8");
                }
            }
            $sub_dir = __DIR__ . '/data/form-submissions/offerte-aanvraag';
            if (!is_dir($sub_dir)) @mkdir($sub_dir, 0775, true);
            @file_put_contents($sub_dir . '/' . time() . '-' . uniqid() . '.json', json_encode(['submitted_at'=>date('Y-m-d H:i:s'),'data'=>compact('naam','email','tel','van','naar','datum','dienst','prijs','bericht')], JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE));
            $form_sent = true;
        } else {
            $form_error = IS_EN ? 'Something went wrong. Please call us.' : 'Er ging iets mis. Bel ons gerust.';
        }
    }
}

$pageTitle       = IS_EN ? 'Free Moving Quote — Het Verhuizteam' : 'Gratis Offerte Aanvragen — Het Verhuizteam';
$pageDescription = IS_EN ? 'Request a free moving quote in a few easy steps.' : 'Vraag stap voor stap een gratis offerte aan.';
$page_type  = 'other'; $page_slug = 'offerte-aanvragen';
require_once __DIR__ . '/includes/head.php';
require_once __DIR__ . '/includes/header.php';
$hero_title   = IS_EN ? 'Request a free quote' : 'Gratis offerte aanvragen';
$hero_subtitle = IS_EN ? 'A few quick questions and we\'ll get back to you within 24h.' : 'Enkele korte vragen en wij bellen u terug binnen 24 uur.';
$hero_compact = true;
require __DIR__ . '/includes/hero-slider.php';
?>
<style>
/* ── Wizard shell ───────────────────────────────────────── */
.wz-bg { background:#f1f5f9; padding:3rem 0 5rem; min-height:60vh; }
.wz-box { max-width:540px; margin:0 auto; padding:0 1rem; }

/* ── Progress bar (bovenaan) ─────────────────────────────── */
.wz-progress-wrap {
    margin-bottom:.75rem;
    background:#fff;
    border-radius:12px;
    padding:14px 16px 12px;
    box-shadow:0 2px 10px rgba(21,43,93,.07);
}
.wz-progress-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:8px;
}
.wz-progress-title {
    font-size:.75rem; font-weight:800; color:#152B5D;
    text-transform:uppercase; letter-spacing:.06em;
}
.wz-progress-counter {
    font-size:.75rem; font-weight:700; color:#64748b;
}
.wz-progress-bar-bg {
    height:6px; background:#e2e8f0; border-radius:99px; overflow:hidden;
}
.wz-progress-bar-fill {
    height:100%; background:linear-gradient(90deg,#F96706,#c45200);
    border-radius:99px;
    transition:width .4s cubic-bezier(.4,0,.2,1);
}

/* ── Social proof strip ──────────────────────────────────── */
.wz-social-proof {
    display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
    background:#fff; border-radius:10px;
    padding:10px 12px; margin-bottom:1rem;
    box-shadow:0 2px 8px rgba(21,43,93,.06);
}
.wz-sp-item {
    display:flex; align-items:center; gap:4px;
    font-size:.72rem; font-weight:700; color:#334155;
    white-space:nowrap;
}
.wz-sp-item .sp-check { color:#16a34a; }
.wz-sp-item .sp-star  { color:#F96706; }

/* Progress dots */
.wz-dots { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:1.25rem; }
.wz-dot { display:flex; flex-direction:column; align-items:center; gap:5px; }
.wz-dot-circle {
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:.85rem;
    background:#e2e8f0; color:#475569; /* WCAG AA: 5.3:1 op grijs (was 2.08:1) */
    border:2px solid transparent;
    transition:all .3s;
}
.wz-dot.active .wz-dot-circle {
    background:var(--primary,#152B5D); color:#fff;
    border-color:var(--primary,#152B5D);
    box-shadow:0 0 0 5px rgba(21,43,93,.15);
}
.wz-dot.done .wz-dot-circle { background:#16a34a; color:#fff; border-color:#16a34a; }
.wz-dot-lbl { font-size:.7rem; font-weight:700; color:#64748b; } /* WCAG AA op wit (was 3.0:1) */
.wz-dot.active .wz-dot-lbl, .wz-dot.done .wz-dot-lbl { color:#1e293b; }
.wz-dot-line { width:48px; height:2px; background:#e2e8f0; margin-bottom:20px; transition:.3s; }
.wz-dot-line.done { background:#16a34a; }

/* Card */
.wz-card {
    background:#fff; border-radius:20px;
    box-shadow:0 8px 36px rgba(11,43,93,.1);
    padding:2rem 2rem 1.75rem;
    animation:wzIn .22s ease both;
}
@keyframes wzIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

.wz-step-label {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--primary,#152B5D); color:#fff;
    font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
    padding:4px 12px; border-radius:99px; margin-bottom:.7rem;
}
.wz-title { font-size:1.3rem; font-weight:900; color:#0f172a; margin:0 0 .25rem; }
.wz-sub   { font-size:.87rem; color:#64748b; margin:0 0 1.5rem; line-height:1.5; }

/* Fields */
.wz-field { display:flex; flex-direction:column; gap:6px; margin-bottom:1rem; }
.wz-field:last-child { margin-bottom:0; }
.wz-label {
    font-size:.75rem; font-weight:800; color:#475569;
    text-transform:uppercase; letter-spacing:.06em;
    display:flex; align-items:center; gap:7px;
}
.wz-icon { width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:.68rem; flex-shrink:0; }
.ic-red   { background:#fee2e2; color:#dc2626; }
.ic-green { background:#dcfce7; color:#16a34a; }
.ic-blue  { background:#dbeafe; color:#2563eb; }
.ic-amber { background:#fef3c7; color:#d97706; }
.ic-purple{ background:#ede9fe; color:#7c3aed; }

.wz-input {
    width:100%; padding:13px 15px;
    border:1.5px solid #e2e8f0; border-radius:12px;
    font-size:.95rem; font-family:inherit;
    outline:none; box-sizing:border-box; background:#fff; color:#1e293b;
    transition:border-color .15s, box-shadow .15s;
}
.wz-input:focus { border-color:var(--primary,#152B5D); box-shadow:0 0 0 3px rgba(21,43,93,.1); }
.wz-input.err   { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.1); }
.wz-row2 { display:grid; grid-template-columns:1fr 90px; gap:10px; }

/* Type-keuze knoppen */
.wz-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.wz-choice {
    padding:12px 8px; border:1.5px solid #e2e8f0; border-radius:12px;
    background:#fff; font:700 .78rem/1.3 inherit; color:#475569;
    cursor:pointer; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    transition:all .15s;
}
.wz-choice i { font-size:1.2rem; margin-bottom:1px; }
.wz-choice:hover { border-color:var(--primary,#152B5D); color:var(--primary,#152B5D); background:#f0f4fb; }
.wz-choice.sel   { border-color:var(--primary,#152B5D); background:var(--primary,#152B5D); color:#fff; box-shadow:0 4px 14px rgba(21,43,93,.25); }

/* Etage knoppen */
.wz-etage { display:flex; flex-wrap:wrap; gap:8px; }
.wz-etage-btn {
    padding:8px 14px; border:1.5px solid #e2e8f0; border-radius:8px;
    background:#fff; font:700 .8rem/1 inherit; color:#475569;
    cursor:pointer; transition:all .15s;
}
.wz-etage-btn:hover { border-color:var(--primary,#152B5D); color:var(--primary,#152B5D); }
.wz-etage-btn.sel   { border-color:var(--primary,#152B5D); background:var(--primary,#152B5D); color:#fff; }

/* Route hint */
.wz-hint {
    background:#f0fdf4; border:1.5px solid #22c55e; border-radius:10px;
    padding:10px 14px; font-size:.84rem; color:#15803d; font-weight:600;
    display:flex; align-items:center; gap:8px; margin-top:4px;
}
.wz-hint-price { margin-left:auto; background:#dcfce7; color:#15803d; font-size:.78rem; padding:3px 10px; border-radius:99px; font-weight:700; }

/* Buttons */
.wz-btns { display:flex; gap:10px; margin-top:1.5rem; }
.wz-next {
    flex:1; padding:15px; border:none; border-radius:13px; cursor:pointer;
    background:var(--primary,#152B5D); color:#fff;
    font:800 1rem/1 inherit;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    box-shadow:0 4px 16px rgba(21,43,93,.28);
    transition:filter .15s, transform .15s;
}
.wz-next:hover { filter:brightness(1.1); transform:translateY(-1px); }
.wz-back {
    padding:15px 18px; border:none; border-radius:13px; cursor:pointer;
    background:#f1f5f9; color:#475569; font:700 .9rem/1 inherit;
    transition:background .15s;
}
.wz-back:hover { background:#e2e8f0; }
.wz-submit {
    flex:1; padding:16px; border:none; border-radius:13px; cursor:pointer;
    background:linear-gradient(135deg,var(--accent,#f1a62e),#e8921a);
    color:#fff; font:900 1.05rem/1 inherit;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    box-shadow:0 4px 20px rgba(241,166,46,.4);
    transition:filter .15s, transform .15s;
}
.wz-submit:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* Trust */
.wz-trust { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:1rem; }
.wz-trust span { font-size:.76rem; color:#64748b; display:flex; align-items:center; gap:4px; font-weight:600; }
.wz-trust i { color:var(--accent,#f1a62e); font-size:.72rem; }

/* WA strip */
.wz-wa { display:flex; gap:10px; margin-top:1rem; }
.wz-wa a { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border-radius:10px; font:700 .85rem/1 inherit; text-decoration:none; transition:.15s; }
.wz-wa a.g { background:#25d366; color:#fff; }
.wz-wa a.g:hover { background:#1db954; }
.wz-wa a.d { background:#0f172a; color:#fff; }
.wz-wa a.d:hover { background:#1e293b; }

/* Summary mini */
.wz-mini-sum { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:12px 14px; margin-bottom:1.25rem; font-size:.83rem; color:#475569; display:flex; flex-direction:column; gap:5px; }
.wz-mini-sum strong { color:#1e293b; }
.wz-mini-edit { font:.700 .76rem inherit; color:var(--primary,#152B5D); background:none; border:none; cursor:pointer; padding:0; margin-top:2px; }

/* Error */
.wz-err { background:#fef2f2; border:1.5px solid #fca5a5; border-radius:12px; padding:12px 15px; margin-bottom:1rem; color:#b91c1c; font:.700 .88rem inherit; display:flex; gap:6px; align-items:center; }

/* Success */
.wz-ok { text-align:center; padding:2.5rem 1.5rem; }
.wz-ok-icon { width:68px; height:68px; border-radius:50%; background:#dcfce7; display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin:0 auto 1rem; color:#16a34a; }
.wz-ok h2 { font-size:1.4rem; font-weight:900; color:#065f46; margin:0 0 .5rem; }
.wz-ok p  { color:#047857; font-size:.9rem; line-height:1.7; margin:0 0 1.25rem; }
.wz-ok-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.wz-ok-btns a { display:inline-flex; align-items:center; gap:5px; padding:11px 20px; border-radius:10px; font:700 .88rem inherit; text-decoration:none; }
</style>

<div class="wz-bg">
<div class="wz-box">

<?php if ($form_sent): ?>
<!-- ══ SUCCESS ══════════════════════════════════ -->
<?php /* Google Ads conversion: offerte aanvragen — labels uit customer_google_settings */ ?>
<?php if (!empty($__gtags['gads_id']) && !empty($__gtags['gads_lbl_offerte'])): ?>
<script>
  (function(){
    if (typeof gtag === 'function') {
      gtag('event','conversion',{'send_to':'<?= htmlspecialchars($__gtags['gads_id'].'/'.$__gtags['gads_lbl_offerte'], ENT_QUOTES) ?>','value':1.0,'currency':'EUR'});
    }
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({'event':'offerte_submitted'});
  })();
</script>
<?php endif; ?>
<div class="wz-card wz-ok">
  <div class="wz-ok-icon"><i class="fas fa-check"></i></div>
  <h2><?= IS_EN ? 'Request received!' : 'Aanvraag ontvangen!' ?></h2>
  <p><?= IS_EN ? 'Thank you! We\'ll personally contact you within 24 hours with a tailored quote.' : 'Dank u! Wij nemen binnen 24 uur persoonlijk contact op met een maatwerkofferte.' ?></p>
  <?php if ($pre_prijs): ?>
  <div style="display:inline-block;background:#fff7ed;border:2px solid var(--accent,#f1a62e);border-radius:12px;padding:11px 22px;font:.700 .9rem inherit;color:#92400e;margin-bottom:1.25rem">
    💶 <?= IS_EN ? 'Estimate' : 'Indicatie' ?>: <strong><?= $pre_prijs ?></strong>
  </div>
  <?php endif; ?>
  <div class="wz-ok-btns">
    <a href="<?= $rel_path ?>" style="background:var(--primary,#152B5D);color:#fff;min-height:44px;"><i class="fas fa-home"></i> Home</a>
    <a href="tel:<?= preg_replace('/[^0-9+]/', '', '+31' . ltrim(defined('PHONE') ? PHONE : '0707070341', '0')) ?>" style="background:#0a3974;color:#fff;min-height:44px;"><i class="fas fa-phone"></i> <?= esc(defined('PHONE') ? PHONE : '070 70 70 341') ?></a>
    <?php /* WhatsApp staat in floating bubble linksonder — niet dupliceren */ ?>
  </div>
</div>

<?php else: ?>

<!-- ══ SOCIAL PROOF STRIP ═══════════════════════ -->
<div class="wz-social-proof">
  <div class="wz-sp-item"><span class="sp-check">&#10003;</span> <?= IS_EN ? 'Response within 24h' : 'Reactie binnen 24u' ?></div>
  <div class="wz-sp-item"><span class="sp-check">&#10003;</span> <?= IS_EN ? 'Fully insured' : 'Volledig verzekerd' ?></div>
  <div class="wz-sp-item"><span class="sp-check">&#10003;</span> <?= IS_EN ? 'No hidden costs' : 'Geen verborgen kosten' ?></div>
  <div class="wz-sp-item"><span class="sp-star">&#9733;&#9733;&#9733;&#9733;&#9733;</span> <span>4.6 Google</span></div>
</div>

<!-- ══ PROGRESS BAR ══════════════════════════════ -->
<div class="wz-progress-wrap" id="wz-progress-wrap">
  <div class="wz-progress-header">
    <span class="wz-progress-title" id="wz-progress-label"><?= IS_EN ? 'Step 1 of 4 — From' : 'Stap 1 van 4 — Vertrekadres' ?></span>
    <span class="wz-progress-counter" id="wz-progress-pct">25%</span>
  </div>
  <div class="wz-progress-bar-bg">
    <div class="wz-progress-bar-fill" id="wz-progress-fill" style="width:25%"></div>
  </div>
</div>

<!-- ══ PROGRESS DOTS ════════════════════════════ -->
<div class="wz-dots" id="wzdots">
  <div class="wz-dot active" id="wd1">
    <div class="wz-dot-circle">1</div>
    <div class="wz-dot-lbl"><?= IS_EN ? 'From' : 'Van' ?></div>
  </div>
  <div class="wz-dot-line" id="wdl1"></div>
  <div class="wz-dot" id="wd2">
    <div class="wz-dot-circle">2</div>
    <div class="wz-dot-lbl"><?= IS_EN ? 'To' : 'Naar' ?></div>
  </div>
  <div class="wz-dot-line" id="wdl2"></div>
  <div class="wz-dot" id="wd3">
    <div class="wz-dot-circle">3</div>
    <div class="wz-dot-lbl"><?= IS_EN ? 'Type' : 'Type' ?></div>
  </div>
  <div class="wz-dot-line" id="wdl3"></div>
  <div class="wz-dot" id="wd4">
    <div class="wz-dot-circle">4</div>
    <div class="wz-dot-lbl"><?= IS_EN ? 'Details' : 'Gegevens' ?></div>
  </div>
</div>

<?php if ($form_error): ?>
<div class="wz-err"><i class="fas fa-exclamation-circle"></i> <?= $form_error ?></div>
<?php endif; ?>

<form action="" method="post" novalidate id="wz-form">
  <input type="hidden" name="bron"      value="<?= $pre_bron ?: 'offerte-aanvragen' ?>">
  <input type="hidden" name="indicatie" id="wz-indicatie" value="<?= $pre_prijs ?>">
  <input type="hidden" name="m3"        value="<?= $pre_m3 ?>">
  <input type="hidden" name="van_full"  id="wz-van-full"  value="">
  <input type="hidden" name="naar_full" id="wz-naar-full" value="">
  <input type="hidden" name="dienst"    id="wz-dienst"    value="">
  <input type="hidden" name="van_etage" id="wz-van-etage"    value="">
  <input type="hidden" name="naar_etage" id="wz-naar-etage"  value="">

  <!-- ══ STAP 1: Van ══════════════════════════════════ -->
  <div id="wz-s1" class="wz-card">
    <div class="wz-step-label"><i class="fas fa-home"></i> <?= IS_EN ? 'Step 1 of 4' : 'Stap 1 van 4' ?></div>
    <div class="wz-title"><?= IS_EN ? 'Where are you moving from?' : 'Waar verhuist u vandaan?' ?></div>
    <div class="wz-sub"><?= IS_EN ? 'Enter your current address.' : 'Vul uw huidige adres in.' ?></div>

    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-red"><i class="fas fa-map-pin"></i></span><?= IS_EN ? 'Postcode *' : 'Postcode *' ?></label>
      <div class="wz-row2">
        <input type="text" id="s1-pc" class="wz-input" placeholder="1234 AB" maxlength="7" autocomplete="postal-code">
        <input type="text" id="s1-hn" class="wz-input" placeholder="12A" maxlength="10">
      </div>
      <div id="s1-hint" style="display:none" class="wz-hint">
        <i class="fas fa-check-circle"></i> <span id="s1-hint-txt"></span>
      </div>
      <!-- BAG 3D viewer stap 1 -->
      <div id="s1-bag3d" style="display:none;margin-top:10px;border-radius:12px;overflow:hidden;border:1px solid #E2E8F0;background:#f0f4f8">
        <div id="s1-bag3d-inner" style="position:relative;height:180px">
          <canvas id="s1-bag-canvas" style="width:100%;height:180px;display:block"></canvas>
          <div id="s1-bag-label" style="position:absolute;bottom:8px;left:10px;background:rgba(21,43,93,.75);color:#fff;font-size:11px;padding:3px 8px;border-radius:6px;backdrop-filter:blur(4px)"></div>
          <div style="position:absolute;top:8px;right:10px;background:rgba(21,43,93,.75);color:#fff;font-size:10px;padding:2px 7px;border-radius:6px;backdrop-filter:blur(4px)"><i class="fas fa-cube" style="margin-right:3px"></i>3D BAG</div>
        </div>
      </div>
    </div>

    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-blue"><i class="fas fa-building"></i></span><?= IS_EN ? 'Property type' : 'Woningtype' ?></label>
      <div class="wz-choices" id="s1-types">
        <?php foreach ([['fas fa-building','Appartement'],['fas fa-home','Tussenwoning'],['fas fa-house','Hoekwoning'],['fas fa-house-chimney','Vrijstaand'],['fas fa-store','Bedrijfspand'],['fas fa-warehouse','Overig']] as [$ico,$lbl]): ?>
        <button type="button" class="wz-choice" data-val="<?= $lbl ?>" onclick="wzPickType('s1-types','s1-type-val',this)">
          <i class="<?= $ico ?>"></i> <?= $lbl ?>
        </button>
        <?php endforeach; ?>
      </div>
      <input type="hidden" id="s1-type-val" name="van_type" value="">
    </div>

    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-amber"><i class="fas fa-stairs"></i></span><?= IS_EN ? 'Floor' : 'Etage' ?></label>
      <div class="wz-etage" id="s1-etage">
        <?php foreach (['Begane grond','1e etage','2e etage','3e etage','4e+'] as $e): ?>
        <button type="button" class="wz-etage-btn" data-val="<?= $e ?>" onclick="wzPickEtage('s1-etage','wz-van-etage',this)"><?= $e ?></button>
        <?php endforeach; ?>
      </div>
    </div>

    <div class="wz-btns">
      <button type="button" class="wz-next" onclick="wzGo(1)">
        <?= IS_EN ? 'Continue' : 'Volgende' ?> <i class="fas fa-arrow-right"></i>
      </button>
    </div>
    <div class="wz-trust">
      <span><i class="fas fa-lock"></i> <?= IS_EN ? 'Secure' : 'Veilig' ?></span>
      <span><i class="fas fa-clock"></i> <?= IS_EN ? 'Reply within 24h' : 'Reactie binnen 24u' ?></span>
      <span><i class="fas fa-check"></i> <?= IS_EN ? 'Non-binding' : 'Vrijblijvend' ?></span>
      <span><i class="fas fa-star" style="color:var(--accent,#f1a62e)"></i> 4.6 Google</span>
    </div>
  </div>

  <!-- ══ STAP 2: Naar ════════════════════════════════ -->
  <div id="wz-s2" class="wz-card" style="display:none">
    <div class="wz-step-label"><i class="fas fa-flag-checkered"></i> <?= IS_EN ? 'Step 2 of 4' : 'Stap 2 van 4' ?></div>
    <div class="wz-title"><?= IS_EN ? 'Where are you moving to?' : 'Waar verhuist u naartoe?' ?></div>
    <div class="wz-sub"><?= IS_EN ? 'Enter your new address.' : 'Vul uw nieuwe adres in.' ?></div>

    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-green"><i class="fas fa-map-pin"></i></span><?= IS_EN ? 'Postcode *' : 'Postcode *' ?></label>
      <div class="wz-row2">
        <input type="text" id="s2-pc" class="wz-input" placeholder="5678 CD" maxlength="7" autocomplete="off">
        <input type="text" id="s2-hn" class="wz-input" placeholder="34" maxlength="10">
      </div>
      <div id="s2-hint" style="display:none" class="wz-hint">
        <i class="fas fa-check-circle"></i> <span id="s2-hint-txt"></span>
        <span class="wz-hint-price" id="s2-prijs-badge" style="display:none"></span>
      </div>
      <!-- BAG 3D viewer stap 2 -->
      <div id="s2-bag3d" style="display:none;margin-top:10px;border-radius:12px;overflow:hidden;border:1px solid #E2E8F0;background:#f0f4f8">
        <div id="s2-bag3d-inner" style="position:relative;height:180px">
          <canvas id="s2-bag-canvas" style="width:100%;height:180px;display:block"></canvas>
          <div id="s2-bag-label" style="position:absolute;bottom:8px;left:10px;background:rgba(21,43,93,.75);color:#fff;font-size:11px;padding:3px 8px;border-radius:6px;backdrop-filter:blur(4px)"></div>
          <div style="position:absolute;top:8px;right:10px;background:rgba(21,43,93,.75);color:#fff;font-size:10px;padding:2px 7px;border-radius:6px;backdrop-filter:blur(4px)"><i class="fas fa-cube" style="margin-right:3px"></i>3D BAG</div>
        </div>
      </div>
    </div>

    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-blue"><i class="fas fa-building"></i></span><?= IS_EN ? 'Property type' : 'Woningtype' ?></label>
      <div class="wz-choices" id="s2-types">
        <?php foreach ([['fas fa-building','Appartement'],['fas fa-home','Tussenwoning'],['fas fa-house','Hoekwoning'],['fas fa-house-chimney','Vrijstaand'],['fas fa-store','Bedrijfspand'],['fas fa-warehouse','Overig']] as [$ico,$lbl]): ?>
        <button type="button" class="wz-choice" data-val="<?= $lbl ?>" onclick="wzPickType('s2-types','s2-type-val',this)">
          <i class="<?= $ico ?>"></i> <?= $lbl ?>
        </button>
        <?php endforeach; ?>
      </div>
      <input type="hidden" id="s2-type-val" name="naar_type" value="">
    </div>

    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-amber"><i class="fas fa-stairs"></i></span><?= IS_EN ? 'Floor' : 'Etage' ?></label>
      <div class="wz-etage" id="s2-etage">
        <?php foreach (['Begane grond','1e etage','2e etage','3e etage','4e+'] as $e): ?>
        <button type="button" class="wz-etage-btn" data-val="<?= $e ?>" onclick="wzPickEtage('s2-etage','wz-naar-etage',this)"><?= $e ?></button>
        <?php endforeach; ?>
      </div>
    </div>

    <div class="wz-btns">
      <button type="button" class="wz-back" onclick="wzBack(2)"><i class="fas fa-arrow-left"></i></button>
      <button type="button" class="wz-next" onclick="wzGo(2)">
        <?= IS_EN ? 'Continue' : 'Volgende' ?> <i class="fas fa-arrow-right"></i>
      </button>
    </div>
  </div>

  <!-- ══ STAP 3: Type + Datum ════════════════════════ -->
  <div id="wz-s3" class="wz-card" style="display:none">
    <div class="wz-step-label"><i class="fas fa-truck"></i> <?= IS_EN ? 'Step 3 of 4' : 'Stap 3 van 4' ?></div>
    <div class="wz-title"><?= IS_EN ? 'Type of move & date' : 'Type verhuizing & datum' ?></div>
    <div class="wz-sub"><?= IS_EN ? 'What type of move and when?' : 'Welk type verhuizing en wanneer?' ?></div>

    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-purple"><i class="fas fa-tags"></i></span><?= IS_EN ? 'Type of move' : 'Type verhuizing' ?></label>
      <div class="wz-choices" id="s3-dienst" style="grid-template-columns:1fr 1fr 1fr">
        <?php
        $dienst_pairs = IS_EN
          ? [['fas fa-couch','Residential'],['fas fa-briefcase','Commercial'],['fas fa-globe','International'],['fas fa-box-open','Packing only'],['fas fa-piano','Piano/heavy'],['fas fa-boxes-stacked','Storage']]
          : [['fas fa-couch','Particulier'],['fas fa-briefcase','Zakelijk'],['fas fa-globe','Internationaal'],['fas fa-box-open','Alleen inpakken'],['fas fa-piano','Piano/zwaar'],['fas fa-boxes-stacked','Opslag']];
        foreach ($dienst_pairs as [$ico,$lbl]): ?>
        <button type="button" class="wz-choice" data-val="<?= $lbl ?>" onclick="wzPickType('s3-dienst','wz-dienst',this)">
          <i class="<?= $ico ?>"></i> <?= $lbl ?>
        </button>
        <?php endforeach; ?>
      </div>
    </div>

    <!-- ── Conditionele extra vragen (tonen op basis van gekozen dienst) ── -->
    <!-- Piano/heavy -->
    <div id="cond-piano" class="wz-field wz-cond" style="display:none">
      <label class="wz-label"><span class="wz-icon ic-amber"><i class="fas fa-piano"></i></span><?= IS_EN ? 'Piano / heavy item type' : 'Type piano / zwaar object' ?></label>
      <div class="wz-choices" style="grid-template-columns:1fr 1fr 1fr" id="piano-type-group">
        <?php foreach (IS_EN ? ['Upright piano','Grand piano','Safe','Other heavy'] : ['Staande piano','Vleugel','Kluis','Anders zwaar'] as $pt): ?>
        <button type="button" class="wz-choice" data-val="<?= $pt ?>" onclick="wzPickType('piano-type-group','wz-piano-type',this)"><i class="fas fa-piano"></i> <?= $pt ?></button>
        <?php endforeach; ?>
      </div>
      <input type="hidden" name="piano_type" id="wz-piano-type" value="">
      <div class="wz-row2" style="margin-top:10px">
        <input type="number" name="piano_etage_van" id="wz-piano-ev" class="wz-input" placeholder="<?= IS_EN ? 'Floor from' : 'Etage van' ?>" min="0" max="10">
        <input type="number" name="piano_etage_naar" id="wz-piano-en" class="wz-input" placeholder="<?= IS_EN ? 'Floor to' : 'Etage naar' ?>" min="0" max="10">
      </div>
      <div class="wa-help" style="font-size:.8rem;color:#64748b;margin-top:6px"><i class="fas fa-info-circle"></i> <?= IS_EN ? 'A specialist piano crew will be assigned.' : 'Er wordt een gespecialiseerd pianoteam ingepland.' ?></div>
    </div>

    <!-- Opslag -->
    <div id="cond-opslag" class="wz-field wz-cond" style="display:none">
      <label class="wz-label"><span class="wz-icon ic-blue"><i class="fas fa-boxes-stacked"></i></span><?= IS_EN ? 'Storage duration' : 'Opslagperiode' ?></label>
      <div class="wz-choices" style="grid-template-columns:1fr 1fr" id="opslag-periode-group">
        <?php foreach (IS_EN ? ['< 1 month','1–3 months','3–6 months','6+ months'] : ['< 1 maand','1–3 maanden','3–6 maanden','6+ maanden'] as $op): ?>
        <button type="button" class="wz-choice" data-val="<?= $op ?>" onclick="wzPickType('opslag-periode-group','wz-opslag-periode',this)"><i class="fas fa-clock"></i> <?= $op ?></button>
        <?php endforeach; ?>
      </div>
      <input type="hidden" name="opslag_periode" id="wz-opslag-periode" value="">
      <div class="wa-help" style="font-size:.8rem;color:#64748b;margin-top:6px"><i class="fas fa-shield-alt"></i> <?= IS_EN ? '24/7 secured, climate-controlled storage. From €99/month.' : 'Klimaatgecontroleerde, 24/7 beveiligde opslag. Vanaf €99/mnd.' ?></div>
    </div>

    <!-- Internationaal -->
    <div id="cond-int" class="wz-field wz-cond" style="display:none">
      <label class="wz-label"><span class="wz-icon ic-green"><i class="fas fa-globe"></i></span><?= IS_EN ? 'Destination country' : 'Bestemmingsland' ?></label>
      <select name="internationaal_land" id="wz-int-land" class="wz-input">
        <option value=""><?= IS_EN ? '— Select country —' : '— Kies land —' ?></option>
        <?php foreach (['Duitsland','België','Frankrijk','Spanje','Italië','VK','Portugal','Zwitserland','Oostenrijk','Anders'] as $land): ?>
        <option value="<?= $land ?>"><?= $land ?></option>
        <?php endforeach; ?>
      </select>
      <div class="wz-field" style="margin-top:10px">
        <label class="wz-label" style="font-size:.82rem;font-weight:600;color:#64748b"><?= IS_EN ? 'Destination postcode / city' : 'Postcode / stad bestemming' ?></label>
        <input type="text" name="int_bestemming" class="wz-input" placeholder="<?= IS_EN ? 'e.g. Berlin 10115' : 'bv. Berlin 10115' ?>">
      </div>
    </div>

    <!-- Inpakken -->
    <div id="cond-inpak" class="wz-field wz-cond" style="display:none">
      <label class="wz-label"><span class="wz-icon ic-amber"><i class="fas fa-box-open"></i></span><?= IS_EN ? 'Packing requirements' : 'Inpakwensen' ?></label>
      <div class="wz-choices" style="grid-template-columns:1fr 1fr" id="inpak-group">
        <?php foreach (IS_EN ? ['Full packing','Fragile only','Unpacking too','Boxes only'] : ['Volledig inpakken','Alleen breekbaar','Ook uitpakken','Alleen dozen'] as $ip): ?>
        <button type="button" class="wz-choice" data-val="<?= $ip ?>" onclick="wzPickType('inpak-group','wz-inpak',this)"><i class="fas fa-box"></i> <?= $ip ?></button>
        <?php endforeach; ?>
      </div>
      <input type="hidden" name="inpak_wens" id="wz-inpak" value="">
    </div>

    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-blue"><i class="far fa-calendar"></i></span><?= IS_EN ? 'Preferred moving date' : 'Gewenste verhuisdatum' ?></label>
      <input type="date" name="datum" id="s3-datum" class="wz-input"
             min="<?= date('Y-m-d', strtotime('+1 day')) ?>"
             value="<?= htmlspecialchars($_POST['datum'] ?? '', ENT_QUOTES) ?>">
    </div>

    <div class="wz-btns">
      <button type="button" class="wz-back" onclick="wzBack(3)"><i class="fas fa-arrow-left"></i></button>
      <button type="button" class="wz-next" onclick="wzGo(3)">
        <?= IS_EN ? 'Continue' : 'Volgende' ?> <i class="fas fa-arrow-right"></i>
      </button>
    </div>
  </div>

  <!-- ══ STAP 4: Gegevens + Versturen ══════════════ -->
  <div id="wz-s4" class="wz-card" style="display:none">
    <div class="wz-step-label"><i class="fas fa-paper-plane"></i> <?= IS_EN ? 'Step 4 of 4' : 'Stap 4 van 4' ?></div>
    <div class="wz-title"><?= IS_EN ? 'Almost done!' : 'Bijna klaar!' ?></div>
    <div class="wz-sub"><?= IS_EN ? 'Where should we send your quote?' : 'Naar wie sturen wij de offerte?' ?></div>

    <!-- Mini samenvatting -->
    <div class="wz-mini-sum" id="wz-sum">
      <div id="wz-sum-route" style="font-weight:700;color:var(--primary,#152B5D)"></div>
      <div id="wz-sum-extra" style="color:#64748b"></div>
      <button type="button" class="wz-mini-edit" onclick="wzGoto(1)"><i class="fas fa-pencil-alt"></i> <?= IS_EN ? 'Edit' : 'Wijzigen' ?></button>
    </div>

    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-blue"><i class="fas fa-user"></i></span><?= IS_EN ? 'First name *' : 'Voornaam *' ?></label>
      <input type="text" name="voornaam" id="wz-voornaam" class="wz-input"
             placeholder="Jan" value="<?= htmlspecialchars($_POST['voornaam'] ?? '', ENT_QUOTES) ?>" autocomplete="given-name">
    </div>
    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-blue"><i class="fas fa-user"></i></span><?= IS_EN ? 'Last name *' : 'Achternaam *' ?></label>
      <input type="text" name="achternaam" id="wz-achternaam" class="wz-input"
             placeholder="de Vries" value="<?= htmlspecialchars($_POST['achternaam'] ?? '', ENT_QUOTES) ?>" autocomplete="family-name">
    </div>
    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-red"><i class="fas fa-envelope"></i></span><?= IS_EN ? 'Email *' : 'E-mailadres *' ?></label>
      <input type="email" name="email" id="wz-email" class="wz-input"
             placeholder="<?= IS_EN ? 'your@email.com' : 'uw@email.nl' ?>"
             value="<?= htmlspecialchars($_POST['email'] ?? '', ENT_QUOTES) ?>" autocomplete="email">
    </div>
    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-green"><i class="fas fa-phone"></i></span><?= IS_EN ? 'Phone *' : 'Telefoon *' ?></label>
      <input type="tel" name="telefoon" id="wz-tel" class="wz-input"
             placeholder="06 12 34 56 78"
             value="<?= htmlspecialchars($_POST['telefoon'] ?? '', ENT_QUOTES) ?>" autocomplete="tel">
    </div>
    <div class="wz-field">
      <label class="wz-label"><span class="wz-icon ic-amber"><i class="fas fa-comment"></i></span><?= IS_EN ? 'Extra wishes (optional)' : 'Extra wensen (optioneel)' ?></label>
      <textarea name="bericht" class="wz-input" rows="3"
                placeholder="<?= IS_EN ? 'Piano, safe, packing service, fragile items...' : 'Piano, kluis, inpakservice, breekbaar...' ?>"><?= htmlspecialchars($_POST['bericht'] ?? '', ENT_QUOTES) ?></textarea>
    </div>
    <div class="wz-field">
      <label style="display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.87rem;color:#475569;font-weight:600;line-height:1.5">
        <input type="checkbox" name="privacy" value="1" style="margin-top:2px;flex-shrink:0;accent-color:var(--primary,#152B5D);width:16px;height:16px" <?= !empty($_POST['privacy'])?'checked':'' ?> required>
        <span><?= IS_EN ? 'I agree to the <a href="' . $rel_path . 'privacy" target="_blank" style="color:var(--primary,#152B5D);font-weight:700">privacy policy</a>.' : 'Ik ga akkoord met de <a href="' . $rel_path . 'privacy" target="_blank" style="color:var(--primary,#152B5D);font-weight:700">privacyverklaring</a>.' ?> *</span>
      </label>
    </div>

    <div class="wz-btns">
      <button type="button" class="wz-back" onclick="wzBack(4)"><i class="fas fa-arrow-left"></i></button>
      <button type="submit" class="wz-submit">
        <i class="fas fa-paper-plane"></i> <?= IS_EN ? 'Request my quote' : 'Stuur mijn offerte' ?>
      </button>
    </div>
    <div class="wz-wa" style="margin-top:1rem">
      <a href="https://wa.me/<?= esc($_oa_wa_intl) ?>" id="wz-wa-link" class="g" target="_blank"><i class="fab fa-whatsapp"></i> WhatsApp</a>
      <a href="tel:<?= preg_replace('/[^0-9+]/', '', '+31' . ltrim(defined('PHONE') ? PHONE : '0707070341', '0')) ?>" class="d"><i class="fas fa-phone"></i> <?= esc(defined('PHONE') ? PHONE : '070 70 70 341') ?></a>
    </div>
    <p style="text-align:center;font-size:.73rem;color:#94a3b8;margin-top:.75rem">
      <?= IS_EN ? 'No spam · Non-binding · Personal response within 24h' : 'Geen spam · Vrijblijvend · Antwoord binnen 24u' ?>
    </p>
  </div>

</form>
<?php endif; ?>
</div><!-- /.wz-box -->
</div><!-- /.wz-bg -->

<script>
var WZ_CUR = 1;
var WZ_TOTAL = 4;
var wzVanAdres = '', wzNaarAdres = '', wzRouteKm = 0;
var WZ_IS_EN = <?= IS_EN ? 'true' : 'false' ?>;

// Progress update
function wzDots(step) {
  for (var i = 1; i <= WZ_TOTAL; i++) {
    var d = document.getElementById('wd' + i);
    var num = d.querySelector('.wz-dot-circle');
    d.className = 'wz-dot' + (i === step ? ' active' : (i < step ? ' done' : ''));
    num.textContent = i < step ? '✓' : i;
    var line = document.getElementById('wdl' + i);
    if (line) line.className = 'wz-dot-line' + (i < step ? ' done' : '');
  }
}

// Progress bar stap-labels
var WZ_STEP_LABELS_NL = ['', 'Vertrekadres', 'Bestemmingsadres', 'Type &amp; datum', 'Uw gegevens'];
var WZ_STEP_LABELS_EN = ['', 'From', 'To', 'Type &amp; date', 'Your details'];

function wzUpdateProgressBar(step) {
  var pct = Math.round((step / WZ_TOTAL) * 100);
  var fill = document.getElementById('wz-progress-fill');
  var lbl  = document.getElementById('wz-progress-label');
  var pctEl = document.getElementById('wz-progress-pct');
  if (fill) fill.style.width = pct + '%';
  if (pctEl) pctEl.textContent = pct + '%';
  if (lbl) {
    var labels = WZ_IS_EN ? WZ_STEP_LABELS_EN : WZ_STEP_LABELS_NL;
    var stepLbl = labels[step] || '';
    lbl.innerHTML = (WZ_IS_EN ? 'Step ' : 'Stap ') + step + ' van ' + WZ_TOTAL
      + (stepLbl ? ' — ' + stepLbl : '');
  }
}

function wzShow(step) {
  for (var i = 1; i <= WZ_TOTAL; i++) {
    var p = document.getElementById('wz-s' + i);
    if (p) p.style.display = (i === step) ? '' : 'none';
  }
  WZ_CUR = step;
  wzDots(step);
  wzUpdateProgressBar(step);
  window.scrollTo({ top: document.querySelector('.wz-progress-wrap').getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
}

function wzGoto(step) { wzShow(step); }

function wzBack(from) { wzShow(from - 1); }

function wzGo(from) {
  if (from === 1) {
    var pc = document.getElementById('s1-pc');
    if (!pc.value.trim()) { pc.classList.add('err'); pc.focus(); return; }
    // Zet van-full
    var hn = document.getElementById('s1-hn').value.trim();
    wzVanAdres = wzVanAdres || (pc.value.trim() + (hn ? ' ' + hn : ''));
    document.getElementById('wz-van-full').value = wzVanAdres;
    wzShow(2);
    return;
  }
  if (from === 2) {
    var pc2 = document.getElementById('s2-pc');
    if (!pc2.value.trim()) { pc2.classList.add('err'); pc2.focus(); return; }
    var hn2 = document.getElementById('s2-hn').value.trim();
    wzNaarAdres = wzNaarAdres || (pc2.value.trim() + (hn2 ? ' ' + hn2 : ''));
    document.getElementById('wz-naar-full').value = wzNaarAdres;
    wzShow(3);
    return;
  }
  if (from === 3) {
    // Vul samenvatting stap 4
    var sumRoute = document.getElementById('wz-sum-route');
    var sumExtra = document.getElementById('wz-sum-extra');
    var routeTxt = (WZ_IS_EN ? 'From ' : 'Van ') + wzVanAdres + ' → ' + wzNaarAdres;
    if (wzRouteKm > 0) routeTxt += ' · ' + wzRouteKm + ' km';
    sumRoute.textContent = routeTxt;
    var dienst = document.getElementById('wz-dienst').value;
    var datum  = document.getElementById('s3-datum').value;
    var parts  = [];
    if (dienst) parts.push(dienst);
    if (datum)  parts.push(datum);
    sumExtra.textContent = parts.join(' · ');

    // Update WA link
    var wa = document.getElementById('wz-wa-link');
    if (wa) {
      var waMsg = (WZ_IS_EN ? 'Hello, I would like a quote.\nFrom: ' : 'Hallo, ik wil een offerte.\nVan: ')
        + wzVanAdres + '\n' + (WZ_IS_EN ? 'To: ' : 'Naar: ') + wzNaarAdres + '\n';
      if (dienst) waMsg += (WZ_IS_EN ? 'Type: ' : 'Type: ') + dienst + '\n';
      wa.href = 'https://wa.me/<?= esc($_oa_wa_intl) ?>?text=' + encodeURIComponent(waMsg);
    }

    wzShow(4);
    return;
  }
}

// Type keuze knoppen
function wzPickType(groupId, hiddenId, btn) {
  document.querySelectorAll('#' + groupId + ' .wz-choice').forEach(function(b){ b.classList.remove('sel'); });
  btn.classList.add('sel');
  document.getElementById(hiddenId).value = btn.dataset.val;
  // Conditionele logica op dienst-kiezer
  if (groupId === 's3-dienst') wzShowDienstCond(btn.dataset.val);
}

function wzShowDienstCond(val) {
  var v = (val || '').toLowerCase();
  var isPiano   = /piano|zwaar|heavy|safe|kluis/i.test(v);
  var isOpslag  = /opslag|storage/i.test(v);
  var isInt     = /intern|international/i.test(v);
  var isInpak   = /inpak|packing/i.test(v);
  document.querySelectorAll('.wz-cond').forEach(function(el){ el.style.display='none'; el.querySelectorAll('input,select').forEach(function(i){ i.required=false; }); });
  if (isPiano)  { var el=document.getElementById('cond-piano');  if(el){el.style.display='';} }
  if (isOpslag) { var el=document.getElementById('cond-opslag'); if(el){el.style.display='';} }
  if (isInt)    { var el=document.getElementById('cond-int');    if(el){el.style.display='';} }
  if (isInpak)  { var el=document.getElementById('cond-inpak'); if(el){el.style.display='';} }
}

// Etage knoppen
function wzPickEtage(groupId, hiddenId, btn) {
  document.querySelectorAll('#' + groupId + ' .wz-etage-btn').forEach(function(b){ b.classList.remove('sel'); });
  btn.classList.add('sel');
  document.getElementById(hiddenId).value = btn.dataset.val;
}

// Fout-class verwijderen bij typen
document.querySelectorAll('.wz-input').forEach(function(el) {
  el.addEventListener('input', function() { this.classList.remove('err'); });
});

// PDOK lookup
function pdokLookup(pc, hn, hintId, hintTxtId, fullId, callback) {
  var q = pc.replace(/\s/g,'').toUpperCase() + (hn ? ' ' + hn : '');
  if (q.length < 6) return;
  fetch('https://api.pdok.nl/bzk/locatieserver/search/v3_1/free?q=' + encodeURIComponent(q) + '&fq=type:adres&rows=1&fl=weergavenaam,centroide_ll,nummeraanduiding_id,adresseerbaarobject_id', {
    headers: {'Accept':'application/json','User-Agent':'DV/1.0'}
  }).then(function(r){ return r.json(); }).then(function(d) {
    var doc = d && d.response && d.response.docs && d.response.docs[0];
    if (!doc) return;
    var naam = doc.weergavenaam || '';
    if (!naam) return;
    document.getElementById(hintTxtId).textContent = naam;
    document.getElementById(hintId).style.display = 'flex';
    if (fullId) document.getElementById(fullId).value = naam;
    var lat = null, lng = null;
    if (doc.centroide_ll) {
      var m = doc.centroide_ll.match(/POINT\(([^ ]+) ([^)]+)\)/);
      if (m) { lat = parseFloat(m[2]); lng = parseFloat(m[1]); }
    }
    if (callback && lat !== null) callback(lat, lng);
    var step = hintId === 's1-hint' ? 's1' : 's2';
    var naId = doc.nummeraanduiding_id || null;
    if (naId && lat !== null) {
      bag3dShowFromNaId(step, naId, lat, lng, naam);
    } else if (lat !== null) {
      bag3dFallback(step, naam);
    }
    wzTryRoute();
  }).catch(function(){});
}

// ── BAG 3D Viewer ──────────────────────────────────────────────────────────
// 2-step: (1) verblijfsobject WFS -> pandidentificatie, (2) 3DBAG CityJSON -> render
function bag3dShowFromNaId(step, naId, lat, lng, naam) {
  var wfsUrl = 'https://service.pdok.nl/lv/bag/wfs/v2_0?service=WFS&version=2.0.0&request=GetFeature'
    + '&typeName=bag:verblijfsobject&outputFormat=application/json'
    + '&CQL_FILTER=nummeraanduidingid%3D%27' + naId + '%27&srsName=EPSG:4326&count=1';
  fetch(wfsUrl, { headers: {'Accept':'application/json'} })
    .then(function(r){ return r.json(); })
    .then(function(d) {
      var feat = d && d.features && d.features[0];
      var pandId = feat && feat.properties && feat.properties.pandidentificatie;
      if (pandId) bag3dFetchCityJSON(step, pandId, naam);
      else bag3dFallback(step, naam);
    }).catch(function(){ bag3dFallback(step, naam); });
}

function bag3dFetchCityJSON(step, pandId, naam) {
  fetch('https://api.3dbag.nl/collections/pand/items/NL.IMBAG.Pand.' + pandId)
    .then(function(r){ return r.json(); })
    .then(function(data) {
      var feature = data && data.feature;
      if (!feature) { bag3dFallback(step, naam); return; }
      var cityObjs = feature.CityObjects;
      var transform = feature.transform || { scale:[1,1,1], translate:[0,0,0] };
      var verts = feature.vertices || [];
      var sc = transform.scale; var tr = transform.translate;
      var bldKey = null;
      Object.keys(cityObjs).forEach(function(k){ if(cityObjs[k].type==='Building') bldKey=k; });
      if (!bldKey) { bag3dFallback(step, naam); return; }
      var bld = cityObjs[bldKey];
      var h = (bld.attributes && bld.attributes.b3_h_dak_50p) ? bld.attributes.b3_h_dak_50p : 8;
      var bj = bld.attributes && bld.attributes.oorspronkelijkbouwjaar ? bld.attributes.oorspronkelijkbouwjaar : null;
      var lod0 = bld.geometry && bld.geometry.find(function(g){ return g.lod==='0'; });
      if (!lod0 || !lod0.boundaries) { bag3dFallback(step, naam); return; }
      var idxList = lod0.boundaries[0] && lod0.boundaries[0][0];
      if (!idxList) { bag3dFallback(step, naam); return; }
      var ring = [];
      idxList.forEach(function(idx) {
        var v = verts[idx];
        if (!v) return;
        var x = v[0] * sc[0] + tr[0];
        var y = v[1] * sc[1] + tr[1];
        var dx = (x - 155000) / 111320;
        var dy = (y - 463000) / 111320;
        var wgsLng = 5.38720621 + dx / Math.cos(52.15517440 * Math.PI/180);
        var wgsLat = 52.15517440 + dy;
        ring.push([wgsLng, wgsLat]);
      });
      if (ring.length < 3) { bag3dFallback(step, naam); return; }
      bag3dRender(step, ring, h, naam, bj);
    }).catch(function(){ bag3dFallback(step, naam); });
}

function bag3dFallback(step, naam) { bag3dRender(step, null, 8, naam, null); }

function bag3dRender(step, ring, height, naam, bouwjaar) {
  var container = document.getElementById(step + '-bag3d');
  var canvas    = document.getElementById(step + '-bag-canvas');
  var label     = document.getElementById(step + '-bag-label');
  if (!container || !canvas) return;
  container.style.display = 'block';
  var W = canvas.offsetWidth || 320; var H = 180;
  canvas.width = W; canvas.height = H;
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, W, H);
  var sky = ctx.createLinearGradient(0, 0, 0, H);
  sky.addColorStop(0, '#dbeafe'); sky.addColorStop(1, '#eff6ff');
  ctx.fillStyle = sky; ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = '#cbd5e1'; ctx.fillRect(0, H-28, W, 28);
  if (!ring || ring.length < 3) bag3dGenericHouse(ctx, W, H, height);
  else bag3dIso(ctx, W, H, ring, height);
  var txt = naam.split(',')[0];
  if (bouwjaar) txt += ' · ' + bouwjaar;
  if (height > 0) txt += ' · ~' + Math.round(height) + 'm';
  label.textContent = txt;
}

function bag3dIso(ctx, W, H, ring, h) {
  var minX=Infinity,maxX=-Infinity,minY=Infinity,maxY=-Infinity;
  ring.forEach(function(p){minX=Math.min(minX,p[0]);maxX=Math.max(maxX,p[0]);minY=Math.min(minY,p[1]);maxY=Math.max(maxY,p[1]);});
  var rw=maxX-minX||0.0001; var rh=maxY-minY||0.0001;
  var scale=Math.min((W*0.5)/rw,((H-50)*0.5)/rh);
  var ox=W*0.38; var oy=H*0.72;
  var cos30=Math.cos(Math.PI/6); var sin30=Math.sin(Math.PI/6);
  var hScale=Math.min(h*2.0,H*0.42);
  function toIso(lng,lat){var x=(lng-minX-rw/2)*scale;var y=(lat-minY-rh/2)*scale;return{sx:ox+x*cos30-y*cos30,sy:oy-x*sin30-y*sin30};}
  function up(p,elev){return{sx:p.sx,sy:p.sy-elev};}
  ctx.beginPath();var fp=toIso(ring[0][0],ring[0][1]);ctx.moveTo(fp.sx+4,fp.sy+4);
  ring.forEach(function(p){var q=toIso(p[0],p[1]);ctx.lineTo(q.sx+4,q.sy+4);});
  ctx.closePath();ctx.fillStyle='rgba(0,0,0,0.07)';ctx.fill();
  ctx.beginPath();fp=toIso(ring[0][0],ring[0][1]);ctx.moveTo(fp.sx,fp.sy);
  ring.forEach(function(p){var q=toIso(p[0],p[1]);ctx.lineTo(q.sx,q.sy);});
  ctx.closePath();ctx.fillStyle='#94a3b8';ctx.fill();ctx.strokeStyle='#64748b';ctx.lineWidth=0.5;ctx.stroke();
  var mid=Math.max(1,Math.floor(ring.length/2));
  var p1=toIso(ring[0][0],ring[0][1]),p2=toIso(ring[mid][0],ring[mid][1]);
  var p3=up(p2,hScale),p4=up(p1,hScale);
  ctx.beginPath();ctx.moveTo(p1.sx,p1.sy);ctx.lineTo(p2.sx,p2.sy);ctx.lineTo(p3.sx,p3.sy);ctx.lineTo(p4.sx,p4.sy);ctx.closePath();
  ctx.fillStyle='#1e3a5f';ctx.fill();ctx.strokeStyle='#0f2144';ctx.lineWidth=0.5;ctx.stroke();
  ctx.beginPath();fp=up(toIso(ring[0][0],ring[0][1]),hScale);ctx.moveTo(fp.sx,fp.sy);
  ring.forEach(function(p){var q=up(toIso(p[0],p[1]),hScale);ctx.lineTo(q.sx,q.sy);});
  ctx.closePath();ctx.fillStyle='#1e40af';ctx.fill();ctx.strokeStyle='#1d3db0';ctx.lineWidth=0.5;ctx.stroke();
  if(hScale>22){ctx.fillStyle='rgba(255,255,255,0.22)';var wx=(p1.sx+p4.sx)/2-7,wy=(p1.sy+p4.sy)/2-9;ctx.fillRect(wx,wy,9,11);ctx.fillRect(wx+15,wy,9,11);}
}

function bag3dGenericHouse(ctx,W,H,h){
  var ox=W/2,base=H-38,bh=Math.min(h*3,H*0.43),isoW=W*0.28;
  ctx.fillStyle='#1e3a5f';ctx.beginPath();ctx.moveTo(ox-isoW/2,base);ctx.lineTo(ox+isoW/2,base);ctx.lineTo(ox+isoW/2,base-bh);ctx.lineTo(ox-isoW/2,base-bh);ctx.closePath();ctx.fill();
  ctx.fillStyle='#152B5D';ctx.beginPath();ctx.moveTo(ox+isoW/2,base);ctx.lineTo(ox+isoW/2+isoW*0.32,base-isoW*0.16);ctx.lineTo(ox+isoW/2+isoW*0.32,base-bh-isoW*0.16);ctx.lineTo(ox+isoW/2,base-bh);ctx.closePath();ctx.fill();
  ctx.fillStyle='#1e40af';ctx.beginPath();ctx.moveTo(ox-isoW/2,base-bh);ctx.lineTo(ox+isoW/2,base-bh);ctx.lineTo(ox+isoW/2+isoW*0.32,base-bh-isoW*0.16);ctx.lineTo(ox-isoW/2+isoW*0.32,base-bh-isoW*0.16);ctx.closePath();ctx.fill();
  ctx.fillStyle='rgba(255,255,255,0.28)';ctx.fillRect(ox-isoW/2+8,base-bh+bh*0.35,10,13);ctx.fillRect(ox-isoW/2+26,base-bh+bh*0.35,10,13);
}
// ── End BAG 3D ──────────────────────────────────────────────────────────────

var wzVanLat = null, wzVanLng = null, wzNaarLat = null, wzNaarLng = null;
var wzVanTimer, wzNaarTimer;

function setupPdok(pcId, hnId, hintId, hintTxtId, fullId, isVan) {
  function run() {
    var pc = document.getElementById(pcId).value;
    var hn = document.getElementById(hnId).value;
    pdokLookup(pc, hn, hintId, hintTxtId, fullId, function(lat, lng) {
      if (isVan) { wzVanLat = lat; wzVanLng = lng; if (fullId) wzVanAdres = document.getElementById(fullId).value; }
      else       { wzNaarLat = lat; wzNaarLng = lng; if (fullId) wzNaarAdres = document.getElementById(fullId).value; }
    });
  }
  document.getElementById(pcId).addEventListener('input', function(){ clearTimeout(isVan?wzVanTimer:wzNaarTimer); var t=setTimeout(run,600); if(isVan)wzVanTimer=t;else wzNaarTimer=t; });
  document.getElementById(hnId).addEventListener('input',  function(){ clearTimeout(isVan?wzVanTimer:wzNaarTimer); var t=setTimeout(run,400); if(isVan)wzVanTimer=t;else wzNaarTimer=t; });
}

setupPdok('s1-pc','s1-hn','s1-hint','s1-hint-txt','wz-van-full',  true);
setupPdok('s2-pc','s2-hn','s2-hint','s2-hint-txt','wz-naar-full', false);

function wzTryRoute() {
  if (wzVanLat === null || wzNaarLat === null) return;
  fetch('https://router.project-osrm.org/route/v1/driving/' + wzVanLng + ',' + wzVanLat + ';' + wzNaarLng + ',' + wzNaarLat + '?overview=false', {
    headers: {'User-Agent':'DV/1.0'}
  }).then(function(r){ return r.json(); }).then(function(d) {
    if (!d || !d.routes || !d.routes[0]) return;
    var km  = Math.round(d.routes[0].distance / 1000);
    var min = Math.round(d.routes[0].duration / 60);
    var hrs = Math.floor(min/60); var rest = min%60;
    var tijdStr = hrs > 0 ? hrs+'u '+rest+'min' : rest+' min';
    var indicatie = Math.round((195 + km * 2.5) / 5) * 5;
    wzRouteKm = km;

    // Toon bij stap 2 hint
    var badge = document.getElementById('s2-prijs-badge');
    if (badge) { badge.textContent = (WZ_IS_EN ? 'Est. €' : 'v/a €') + indicatie; badge.style.display = ''; }

    // Update hint tekst stap 2
    var txt = document.getElementById('s2-hint-txt');
    if (txt && wzNaarAdres) txt.textContent = wzNaarAdres + ' · ' + km + ' km · ' + tijdStr;

    document.getElementById('wz-indicatie').value = '€' + indicatie + ' (indicatie, ' + km + 'km)';
  }).catch(function(){});
}

wzDots(1);
wzUpdateProgressBar(1);
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>