/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

function PrivacyPage() {
  return (<>
    <section style={{ padding: "140px clamp(24px,6vw,80px) 60px", maxWidth: "1480px", margin: "0 auto", boxSizing: "border-box", width: "100%" }}>
      <div className="reveal-fade" style={{ marginBottom: "16px" }}><span className="eyebrow"><span className="dot"></span>Juridisch</span></div>
      <h1 className="reveal-fade" style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(36px,5vw,72px)", lineHeight: 1.1, letterSpacing: "-0.02em", margin: "0 0 20px" }}>Privacy & Cookies</h1>
      <p className="reveal-fade" style={{ fontSize: "clamp(16px,1.4vw,19px)", lineHeight: 1.65, color: "var(--ink-soft)", maxWidth: "55ch", margin: 0, "--reveal-delay": "0.1s" }}>VIA Vastgoed B.V. respecteert jouw privacy. Hier lees je welke gegevens we verzamelen, hoe we omgaan met cookies en wat jouw rechten zijn.</p>
    </section>

    <section className="section" style={{ paddingTop: 0 }}>
      <div style={{ maxWidth: "740px", margin: "0 auto", padding: "0 clamp(24px, 6vw, 48px) 80px" }}>

        {[
          {
            title: "Wie zijn wij?",
            body: (<>
              <p style={{ fontSize: "16px", lineHeight: 1.75, color: "var(--muted)", marginBottom: "12px" }}>VIA Vastgoed B.V. is een onafhankelijk vastgoedadviesbureau gevestigd in Amsterdam.</p>
              <p style={{ fontSize: "16px", lineHeight: 1.75, color: "var(--muted)" }}>
                <strong style={{ color: "var(--ink)" }}>VIA Vastgoed B.V.</strong><br/>
                Eerste Jan van der Heijdenstraat 106-O<br/>
                1072 VB Amsterdam<br/>
                KvK: 90455967<br/>
                <a href="mailto:info@viavastgoed.com" style={{ color: "var(--accent)" }}>info@viavastgoed.com</a>
              </p>
            </>)
          },
          {
            title: "Welke gegevens verzamelen we?",
            body: (<>
              <p style={{ fontSize: "16px", lineHeight: 1.75, color: "var(--muted)", marginBottom: "16px" }}><strong style={{ color: "var(--ink)" }}>Analytische cookies (Google Analytics 4)</strong><br/>
              Alleen na jouw toestemming plaatsen wij analytische cookies. We verzamelen anonieme gebruiksdata: welke pagina's bezocht worden en hoe bezoekers de site gebruiken. Er worden geen persoonsgegevens opgeslagen.</p>
              <p style={{ fontSize: "16px", lineHeight: 1.75, color: "var(--muted)" }}><strong style={{ color: "var(--ink)" }}>Contactgegevens (formulieren)</strong><br/>
              Wanneer je een kennismaking plant of een brochure aanvraagt, vragen we om naam, e-mailadres en telefoonnummer. Deze gegevens gebruiken we uitsluitend om contact op te nemen.</p>
            </>)
          },
          {
            title: "Waarvoor gebruiken we je gegevens?",
            body: (
              <ul style={{ fontSize: "16px", lineHeight: 2, color: "var(--muted)", paddingLeft: "20px", margin: 0 }}>
                <li>Het verbeteren van de website op basis van gebruiksdata</li>
                <li>Het beantwoorden van jouw vragen en aanvragen</li>
                <li>Het toesturen van gevraagde informatie zoals brochures</li>
              </ul>
            )
          },
          {
            title: "Hoe lang bewaren we je gegevens?",
            body: <p style={{ fontSize: "16px", lineHeight: 1.75, color: "var(--muted)" }}>Contactgegevens bewaren we maximaal 2 jaar na het laatste contact. Google Analytics data wordt na 14 maanden verwijderd. Je kunt verwijdering aanvragen via <a href="mailto:info@viavastgoed.com" style={{ color: "var(--accent)" }}>info@viavastgoed.com</a>.</p>
          },
          {
            title: "Jouw rechten",
            body: (<>
              <ul style={{ fontSize: "16px", lineHeight: 2, color: "var(--muted)", paddingLeft: "20px", margin: "0 0 12px" }}>
                <li>Recht op inzage in jouw gegevens</li>
                <li>Recht op correctie of verwijdering</li>
                <li>Recht om bezwaar te maken tegen verwerking</li>
                <li>Recht op intrekking van toestemming (cookies)</li>
              </ul>
              <p style={{ fontSize: "16px", lineHeight: 1.75, color: "var(--muted)" }}>Stuur een e-mail naar <a href="mailto:info@viavastgoed.com" style={{ color: "var(--accent)" }}>info@viavastgoed.com</a>. We reageren binnen 30 dagen.</p>
            </>)
          },
          {
            title: "Cookies intrekken",
            body: (<>
              <p style={{ fontSize: "16px", lineHeight: 1.75, color: "var(--muted)", marginBottom: "16px" }}>Je kunt je cookievoorkeur op elk moment wijzigen via de onderstaande knop.</p>
              <button onClick={() => { localStorage.removeItem('via_cookie_consent'); window.location.reload(); }} style={{ padding: "12px 24px", border: "1px solid var(--rule)", background: "transparent", borderRadius: "6px", fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.06em", cursor: "pointer", textTransform: "uppercase", whiteSpace: "nowrap" }}>
                Cookievoorkeur resetten
              </button>
            </>)
          },
        ].map((s, i) => (
          <div key={i} style={{ marginBottom: "48px", borderTop: i > 0 ? "1px solid var(--rule)" : "none", paddingTop: i > 0 ? "40px" : "0" }}>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2vw, 28px)", fontWeight: 400, marginBottom: "16px", lineHeight: 1.3 }}>{s.title}</h2>
            {s.body}
          </div>
        ))}

        <div style={{ borderTop: "1px solid var(--rule)", paddingTop: "32px", marginBottom: "48px" }}>
          <p style={{ fontSize: "14px", lineHeight: 1.75, color: "var(--muted)" }}>Klacht over privacy? Neem contact op met de <a href="https://www.autoriteitpersoonsgegevens.nl" target="_blank" rel="noreferrer" style={{ color: "var(--accent)" }}>Autoriteit Persoonsgegevens</a>.</p>
          <p style={{ fontSize: "13px", color: "var(--muted)", marginTop: "12px", fontFamily: "var(--font-mono)" }}>Laatste update: mei 2026</p>
        </div>

      </div>
    </section>
    <Footer />
  </>);
}