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

  const openAanvraag = (aanvraag) =>
    window.openLeadGate && window.openLeadGate("aanvraag", { naam: "Laguna One", 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: "/laguna-gevel.jpg",  alt: "Gevel met aangelegde tuinen van Laguna One in Mijas" },
    { src: "/laguna-terras.jpg", alt: "Terras met loungezone en bergzicht in een woning van Laguna One" },
    { src: "/laguna-living.jpg", alt: "Open woonkeuken met terrastoegang in Laguna One" },
    { src: "/laguna-card.jpg",   alt: "Luchtfoto van Laguna One met zee en Fuengirola op de achtergrond" },
  ];

  const facts = [
    { lab: "Vanafprijs",      val: "€ 250.800 excl. btw" },
    { lab: "Beschikbaarheid", val: "26 van 116 woningen" },
    { lab: "Slaapkamers",     val: "1" },
    { lab: "Oplevering",      val: "Naar verwachting Q4 2028" },
    { lab: "Rendement",       val: "6–8% bruto", note: "indicatie, geen garantie" },
  ];

  const betaalplan = [
    ["Reservering", "€ 12.000"],
    ["Bij koopcontract (privécontract)", "50% + btw"],
    ["12 maanden na koopcontract", "10% + btw"],
    ["Bij oplevering (akte)", "40% + btw"],
  ];

  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(/laguna-hero.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} role="img" aria-label="Gemeenschappelijk zwembad met loungebar van Laguna One in Mijas" />
      <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>Off-plan · Costa del Sol · Mijas · Gated community</span>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(38px,5.4vw,76px)", lineHeight: 1.02, letterSpacing: "-0.02em", margin: "16px 0 12px", fontWeight: 400 }}>Laguna<br /><em>One</em>.</h1>
        <p style={{ maxWidth: "56ch", fontSize: "clamp(16px,1.4vw,20px)", lineHeight: 1.6, color: "rgba(255,255,255,0.9)" }}>
          Instapklare off-plan één-slaapkamerappartementen in een afgesloten community in Mijas, vlak bij Fuengirola, met een zwembad, coworkingruimte en alle voorzieningen op loopafstand.
        </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 € 250.800 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">Instapklaar wonen<br /><em>vlak bij Fuengirola</em>.</h2>
          <div className="reveal-fade" style={{ marginTop: "32px", maxWidth: "68ch", fontSize: "17px", lineHeight: 1.8, color: "var(--muted)" }}>
            <p style={{ marginBottom: "20px" }}>
              Laguna One is een afgesloten community van 116 off-plan appartementen, allemaal met één slaapkamer, in Las Lagunas de Mijas op een steenworp van Fuengirola. Compacte, lichte woningen met een open leefruimte en terras, in een complex met een gemeenschappelijk zwembad, een barbecuezone en een coworkingruimte. Winkels, scholen, het strand en het station liggen om de hoek. Met een instapprijs vanaf € 250.800 is dit een van de toegankelijkste manieren om aan de Costa del Sol te investeren, ideaal voor verhuur dankzij de vraag naar compacte woningen in dit gebied.
            </p>
            <p>
              Omdat je off-plan koopt, leg je nu een woning vast tegen de instapprijs en betaal je gespreid tijdens de bouw. Het grootste deel betaal je pas bij oplevering, wanneer je de sleutel krijgt. Ontwikkelaar is Inversiones Paysandú, dezelfde partij achter Jardines de las Lagunas. Via Vastgoed staat in direct contact met de partij achter het project, 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 van de ontwikkelaar</span>
          <div className="gallery-nav" style={{ display: "flex", gap: "10px" }}>
            <button type="button" className="gallery-nav-btn" aria-label="Vorige render" 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 render" 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 ─────────────────────────────────────── */}
    <section className="section">
      <div className="section-grid">
        <div className="section-eye reveal-fade">
          <span className="eyebrow"><span className="dot"></span>Gespreid betaalplan</span>
        </div>
        <div>
          <h2 className="section-title reveal-fade">Nu vastleggen,<br /><em>gespreid betalen</em>.</h2>
          <div className="reveal-fade" style={{ marginTop: "32px", maxWidth: "640px" }}>
            {betaalplan.map(([k, v], i) => (
              <div key={i} className="betaalplan-row" style={{ borderBottom: i < betaalplan.length - 1 ? "1px solid var(--line)" : "none" }}>
                <span style={{ fontSize: "16px", color: "var(--muted)" }}>{k}</span>
                <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px,2vw,26px)", letterSpacing: "-0.01em", whiteSpace: "nowrap" }}>{v}</span>
              </div>
            ))}
            <p style={{ fontSize: "13px", color: "var(--muted)", marginTop: "16px", lineHeight: 1.6 }}>
              Prijzen starten vanaf € 250.800 excl. btw. De bouwvergunning is verleend, bouw start in 2026 met oplevering naar verwachting in Q4 2028. Het grootste deel betaal je gespreid tijdens de bouw. 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 />}
  </>);
}