<?php
define('DB_ACCESS', true);
require_once __DIR__ . '/db.php';

// Laad alle actieve clubs volledig uit de DB
try {
    $_clubs = getDb()->query(
        "SELECT slug, naam, adres, postcode, stad, beschrijving, foto FROM clubs WHERE actief = 1 ORDER BY naam ASC"
    )->fetchAll(PDO::FETCH_ASSOC);
} catch (Throwable $_e) {
    // Fallback als DB nog niet beschikbaar: gebruik CLUBS constant
    $_clubs = [];
    foreach (CLUBS as $_s => $_n) {
        $_clubs[] = ['slug'=>$_s,'naam'=>$_n,'adres'=>'','postcode'=>'','stad'=>'','beschrijving'=>'','foto'=>''];
    }
}
?><!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onze Clubs — Sportscholen in de regio | De Fitclub</title>
<meta name="description" content="De Fitclub opent vestigingen in de Leidse regio en heel Nederland. 24/7 open, onbemand, met Virtual Coach. Bekijk alle locaties.">
<meta name="keywords" content="sportschool Leiden, sportschool Zoeterwoude, sportschool Oegstgeest, fitness Leidse regio, circuittraining Leiden, 24/7 sportschool Leiden">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.defitclub.nl/clubs">

<!-- Open Graph -->
<meta property="og:type"        content="website">
<meta property="og:url"         content="https://www.defitclub.nl/clubs">
<meta property="og:title"       content="Onze Clubs — De Fitclub in de regio">
<meta property="og:description" content="Vestigingen door heel Nederland. 24/7 open, onbemand, met Virtual Coach.">
<meta property="og:image"       content="https://www.defitclub.nl/images/og-clubs.jpg">
<meta property="og:locale"      content="nl_NL">
<meta property="og:site_name"   content="De Fitclub">

<!-- Twitter Card -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="Onze Clubs — De Fitclub">
<meta name="twitter:description" content="Vestigingen door heel Nederland. 24/7 open, onbemand, met Virtual Coach.">
<meta name="twitter:image"       content="https://www.defitclub.nl/images/og-clubs.jpg">

<link rel="stylesheet" href="style.css">
<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.php" 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.php">Home</a></li>
    <li><a href="clubs.php" class="active">Onze Clubs</a></li>
    <li><a href="prijzen.php">Prijzen</a></li>
    <li><a href="contact.php">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.php" onclick="closeMenu()">Home</a>
  <a href="clubs.php" class="active" onclick="closeMenu()">Onze Clubs</a>
  <a href="prijzen.php" onclick="closeMenu()">Prijzen</a>
  <a href="contact.php" 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">Vestigingen</p>
  <h1 class="sec-title reveal" style="font-size:clamp(2.4rem,5vw,4rem);max-width:680px;margin:0 auto 18px;">Onze clubs</h1>
  <p class="sec-sub reveal" style="margin:0 auto;">We starten in de Leidse regio en groeien in 2026 door naar 10 vestigingen door heel Nederland. Jouw club staat er snel bij.</p>
</div>

<!-- CLUBS GRID -->
<div class="clubs-sec">
  <div class="clubs-grid">

    <?php foreach ($_clubs as $_club):
        $_slug  = $_club['slug'];
        $_naam  = $_club['naam'];
        $_lbl   = str_starts_with($_naam, 'De Fitclub ') ? substr($_naam, 11) : $_naam;
        $_city  = $_club['stad'] ?: $_lbl;
        $_foto  = $_club['foto'];
        $_descr = $_club['beschrijving'];
        $_adres = trim(($_club['adres'] ? $_club['adres'] . ', ' : '') . ($_club['postcode'] ? $_club['postcode'] . ' ' : '') . $_city);
        $_link  = file_exists(__DIR__ . '/' . $_slug . '.php') ? $_slug . '.php' : 'proefles.php?club=' . urlencode($_slug);
        // Gebruik club-specifiek foto pad of oud beeldnaam als fallback
        $_imgSrc = $_foto ? 'images/clubs/' . htmlspecialchars($_foto) : 'images/' . htmlspecialchars($_slug) . '-card.jpg';
    ?>
    <a href="<?= htmlspecialchars($_link) ?>" id="<?= htmlspecialchars($_slug) ?>" class="club-card reveal" style="text-decoration:none;color:inherit;">
      <div class="club-card-visual photo-wrap">
        <img src="<?= $_imgSrc ?>" alt="<?= htmlspecialchars($_naam) ?>" class="club-photo" onerror="this.style.display='none'">
        <div class="photo-overlay"></div>
        <div class="club-card-visual-glow">
          <span class="city-glow"><?= htmlspecialchars(strtoupper($_lbl)) ?></span>
        </div>
      </div>
      <div class="club-card-body">
        <h3><?= htmlspecialchars($_naam) ?></h3>
        <div class="club-meta"><?= htmlspecialchars($_adres ?: $_lbl . ' · Adres volgt') ?></div>
        <p><?= $_descr ? htmlspecialchars($_descr) : 'Een De Fitclub vestiging. 30 minuten circuit met Virtual Coach, onbemand en altijd open.' ?></p>
        <span class="club-status">Opening mei/juni 2026</span>
      </div>
    </a>
    <?php endforeach; ?>

  </div>
</div>

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

<!-- MEER VESTIGINGEN -->
<div class="more-clubs">
  <div class="more-clubs-inner">
    <p class="sec-label reveal" style="text-align:center;">Groeiplan 2026</p>
    <h2 class="reveal">10 vestigingen. Dit jaar.</h2>
    <p class="reveal" style="margin-top:14px;">We beginnen in de Leidse regio en breiden dit jaar stap voor stap uit naar nieuwe locaties door heel Nederland. Houd onze kanalen in de gaten voor aankondigingen van nieuwe vestigingen.</p>
  </div>

  <div class="timeline-strip reveal">
    <div class="tl-item active">
      <div class="tl-dot active"></div>
      <div class="tl-label"><strong>Voorjaar 2026</strong>3 vestigingen<br>Leidse regio</div>
    </div>
    <div class="tl-item">
      <div class="tl-dot"></div>
      <div class="tl-label"><strong>Zomer 2026</strong>+4 vestigingen<br>regio uitbreiding</div>
    </div>
    <div class="tl-item">
      <div class="tl-dot"></div>
      <div class="tl-label"><strong>Najaar 2026</strong>10 vestigingen<br>heel Nederland</div>
    </div>
  </div>
</div>

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

<!-- CTA -->
<section class="cta-band">
  <p class="sec-label reveal">Interesse?</p>
  <h2 class="sec-title reveal" style="max-width:520px;margin:0 auto 18px;">Meld je aan, wij houden je op de hoogte</h2>
  <p class="sec-sub reveal" style="margin:0 auto 40px;">Wil je als eerste weten wanneer jouw dichtstbijzijnde vestiging opent? Meld je aan als lid en we laten het je direct weten.</p>
  <div class="cta-btns reveal">
    <a href="https://leden.defitclub.nl" target="_blank" class="btn-gold">Word Lid</a>
    <a href="prijzen.php" class="btn-outline">Bekijk abonnementen</a>
  </div>
</section>

<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.</p>
    </div>
    <div class="ft-col">
      <h5>Navigatie</h5>
      <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="clubs.php">Onze Clubs</a></li>
        <li><a href="prijzen.php">Prijzen</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 class="ft-col">
      <h5>Contact</h5>
      <ul>
        <li>info@defitclub.nl</li>
        <li>Leidse regio</li>
        <li>Opening mei/juni 2026</li>
      </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);
</script>
</body>
</html>
