<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact – Heerlijk Bos</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --groen: #1e3a2f; --groen-mid: #2d5441; --groen-licht: #4a7c5f;
      --goud: #c9a96e; --goud-licht: #e8d5a3;
      --creme: #faf6ee; --creme-dark: #f0e9d8;
      --tekst: #1a2420; --tekst-zacht: #4a5e57;
      --serif: 'Cormorant Garamond', Georgia, serif;
      --sans: 'Jost', sans-serif;
    }
    html { scroll-behavior: smooth; }
    body { font-family: var(--sans); background: var(--creme); color: var(--tekst); overflow-x: hidden; }
 
    nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 3rem; background: rgba(30,58,47,0.97); box-shadow: 0 2px 20px rgba(0,0,0,0.25); }
    .nav-logo { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: #fff; text-decoration: none; letter-spacing: 0.03em; }
    .nav-logo span { color: var(--goud); }
    .nav-links { display: flex; gap: 2rem; list-style: none; }
    .nav-links a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.82rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; }
    .nav-links a:hover, .nav-links a.actief { color: var(--goud); }
    .nav-boek { background: var(--goud); color: var(--groen) !important; padding: 0.55rem 1.4rem; border-radius: 2px; font-weight: 500 !important; }
 
    .pagina-header { background: var(--groen); padding: 9rem 3rem 5rem; position: relative; overflow: hidden; }
    .pagina-header::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 60px; background: var(--creme); clip-path: ellipse(55% 100% at 50% 100%); }
    .pagina-header .label { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--goud); margin-bottom: 1rem; }
    .pagina-header h1 { font-family: var(--serif); font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 300; color: #fff; line-height: 1.15; margin-bottom: 1.2rem; }
    .pagina-header h1 em { font-style: italic; color: var(--goud-licht); }
    .pagina-header p { color: rgba(255,255,255,0.7); font-size: 1rem; font-weight: 300; line-height: 1.8; max-width: 480px; }
 
    .contact-sectie { padding: 5rem 3rem 4rem; }
    .contact-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start; }
 
    .sectie-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--goud); margin-bottom: 0.6rem; display: block; }
    .contact-info h2 { font-family: var(--serif); font-size: 2.2rem; font-weight: 300; color: var(--groen); margin-bottom: 0.5rem; line-height: 1.2; }
    .contact-info h2 em { font-style: italic; color: var(--groen-licht); }
    .contact-info > p { font-size: 0.9rem; color: var(--tekst-zacht); line-height: 1.8; font-weight: 300; margin: 1rem 0 2rem; }
 
    .eigenaar-kaart { background: var(--groen); border-radius: 3px; padding: 1.8rem; margin-bottom: 1.5rem; }
    .eigenaar-naam { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--goud); margin-bottom: 0.3rem; }
    .eigenaar-kaart p { font-size: 0.83rem; color: rgba(255,255,255,0.65); font-weight: 300; line-height: 1.7; }
 
    .contact-blokken { display: flex; flex-direction: column; gap: 0.8rem; }
    .contact-blok { background: #fff; border-radius: 3px; padding: 1.2rem 1.5rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 12px rgba(30,58,47,0.06); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; border-left: 3px solid var(--goud); }
    .contact-blok:hover { transform: translateX(4px); box-shadow: 0 6px 20px rgba(30,58,47,0.1); }
    .contact-blok-icon { font-size: 1.4rem; flex-shrink: 0; }
    .contact-blok-tekst h4 { font-family: var(--serif); font-size: 0.95rem; font-weight: 400; color: var(--groen); margin-bottom: 0.15rem; }
    .contact-blok-tekst p { font-size: 0.82rem; color: var(--tekst-zacht); font-weight: 300; }
 
    .praktisch { margin-top: 2rem; }
    .praktisch h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--groen); margin-bottom: 1rem; }
    .praktisch-items { list-style: none; }
    .praktisch-items li { display: flex; gap: 0.7rem; padding: 0.5rem 0; font-size: 0.85rem; color: var(--tekst-zacht); font-weight: 300; border-bottom: 1px solid var(--creme-dark); }
    .praktisch-items li:last-child { border-bottom: none; }
    .praktisch-items li strong { color: var(--tekst); font-weight: 500; }
 
    .form-wrapper { background: #fff; border-radius: 4px; padding: 2.5rem; box-shadow: 0 4px 30px rgba(30,58,47,0.08); border-top: 4px solid var(--goud); }
    .form-wrapper h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; color: var(--groen); margin-bottom: 0.4rem; }
    .form-wrapper > p { font-size: 0.85rem; color: var(--tekst-zacht); font-weight: 300; margin-bottom: 1.8rem; line-height: 1.6; }
    .form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
    .form-groep { display: flex; flex-direction: column; margin-bottom: 1rem; }
    .form-groep label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--groen-mid); margin-bottom: 0.4rem; font-weight: 500; }
    .form-groep input, .form-groep select, .form-groep textarea { border: 1px solid #ddd; padding: 0.75rem 1rem; font-family: var(--sans); font-size: 0.9rem; color: var(--tekst); border-radius: 2px; outline: none; transition: border-color 0.2s; background: var(--creme); }
    .form-groep input:focus, .form-groep select:focus, .form-groep textarea:focus { border-color: var(--groen-licht); }
    .form-groep textarea { resize: vertical; min-height: 130px; }
    .form-submit { width: 100%; background: var(--groen); color: #fff; border: none; padding: 1rem; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; border-radius: 2px; cursor: pointer; transition: background 0.2s, transform 0.2s; margin-top: 0.5rem; }
    .form-submit:hover { background: var(--groen-mid); transform: translateY(-1px); }
    .form-success { display: none; background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 3px; padding: 1.2rem; text-align: center; color: var(--groen); font-size: 0.9rem; margin-top: 1rem; }
    .form-noot { font-size: 0.75rem; color: var(--tekst-zacht); margin-top: 0.8rem; text-align: center; font-weight: 300; }
 
    .kaart-sectie iframe { display: block; width: 100%; height: 380px; border: none; }
 
    footer { background: #0f2018; padding: 4rem 3rem 2rem; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .footer-brand .nav-logo { font-size: 1.6rem; margin-bottom: 0.5rem; display: block; }
    .footer-brand .eigenaar { font-size: 0.82rem; color: rgba(255,255,255,0.4); margin-bottom: 0.3rem; font-weight: 300; }
    .footer-brand p { font-size: 0.82rem; color: rgba(255,255,255,0.4); line-height: 1.8; font-weight: 300; }
    .footer-col h4 { font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--goud); margin-bottom: 1rem; }
    .footer-col ul { list-style: none; }
    .footer-col li { font-size: 0.83rem; color: rgba(255,255,255,0.5); padding: 0.3rem 0; font-weight: 300; }
    .footer-col a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
    .footer-col a:hover { color: var(--goud); }
    .footer-bottom { max-width: 1200px; margin: 1.5rem auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: rgba(255,255,255,0.25); }
 
    @media (max-width: 900px) {
      nav { padding: 1.2rem 1.5rem; }
      .nav-links { display: none; }
      .pagina-header { padding: 7rem 1.5rem 4rem; }
      .contact-sectie { padding: 3rem 1.5rem; }
      .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }
      .form-rij { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
      .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
    }

    /* ── HAMBURGER MENU ── */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: all 0.3s ease;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 900px) {
      .hamburger { display: flex; }
      .nav-links {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(15, 32, 24, 0.98);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        z-index: 99;
      }
      .nav-links.open { display: flex; }
      .nav-links a { font-size: 1.2rem !important; letter-spacing: 0.15em; }
    }

  </style>
</head>
<body>
 
  <nav>
    <a href="index.html" class="nav-logo">Heerlijk <span>Bos</span></a>
    <ul class="nav-links">
      <li><a href="index.html">Home</a></li>
      <li><a href="kamer.html">Chalet</a></li>
      <li><a href="omgeving.html">Omgeving</a></li>
      <li><a href="contact.html" class="actief">Contact</a></li>
      <li><a href="boeken.html" class="nav-boek">Boek nu</a></li>
    </ul>
  <button class="hamburger" id="hamburger" aria-label="Menu openen">
      <span></span><span></span><span></span>
    </button>
  </nav>
 
  <div class="pagina-header">
    <p class="label">Wij helpen u graag</p>
    <h1>Neem <em>contact</em> op</h1>
    <p>Heeft u een vraag over het chalet, de omgeving of uw verblijf? Wij reageren zo snel mogelijk.</p>
  </div>
 
  <div class="contact-sectie">
    <div class="contact-inner">
 
      <div class="contact-info">
        <span class="sectie-label">Contactgegevens</span>
        <h2>Chalet<br><em>Heerlijk Bos</em></h2>
        <p>Eigenaren van Chalet D2 op Bospark Dennenrhode. Voor vragen, beschikbaarheid of uw verblijf kunt u ons bereiken via onderstaande gegevens.</p>
 
        <div class="eigenaar-kaart">
          <p>Chalet D2 – Bospark Dennenrhode<br>Verlengde Haerderweg 5<br>8085 RJ Doornspijk</p>
        </div>
 
        <div class="contact-blokken">
          <a href="mailto:rietje62@icloud.com" class="contact-blok">
            <span class="contact-blok-icon">📧</span>
            <div class="contact-blok-tekst">
              <h4>E-mail</h4>
              <p>rietje62@icloud.com</p>
            </div>
          </a>
          <a href="tel:+31639890815" class="contact-blok">
            <span class="contact-blok-icon">📞</span>
            <div class="contact-blok-tekst">
              <h4>Mobiel</h4>
              <p>06 39 890 815</p>
            </div>
          </a>
          <div class="contact-blok" style="cursor:default;">
            <span class="contact-blok-icon">📍</span>
            <div class="contact-blok-tekst">
              <h4>Adres</h4>
              <p>Verlengde Haerderweg 5, 8085 RJ Doornspijk</p>
            </div>
          </div>
        </div>
 
        <div class="praktisch">
          <h3>Praktische info</h3>
          <ul class="praktisch-items">
            <li><span>📅</span><span>Aankomst: <strong>maandag of vrijdag</strong></span></li>
            <li><span>🕐</span><span>Check-in: <strong>vanaf 15:00 uur</strong></span></li>
            <li><span>🕙</span><span>Check-out: <strong>voor 10:00 uur</strong></span></li>
            <li><span>💶</span><span>Borg: <strong>€50</strong> (terugbetaald mits alles in orde is)</span></li>
            <li><span>🛏</span><span>Linnen: <strong>op aanvraag</strong></span></li>
            <li><span>🚫</span><span>Huisdieren: <strong>niet toegestaan</strong></span></li>
          </ul>
        </div>
      </div>
 
      <div class="form-wrapper">
        <h3>Stuur een bericht</h3>
        <p>Vul het formulier in en wij nemen zo snel mogelijk contact met u op. Voor reserveren gebruikt u de <a href="boeken.html" style="color:var(--groen-licht);">boekingspagina</a>.</p>
 
        <form id="contactForm" action="contact.php" method="post">
          <div class="form-rij">
            <div class="form-groep">
              <label for="naam">Naam</label>
              <input type="text" id="naam" name="naam" placeholder="Uw naam" required>
            </div>
            <div class="form-groep">
              <label for="email">E-mailadres</label>
              <input type="email" id="email" name="email" placeholder="uw@email.nl" required>
            </div>
          </div>
          <div class="form-rij">
            <div class="form-groep">
              <label for="telefoon">Telefoonnummer</label>
              <input type="tel" id="telefoon" name="telefoon" placeholder="06-12345678">
            </div>
            <div class="form-groep">
              <label for="onderwerp">Onderwerp</label>
              <select id="onderwerp" name="onderwerp">
                <option value="Algemene vraag">Algemene vraag</option>
                <option value="Beschikbaarheid">Beschikbaarheid</option>
                <option value="Vraag over reservering">Vraag over reservering</option>
                <option value="Overige vraag">Overige vraag</option>
              </select>
            </div>
          </div>
          <div class="form-groep">
            <label for="bericht">Uw bericht</label>
            <textarea id="bericht" name="bericht" placeholder="Stel hier uw vraag..." required></textarea>
          </div>
          <button type="submit" class="form-submit">Bericht versturen</button>
          <div class="form-success" id="formSuccess">
            ✅ Bedankt! Uw bericht is verstuurd. We nemen zo snel mogelijk contact op.
          </div>
          <p class="form-noot">U kunt ons ook direct bereiken via <a href="tel:+31639890815" style="color:var(--groen-licht);">06 39 890 815</a></p>
        </form>
      </div>
 
    </div>
  </div>
 
  <!-- KAART -->
  <div class="kaart-sectie">
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2440.8!2d5.7934!3d52.4193!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c7d3cef7d18b5b%3A0x7f1b3d8b8e3a1234!2sVerlengde+Haerderweg+5+D2%2C+8085+RJ+Doornspijk!5e0!3m2!1snl!2snl!4v1700000000000"
      allowfullscreen loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
      title="Locatie Bospark Dennenrhode, Verlengde Haerderweg 5, Doornspijk">
    </iframe>
  </div>
 
  <footer>
    <div class="footer-grid">
      <div class="footer-brand">
        <a href="index.html" class="nav-logo">Heerlijk <span>Bos</span></a>
        <p>Verlengde Haerderweg 5<br>8085 RJ Doornspijk<br>rietje62@icloud.com<br>06 39 890 815</p>
      </div>
      <div class="footer-col">
        <h4>Navigatie</h4>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="kamer.html">Het chalet</a></li>
          <li><a href="omgeving.html">Omgeving</a></li>
          <li><a href="boeken.html">Boek nu</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Contact</h4>
        <ul>
            <li>📧 <a href="mailto:rietje62@icloud.com">rietje62@icloud.com</a></li>
          <li>📞 <a href="tel:+31639890815">06 39 890 815</a></li>
          <li>📍 Verlengde Haerderweg 5</li>
          <li>📍 8085 RJ Doornspijk</li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>Chalet D2 · Bospark Dennenrhode · Doornspijk</span>
    </div>
  </footer>
 
  <script>
            document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const btn = this.querySelector('.form-submit');
            btn.disabled = true;
            btn.textContent = 'Bezig met versturen...';

            const formData = new FormData(this);

            fetch('contact.php', {
                method: 'POST',
                body: formData
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('formSuccess').style.display = 'block';
                    document.getElementById('formSuccess').textContent = data.message;
                    this.reset();
                    btn.textContent = 'Bericht verstuurd';
                } else {
                    alert('Er ging iets mis: ' + data.message);
                    btn.disabled = false;
                    btn.textContent = 'Bericht versturen';
                }
            })
            .catch(() => {
                alert('Fout bij het versturen. Controleer uw internetverbinding.');
                btn.disabled = false;
                btn.textContent = 'Bericht versturen';
            });
        });
  </script>

  <script>
    const hamburger = document.getElementById('hamburger');
    const navLinks = document.querySelector('.nav-links');
    if (hamburger && navLinks) {
      hamburger.addEventListener('click', () => {
        hamburger.classList.toggle('open');
        navLinks.classList.toggle('open');
      });
      navLinks.querySelectorAll('a').forEach(a => {
        a.addEventListener('click', () => {
          hamburger.classList.remove('open');
          navLinks.classList.remove('open');
        });
      });
    }
  </script>

</body>
</html>