/* global React */

const TEAM = [
["Alex O'Sullivan", "Programme Lead"],
["Ash", "Programme Lead"],
["Joe Biju", "Programme Operations"],
["Conor", "Sponsorship"],
["Albin", "Fight Night Event"],
["Shane", "Fight Night Technical"],
["Josh", "Fight Night Technical"],
["Beth (Elizabeth O'Sullivan)", "Marketing"],
["Joel", "Marketing"],
["Liam", "Marketing / Outreach"],
["Will Donnelly", "Website / Tech"],
["Stuart", "Sponsorship Assist"],
["Ashling McCarthy", "Rules / Programme"]];


function lbMonogram(name) {
  return name.
  replace(/\(.*?\)/g, "").
  trim().
  split(/\s+/).
  map((w) => w[0]).
  filter(Boolean).
  slice(0, 2).
  join("").
  toUpperCase();
}

// ─────────────────────────────────────────────────────────────────
// COVER SHEET — right-aligned title block, left margin metadata
// ─────────────────────────────────────────────────────────────────
const LB_COVER_IMAGES = [
  "assets/photo-bot-eyes.png",
  "assets/photo-arena-wide.png",
  "assets/photo-ducks.png",
  "images/assets/competitors-2025/sawshank-redemption.jpg",
  "images/assets/competitors-2025/krusty-crew.jpg"];

const LB_COVER_ROSTER = [
{ n: "01", id: "FN25-A1", name: "K9 UNIT" },
{ n: "02", id: "FN25-A2", name: "(FOR) FLIP’S SAKE" },
{ n: "03", id: "FN25-A3", name: "DUCK-HEED MARTIN" },
{ n: "04", id: "FN25-A4", name: "SAWSHANK REDEMPTION’T" },
{ n: "05", id: "FN25-A5", name: "KRUSTY CREW" }];


function LbCover() {
  const [active, setActive] = React.useState(0);
  const [outgoing, setOutgoing] = React.useState(null);
  const [widths, setWidths] = React.useState([]);
  const sizerRef = React.useRef(null);
  React.useEffect(() => {
    const id = setInterval(() => {
      setActive((a) => {
        setOutgoing(a);
        return (a + 1) % LB_COVER_IMAGES.length;
      });
    }, 2500);
    return () => clearInterval(id);
  }, []);
  React.useEffect(() => {
    if (outgoing === null) return;
    const t = setTimeout(() => setOutgoing(null), 1200);
    return () => clearTimeout(t);
  }, [outgoing]);
  React.useLayoutEffect(() => {
    if (!sizerRef.current) return;
    const measure = () => {
      const els = Array.from(sizerRef.current.children);
      setWidths(els.map((el) => el.offsetWidth));
    };
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, []);
  return (
    <header className="lb-cover" data-screen-label="01 About — Cover Sheet">
      <div className="hero-img-bg" aria-hidden="true">
        {LB_COVER_IMAGES.map((src, i) =>
        <div
          key={src}
          className="hero-img-bg-img hero-img-bg-img--cycle"
          style={{ backgroundImage: `url('${src}')`, opacity: i === active ? 1 : 0 }}>
        </div>
        )}
        <div className="hero-img-bg-vignette"></div>
        <div className="hero-img-bg-scan"></div>
        <div className="hero-img-bg-grid"></div>
      </div>
      <aside className="lb-margin">
        <div className="lb-row">
          <span className="k">DOC · NO</span>
          <span className="v em">FN26.ABOUT.0003</span>
        </div>
        <div className="lb-row">
          <span className="k">PROGRAMME</span>
          <span className="v">PATCH ROBOWARS</span>
        </div>
        <div className="lb-row">
          <span className="k">EVENT</span>
          <span className="v amber">FIGHT NIGHT 2026</span>
        </div>
        <div className="lb-row">
          <span className="k">CLASSIFICATION</span>
          <span className="v">PUBLIC RECORD</span>
        </div>
        <div className="lb-row">
          <span className="k">HEAD QUARTERED</span>
          <span className="v">DOGPATCH LABS · DUBLIN</span>
        </div>
        <div className="lb-stamp">
          <span className="star">✦</span>STATUS · LIVE
        </div>
        <div className="lb-stamp amber bracket">◆ COHORT 03 ◆

        </div>
      </aside>

      <div className="lb-title-block">
        <div>
          <div className="lb-tag">
            <span className="pip"></span>
            <span>DOCUMENT · ABOUT US · V3.0.2</span>
          </div>
          <h1 className="lb-title">
            FUELING IRISH<br />
            <span className="accent">HARDWARE.</span>
          </h1>
          <p className="lb-lede">
            Ireland builds great software. We think it should build great
            hardware too. <span className="lb-lede-em">Patch Robowars</span> is
            a student-run event which brings <span className="lb-lede-em">makers, nerds, & mad scientists from <span className="lb-lede-mark">any</span> background</span> together for the summer to flex their skills & build something dangerous.
            Each year is a spectacle showcase of what happens when you give builders the resources 
            they need to flourish.
          </p>
        </div>
        <div className="lb-classification">
          <span><span className="dot"></span>BUILT BY MAKERS</span>
          <span><span className="dot"></span>FOR MAKERS</span>
          <span><span className="dot"></span>{"WITH LOVE FROM PATCH"}</span>
        </div>
      </div>

      <div className="lb-cover-roster" aria-live="polite">
        <span className="lb-cover-roster-eyebrow">
          <span className="pip" aria-hidden="true"></span>FN-2025 · ROSTER
        </span>
        <div className="lb-cover-roster-sizer" aria-hidden="true" ref={sizerRef}>
          {LB_COVER_ROSTER.map((b) =>
          <span key={b.id} className="lb-cover-roster-name">{b.name}</span>
          )}
        </div>
        <div
          className="lb-cover-roster-stage"
          style={widths.length ? { width: widths[active] + "px" } : undefined}>

          <span
            key={`current-${active}`}
            className="lb-cover-roster-name lb-cover-roster-name--current">

            {LB_COVER_ROSTER[active].name}
          </span>
          {outgoing !== null && outgoing !== active &&
          <span
            key={`outgoing-${outgoing}`}
            className="lb-cover-roster-name lb-cover-roster-name--outgoing"
            aria-hidden="true">

              {LB_COVER_ROSTER[outgoing].name}
            </span>
          }
        </div>
        <span className="lb-cover-roster-bar" aria-hidden="true"></span>
        <span className="lb-cover-roster-dots" aria-hidden="true">
          {LB_COVER_ROSTER.map((b, i) =>
          <span
            key={b.id}
            className={`lb-cover-roster-dot ${i === active ? "is-active" : ""}`}>
          </span>
          )}
        </span>
        <span className="lb-cover-roster-id">
          {LB_COVER_ROSTER[active].n} / {String(LB_COVER_ROSTER.length).padStart(2, "0")}
        </span>
      </div>
    </header>);

}

// ─────────────────────────────────────────────────────────────────
// §01 · MISSION — single paragraph, one circled phrase
// ─────────────────────────────────────────────────────────────────
function LbMission() {
  return (
    <section className="lb-section" data-screen-label="02 About — §01 Mission">
      <div className="lb-section-num"><span className="em">§01</span> · ENTRY</div>
      <div className="lb-section-body-col">
        <div className="lb-section-head">
          <h2 className="lb-section-title">THE <span className="em">MISSION.</span></h2>
        </div>
        <div className="lb-mission-body">
          <div className="lb-evidence">
            GROWING THE HARDWARE COMMUNITY.
          </div>
          <p>
            Starting out as a passion project from <a className="lb-link" href="https://joinpatch.org" target="_blank" rel="noopener noreferrer">Patch</a>, Robowars is a community of <strong>students, makers, founders, & nerds</strong> who
            all share the same passion for building something real. The mission is to grow the community, {" "}
            <span className="lb-circle">accelerating & educating talent in a fast-paced competitive environment.</span>
            {" "}The result is magical, it makes the sleepless nights & early mornings worth it.
          </p>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
// EXHIBIT A — workshop
// ─────────────────────────────────────────────────────────────────
function LbExhibitA() {
  return (
    <figure className="lb-exhibit" data-screen-label="03 About — Exhibit A">
      <div className="lb-exhibit-meta">
        <span className="id">EXHIBIT · A</span>
        <span className="label">WORKSHOP<br />BUILD WK 03</span>
        <span className="ts">2025-04-14<br />19:42</span>
      </div>
      <div className="lb-exhibit-frame">
        <div className="lb-corner tl"></div>
        <div className="lb-corner tr"></div>
        <div className="lb-corner bl"></div>
        <div className="lb-corner br"></div>
        <div className="img" style={{ backgroundImage: "url('assets/exhibit-a.jpg')" }}></div>
        <span className="ts-stamp">▸ FRM-EX-A · 2025-04-14T19:42</span>
        <span className="ex-stamp">EVIDENCE</span>
      </div>
    </figure>);

}

// ─────────────────────────────────────────────────────────────────
// §02 · EIGHT WEEKS, ONE NIGHT — prose + "we bring" 3-card grid
// ─────────────────────────────────────────────────────────────────
function LbEightWeeksOneNight() {
  const cards = [
  {
    num: "01",
    title: "FUNDS.",
    img: "assets/photo-bot-blue.png",
    body: "€500 per team, fully covered. Parts, materials, electronics, fasteners. No deposits, no out-of-pocket. You build with our cash, not yours."
  },
  {
    num: "02",
    title: "MENTORSHIP.",
    img: "assets/bring-mentorship.jpg",
    body: "Engineers, alumni and Patch mentors on hand through every build week. Stuck on a weapon motor at 1am? Slack the channel, someone's definately still up.",
    imgStyle: { transform: "scale(1.2)", transformOrigin: "bottom left" }
  },
  {
    num: "03",
    title: "SPACE.",
    img: "assets/bring-space.jpg",
    body: "Dogpatch Labs in Dublin. Dedicated space and time every week to meet with your team, build your bot, & safely run supervised tests."
  }];

  return (
    <section className="lb-section" data-screen-label="04 About — §02 Eight Weeks One Night">
      <div className="lb-section-num"><span className="em">§02</span> · ENTRY</div>
      <div className="lb-section-body-col">
        <div className="lb-section-head">
          <h2 className="lb-section-title">EIGHT WEEKS, <span className="em">ONE NIGHT.</span></h2>
        </div>
        <div className="lb-mission-body">
          <div className="lb-evidence">
            SPEND THE SUMMER BUILDING & IMORTALIZE YOUR WOKR ON STAGE.
          </div>
          <p>
            Eight weeks spent building. Teams meet <strong>every Saturday in Dogpatch Labs</strong> {" "} 
            to build, test, fail, & learn. Stakes are high and timelines are tight, <strong>we'll
            be there to provide mentorship and guidance.</strong> We'll also be there to hold teams to a standard {" "} <span className="lb-circle">the competition starts from day one</span>.
            {" "} The real win is building something that works, <strong>Fight Night is just the victory lap.</strong>
          </p>
        </div>
        <div className="lb-bring-grid">
          {cards.map((c) =>
          <div key={c.num} className="lb-bring-card">
              <div className="hero-img-bg" aria-hidden="true">
                <div className="hero-img-bg-img lb-bring-card-bg" style={{ backgroundImage: `url('${c.img}')`, ...(c.imgStyle || {}) }}></div>
                <div className="hero-img-bg-vignette"></div>
                <div className="hero-img-bg-scan"></div>
              </div>
              <div className="lb-bring-card-content">
                <div className="lb-bring-card-stamps">
                  <span className="lb-bring-card-num">▸ {c.num}</span>
                  <span className="lb-bring-card-eyebrow">WE BRING</span>
                </div>
                <h3 className="lb-bring-card-title">{c.title}</h3>
                <p className="lb-bring-card-body">{c.body}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
// EXHIBIT B — fight night
// ─────────────────────────────────────────────────────────────────
function LbExhibitB() {
  return (
    <figure className="lb-exhibit" data-screen-label="05 About — Exhibit B">
      <div className="lb-exhibit-meta">
        <span className="id">EXHIBIT · B</span>
        <span className="label">FIGHT NIGHT<br />ARENA</span>
        <span className="ts">2025-05-23<br />21:08</span>
      </div>
      <div className="lb-exhibit-frame">
        <div className="lb-corner tl"></div>
        <div className="lb-corner tr"></div>
        <div className="lb-corner bl"></div>
        <div className="lb-corner br"></div>
        <div className="img" style={{ backgroundImage: "url('assets/exhibit-b.jpg')" }}></div>
        <span className="ts-stamp">▸ FRM-EX-B · 2025-05-23T21:08</span>
        <span className="ex-stamp">EVIDENCE</span>
      </div>
    </figure>);

}

// ─────────────────────────────────────────────────────────────────
// §03 · BUILDING THE COMMUNITY — short prose entry
// ─────────────────────────────────────────────────────────────────
function LbDoctrine() {
  return (
    <section className="lb-section" data-screen-label="06 About — §03 Building the Community">
      <div className="lb-section-num"><span className="amber">§03</span> · ENTRY</div>
      <div className="lb-section-body-col">
        <div className="lb-section-head">
          <h2 className="lb-section-title">BUILDING THE <span className="amber">COMMUNITY.</span></h2>
        </div>
        <div className="lb-mission-body">
          <div className="lb-evidence">
            ONE NIGHT, HUNDREDS IN THE ROOM.
          </div>
          <p>
            <strong>Fight Night isn't just for the builders.</strong> Every
            September, hundreds of engineers, students, families, & the curious
            public pack into Dogpatch to watch the bots fight. We bring the
            whole audience into the action with live commentary, hands-on
            stalls, & a clear view of what hardware actually looks like in
            motion. <span className="lb-circle">The point is to seed a love
            for building into the next generation of Irish hardware.</span>
            {" "}Every spectator is a potential builder, & every Fight Night
            is recruitment for what comes next.
          </p>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
// PERSONNEL · APPENDIX A — team grid
// ─────────────────────────────────────────────────────────────────
function LbPersonnel() {
  return (
    <section className="lb-personnel" data-screen-label="07 About — Personnel">
      <div className="lb-personnel-head">
        <div>
          <div className="lb-personnel-tag"><span className="em">APPENDIX A</span> ·COMMITTEE·FN-2026</div>
          <h2 className="lb-personnel-title" style={{ padding: "4px 0px 0px" }}>BUILT BY BUILDERS.</h2>
        </div>
        <div className="lb-personnel-meta">
          <div className="row"><span>OPERATORS</span><span className="v">13</span></div>
          <div className="row"><span>VOLUNTEER</span><span className="v">100%</span></div>
          <div className="row"><span>BASE</span><span className="v">DOGPATCH</span></div>
        </div>
      </div>
      <div className="team-grid">
        {TEAM.map(([name, role], i) =>
        <div key={i} className="team-card">
            <div className="team-card-frame">
              <span className="team-card-mono">{lbMonogram(name)}</span>
              <span className="team-card-bracket tl"></span>
              <span className="team-card-bracket tr"></span>
              <span className="team-card-bracket bl"></span>
              <span className="team-card-bracket br"></span>
              <span className="team-card-id">FN26-{String(i + 1).padStart(3, "0")}</span>
            </div>
            <div className="team-card-name">{name}</div>
            <div className="team-card-role">{role}</div>
          </div>
        )}
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
// CTA — talk to the committee (two doors)
// ─────────────────────────────────────────────────────────────────
function LbJoin() {
  return (
    <section className="lb-join" data-screen-label="08 About — Talk to the Committee">
      <div className="lb-join-head">
        <div className="lb-join-head-row">
          <div className="lb-join-head-left">
            <div className="lb-join-eyebrow">
              <span className="pip"></span>TALK TO THE COMMITTEE
            </div>
            <h2 className="lb-join-title">
              INBOX <span className="accent">OPEN.</span>
            </h2>
          </div>
          <p className="lb-join-lede">
            The committee is thirteen volunteers who organise everything 
            from ordering food to designing & building the arena. Whether you're interested
            in helping out or just need to reach us for something else,
            take whichever door fits. We read everything.
          </p>
        </div>
      </div>
      <div className="sp-cta-grid">
        <a
          className="sp-cta-card primary"
          href="mailto:hello@patchrobowars.ie?subject=Committee%20Application%20%E2%80%94%20FN-2026&body=Hi%20Patch%20Robowars%20committee%2C%0A%0AI%27d%20like%20to%20put%20my%20name%20forward%20for%20FN-2026.%0A%0AName%3A%20%0AArea(s)%20I%27m%20drawn%20to%3A%20(ops%20%2F%20coaching%20%2F%20comms%20%2F%20judging%20%2F%20other)%0AWhat%20I%27ve%20built%20or%20helped%20run%20before%3A%20%0AHours%2Fweek%20I%20can%20give%3A%20%0A%0AThanks%2C"
        >
          <div className="label"><span className="num">01</span> · APPLY · COMMITTEE</div>
          <div className="door">JOIN THE<br /><span className="accent">COMMITTEE.</span></div>
          <div className="desc">
            Ops, build coaching, comms, judging, let us know how you'd like to help out. <br />
            Volunteer, ~4-10 hrs / wk, Dublin or hybrid. Send on relevant info with your application.
          </div>
          <span className="action">APPLY <span className="arrow">→</span></span>
        </a>
        <a
          className="sp-cta-card secondary"
          href="mailto:hello@patchrobowars.ie?subject=Patch%20Robowars%20%E2%80%94%20Hello&body=Hi%20Patch%20Robowars%2C%0A%0A"
        >
          <div className="label"><span className="num">02</span> · GENERAL · INBOX</div>
          <div className="door">GET IN<br /><span className="accent">TOUCH.</span></div>
          <div className="desc">
            Press, safety, partnerships, alumni, helping out on the night, or anything
            else that isn&rsquo;t sponsorship or applying to compete.
          </div>
          <span className="action">EMAIL US <span className="arrow">→</span></span>
        </a>
      </div>
      <div className="sp-cta-foot">
        <span><span className="arrow">▸</span>VOLUNTEER</span>
        <span className="pipe">·</span>
        <span>4–10 HRS / WK</span>
        <span className="pipe">·</span>
        <span>DUBLIN OR HYBRID</span>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────
// PAGE
// ─────────────────────────────────────────────────────────────────
function AboutPage() {
  return (
    <div className="lb-page" data-screen-label="About">
      <LbCover />
      <LbMission />
      <LbExhibitA />
      <LbEightWeeksOneNight />
      <LbDoctrine />
      <LbExhibitB />
      <LbPersonnel />
      <LbJoin />
    </div>);

}

window.AboutPage = AboutPage;