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

  const openAanvraag = (aanvraag) =>
    window.openLeadGate && window.openLeadGate("aanvraag", { naam: "Ocyan Villas", 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: "/ocyan-terras.jpg",   alt: "Terras met privézwembad en panoramisch zeezicht bij een villa in Ocyan Villas Estepona" },
    { src: "/ocyan-gevel.jpg",    alt: "Moderne witte villa-architectuur in Ocyan Villas Estepona" },
    { src: "/ocyan-living.jpg",   alt: "Ruime woonkamer met zeezicht in een villa van Ocyan Villas Estepona" },
    { src: "/ocyan-omgeving.jpg", alt: "Villa's van Ocyan Villas in het groen boven de kust van Estepona" },
  ];

  const facts = [
    { lab: "Vanafprijs",      val: "€ 3.250.000 excl. btw" },
    { lab: "Beschikbaarheid", val: "6 van 12 villa's" },
    { lab: "Slaapkamers",     val: "3 of 4" },
    { lab: "Oplevering",      val: "Naar verwachting Q3 2026" },
    { lab: "Rendement",       val: "5–7% bruto", note: "indicatie, geen garantie" },
  ];

  const prijzen = [
    ["3 slaapkamers", "vanaf € 3.250.000"],
    ["4 slaapkamers", "vanaf € 4.600.000"],
  ];

  const betaalplan = [
    ["Reservering", "1%"],
    ["Bij koopcontract (privécontract)", "39% + btw"],
    ["Uitgestelde betaling", "10% + btw"],
    ["Bij oplevering (akte)", "50% + 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(/ocyan-hero.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} role="img" aria-label="Villa met privézwembad en panoramisch zeezicht in Ocyan Villas 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>Under construction · Costa del Sol · Estepona · Luxevilla's</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 }}>Ocyan<br /><em>Villas</em>.</h1>
        <p style={{ maxWidth: "56ch", fontSize: "clamp(16px,1.4vw,20px)", lineHeight: 1.6, color: "rgba(255,255,255,0.9)" }}>
          Een exclusieve collectie van slechts 12 luxevilla's op grote kavels in Estepona, dicht bij Villa Padierna, met spectaculair zeezicht, privézwembad, gym en op loopafstand van het strand.
        </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 € 3.250.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">Exclusieve villa's met<br /><em>spectaculair zeezicht</em>.</h2>
          <div className="reveal-fade" style={{ marginTop: "32px", maxWidth: "68ch", fontSize: "17px", lineHeight: 1.8, color: "var(--muted)" }}>
            <p style={{ marginBottom: "20px" }}>
              Ocyan Villas is een besloten project van slechts 12 luxevilla's in Estepona, vlak bij het bekende Villa Padierna. De villa's staan op grote kavels van 1.000 tot 2.000 m², liggen op het zuiden en zuidwesten en kijken uit over de zee. Elke villa heeft een volledig ingerichte Modulnova-keuken, ruime terrassen, een privézwembad en gym, inbouwkasten, parking en berging. Het strand ligt op ongeveer vijftien minuten lopen. Wonen op het hoogste niveau aan de Costa del Sol.
            </p>
            <p>
              Omdat je in de bouwfase koopt, leg je nu een villa vast en betaal je gespreid tijdens de bouw. Het grootste deel betaal je pas bij oplevering, wanneer je de sleutel krijgt. Ontwikkelaar is Chase Red. 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 · 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 € 3.250.000 excl. btw (3 slaapkamers) en € 4.600.000 excl. btw (4 slaapkamers). De bouw is gestart, met oplevering van de eerste villa's naar verwachting in Q3 2026. 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 villa's, 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 />}
  </>);
}