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

  const openAanvraag = (aanvraag) =>
    window.openLeadGate && window.openLeadGate("aanvraag", { naam: "Navigolf Suites II", 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: "/navigolf-lucht.jpg",    alt: "Luchtfoto van het complex aan de golf in Navigolf Suites II La Cala de Mijas" },
    { src: "/navigolf-terras.jpg",   alt: "Terras met zwembad en zeezicht bij een appartement in Navigolf Suites II La Cala de Mijas" },
    { src: "/navigolf-solarium.jpg", alt: "Dakterras met solarium en zeezicht in Navigolf Suites II La Cala de Mijas" },
    { src: "/navigolf-gevel.jpg",    alt: "Gevel met ruime terrassen in Navigolf Suites II La Cala de Mijas" },
  ];

  const facts = [
    { lab: "Vanafprijs",      val: "€ 430.000 excl. btw" },
    { lab: "Beschikbaarheid", val: "11 van 32 (tweede fase)" },
    { lab: "Slaapkamers",     val: "1 of 2" },
    { lab: "Oplevering",      val: "Naar verwachting Q4 2027" },
    { lab: "Rendement",       val: "6–8% bruto", note: "indicatie, geen garantie" },
  ];

  const prijzen = [
    ["1 slaapkamer",  "vanaf € 430.000"],
    ["2 slaapkamers", "vanaf € 520.000"],
  ];

  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(/navigolf-hero.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} role="img" aria-label="Appartementencomplex met ruime terrassen aan de golf in Navigolf Suites II La Cala de 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>Under construction · Costa del Sol · Mijas · La Cala de Mijas</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 }}>Navigolf<br /><em>Suites II</em>.</h1>
        <p style={{ maxWidth: "56ch", fontSize: "clamp(16px,1.4vw,20px)", lineHeight: 1.6, color: "rgba(255,255,255,0.9)" }}>
          De tweede fase van een gevestigde urbanisatie in La Cala de Mijas, naast golfbaan La Noria, dicht bij zee en golf met alle voorzieningen binnen handbereik.
        </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 € 430.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">Tweede fase<br /><em>aan de golf en de zee</em>.</h2>
          <div className="reveal-fade" style={{ marginTop: "32px", maxWidth: "68ch", fontSize: "17px", lineHeight: 1.8, color: "var(--muted)" }}>
            <p style={{ marginBottom: "20px" }}>
              Navigolf Suites II is de tweede fase van een gevestigde urbanisatie van 82 woningen in La Cala de Mijas. Deze fase bestaat uit blok 6 en 7 met 32 nieuwe appartementen met één of twee slaapkamers. De woningen hebben ruime terrassen die het zeezicht binnenhalen, sommige met een eigen solarium, en delen een zwembad in het groen. Een comfortabele plek naast golfbaan La Noria en op korte afstand van het strand.
            </p>
            <p>
              Omdat je in de bouwfase koopt, leg je nu een appartement vast en betaal je gespreid tijdens de bouw. Het grootste deel betaal je pas bij oplevering, wanneer je de sleutel krijgt. Via Vastgoed staat in direct contact met de partij achter het project, dus je krijgt de actuele prijslijst, voorwaarden en plattegronden 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>

    {/* ── Vanafprijs per woningtype ──────────────────────── */}
    {prijzen.length > 1 && (
      <section className="section" style={{ paddingTop: "16px" }}>
        <div style={{ maxWidth: "1480px", margin: "0 auto" }}>
          <div className="reveal-fade" style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "14px 32px", padding: "20px 24px", border: "1px solid var(--line)", borderRadius: "10px" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)" }}>Vanafprijs per type</span>
            {prijzen.map(([t, p], i) => (
              <span key={i} style={{ display: "inline-flex", alignItems: "baseline", gap: "10px" }}>
                <span style={{ fontSize: "15px", color: "var(--muted)" }}>{t}</span>
                <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(17px,1.5vw,21px)", letterSpacing: "-0.01em" }}>{p}</span>
              </span>
            ))}
          </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 (tekst, geen infosheet) ─────────────── */}
    <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", fontSize: "17px", lineHeight: 1.8, color: "var(--muted)" }}>
            <p style={{ marginBottom: "16px" }}>
              Dit project koop je in de bouwfase met een gespreid betaalplan: je legt nu een appartement vast met een reservering, betaalt een deel bij de ondertekening van het privécontract en het grootste deel pas bij oplevering, wanneer je de sleutel krijgt.
            </p>
            <p style={{ fontSize: "13px", color: "var(--muted)", lineHeight: 1.6 }}>
              Prijzen starten vanaf € 430.000 excl. btw (1 slaapkamer) en € 520.000 excl. btw (2 slaapkamers). Deze fase is in aanbouw, met oplevering naar verwachting in Q4 2027. De exacte betaalvoorwaarden, actuele beschikbaarheid en plattegronden 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 appartementen, 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 />}
  </>);
}