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

/* ============================ HERO ============================ */
function Hero() {
  const [my, setMy] = useState(0);
  useEffect(() => {
    const onScroll = () => setMy(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const go = (id) => (e) => { e.preventDefault(); document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); };
  return (
    <section className="hero" id="top">
      <div className="hero__media" style={{ transform: `translateY(${my * 0.25}px) scale(1.06)` }}>
        <Shot video="assets/hero.mp4" poster="assets/nemesis-hero.jpg" pos="center 45%" label="" code="● LIVE" className="hero__shot" />
      </div>
      <div className="hero__scrim"></div>
      <div className="hero__content wrap">
        <div className="hero__eyebrow eyebrow">Nemesis 2200 · Offshore Catamaran</div>
        <h1 className="display hero__title">
          <span className="line">The Next Generation</span>
          <span className="line">of Offshore Boating.</span>
        </h1>
        <p className="lead hero__sub">
          The Nemesis 2200 is a high-performance offshore catamaran engineered for anglers,
          adventurers, and boaters who demand more from every trip.
        </p>
        <div className="hero__cta">
          <a href="#build" onClick={go("build")} className="btn btn-primary">Configure Your Nemesis<span className="arr">→</span></a>
          <a href="#specs" onClick={go("specs")} className="btn btn-ghost">View Specifications</a>
        </div>
      </div>
      <div className="hero__foot wrap">
        <div className="hero__scroll"><span></span>Scroll</div>
        <div className="hero__ticker mono">
          <span>6.2 M LOA</span><i>/</i><span>TWIN HULL</span><i>/</i><span>10 M² DECK</span><i>/</i><span>BUILT IN CAPE TOWN</span>
        </div>
      </div>
    </section>
  );
}

/* ====================== THE NEMESIS DIFFERENCE ====================== */
const DIFF_STATS = [
  { v: 40, suffix: " kn", label: "Top end", note: "Sea-trialled on twin 115 HP" },
  { v: 6.2, suffix: " m", label: "Length overall", note: "A big 22-foot centre console" },
  { v: 20, suffix: "°+", label: "Aft deadrise", note: "Deep-V — soft through the chop" },
  { v: 10, suffix: " m²", label: "Deck space", note: "Flat, unobstructed, Cape-style" },
];
const DIFF_POINTS = [
  ["Climbs out the hole, not over it", "A fine entry and tuned wetted area free the hull early — she planes at 14 knots with almost no bow lift."],
  ["20°+ of deep-V deadrise", "The aft hull is drawn to cushion Cape chop. Testers found her soft, dry, and laterally stable trimmed up."],
  ["The wave splitter", "A V in the tunnel entrance — Alex's own detail — breaks surface pressure coming down into the next swell."],
  ["Get-home confidence", "On a single motor, dead engine dragging, she still holds 21 knots on the plane. Real offshore insurance."],
];

function Difference() {
  return (
    <section className="section diff" id="difference">
      <div className="wrap">
        <div className="diff__head">
          <Reveal><div className="eyebrow">01 — The Nemesis Difference</div></Reveal>
          <Reveal delay={1}>
            <h2 className="h-xl diff__title">Not another fishing boat.<br /><span className="accent">A different breed.</span></h2>
          </Reveal>
          <Reveal delay={2} className="diff__intro">
            <p className="lead">Most boats this size ask you to compromise — on stability, range, or capability.
            The Nemesis 2200 was born from thousands of hours on the water and a refusal to accept any of them.</p>
          </Reveal>
        </div>

        <div className="diff__stats">
          {DIFF_STATS.map((s, i) => (
            <Reveal key={s.label} delay={(i % 4) + 1} className="statcard">
              <div className="statcard__v"><Stat value={s.v} suffix={s.suffix} /></div>
              <div className="statcard__l">{s.label}</div>
              <div className="statcard__n">{s.note}</div>
            </Reveal>
          ))}
        </div>

        <div className="diff__split">
          <Reveal className="diff__visual">
            <Shot src="assets/nemesis-hero.jpg" pos="60% center" ratio="4 / 5" label="running shot — beam reach, hull detail" code="A-CAM" />
          </Reveal>
          <div className="diff__points">
            {DIFF_POINTS.map(([t, d], i) => (
              <Reveal key={t} delay={(i % 4) + 1} className="pointrow">
                <div className="pointrow__n mono">0{i + 1}</div>
                <div>
                  <h3 className="h-md pointrow__t">{t}</h3>
                  <p className="muted pointrow__d">{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Difference });