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

  const openAanvraag = (aanvraag) =>
    window.openLeadGate && window.openLeadGate("aanvraag", { naam: "Naya Residences", 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: "/naya-living.jpg",     alt: "Lichte open woonkamer met keuken in een appartement van Naya Residences in Estepona" },
    { src: "/naya-indoorpool.jpg", alt: "Verwarmd binnenzwembad met wellness-inrichting bij Naya Residences in Estepona" },
    { src: "/naya-gym.jpg",        alt: "Volledig uitgeruste gemeenschappelijke fitnessruimte bij Naya Residences in Estepona" },
    { src: "/naya-terrace.jpg",    alt: "Ruim terras met uitzicht bij Naya Residences in Estepona" },
  ];

  const facts = [
    { lab: "Vanafprijs",      val: "€ 668.000 excl. btw" },
    { lab: "Beschikbaarheid", val: "In verkoop" },
    { lab: "Slaapkamers",     val: "2 of 3" },
    { lab: "Status",          val: "In aanbouw" },
    { lab: "Rendement",       val: "5–7% bruto", note: "indicatie, geen garantie" },
  ];

  const prijzen = [];

  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(/naya-hero.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} role="img" aria-label="Het zwembad en de gebouwen van Naya Residences in Estepona" />
      <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>In aanbouw · Costa del Sol · Estepona</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 }}>Naya<br /><em>Residences</em>.</h1>
        <p style={{ maxWidth: "56ch", fontSize: "clamp(16px,1.4vw,20px)", lineHeight: 1.6, color: "rgba(255,255,255,0.9)" }}>
          Een nieuwbouwproject in Estepona met ruime appartementen van 2 en 3 slaapkamers, gelijkvloerse woningen met privétuin en penthouses met open uitzicht. Resortvoorzieningen: een buitenzwembad en verwarmd binnenzwembad, spa, gym en aangelegde tuinen, op minuten van Puerto Banús.
        </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 € 668.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">Resortwonen<br /><em>in Estepona</em>.</h2>
          <div className="reveal-fade" style={{ marginTop: "32px", maxWidth: "68ch", fontSize: "17px", lineHeight: 1.8, color: "var(--muted)" }}>
            <p style={{ marginBottom: "20px" }}>
              Naya Residences is een nieuwbouwproject in Estepona met appartementen van 2 en 3 slaapkamers in uiteenlopende indelingen: ruime terrassen, gelijkvloerse woningen met een privétuin en penthouses met open uitzicht. De woningen zijn licht en ruimtelijk, met hoogwaardige afwerking en een sterke verbinding tussen binnen en buiten. De gebouwen zijn getrapt geplaatst om privacy en oriëntatie te optimaliseren.
            </p>
            <p>
              De gemeenschappelijke ruimtes liggen in het hart van het complex: een centraal buitenzwembad met ligweides, een verwarmd binnenzwembad, een spa, een volledig uitgeruste gym, aangelegde tuinen en een street-workoutzone. De ligging in een gevestigde, goed bereikbare woonwijk in Estepona combineert rust en privacy met alle voorzieningen op minuten afstand, en Puerto Banús vlakbij. Via Vastgoed staat in direct contact met de partij achter het project.
            </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>

    {/* ── In aanbouw / persoonlijk ───────────────────────── */}
    <section className="section">
      <div className="section-grid">
        <div className="section-eye reveal-fade">
          <span className="eyebrow"><span className="dot"></span>In aanbouw</span>
        </div>
        <div>
          <h2 className="section-title reveal-fade">Nu vastleggen,<br /><em>in de instapfase</em>.</h2>
          <div className="reveal-fade" style={{ marginTop: "32px", maxWidth: "640px", fontSize: "16px", lineHeight: 1.8, color: "var(--muted)" }}>
            <p style={{ marginBottom: "16px" }}>
              Prijzen starten vanaf € 668.000 excl. btw voor een appartement met 2 slaapkamers. Omdat het project in aanbouw is, koop je nu in de instapfase en leg je een woning vroeg vast.
            </p>
            <p>
              Het exacte betaalplan, de opleverplanning en de actuele beschikbaarheid delen we het liefst persoonlijk. Laat je gegevens achter en we sturen je alles rechtstreeks toe.
            </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 />}
  </>);
}