/* global React, Shot, Reveal, Stat */

/* ============================ GALLERY ============================ */
const GALLERY = [
  { scene: "scene-storm", src: "assets/nemesis-hero.jpg", label: "running shot — Table Bay, Cape Town", code: "01", span: "big" },
  { scene: "scene-ocean", src: "assets/gal-beach.jpg", label: "bow ashore — river mouth", code: "02", span: "tall" },
  { scene: "scene-detail", src: "assets/gal-dock.jpg", label: "moored — twin Mercury 115s", code: "03", span: "" },
  { scene: "scene-dawn", label: "dawn launch — drop image", code: "04", span: "" },
  { scene: "scene-deck", src: "assets/gal-running.jpg", label: "underway — owners aboard", code: "05", span: "wide" },
  { scene: "scene-ocean", label: "craftsmanship — drop detail", code: "06", span: "" },
];

function Gallery() {
  const [lightbox, setLightbox] = useState(null);
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setLightbox(null); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  return (
    <section className="section gallery" id="gallery">
      <div className="wrap">
        <div className="gallery__head">
          <div>
            <Reveal><div className="eyebrow">Designed in Cape Town. Proven on the water.</div></Reveal>
            <Reveal delay={1}><h2 className="h-xl">In its element.</h2></Reveal>
          </div>
          <Reveal delay={2} className="gallery__note">
            <p className="muted">Not in a showroom. Not on a trailer. Out there.</p>
          </Reveal>
        </div>
        <div className="gallery__grid">
          {GALLERY.map((g, i) => (
            <Reveal key={g.code} delay={(i % 3) + 1} className={`galcell ${g.span}`}>
              <button className="galcell__btn" onClick={() => setLightbox(g)}>
                <Shot scene={g.scene} src={g.src} label={g.label} code={g.code} className="galcell__shot" />
                <span className="galcell__expand mono">↗ Expand</span>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
      {lightbox && (
        <div className="lightbox" onClick={() => setLightbox(null)}>
          <button className="lightbox__close" onClick={() => setLightbox(null)}>✕</button>
          <div className="lightbox__inner" onClick={(e) => e.stopPropagation()}>
            <Shot scene={lightbox.scene} src={lightbox.src} label={lightbox.label} code={lightbox.code} className="lightbox__shot" />
          </div>
        </div>
      )}
    </section>
  );
}

/* ============================ SPECIFICATIONS ============================ */
const SPEC_HERO = [
  { k: "LOA", v: 6.2, suffix: " m", note: "A big 22-foot hull" },
  { k: "Beam", v: 2.45, suffix: " m", note: "Trailerable width" },
  { k: "Fuel", v: 300, suffix: " L", note: "Below-deck, low & central" },
  { k: "Top end", v: 40, suffix: " kn", note: "Sea-trialled, twin 115" },
];
const SPEC_DETAIL = [
  ["Hull form", "Offshore sport-fishing catamaran"],
  ["Aft deadrise", "20°+ deep-V, soft ride"],
  ["Deck space", "10 m² flat & unobstructed"],
  ["Construction", "Hand-laid GRP"],
  ["Cold storage", "2 fish boxes + 80 L insulated"],
  ["Engine options", "Twin 90 / 115 / 140 HP"],
  ["Cruise", "22 kn @ 3,800 rpm"],
  ["Get-home", "21 kn on a single motor"],
];

function Specs() {
  return (
    <section className="section specs" id="specs">
      <div className="wrap">
        <div className="specs__head">
          <Reveal><div className="eyebrow">04 — Specifications</div></Reveal>
          <Reveal delay={1}><h2 className="h-xl">The numbers<br /><span className="accent">that matter.</span></h2></Reveal>
          <Reveal delay={2}><p className="placeholder-note mono">⚠ Placeholder figures — replace with verified Nemesis 2200 data.</p></Reveal>
        </div>

        <div className="specs__hero">
          {SPEC_HERO.map((s, i) => (
            <Reveal key={s.k} delay={(i % 4) + 1} className="speccard">
              <div className="speccard__k mono">{s.k}</div>
              <div className="speccard__v"><Stat value={s.v} suffix={s.suffix} /></div>
              <div className="speccard__n">{s.note}</div>
            </Reveal>
          ))}
        </div>

        <div className="specs__detail">
          <Reveal className="specs__visual">
            <Shot scene="scene-detail" ratio="3 / 4" label="profile — hull lines & rig" code="SPEC SHEET" />
          </Reveal>
          <div className="specs__table">
            {SPEC_DETAIL.map(([k, v], i) => (
              <Reveal key={k} delay={(i % 4) + 1} className="specrow">
                <span className="specrow__k">{k}</span>
                <span className="specrow__dots"></span>
                <span className="specrow__v mono">{v}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Gallery, Specs });