/* global React */
const { useEffect, useRef, useState } = React;

function useCountUp(target, ms = 1200) {
  const [n, setN] = useState(0);
  const seenRef = useRef(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !seenRef.current) {
          seenRef.current = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / ms);
            const eased = 1 - Math.pow(1 - p, 3);
            setN(Math.round(target * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [target, ms]);
  return [n, ref];
}

function CountUp({ to, suffix = "" }) {
  const [n, ref] = useCountUp(to);
  return <span ref={ref}>{n}{suffix}</span>;
}

const HOME_STRIP = [
  { src: "assets/photo-arena-wide.png", id: "FN25-001" },
  { src: "assets/photo-chainsaw.png", id: "FN25-002" },
  { src: "assets/photo-bot-eyes.png", id: "FN25-003" },
  { src: "assets/photo-bot-blue.png", id: "FN25-004" },
  { src: "assets/photo-controller.png", id: "FN25-005" },
  { src: "assets/photo-smoke.png", id: "FN25-006" },
  { src: "assets/photo-arena-overview.png", id: "FN25-007" },
  { src: "assets/photo-controller-2.png", id: "FN25-008" },
  { src: "assets/photo-team.png", id: "FN25-009" },
  { src: "assets/photo-ducks.png", id: "FN25-010" },
];

function HomePage({ openInterest }) {
  return (
    <div className="page page-home" data-screen-label="Home">
      <window.Hero variant={(window.__currentVariant || (typeof window !== "undefined" && window.__hv)) || "photo"} openInterest={openInterest} />

      {/* Pitch */}
      <div className="schem-divider" data-label="◆ THE PITCH ◆"></div>

      <section className="section-block">
        <div className="section-block-eyebrow">▸ MISSION · ONE PARAGRAPH</div>
        <h2 className="section-block-title">SOFTWARE BUILT THE LAST<br/>DECADE. <span className="accent">HARDWARE BUILDS THE NEXT.</span></h2>
        <div className="pitch-prose">
          <p className="long-prose lead">
            Ireland produced over 4,500 software startups and €7B+ in raised
            capital. The hardware sector — the people who build things you can
            drop on your foot — barely exists. Robowars exists to change that.
          </p>
          <p className="long-prose">
            We give 16-to-25-year-olds across Ireland the parts, the workshop,
            the mentorship and the deadline to actually build a fighting robot.
            Then we put it in an arena in front of a packed crowd at Dogpatch
            Labs. The point isn't the trophy. The point is the people who walk
            out the other side already knowing how to build hardware that works.
          </p>
        </div>
      </section>

      {/* Two doors */}
      <div className="schem-divider" data-label="◆ TWO DOORS IN ◆"></div>

      <section className="section-block">
        <div className="two-doors">
          <a className="door door-compete" href="#/compete">
            <div className="door-eyebrow">▸ DOOR 01 · BUILDERS</div>
            <div className="door-title">BUILD A BOT.<br/><span className="accent">PUT IT IN A FIGHT.</span></div>
            <div className="door-stats">
              <div><span className="k">BUDGET</span><span className="v">€500</span></div>
              <div><span className="k">WEEKS</span><span className="v">8</span></div>
              <div><span className="k">COST</span><span className="v">€0</span></div>
            </div>
            <div className="door-cta">COMPETE →</div>
            <span className="door-corner tl"></span>
            <span className="door-corner tr"></span>
            <span className="door-corner bl"></span>
            <span className="door-corner br"></span>
          </a>
          <a className="door door-sponsor" href="#/sponsor">
            <div className="door-eyebrow">▸ DOOR 02 · INDUSTRY</div>
            <div className="door-title">PUT YOUR LOGO<br/><span className="accent">ON THE CHASSIS.</span></div>
            <div className="door-stats">
              <div><span className="k">TIERS</span><span className="v">4</span></div>
              <div><span className="k">FROM</span><span className="v">€500</span></div>
              <div><span className="k">REACH</span><span className="v">IE TECH</span></div>
            </div>
            <div className="door-cta">SPONSOR →</div>
            <span className="door-corner tl"></span>
            <span className="door-corner tr"></span>
            <span className="door-corner bl"></span>
            <span className="door-corner br"></span>
          </a>
        </div>
      </section>

      {/* FN-2025 Dossier */}
      <div className="schem-divider" data-label="◆ DOSSIER · FN-2025 ◆"></div>

      <section className="section-block">
        <div className="dossier">
          <div className="dossier-header">
            <div className="dossier-header-l">
              <div className="dossier-eyebrow">▸ FILE NO. FN-25 / DOGPATCH LABS</div>
              <h2 className="dossier-title">FIGHT NIGHT<br/><span className="accent">2025.</span></h2>
            </div>
            <div className="dossier-header-r">
              <p className="dossier-recap">
                Eight teams. Eight weeks. One arena packed shoulder-to-shoulder
                at Dogpatch Labs. <span className="accent">FN-25</span> proved
                Ireland's hardware appetite is bigger than the room it had to
                fight in — applications ran four times what we could place,
                builders showed up with chainsaws and spinners that actually
                worked, and the only thing that didn't survive the night was
                the schedule.
              </p>
            </div>
          </div>

          <div className="dossier-stats">
            <div className="dossier-stat">
              <div className="dossier-stat-v"><CountUp to={150} suffix="+" /></div>
              <div className="dossier-stat-k">APPLICATIONS</div>
            </div>
            <div className="dossier-stat">
              <div className="dossier-stat-v"><CountUp to={8} /></div>
              <div className="dossier-stat-k">TEAMS · BUILT</div>
            </div>
            <div className="dossier-stat">
              <div className="dossier-stat-v"><CountUp to={4} suffix="×" /></div>
              <div className="dossier-stat-k">OVERSUBSCRIBED</div>
            </div>
            <div className="dossier-stat">
              <div className="dossier-stat-v"><CountUp to={0} /></div>
              <div className="dossier-stat-k">FIRES STARTED</div>
            </div>
          </div>

          <div className="dossier-marquee-label">
            <span className="dossier-marquee-label-l">▸ FIELD ARCHIVE · STREAMING</span>
            <span className="dossier-marquee-label-r">10 FRAMES · LOOP ∞</span>
          </div>

          <div className="home-marquee">
            <div className="home-marquee-viewport">
              <div className="home-marquee-track">
                {[...HOME_STRIP, ...HOME_STRIP].map((p, i) => (
                  <a key={i} href="#/gallery/2025" className="home-marquee-tile" aria-hidden={i >= HOME_STRIP.length ? "true" : undefined}>
                    <img src={p.src} alt="" loading="lazy" />
                    <span className="home-marquee-tile-id">{p.id}</span>
                    <span className="home-marquee-tile-corner tl"></span>
                    <span className="home-marquee-tile-corner br"></span>
                  </a>
                ))}
              </div>
              <div className="home-marquee-edge home-marquee-edge-l" aria-hidden="true">
                <div className="home-marquee-edge-dither"></div>
                <div className="home-marquee-edge-scan"></div>
              </div>
              <div className="home-marquee-edge home-marquee-edge-r" aria-hidden="true">
                <div className="home-marquee-edge-dither"></div>
                <div className="home-marquee-edge-scan"></div>
              </div>
            </div>
          </div>

          <div className="dossier-foot">
            <a href="#/gallery/2025" className="ghost-link">VIEW FULL ARCHIVE →</a>
            <span className="dossier-foot-meta">▸ FN-26 · TARGET 10 TEAMS</span>
          </div>

          <span className="dossier-corner tl"></span>
          <span className="dossier-corner tr"></span>
          <span className="dossier-corner bl"></span>
          <span className="dossier-corner br"></span>
        </div>
      </section>

      {/* Inline register */}
      <div className="schem-divider" data-label="◆ ON THE LIST ◆"></div>

      <section className="section-block">
        <window.RegisterInterestInline openInterest={openInterest} />
      </section>
    </div>
  );
}

window.HomePage = HomePage;
window.CountUp = CountUp;