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

  const openAanvraag = (aanvraag) =>
    window.openLeadGate && window.openLeadGate("aanvraag", { naam: "Isla Bela", 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: "/isla-lucht.jpg",      alt: "Luchtfoto van het complex met zwembad en tuinen in Isla Bela Nueva Andalucía Marbella" },
    { src: "/isla-living.jpg",     alt: "Lichte woonkamer met grote schuifpuien naar het terras in Isla Bela Marbella" },
    { src: "/isla-keuken.jpg",     alt: "Open keuken met eethoek in een appartement van Isla Bela Marbella" },
    { src: "/isla-slaapkamer.jpg", alt: "Master slaapkamer met terras in Isla Bela Marbella" },
    { src: "/isla-terras.jpg",     alt: "Overdekt terras met loungezone bij een appartement in Isla Bela Marbella" },
    { src: "/isla-spa.jpg",        alt: "Binnenzwembad en spa in Isla Bela Marbella" },
    { src: "/isla-omgeving.jpg",   alt: "Het complex tussen de golfvallei van Nueva Andalucía in Marbella" },
    { src: "/isla-strand.jpg",     alt: "De kust bij Puerto Banús op korte afstand van Isla Bela Marbella" },
  ];

  const facts = [
    { lab: "Vanafprijs",      val: "€ 785.000 excl. btw" },
    { lab: "Beschikbaarheid", val: "65 van 114 appartementen" },
    { lab: "Slaapkamers",     val: "2, 3 of 4" },
    { lab: "Oplevering",      val: "Naar verwachting Q4 2028" },
    { lab: "Rendement",       val: "5–7% bruto", note: "indicatie, geen garantie" },
  ];

  const prijzen = [
    ["2 slaapkamers", "vanaf € 785.000"],
    ["3 slaapkamers", "vanaf € 950.000"],
    ["4 slaapkamers", "vanaf € 1.314.000"],
  ];

  const betaalplan = [
    ["Reservering", "€ 10.000 + btw"],
    ["Bij koopcontract (privécontract)", "30% + btw"],
    ["6 maanden na contract", "5% + btw"],
    ["12 maanden na contract", "5% + btw"],
    ["Bij oplevering (akte)", "60% + 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(/isla-hero.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} role="img" aria-label="Modern appartementencomplex met zwembad en tuinen in Isla Bela Nueva Andalucía 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>Under construction · Costa del Sol · Marbella · Nueva Andalucía</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 }}>Isla<br /><em>Bela</em>.</h1>
        <p style={{ maxWidth: "56ch", fontSize: "clamp(16px,1.4vw,20px)", lineHeight: 1.6, color: "rgba(255,255,255,0.9)" }}>
          Een besloten community in de golfvallei van Nueva Andalucía, op enkele minuten van Puerto Banús en omringd door de bekendste golfbanen van Marbella.
        </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 € 785.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">Besloten community<br /><em>met avant-garde architectuur</em>.</h2>
          <div className="reveal-fade" style={{ marginTop: "32px", maxWidth: "68ch", fontSize: "17px", lineHeight: 1.8, color: "var(--muted)" }}>
            <p style={{ marginBottom: "20px" }}>
              Isla Bela is een gated community van 114 appartementen met twee, drie of vier slaapkamers, met een open leefruimte en ruime terrassen. Elke woning heeft twee ondergrondse parkeerplaatsen, een berging, vloerverwarming door het hele huis en een voorinstallatie voor een laadpunt. De bewoners delen een binnen- en buitenzwembad, een volledig uitgeruste gym, een spa en een multifunctionele ruimte. Modern wonen op een van de meest gewilde plekken van Marbella.
            </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. Ontwikkelaar is Gestilar, met architectuur van Morph Studios en de bouw in handen van Dragados. 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 € 785.000 excl. btw (2 slaapkamers), € 950.000 excl. btw (3 slaapkamers) en € 1.314.000 excl. btw (4 slaapkamers). Het project is in aanbouw, met oplevering naar verwachting in Q4 2028. 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 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 />}
  </>);
}