/* global React */
const { useState: useS2, useEffect: useE2, useMemo: useM2, useRef: useR2, useCallback: useC2 } = React;

/* ============================================================
   Nav
   ============================================================ */
function Nav({ locale, setLocale }) {
  const [scrolled, setScrolled] = useS2(false);
  useE2(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="shell nav-inner">
        <a className="nav-logo" href="#top">
          <MirageWordmark />
          <span className="pp-tag">Project Point<br />Dubai · d3</span>
        </a>
        <div className="nav-links">
          <a href="#collections">Collections</a>
          <a href="#applications">Applications</a>
          <a href="#project-point">The Project Point</a>
          <a href="#about">About</a>
          <a href="#book">Contact</a>
        </div>
        <div className="nav-right">
          <div className="locale" role="group" aria-label="Language">
            {["en","ar","ru","zh"].map(l => (
              <span key={l} className={locale === l ? "active" : ""} onClick={() => setLocale(l)}>{l.toUpperCase()}</span>
            ))}
          </div>
          <a className="btn sm" href="#book">
            Book a consultation <ArrowR />
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ============================================================
   Hero
   ============================================================ */
const HERO_OPTIONS = {
  showroom: { img: "assets/showroom-01.webp", alt: "Mirage Project Point Dubai showroom" },
  entry:    { img: "assets/project-point-dubai-entry.webp", alt: "Mirage Project Point Dubai entry" },
  surface:  { img: "assets/showroom-03.webp", alt: "Surface display at the Mirage Project Point" },
  ambient:  { img: "assets/ambient-bathmood-flair.webp", alt: "Ambient surface" },
};

function Hero({ variant }) {
  const opt = HERO_OPTIONS[variant] || HERO_OPTIONS.showroom;
  return (
    <header className="hero" id="top">
      <div className="hero-media">
        <img src={opt.img} alt={opt.alt} />
      </div>
      <div className="hero-inner shell">
        <div className="hero-eyebrow">
          <span className="pip"></span>
          <span>Dubai Design District · Building 7, R05</span>
          <span style={{opacity: 0.5}}>—</span>
          <span>First Mirage hub outside Italy</span>
        </div>
        <h1 className="hero-h">
          World-class Italian surfaces,<br />
          <span className="it">made specifiable</span> in Dubai.
        </h1>
        <div className="hero-sub-row">
          <p className="hero-sub">
            The Mirage Project Point at d3 — a consultation, sampling and co-working space
            for architects, designers and practitioners working across the GCC.
          </p>
          <div className="hero-ctas">
            <a className="btn" href="#book">Book a consultation <ArrowR /></a>
            <a className="btn light" href="#project-point">Visit the Project Point <ArrowR /></a>
          </div>
        </div>
      </div>
      <div className="hero-meta-bar">
        <div className="shell inner">
          <div className="cell"><span className="lbl">Address</span><span className="val">Building 7, R05 · Dubai Design District</span></div>
          <div className="cell"><span className="lbl">Hours</span><span className="val">Mon–Sat · 09:00 – 18:00</span></div>
          <div className="cell"><span className="lbl">Phone</span><a className="val" href="tel:+97145543944">+971 4 554 3944</a></div>
          <div className="cell"><span className="lbl">Status</span><span className="val">Open · Walk-ins by appointment</span></div>
        </div>
      </div>
    </header>
  );
}

/* ============================================================
   Project Point feature (the differentiator)
   ============================================================ */
function ProjectPointFeature() {
  return (
    <section className="block pp-feature" id="project-point">
      <div className="shell">
        <div className="pp-grid">
          <div className="pp-text">
            <div className="eyebrow"><span className="dot"></span>The Project Point · d3</div>
            <h2 style={{marginTop: 20}}>
              A workshop for <span className="it">specifiers</span>,<br />
              not a showroom for shoppers.
            </h2>
            <p>
              Browse ceramic material, select colour combinations, work through mockups
              and bespoke technical solutions with Mirage staff, and leave with the samples
              and documentation you need. Seminars, workshops and meetings on request.
            </p>
            <div className="pp-info">
              <div>
                <div className="lbl">Address</div>
                <div className="val">Building 7, R05<br />Dubai Design District</div>
              </div>
              <div>
                <div className="lbl">Hours</div>
                <div className="val">Mon – Sat<br />09:00 – 18:00</div>
              </div>
              <div>
                <div className="lbl">Phone</div>
                <div className="val"><a href="tel:+97145543944">+971 4 554 3944</a></div>
              </div>
              <div>
                <div className="lbl">Interior design</div>
                <div className="val">Pallavi Dean Interiors<span style={{color: "var(--muted)"}}> · Roar</span></div>
              </div>
            </div>
            <div className="flex-row">
              <a className="btn" href="#book">Book a consultation <ArrowR /></a>
              <a className="btn ghost" href="#gallery">See the space <ArrowR /></a>
            </div>
          </div>
          <div className="pp-img-stack">
            <div className="badge">Visit · d3</div>
            <div className="main"><img src="assets/project-point-dubai-entry.webp" alt="Mirage Project Point Dubai entry" /></div>
            <div className="inset"><img src="assets/showroom-04.webp" alt="Project Point interior" /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Collections
   ============================================================ */
function Collections() {
  const [filter, setFilter] = useS2("All");
  const filtered = useM2(() => {
    if (filter === "All") return COLLECTIONS;
    return COLLECTIONS.filter(c => c.category === filter);
  }, [filter]);

  return (
    <section className="block shell" id="collections">
      <div className="section-head">
        <div>
          <div className="eyebrow"><span className="dot"></span>Collections</div>
          <h2 style={{marginTop: 20}}>
            Surfaces, by <span className="it">effect</span><br />and application.
          </h2>
        </div>
        <div className="right">
          <p>
            The full Mirage range — porcelain stoneware in concrete, stone, wood and resin
            effects, plus outdoor 20 mm and technical/architectural surfaces. Finishes, sizes
            and technical PDFs pulled live at specification.
          </p>
          <div>
            <a className="btn ghost sm" href="#book">All collections <ArrowR /></a>
          </div>
        </div>
      </div>

      <div className="coll-filter" role="tablist" aria-label="Filter collections">
        {COLL_FILTERS.map(f => (
          <button
            key={f}
            role="tab"
            aria-selected={filter === f}
            className={"chip" + (filter === f ? " active" : "")}
            onClick={() => setFilter(f)}>
            {f}
          </button>
        ))}
      </div>

      <div className="coll-grid">
        {filtered.map((c, i) => {
          const sizeClass = i === 0 && filter === "All" ? "feature"
                          : (c.size === "half" ? "half" : "");
          return (
            <a key={c.slug} className={"coll-card " + sizeClass} href="#book">
              <div className="coll-img">
                <span className="tag">{c.category}</span>
                <img src={c.img} alt={c.name + " — " + c.effect} loading="lazy" />
                <span className="arrow-cta"><ArrowR /></span>
              </div>
              <div className="coll-meta">
                <div className="coll-name">{c.name}</div>
                <div className="coll-effect">{c.effect}</div>
              </div>
            </a>
          );
        })}
      </div>
    </section>
  );
}

/* ============================================================
   Applications strip
   ============================================================ */
function Applications() {
  return (
    <section id="applications">
      <div className="shell">
        <div className="section-head" style={{marginBottom: 0, borderBottom: 0, paddingBottom: 0}}>
          <div>
            <div className="eyebrow"><span className="dot"></span>Applications</div>
            <h2 style={{marginTop: 20}}>
              Surfaces, by <span className="it">use</span>.
            </h2>
          </div>
          <div className="right">
            <p>
              From residential interiors to ventilated facades — the same porcelain platform,
              specified for the conditions of the build. Talk to the Project Point about
              sizes, finishes and technical detailing for each context.
            </p>
          </div>
        </div>
      </div>
      <div className="shell" style={{marginTop: 32}}>
        <div className="app-strip">
          {APPLICATIONS.map(a => (
            <div className="app-cell" key={a.num}>
              <div className="num">{a.num}</div>
              <div className="name">{a.name}</div>
              <div className="desc">{a.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Gallery + Lightbox
   ============================================================ */
function Gallery() {
  const [open, setOpen] = useS2(null);
  const close = () => setOpen(null);
  const prev = useC2(() => setOpen(o => (o + GALLERY.length - 1) % GALLERY.length), []);
  const next = useC2(() => setOpen(o => (o + 1) % GALLERY.length), []);

  useE2(() => {
    if (open === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") close();
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, prev, next]);

  return (
    <section className="block shell" id="gallery">
      <div className="section-head">
        <div>
          <div className="eyebrow"><span className="dot"></span>Inside the d3 Project Point</div>
          <h2 style={{marginTop: 20}}>
            The space, in <span className="it">fourteen frames</span>.
          </h2>
        </div>
        <div className="right">
          <p>
            Photography from inside Mirage's first hub outside Italy at Dubai Design District.
            The full atelier — material walls, sampling tables, lounge and consulting zones —
            designed by Pallavi Dean Interiors (Roar).
          </p>
        </div>
      </div>

      <div className="gallery-grid">
        {GALLERY.map((g, i) => (
          <div key={g.id} className={"g " + GALLERY_LAYOUT[i]} onClick={() => setOpen(i)}>
            <img src={g.src} alt={g.alt} loading="lazy" />
            <span className="gid">{g.id}</span>
          </div>
        ))}
      </div>

      {open !== null && (
        <div className="lightbox" role="dialog" aria-modal="true" aria-label="Showroom photograph">
          <div className="shell top">
            <div>{GALLERY[open].id} · {open + 1} / {GALLERY.length}</div>
            <button className="closebtn" onClick={close}>Close ✕</button>
          </div>
          <div className="stage">
            <button className="navbtn prev" onClick={prev} aria-label="Previous">‹</button>
            <img src={GALLERY[open].src} alt={GALLERY[open].alt} />
            <button className="navbtn next" onClick={next} aria-label="Next">›</button>
          </div>
        </div>
      )}
    </section>
  );
}