/* global React, useReveal, BigCTA, Footer */
function QuintessencePage() {
  if (typeof useReveal === "function") useReveal();

  const openAanvraag = (aanvraag) =>
    window.openLeadGate && window.openLeadGate("aanvraag", { naam: "Quintessence Marbella", aanvraag });

  const galleryRef = React.useRef(null);
  const scrollGallery = (dir) => {
    const el = galleryRef.current;
    if (!el) return;
    const first = el.firstElementChild;
    const step = first ? first.getBoundingClientRect().width + 16 : el.clientWidth * 0.8;
    el.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  const gallery = [
    { src: "/quintessence-terras.jpg",     alt: "Terras met zwembad en zeezicht in Quintessence" },
    { src: "/quintessence-living.jpg",     alt: "Woonkamer met zeezicht in de show flat van Quintessence" },
    { src: "/quintessence-keuken.jpg",     alt: "Open keuken met eethoek in de show flat van Quintessence" },
    { src: "/quintessence-slaapkamer.jpg", alt: "Slaapkamer in de show flat van Quintessence" },
    { src: "/quintessence-badkamer.jpg",   alt: "Badkamer in de show flat van Quintessence" },
    { src: "/quintessence-terras2.jpg",    alt: "Overdekt terras van een woning in Quintessence" },
    { src: "/quintessence-penthouse.jpg",  alt: "Penthouse-terras met zeezicht in Quintessence" },
    { src: "/quintessence-coworking.jpg",  alt: "Coworkingruimte van Quintessence" },
    { src: "/quintessence-gym.jpg",        alt: "Volledig uitgeruste gym van Quintessence" },
    { src: "/quintessence-tuin.jpg",       alt: "Begane-grondwoning met privétuin en zwembad in Quintessence" },
  ];

  const facts = [
    { lab: "Vanafprijs",  val: "€ 575.000 excl. btw" },
    { lab: "Rendement",   val: "5–7% bruto", note: "indicatie, geen garantie" },
    { lab: "Slaapkamers", val: "2 of 3" },
    { lab: "Oplevering",  val: "Fase 1 klaar · fase 2 in 2026" },
  ];

  const betaalplanFase1 = [
    ["Reservering", "€ 10.000 + btw"],
    ["Bij akte (max. 90 dagen)", "100% (minus de reservering)"],
  ];
  const betaalplanFase2 = [
    ["Reservering", "€ 10.000 + btw"],
    ["Bij koopcontract (na 60 dagen)", "30% (minus de reservering)"],
    ["Bij oplevering (akte)", "70%"],
  ];

  const renderRows = (rows) => rows.map(([k, v], i) => (
    <div key={i} className="betaalplan-row" style={{ borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none" }}>
      <span style={{ fontSize: "16px", color: "var(--muted)" }}>{k}</span>
      <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(19px,1.9vw,24px)", letterSpacing: "-0.01em", whiteSpace: "nowrap" }}>{v}</span>
    </div>
  ));

  return (<>
    {/* ── Hero ───────────────────────────────────────────── */}
    <section className="alura-hero" style={{ position: "relative", minHeight: "82vh", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "url(/quintessence-hero.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} role="img" aria-label="Communaal zwembad met loungetuin van Quintessence" />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(16,13,10,0.30) 0%, rgba(16,13,10,0.12) 38%, rgba(16,13,10,0.85) 100%), linear-gradient(90deg, rgba(16,13,10,0.50) 0%, rgba(16,13,10,0.15) 45%, rgba(16,13,10,0) 70%)" }} />
      <div style={{ position: "relative", width: "100%", maxWidth: "1480px", margin: "0 auto", padding: "0 clamp(20px,5vw,64px) clamp(40px,6vw,72px)", color: "#fff" }}>
        <span className="eyebrow" style={{ color: "#fff" }}><span className="dot"></span>Sleutelklaar &amp; off-plan · Costa del Sol · Marbella</span>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(40px,6vw,84px)", lineHeight: 1.02, letterSpacing: "-0.02em", margin: "16px 0 12px", fontWeight: 400 }}>Quintessence<br /><em>Marbella</em>.</h1>
        <p style={{ maxWidth: "56ch", fontSize: "clamp(16px,1.4vw,20px)", lineHeight: 1.6, color: "rgba(255,255,255,0.9)" }}>
          Vijfsterren appartementen met zeezicht in Altos de los Monteros, op vijf minuten van Marbella.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "16px", alignItems: "center", marginTop: "28px" }}>
          <button onClick={() => openAanvraag("de actuele prijslijst, beschikbaarheid & plattegronden")} className="cta-pill cta-pill--accent" style={{ padding: "16px 26px", fontSize: "14px", border: 0, cursor: "pointer", font: "inherit" }} data-cursor-hover data-cursor-label="Aanvragen">
            <span>Prijslijst & beschikbaarheid aanvragen</span>
            <svg className="arrow" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" width="14" height="14"><path d="M2 7h10M8 3l4 4-4 4" /></svg>
          </button>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "13px", letterSpacing: "0.06em", color: "#fff", fontWeight: 700 }}>Vanaf € 575.000 excl. btw</span>
        </div>
      </div>
    </section>

    {/* ── Intro / samenvatting ───────────────────────────── */}
    <section className="section">
      <div className="section-grid">
        <div className="section-eye reveal-fade">
          <span className="eyebrow"><span className="dot"></span>Het project</span>
        </div>
        <div>
          <h2 className="section-title reveal-fade">Vijfsterren wonen<br /><em>boven Marbella</em>.</h2>
          <div className="reveal-fade" style={{ marginTop: "32px", maxWidth: "68ch", fontSize: "17px", lineHeight: 1.8, color: "var(--muted)" }}>
            <p style={{ marginBottom: "20px" }}>
              Quintessence is een exclusief project van 96 woningen met twee of drie slaapkamers, verdeeld over twaalf lage gebouwen tussen uitgestrekte tuinen. Je kiest uit begane-grondwoningen met eigen tuin en privézwembad, woningen op de eerste verdieping met een groot terras, en penthouses met solarium waar een mini-zwembad mogelijk is. Alle woningen hebben zeezicht en zijn volledig ingericht als smart home. In het complex vind je een Social Club, een zwembad met zeezicht en pool bar, een spa met Turks bad, een gym en een coworkingruimte.
            </p>
            <p>
              Een deel van het project is al <strong>sleutelklaar</strong> (fase 1), dus je kunt er meteen in. Fase 2 is in aanbouw met oplevering in 2026 en een gespreid betaalplan, waarbij je het grootste deel pas bij de sleutel betaalt. Via Vastgoed staat in direct contact met de ontwikkelaar, dus je krijgt alles uit de eerste hand.
            </p>
          </div>
        </div>
      </div>
    </section>

    {/* ── Feiten ─────────────────────────────────────────── */}
    <section className="section" style={{ paddingTop: 0 }}>
      <div style={{ maxWidth: "1480px", margin: "0 auto" }}>
        <div className="alura-facts" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: "1px", background: "var(--line)", border: "1px solid var(--line)", borderRadius: "10px", overflow: "hidden" }}>
          {facts.map((f, i) => (
            <div key={i} className="reveal-fade" style={{ background: "var(--bg, #fff)", padding: "26px 24px" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)", marginBottom: "10px" }}>{f.lab}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(19px,1.7vw,23px)", letterSpacing: "-0.01em" }}>{f.val}</div>
              {f.note && <div style={{ fontSize: "12px", color: "var(--muted)", marginTop: "4px" }}>{f.note}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ── Galerij ────────────────────────────────────────── */}
    <section className="section" style={{ paddingTop: "20px" }}>
      <div style={{ maxWidth: "1480px", margin: "0 auto" }}>
        <div style={{ marginBottom: "28px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px" }}>
          <span className="eyebrow"><span className="dot"></span>Beeld · renders &amp; show flat</span>
          <div className="gallery-nav" style={{ display: "flex", gap: "10px" }}>
            <button type="button" className="gallery-nav-btn" aria-label="Vorige beeld" onClick={() => scrollGallery(-1)} data-cursor-hover>
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 5l-7 7 7 7" /></svg>
            </button>
            <button type="button" className="gallery-nav-btn" aria-label="Volgende beeld" onClick={() => scrollGallery(1)} data-cursor-hover>
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 5l7 7-7 7" /></svg>
            </button>
          </div>
        </div>
        <div className="gallery-hint" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M8 9l-4 3 4 3M16 9l4 3-4 3M4 12h16" /></svg>
          <span>Swipe om de beelden te bekijken</span>
        </div>
        <div ref={galleryRef} className="hscroll" style={{ display: "flex", gap: "16px", overflowX: "auto", overflowY: "hidden", scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch", paddingBottom: "4px" }}>
          {gallery.map((g, i) => (
            <div key={i} className="reveal-fade" style={{ "--reveal-delay": (i * 0.05) + "s", flex: "0 0 auto", width: "clamp(280px, 82vw, 460px)", aspectRatio: "4 / 3", backgroundImage: `url(${g.src})`, backgroundSize: "cover", backgroundPosition: "center", borderRadius: "10px", scrollSnapAlign: "start" }} role="img" aria-label={g.alt} />
          ))}
        </div>
      </div>
    </section>

    {/* ── Betaalplan (twee fases) ────────────────────────── */}
    <section className="section">
      <div className="section-grid">
        <div className="section-eye reveal-fade">
          <span className="eyebrow"><span className="dot"></span>Betaalplan per fase</span>
        </div>
        <div>
          <h2 className="section-title reveal-fade">Direct instappen of<br /><em>gespreid meebouwen</em>.</h2>
          <div className="reveal-fade" style={{ marginTop: "32px", maxWidth: "640px", display: "grid", gap: "36px" }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "10px" }}>Fase 1 · sleutelklaar</div>
              {renderRows(betaalplanFase1)}
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "10px" }}>Fase 2 · in aanbouw (oplevering 2026)</div>
              {renderRows(betaalplanFase2)}
            </div>
            <p style={{ fontSize: "13px", color: "var(--muted)", lineHeight: 1.6 }}>
              Prijzen starten vanaf € 575.000 excl. btw. De actuele beschikbaarheid en plattegronden veranderen snel; die delen we het liefst persoonlijk.
            </p>
          </div>
        </div>
      </div>
    </section>

    {/* ── Gated CTA ──────────────────────────────────────── */}
    <section className="section" style={{ paddingTop: 0 }}>
      <div style={{ maxWidth: "1480px", margin: "0 auto" }}>
        <div className="reveal-fade" style={{ background: "var(--ink, #14110d)", color: "#fff", borderRadius: "14px", padding: "clamp(32px,5vw,64px)", display: "flex", flexWrap: "wrap", gap: "28px", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ maxWidth: "60ch" }}>
            <span className="eyebrow" style={{ color: "#fff" }}><span className="dot"></span>Persoonlijk & actueel</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px,3.2vw,42px)", lineHeight: 1.1, letterSpacing: "-0.02em", margin: "16px 0 12px", fontWeight: 400 }}>Wil je de actuele prijslijst,<br />beschikbaarheid en plattegronden?</h2>
            <p style={{ fontSize: "16px", lineHeight: 1.7, color: "rgba(255,255,255,0.82)" }}>
              Laat je gegevens achter en we sturen je persoonlijk de actuele prijslijst, beschikbare woningen, plattegronden en de brochure toe.
            </p>
          </div>
          <button onClick={() => openAanvraag("de actuele prijslijst, beschikbaarheid, plattegronden & brochure")} className="cta-pill cta-pill--accent" style={{ padding: "18px 28px", fontSize: "15px", border: 0, cursor: "pointer", font: "inherit", flexShrink: 0 }} data-cursor-hover data-cursor-label="Aanvragen">
            <span>Laat je gegevens achter</span>
            <svg className="arrow" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" width="14" height="14"><path d="M2 7h10M8 3l4 4-4 4" /></svg>
          </button>
        </div>
      </div>
    </section>

    {typeof BigCTA === "function" && <BigCTA />}
    {typeof Footer === "function" && <Footer />}
  </>);
}