<?php define('DB_ACCESS', true); require_once __DIR__ . '/db.php';
$_cities = array_values(array_map(fn($n) => str_starts_with($n,'De Fitclub ') ? substr($n,11) : $n, CLUBS));
$_nc = count($_cities);
$_cityStr = $_nc === 0 ? '' : ($_nc === 1 ? $_cities[0] : implode(', ', array_slice($_cities,0,-1)) . ' en ' . end($_cities));
?><!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact — De Fitclub | Stuur ons een bericht</title>
<meta name="description" content="Neem contact op met De Fitclub. Vragen over lidmaatschap, vestigingen of samenwerking? Stuur ons een bericht of vraag een proeftraining aan.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.defitclub.nl/contact">

<!-- Open Graph -->
<meta property="og:type"        content="website">
<meta property="og:url"         content="https://www.defitclub.nl/contact">
<meta property="og:title"       content="Contact — De Fitclub">
<meta property="og:description" content="Vragen over lidmaatschap of vestigingen? Stuur ons een bericht.">
<meta property="og:image"       content="https://www.defitclub.nl/images/og-home.jpg">
<meta property="og:locale"      content="nl_NL">
<meta property="og:site_name"   content="De Fitclub">

<link rel="stylesheet" href="style.css">
<style>
/* ─── Contactpagina specifiek ─── */
.contact-wrap {
  padding: 60px 60px 100px;
  max-width: 780px;
  margin: 0 auto;
}
.contact-info { padding-top: 10px; }
.c-block { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(201,168,76,0.07); }
.c-block:last-child { border-bottom: none; }
.c-lbl { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.c-val { font-family: var(--serif); font-size: 1.1rem; color: var(--text); line-height: 1.6; }
.c-val a { color: var(--text); text-decoration: none; transition: color 0.3s; }
.c-val a:hover { color: var(--gold); }

/* Form */
.contact-form-wrap { padding-top: 0; }
.contact-form-wrap h2 { font-size: 1.35rem; font-weight: 500; letter-spacing: 0.05em; margin-bottom: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.form-grp { margin-bottom: 18px; }
.form-lbl { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 8px; }
.form-grp input,
.form-grp select,
.form-grp textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid rgba(201,168,76,0.1);
  color: var(--text);
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 300;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.3s;
  -webkit-appearance: none;
}
.form-grp input:focus,
.form-grp select:focus,
.form-grp textarea:focus { border-color: rgba(201,168,76,0.38); }
.form-grp select { cursor: pointer; }
.form-grp select option { background: var(--dark); }
.form-grp textarea { min-height: 130px; resize: vertical; }
.form-check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.form-check input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--gold); cursor: pointer; }
.form-check label { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; cursor: pointer; }
.form-check label a { color: var(--gold); text-decoration: none; }
.form-check label a:hover { text-decoration: underline; }
.form-submit { width: 100%; border: none; cursor: pointer; font-size: 0.82rem; padding: 16px; }

/* Success / Error states */
.form-feedback { display: none; padding: 18px 22px; border-radius: 3px; font-size: 0.88rem; margin-top: 18px; letter-spacing: 0.03em; }
.form-feedback.success { background: rgba(61,90,62,0.25); border: 1px solid rgba(61,90,62,0.4); color: #a8d4aa; }
.form-feedback.error   { background: rgba(180,60,60,0.2);  border: 1px solid rgba(180,60,60,0.35); color: #f0a0a0; }
.form-feedback.visible { display: block; }
.btn-loading { opacity: 0.7; cursor: wait !important; pointer-events: none; }

@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 50px; padding: 40px 24px 80px; }
  .form-row { grid-template-columns: 1fr; }
}
</style>
<script>
(function(){var t=localStorage.getItem('theme');if(t==='light')document.documentElement.setAttribute('data-theme','light');})();
function toggleTheme(){var h=document.documentElement,isDark=h.getAttribute('data-theme')!=='light';h.setAttribute('data-theme',isDark?'light':'dark');localStorage.setItem('theme',isDark?'light':'dark');_syncBtn();}
function _syncBtn(){var b=document.getElementById('themeBtn');if(!b)return;var d=document.documentElement.getAttribute('data-theme')!=='light';b.textContent=d?'☀':'☾';b.title=d?'Licht thema':'Donker thema';}
document.addEventListener('DOMContentLoaded',_syncBtn);
</script>
</head>
<body>

<!-- NAV -->
<nav id="nav">
  <a href="index.html" class="nav-logo">
    <div class="nav-logo-main">DE FITCLUB</div>
    <span class="nav-logo-sub">— Sterk in 30 Minuten —</span>
  </a>
  <ul class="nav-links">
    <li><a href="index.html">Home</a></li>
    <li><a href="clubs.php">Onze Clubs</a></li>
    <li><a href="prijzen.html">Prijzen</a></li>
    <li><a href="contact.php" class="active">Contact</a></li>
    <li><a href="https://leden.defitclub.nl" target="_blank" class="nav-cta">Word Lid</a></li>
  </ul>
  <div class="nav-hamburger" onclick="openMenu()">
    <span></span><span></span><span></span>
  </div>
</nav>

<!-- MOBILE MENU -->
<div class="mobile-menu" id="mobileMenu">
  <button class="mobile-close" onclick="closeMenu()">✕</button>
  <a href="index.html" onclick="closeMenu()">Home</a>
  <a href="clubs.php" onclick="closeMenu()">Onze Clubs</a>
  <a href="prijzen.html" onclick="closeMenu()">Prijzen</a>
  <a href="contact.php" class="active" onclick="closeMenu()">Contact</a>
  <a href="https://leden.defitclub.nl" target="_blank" class="nav-cta" onclick="closeMenu()">Word Lid</a>
</div>

<!-- PAGE HERO -->
<div class="page-hero">
  <p class="sec-label reveal">Contact</p>
  <h1 class="sec-title reveal" style="font-size:clamp(2.4rem,5vw,4rem);max-width:600px;margin:0 auto 18px;">Stel je vraag</h1>
  <p class="sec-sub reveal" style="margin:0 auto;">We reageren zo snel mogelijk. Voor vragen over lidmaatschap, vestigingen of samenwerking — stuur ons een bericht.</p>
</div>

<div class="gold-rule"></div>

<!-- CONTACT SPLIT -->
<div class="contact-wrap">

  <!-- Formulier -->
  <div class="contact-form-wrap reveal">
    <h2>Stuur een bericht</h2>

    <form id="contactForm" action="https://formspree.io/f/mgopwrlo" method="POST" novalidate>

      <div class="form-row">
        <div class="form-grp">
          <label class="form-lbl" for="voornaam">Voornaam *</label>
          <input type="text" id="voornaam" name="voornaam" placeholder="Jouw voornaam" required>
        </div>
        <div class="form-grp">
          <label class="form-lbl" for="achternaam">Achternaam *</label>
          <input type="text" id="achternaam" name="achternaam" placeholder="Achternaam" required>
        </div>
      </div>

      <div class="form-grp">
        <label class="form-lbl" for="email">E-mailadres *</label>
        <input type="email" id="email" name="email" placeholder="jouw@email.nl" required>
      </div>

      <div class="form-grp">
        <label class="form-lbl" for="telefoon">Telefoonnummer</label>
        <input type="tel" id="telefoon" name="telefoon" placeholder="+31 6 ...">
      </div>

      <div class="form-grp">
        <label class="form-lbl" for="onderwerp">Onderwerp *</label>
        <select id="onderwerp" name="onderwerp" required>
          <option value="" disabled selected>Kies een onderwerp</option>
          <option value="Lidmaatschap">Vraag over lidmaatschap</option>
          <option value="Vestiging">Vraag over een vestiging</option>
          <option value="Proeftraining">Gratis proeftraining aanvragen</option>
          <option value="Samenwerking">Samenwerking / zakelijk</option>
          <option value="Overig">Overig</option>
        </select>
      </div>

      <div class="form-grp">
        <label class="form-lbl" for="bericht">Bericht *</label>
        <textarea id="bericht" name="bericht" placeholder="Stel je vraag of beschrijf je verzoek..." required></textarea>
      </div>

      <!-- Verborgen veld: spam-bescherming (honeypot) -->
      <input type="text" name="_gotcha" style="display:none">
      <!-- Formspree: stuur geen bevestiging e-mail naar ons eigen adres -->
      <input type="hidden" name="_subject" value="Nieuw bericht via De Fitclub website">

      <div class="form-check">
        <input type="checkbox" id="privacy" name="privacy" required>
        <label for="privacy">Ik ga akkoord met de <a href="#">privacyverklaring</a> en geef toestemming voor verwerking van mijn gegevens om contact te kunnen opnemen.</label>
      </div>

      <button type="submit" id="submitBtn" class="btn-gold form-submit">Verstuur bericht</button>

      <div class="form-feedback success" id="feedbackSuccess">
        ✓ &nbsp;Bericht ontvangen. We nemen zo snel mogelijk contact met je op!
      </div>
      <div class="form-feedback error" id="feedbackError">
        Er is iets misgegaan. Stuur een e-mail naar <a href="mailto:stephan.vanveen@defitclub.nl" style="color:var(--gold)">stephan.vanveen@defitclub.nl</a>.
      </div>

    </form>
  </div>
</div>

<div class="gold-rule"></div>

<!-- FOOTER -->
<footer>
  <div class="footer-grid">
    <div class="ft-brand">
      <div class="ft-brand-main">DE FITCLUB</div>
      <span class="ft-brand-sub">— Sterk in 30 Minuten —</span>
      <p>30 minuten circuit, jouw Virtual Coach, altijd open. Binnenkort in <?= htmlspecialchars($_cityStr) ?>.</p>
    </div>
    <div class="ft-col">
      <h5>Navigatie</h5>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="clubs.php">Onze Clubs</a></li>
        <li><a href="prijzen.html">Prijzen</a></li>
        <li><a href="contact.php">Contact</a></li>
      </ul>
    </div>
    <div class="ft-col">
      <h5>Vestigingen</h5>
      <ul>
        <?php foreach (CLUBS as $_slug => $_naam):
            $_lbl = str_starts_with($_naam, 'De Fitclub ') ? substr($_naam, 11) : $_naam;
            $_url = file_exists(__DIR__ . '/' . $_slug . '.php') ? $_slug . '.php' : 'clubs.php#' . $_slug;
        ?>
          <li><a href="<?= htmlspecialchars($_url) ?>"><?= htmlspecialchars($_lbl) ?></a></li>
        <?php endforeach; ?>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <p>© <?= date('Y') ?> De Fitclub. Alle rechten voorbehouden.</p>
    <p>Privacy · Algemene voorwaarden · KVK: xxxxxxxx</p>
  </div>
</footer>

<script>
window.addEventListener('scroll', () => {
  document.getElementById('nav').classList.toggle('scrolled', window.scrollY > 50);
  reveal();
});
function reveal() {
  document.querySelectorAll('.reveal:not(.visible)').forEach(el => {
    if (el.getBoundingClientRect().top < window.innerHeight - 60)
      el.classList.add('visible');
  });
}
function openMenu()  { document.getElementById('mobileMenu').classList.add('open'); }
function closeMenu() { document.getElementById('mobileMenu').classList.remove('open'); }
setTimeout(reveal, 300);

// Formulier versturen via Formspree (AJAX — pagina herlaadt niet)
document.getElementById('contactForm').addEventListener('submit', async function(e) {
  e.preventDefault();

  const form   = e.target;
  const btn    = document.getElementById('submitBtn');
  const ok     = document.getElementById('feedbackSuccess');
  const err    = document.getElementById('feedbackError');

  // Validatie
  const required = ['voornaam', 'achternaam', 'email', 'onderwerp', 'bericht'];
  let valid = true;
  required.forEach(id => {
    const el = document.getElementById(id);
    if (!el.value.trim()) { el.style.borderColor = 'rgba(180,60,60,0.5)'; valid = false; }
    else el.style.borderColor = '';
  });
  if (!document.getElementById('privacy').checked) {
    document.getElementById('privacy').style.outline = '1px solid rgba(180,60,60,0.5)';
    valid = false;
  }
  if (!valid) return;

  btn.textContent = 'Versturen…';
  btn.classList.add('btn-loading');

  try {
    const response = await fetch(form.action, {
      method: 'POST',
      body: new FormData(form),
      headers: { 'Accept': 'application/json' }
    });

    if (response.ok) {
      form.reset();
      ok.classList.add('visible');
      err.classList.remove('visible');
      btn.textContent = '✓ Verstuurd';
    } else {
      throw new Error('server error');
    }
  } catch {
    err.classList.add('visible');
    ok.classList.remove('visible');
    btn.textContent = 'Verstuur bericht';
    btn.classList.remove('btn-loading');
  }
});
</script>
</body>
</html>
