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

  const openAanvraag = (aanvraag) =>
    window.openLeadGate && window.openLeadGate("aanvraag", { naam: "Santa Clara Homes", 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: "/santaclara-pool.jpg",      alt: "Gemeenschappelijk zwembad tussen de woningen in Santa Clara Homes Marbella" },
    { src: "/santaclara-zwembad.jpg",   alt: "Zwembadzone van het opgeleverde project Santa Clara Homes Marbella" },
    { src: "/santaclara-lucht.jpg",     alt: "Luchtfoto van het complex met zwembad in Santa Clara Homes Marbella" },
    { src: "/santaclara-zee.jpg",       alt: "Het complex met de zee op de achtergrond in Santa Clara Homes Marbella" },
    { src: "/santaclara-overzicht.jpg", alt: "Overzicht van de woningen tussen het groen in Santa Clara Homes Marbella" },
    { src: "/santaclara-golf.jpg",      alt: "Het project aan de golfbaan met zeezicht in Santa Clara Homes Marbella" },
    { src: "/santaclara-horizon.jpg",   alt: "Luchtfoto met de kustlijn achter Santa Clara Homes Marbella" },
  ];

  const facts = [
    { lab: "Vanafprijs",      val: "€ 1.355.000 excl. btw" },
    { lab: "Beschikbaarheid", val: "Nog 4 van 104" },
    { lab: "Slaapkamers",     val: "3 of 4" },
    { lab: "Oplevering",      val: "Opgeleverd · instapklaar" },
    { lab: "Rendement",       val: "5–7% bruto", note: "indicatie, geen garantie" },
  ];

  const prijzen = [
    ["3 slaapkamers", "vanaf € 1.355.000"],
  ];

  const betaalplan = [
    ["Bij ondertekening privécontract", "€ 9.000"],
    ["Bij akte (levering)", "100% + btw, minus reservering"],
  ];

  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(/santaclara-hero.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} role="img" aria-label="Opgeleverd complex met gemeenschappelijk zwembad in Santa Clara Homes Marbella" />
      <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 · Costa del Sol · Marbella · Río Real Golf</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 }}>Santa Clara<br /><em>Homes</em>.</h1>
        <p style={{ maxWidth: "56ch", fontSize: "clamp(16px,1.4vw,20px)", lineHeight: 1.6, color: "rgba(255,255,255,0.9)" }}>
          Opgeleverde appartementen met een eigen privézwembad aan de golf in Marbella East, op vier minuten van Río Real Golf en het strand. Instapklaar, met nog maar enkele woningen beschikbaar.
        </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 € 1.355.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">Instapklaar wonen<br /><em>aan de golf</em>.</h2>
          <div className="reveal-fade" style={{ marginTop: "32px", maxWidth: "68ch", fontSize: "17px", lineHeight: 1.8, color: "var(--muted)" }}>
            <p style={{ marginBottom: "20px" }}>
              Santa Clara Homes is een besloten community van 104 appartementen met drie of vier slaapkamers, allemaal en-suite, met een eigen privézwembad per woning. Er zijn maar vier woningen per blok. De appartementen hebben een open, volledig ingerichte keuken, airconditioning via Airzone, vloerverwarming door het hele huis en twee parkeerplaatsen. De bewoners delen een gemeenschappelijk zwembad, een gym, een binnenzwembad, een spa en tuinen.
            </p>
            <p>
              Het project is opgeleverd, dus je kunt er direct in en betaalt het grootste deel pas bij de akte. Er zijn nog maar enkele woningen beschikbaar. Ontwikkelaar is Neinor Homes, een beursgenoteerde marktleider in nieuwbouw in Spanje. 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>

    {/* ── 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 · foto's van het opgeleverde project</span>
          <div className="gallery-nav" style={{ display: "flex", gap: "10px" }}>
            <button type="button" className="gallery-nav-btn" aria-label="Vorige foto" 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 foto" 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>

    {/* ── Betaalvoorwaarden ──────────────────────────────── */}
    <section className="section">
      <div className="section-grid">
        <div className="section-eye reveal-fade">
          <span className="eyebrow"><span className="dot"></span>Instapklaar</span>
        </div>
        <div>
          <h2 className="section-title reveal-fade">Opgeleverd,<br /><em>direct te betrekken</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 € 1.355.000 excl. btw voor een appartement met drie slaapkamers. Het project is opgeleverd en instapklaar; er zijn nog maar enkele woningen beschikbaar. De 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 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 />}
  </>);
}