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

/* ================================================================
   PATCH ROBOWARS · /sponsor — Pass A
   Hero + Field Report (verified + projected) + Cracked #1 diptych
   ================================================================ */

// ── Coordinate strip ─────────────────────────────────────────────
function SpCoord({ frame, id, status = "INTAKE OPEN", stat }) {
  return (
    <div className="sp-coord">
      <span className="frame">{frame}</span>
      <span className="id">{id}</span>
      <span className="bar"></span>
      <span className="stat"><span className="dot"></span>{status}</span>
      {stat && <span>{stat}</span>}
    </div>
  );
}

// ── Hero CTA: email + Request Sponsor Pack ───────────────────────
// Mirrors hero.jsx HeroNotifyField markup so it inherits the .hero-notify
// chrome already proven on /compete and /home; sponsor copy + a distinct
// data-action so it can be wired to its own Formspree endpoint later.
function SpHeroForm() {
  const [email, setEmail] = useState("");
  const [state, setState] = useState("idle");

  const submit = async (e) => {
    e.preventDefault();
    if (!email) return;
    setState("submitting");
    try {
      await window.__pwSubmitForm({
        email,
        source: "sponsor-pack-request",
        page: typeof window !== "undefined" ? window.location.hash || "/" : "",
      }, "FN-2026 · Sponsor Pack Request");
      setState("done");
    } catch (err) {
      setState("error");
    }
  };

  if (state === "done") {
    return (
      <div className="hero-notify hero-notify-done" role="status">
        <span className="hn-msg">
          <span className="ok">●</span> Got it — we'll be in touch within 24 hours.
        </span>
      </div>
    );
  }

  return (
    <form
      className="hero-notify"
      onSubmit={submit}
      data-action="request-sponsor-pack"
      noValidate
    >
      <input
        className="hn-input"
        type="email"
        name="email"
        id="sp-hero-email"
        autoComplete="email"
        inputMode="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Work email"
        aria-label="Work email"
        required
      />
      <button type="submit" className="hn-submit" disabled={state === "submitting"}>
        {state === "submitting" ? "SENDING…" : "REQUEST SPONSOR PACK →"}
      </button>
      {state === "error" && (
        <span className="hn-error" role="alert">
          Couldn't send — try again, or email hello@patchrobowars.ie.
        </span>
      )}
    </form>
  );
}

// ── Demand Readout: scarcity + scale + lean spend, in one card ───
// Replaces the old multi-row Field Report. Three signals in priority order:
//   01 · 4× oversubscribed (demand >> supply on team slots)
//   02 · 200+ live audience (venue maxed at the door)
//   03 · €6k all-in (lean economics — room to scale on sponsor capital)
// Visual meters make the asymmetry instant: the teams bar fills 25%,
// the audience bar fills 100% (maxed). Closer is the explicit ask.
function DemandReadout() {
  return (
    <div className="sp-demand">
      <div className="sp-demand-bar">
        <span>DEMAND READOUT · FN-2025</span>
        <span className="badge"><span className="dot"></span>VERIFIED</span>
      </div>

      <div className="sp-demand-headline">
        <div className="sp-demand-headline-num">
          4<span className="x">×</span>
        </div>
        <div className="sp-demand-headline-lbl">
          <span className="top">OVERSUBSCRIBED</span>
          <span className="sub">on team slots — for every builder we placed, four were turned away</span>
        </div>
      </div>

      <div className="sp-demand-section">▸ DEMAND × SUPPLY · FN-2025</div>

      <div className="sp-demand-row">
        <div className="sp-demand-row-head">
          <span className="k">TEAMS BUILT</span>
          <span className="v">5<span className="vsub"> · €500 / team</span></span>
        </div>
        <div className="sp-demand-meter">
          <div className="sp-demand-meter-fill" style={{ width: "25%" }}></div>
          <div className="sp-demand-meter-grid"></div>
        </div>
        <div className="sp-demand-row-foot">
          <span>5 PLACED</span>
          <span className="dim">15 TURNED AWAY</span>
        </div>
      </div>

      <div className="sp-demand-row maxed">
        <div className="sp-demand-row-head">
          <span className="k">LIVE AUDIENCE</span>
          <span className="v">200<span className="vsub">+ · venue capped</span></span>
        </div>
        <div className="sp-demand-meter">
          <div className="sp-demand-meter-fill maxed" style={{ width: "100%" }}></div>
          <div className="sp-demand-meter-grid"></div>
        </div>
        <div className="sp-demand-row-foot">
          <span className="hot">CAPACITY MAXED</span>
          <span className="dim">DOGPATCH ARENA · DUBLIN</span>
        </div>
      </div>

      <div className="sp-demand-section">▸ TOTAL SPEND · FN-2025</div>

      <div className="sp-demand-spend">
        <div className="sp-demand-spend-num">
          <span className="cur">€</span>6,000
        </div>
        <div className="sp-demand-spend-body">
          <span className="lbl">ALL-IN</span>
          <span className="copy">Workshop, parts, venue, prizes, photography, food. The whole show.</span>
        </div>
      </div>

      <div className="sp-demand-ask">
        <span className="arrow">▸</span>
        <div>
          <strong>Help us make 2026 bigger.</strong>
          <span className="sub">More teams. Bigger venue. Same lean spend.</span>
        </div>
      </div>
    </div>
  );
}

// ── Section 01: Hero ─────────────────────────────────────────────
// Shorter, neater, cleaner. Eyebrow → headline → moved-up "any use" callout
// → tightened lede → email + Request Sponsor Pack CTA. Right column is the
// new DemandReadout instead of the old verified+projected double card.
function SpHero() {
  return (
    <section className="sp-hero" data-screen-label="01 Hero">
      <div className="hero-img-bg" aria-hidden="true">
        <div className="hero-img-bg-img" style={{ backgroundImage: "url('assets/photo-arena-overview.png')" }}></div>
        <div className="hero-img-bg-vignette"></div>
        <div className="hero-img-bg-scan"></div>
        <div className="hero-img-bg-grid"></div>
      </div>
      <SpCoord frame="FRM · 52.3424°N · -6.2438°W" id="FN26.SPONSOR.0001" status="INTAKE OPEN · ROLLING" stat="REGISTER · ROLLING" />
      <div className="sp-hero-grid">
        <div className="sp-hero-stack">
          <h1>
            STAND BEHIND<br />
            <span className="accent">IRISH ENGINEERING.</span>
          </h1>
          <div className="sp-hero-callout">
            If your product has any use to the teams or the event,
            <span className="em"> we want it everywhere.</span>
            <span className="line"> Tell us what you have — we'll match it with reach.</span>
          </div>
          <p className="sp-hero-prose">
            Patch Robowars is the loudest room of young engineering talent in Ireland.
            Sponsors fund <strong>workshop access, parts &amp; prizes</strong> — and put their
            brand on every chassis, jersey &amp; recap reel the cohort touches for eight weeks.
          </p>
          {/* Compact echo of the bottom CTA: same corner-bracket chrome,
              amber-toned, ending in the email form standing in for the
              bottom card's pill action. margin-top:auto in CSS pushes
              this to the bottom of the column so its lower edge aligns
              with the DemandReadout. */}
          <div className="sp-hero-cta sp-hero-cta-card">
            <div className="sp-hero-cta-label">▸ DIRECT INTAKE · 24HR REPLY</div>
            <div className="sp-hero-cta-title">
              REQUEST <span className="accent">SPONSOR PACK.</span>
            </div>
            <SpHeroForm />
          </div>
        </div>
        <div className="sp-hero-side">
          <DemandReadout />
        </div>
      </div>
    </section>
  );
}

// ── Section 03: Cracked #1 — full-bleed diptych + scrubber ───────
const CRACKED_FRAMES = [
  { left: "assets/photo-smoke.png", right: "assets/photo-bot-eyes.png", tagL: "FRM-C001 · IGNITION", tagR: "FRM-C002 · OPTICS" },
  { left: "assets/photo-chainsaw.png", right: "assets/photo-controller.png", tagL: "FRM-C003 · ARMAMENT", tagR: "FRM-C004 · OPERATOR" },
  { left: "assets/photo-bot-blue.png", right: "assets/photo-team.png", tagL: "FRM-C005 · CHASSIS", tagR: "FRM-C006 · COHORT" },
  { left: "assets/photo-arena-wide.png", right: "assets/photo-controller-2.png", tagL: "FRM-C007 · ARENA", tagR: "FRM-C008 · CONTROL" },
];

function Cracked1() {
  const [idx, setIdx] = useState(0);
  const total = CRACKED_FRAMES.length;
  return (
    <section className="sp-cracked" data-screen-label="03 Cracked I — Brand Adjacency">
      <SpCoord frame="FRM · ARC-LIGHT · 02:14:38" id="FN26.SPONSOR.0003" status="CRACKED REGISTER · ON" />
      <div className="sp-cracked-stage">
        <div className="sp-cracked-frame left">
          {CRACKED_FRAMES.map((f, i) => (
            <div key={i} className={`img ${i === idx ? "active" : ""}`} style={{ backgroundImage: `url("${f.left}")` }}></div>
          ))}
          <span className="frame-tag">{CRACKED_FRAMES[idx].tagL}</span>
        </div>
        <div className="sp-cracked-divider"></div>
        <div className="sp-cracked-frame right">
          {CRACKED_FRAMES.map((f, i) => (
            <div key={i} className={`img ${i === idx ? "active" : ""}`} style={{ backgroundImage: `url("${f.right}")` }}></div>
          ))}
          <span className="frame-tag">{CRACKED_FRAMES[idx].tagR}</span>
        </div>

        <div className="sp-cracked-overlay">
          <div className="sp-cracked-eyebrow">▸ WHAT YOUR BRAND SITS NEXT TO</div>
          <div className="sp-cracked-line">
            The students staying up till 3am wiring a brushless motor are running on
            caffeine, soldering iron heat and stubbornness. <span className="em">Your brand on their chassis isn't an ad. It's a co-sign.</span>
          </div>
        </div>

        <div className="sp-cracked-scrub">
          <span className="label">CONTACT SHEET</span>
          <div className="track">
            <div className="ticks">
              {CRACKED_FRAMES.map((_, i) => (
                <div
                  key={i}
                  className={`tick ${i === idx ? "active" : ""}`}
                  onClick={() => setIdx(i)}
                ></div>
              ))}
            </div>
          </div>
          <span className="counter">{String(idx + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}</span>
        </div>
      </div>
    </section>
  );
}



/* ================================================================
   PASS B — Warm #1, Contribution Manifest, Activation Surface
   ================================================================ */

// Tiny line-art icons (abstract, drawn with SVG)
function Icon({ k }) {
  const icons = {
    cash: <path d="M3 6h18v12H3z M3 10h18 M7 14h2 M11 14h6" />,
    product: <path d="M4 7l8-4 8 4-8 4-8-4z M4 7v10l8 4 M20 7v10l-8 4 M4 12l8 4 8-4" />,
    license: <path d="M5 4h10l4 4v12H5z M15 4v4h4 M8 12h8 M8 16h6" />,
    tool: <path d="M14 2l8 8-3 3-2-2-7 7H4v-6l7-7-2-2z" />,
    chip: <path d="M6 6h12v12H6z M2 9h4 M2 12h4 M2 15h4 M18 9h4 M18 12h4 M18 15h4 M9 2v4 M12 2v4 M15 2v4 M9 18v4 M12 18v4 M15 18v4 M9 9h6v6H9z" />,
    service: <path d="M3 12h6l2-3 4 6 2-3h4" />,
    expert: <path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z" />,
    prize: <path d="M8 5h8v6a4 4 0 01-8 0V5z M5 5h3 M16 5h3 M9 17h6 M10 21h4 M11 17v4 M13 17v4" />,
    food: <path d="M4 8h16l-2 12H6L4 8z M8 8V5a4 4 0 018 0v3" />,
    judge: <path d="M12 2l4 5-4 3-4-3 4-5z M5 12h14l-2 9H7l-2-9z" />,
    venue: <path d="M3 21V9l9-7 9 7v12 M3 21h18 M9 21v-7h6v7" />,
    intro: <path d="M2 12c5-5 15-5 20 0 M2 12c5 5 15 5 20 0 M12 7v10" />,
    bot: <path d="M5 8h14v10H5z M9 8V4 M15 8V4 M2 12h3 M19 12h3 M9 13h.01 M15 13h.01" />,
    jersey: <path d="M5 5l4-2 6 0 4 2-2 4-2-1v14H7V8L5 9z" />,
    arena: <ellipse cx="12" cy="12" rx="10" ry="6" />,
    booth: <path d="M3 8h18v12H3z M3 8l3-4h12l3 4 M9 14h6 M9 17h6" />,
    stage: <path d="M2 18h20 M4 18l2-8h12l2 8 M9 10v8 M15 10v8" />,
    award: <path d="M12 2l8 4v6c0 5-4 9-8 10-4-1-8-5-8-10V6z M9 11l2 2 4-4" />,
    mic: <path d="M12 2a3 3 0 013 3v6a3 3 0 01-6 0V5a3 3 0 013-3z M5 11a7 7 0 0014 0 M12 18v4" />,
    photo: <path d="M3 7h4l2-3h6l2 3h4v13H3z M12 17a4 4 0 100-8 4 4 0 000 8z" />,
    social: <path d="M5 5h14v14H5z M9 9l3 3 6-6 M5 19l4-4" />,
    hashtag: <path d="M9 3l-2 18 M17 3l-2 18 M3 9h18 M3 15h18" />,
    video: <path d="M3 7h12v10H3z M15 11l6-3v8l-6-3z" />,
    reel: <path d="M3 5h18v14H3z M3 9h18 M3 15h18 M7 5v14 M17 5v14" />,
    print: <path d="M5 18H3v-6h18v6h-2 M7 14h10v8H7z M7 8V3h10v5" />,
    web: <circle cx="12" cy="12" r="10" />,
    press: <path d="M3 5h18v14H3z M3 5l9 7 9-7 M21 19l-7-7 M3 19l7-7" />,
    workshop: <path d="M4 21V10l8-7 8 7v11 M9 21v-7h6v7 M12 14v-3" />,
    visit: <path d="M3 10l9-7 9 7v11H3z M9 21V13h6v8" />,
    cv: <path d="M5 3h10l4 4v14H5z M15 3v4h4 M8 11h8 M8 15h8 M8 19h6" />,
    roundtable: <ellipse cx="12" cy="14" rx="9" ry="3" />,
    site: <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z M12 11a2 2 0 100-4 2 2 0 000 4z" />,
    jury: <path d="M3 6l9-3 9 3v6c0 5-4 9-9 10-5-1-9-5-9-10V6z" />,
  };
  return (
    <svg className="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      {icons[k] || <rect x="4" y="4" width="16" height="16" />}
    </svg>
  );
}

// ── Section 04: WARM #1 ─────────────────────────────────────────
function Warm1() {
  return (
    <section className="sp-warm" data-screen-label="04 Warm I — What this actually does">
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SpCoord frame="FRM · CIVIC · 11:32:04" id="FN26.SPONSOR.0004" status="WARM REGISTER · ON" stat="● ECOSYSTEM" />
      </div>
      <div className="sp-warm-grid">
        <div className="sp-warm-photo">
          <div className="img" style={{ backgroundImage: "url('assets/photo-team.png')" }}></div>
          <span className="caption">FRM-W001 · COHORT · BUILD DAY 03</span>
        </div>
        <div>
          <div className="sp-warm-eyebrow">▸ THE SECOND-ORDER EFFECT</div>
          <h2 className="sp-warm-title">
            ACCESS IS THE WHOLE POINT.<br />
            <span className="accent">SPECTACLE IS THE BAIT.</span>
          </h2>
          <div className="sp-warm-prose">
            <p>
              Ireland built a software economy worth billions. The hardware
              economy doesn't really exist yet.
            </p>
            <p>
              The barrier is access — to parts, to space, to mentorship — and
              that barrier is exactly what we remove. Sponsoring Robowars funds
              that access, indiscriminately, for any 18–25-year-old in the
              country with the will to build.
            </p>
            <div className="sp-warm-pullquote">
              <span className="em">&ldquo;</span>Last year a builder from outside
              Dublin who had never touched CAD ended up wiring the BMS for a
              finalist team.<span className="em">&rdquo;</span>
              <span className="source">// REPLACE WITH REAL STORY WHEN AVAILABLE — FN-2025</span>
            </div>
            <p>
              We're not picking the kids who already had the kit. We're picking
              the kids who'll do something with it.
            </p>
            <p>
              <strong>The talent that comes out the other side is the talent
              your industry will be hiring in five years. You'd like to meet
              them now.</strong>
            </p>
          </div>
          <div className="sp-warm-stats">
            <div className="sp-warm-stat"><span className="v">100%</span><span className="k">Funded</span></div>
            <div className="sp-warm-stat"><span className="v">€0</span><span className="k">Cost to Builders</span></div>
            <div className="sp-warm-stat"><span className="v">18–25</span><span className="k">Anywhere in IE</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Inventory row ───────────────────────────────────────────────
function InvRow({ icon, label, examples, useCase }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={`sp-inv-row ${open ? "open" : ""}`} onClick={() => setOpen(o => !o)}>
      <div className="sp-inv-cell">
        <span className="arrow">▸</span>
        <Icon k={icon} />
        <span className="label">{label}</span>
      </div>
      <div className="sp-inv-cell examples">{examples}</div>
      <div className="sp-inv-detail">
        <span className="prompt">$</span>
        <span className="dim">use_case --label "{label}":</span> {useCase}
      </div>
    </div>
  );
}

// ── Section 05: Contribution Manifest ───────────────────────────
const CONTRIB = [
  { icon: "cash", label: "CASH", examples: "direct sponsorship — any amount", useCase: "unrestricted funds. covers parts, workshop costs, and the prize pool. the simplest way to back the event." },
  { icon: "product", label: "PRODUCT", examples: "your physical product on the bench", useCase: "ship us your product and we put it in builders' hands for the eight-week build. seen, used, and remembered — not stickered on a swag bag." },
  { icon: "license", label: "LICENSES", examples: "CAD, ECAD, or software seats for every team", useCase: "donate seats of your software for the build window. every team learns it on a real project and keeps using it after." },
  { icon: "service", label: "CREDITS", examples: "PCB fab · CNC · laser · cloud · compute", useCase: "service credits unblock teams when they hit a wall. credits get used and the relationship usually continues post-event." },
  { icon: "judge", label: "JUDGES", examples: "a technical seat on the Fight Night panel", useCase: "send an engineer or founder to score fights on the night. on stage, on camera, with the room watching." },
  { icon: "expert", label: "TIME", examples: "mentor hours · workshop talks · build days", useCase: "an engineer for a Saturday, a 30-minute talk, or recurring office hours. direct contact with the cohort." },
  { icon: "prize", label: "PRIZES", examples: "internships · vouchers · kit", useCase: "an internship in the prize pool is the strongest pull a sponsor can offer. equipment vouchers and kit also land hard." },
];

function Manifest() {
  return (
    <section className="sp-inv first" data-screen-label="05 Contribution Manifest">
      <div className="sp-inv-head">
        <SpCoord frame="FRM · QUARTERMASTER" id="FN26.SPONSOR.0005" status="MANIFEST OPEN · NEGOTIABLE" />
        <div style={{ marginTop: 18 }}>
          <div className="sp-inv-eyebrow">▸ CONTRIBUTION MANIFEST</div>
          <h2 className="sp-inv-title">
            BRING WHATEVER<br /><span className="accent">YOU HAVE.</span>
          </h2>
          <p className="sp-inv-sub">
            Seven ways to back the event — all valued at retail, all treated like cash.
            Mix categories, propose your own. Pricing is open-ended; reach out and we'll
            shape it together.
          </p>
        </div>
      </div>

      <div className="sp-inv-card">
        <div className="sp-inv-bar">
          <span>MANIFEST · FLEXIBLE BY DESIGN</span>
          <div className="meta">
            <span>7 ROWS</span>
            <span className="live">LIVE</span>
          </div>
        </div>
        <div className="sp-inv-cols">
          <div className="sp-inv-colhead">▸ WE ACCEPT</div>
          <div className="sp-inv-colhead right">▸ EXAMPLES</div>
          {CONTRIB.map((r, i) => <InvRow key={i} {...r} />)}
        </div>
      </div>
    </section>
  );
}

// ── Section 06: Return on Brand — visual showcase ───────────────
const SHOWCASE_TILES = [
  {
    img: "assets/photo-bot-blue.png",
    label: "ON THE ROBOTS",
    body: "A decal on every chassis. Your logo lives in every fight photo, every recap clip, every press shot — without anyone needing to add it later.",
  },
  {
    img: "assets/photo-team.png",
    label: "ON THE JERSEYS",
    body: "Printed on team shirts the cohort wears for eight weeks of build days and on Fight Night. Worn in the workshop, on stage, in every team photo.",
  },
  {
    img: "assets/photo-arena-wide.png",
    label: "AROUND THE ARENA",
    body: "Banners, structural panels, broadcast bumpers. The box itself is the camera angle for every fight — your branding is in the frame by default.",
  },
  {
    img: "assets/photo-arena-overview.png",
    label: "AT THE EVENT",
    body: "A dedicated activation space on Fight Night — demo your product, meet builders, hand out kit. We give you the room to show up properly.",
  },
];

function Showcase() {
  return (
    <section className="sp-showcase" data-screen-label="06 Return on Brand">
      <div className="sp-showcase-head">
        <SpCoord frame="FRM · VISIBILITY" id="FN26.SPONSOR.0006" status="RETURN ON BRAND · OPEN" />
        <div style={{ marginTop: 18 }}>
          <div className="sp-showcase-eyebrow">▸ WHAT YOU GET BACK</div>
          <h2 className="sp-showcase-title">
            EVERYWHERE<br /><span className="accent">WE GO.</span>
          </h2>
          <p className="sp-showcase-sub">
            Pick a surface, pick all of them. We're proud of the brands that back
            this thing and we put their logos where the camera lives — on the
            bots, on the jerseys, around the arena, and at the event itself. If
            you have a product you want shown off, we'll make space for it.
          </p>
        </div>
      </div>

      <div className="sp-showcase-grid">
        {SHOWCASE_TILES.map((t) => (
          <figure key={t.label} className="sp-showcase-tile">
            <div className="sp-showcase-tile-img" style={{ backgroundImage: `url('${t.img}')` }}></div>
            <div className="sp-showcase-tile-veil"></div>
            <span className="sp-showcase-tile-corner tl" aria-hidden="true"></span>
            <span className="sp-showcase-tile-corner tr" aria-hidden="true"></span>
            <span className="sp-showcase-tile-corner bl" aria-hidden="true"></span>
            <span className="sp-showcase-tile-corner br" aria-hidden="true"></span>
            <div className="sp-showcase-tile-label">
              <span className="dot"></span>{t.label}
            </div>
            <figcaption className="sp-showcase-tile-body">{t.body}</figcaption>
          </figure>
        ))}
      </div>

      <div className="sp-showcase-foot">
        <span className="arrow">▸</span>
        <span>Tell us what your brand needs to be seen on — we'll find a fit.</span>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="lb-join" data-screen-label="10 CTA — Two Doors">
      <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 US
            </div>
            <h2 className="lb-join-title">
              TWO DOORS. <span className="accent">SAME INBOX.</span>
            </h2>
          </div>
          <p className="lb-join-lede">
            We're flexible on what sponsorship looks like and in-kind contributions
            count just as much as cash. Send a note for a conversation or grab the
            FN26 deck — Conor handles the inbox and reads everything.
          </p>
        </div>
      </div>
      <div className="sp-cta-grid">
        <a className="sp-cta-card primary" href="mailto:sponsor@patchrobowars.ie?subject=Sponsor%20Conversation">
          <div className="label"><span className="num">01</span>· PRIMARY · TALK TO US</div>
          <div className="door">REQUEST<br /><span className="accent">A CONVERSATION.</span></div>
          <div className="desc">
            We'll come back the same day with a conversation, not a sales pitch.
            Tell us roughly what you have and we'll tell you what we can do with it.
          </div>
          <span className="action">REQUEST INFO <span className="arrow">→</span></span>
        </a>
        <a className="sp-cta-card secondary" href="mailto:sponsor@patchrobowars.ie?subject=Sponsor%20Deck%20Request">
          <div className="label"><span className="num">02</span>· SECONDARY · REQUEST THE DECK</div>
          <div className="door">REQUEST<br /><span className="accent">THE FN26 DECK.</span></div>
          <div className="desc">
            A short proposal, tier guidance, and the FN26 specifics. Sent over
            the same day. Read first, conversation second.
          </div>
          <span className="action">REQUEST DECK <span className="arrow">→</span></span>
        </a>
      </div>
      <div className="sp-cta-foot">
        <span><span className="arrow">▸</span>FLEXIBLE</span>
        <span className="pipe">·</span>
        <span>HONEST</span>
        <span className="pipe">·</span>
        <span>IN-KIND WELCOME</span>
        <span className="pipe">·</span>
        <span>CONOR HANDLES THE INBOX</span>
      </div>
    </section>
  );
}

// ── Page wrapper ─────────────────────────────────────────────────
function SponsorPage() {
  return (
    <div className="sp-page page" data-screen-label="Sponsor">
      <SpHero />
      <Cracked1 />
      <Warm1 />
      <Manifest />
      <Showcase />
      <CTA />
    </div>
  );
}

window.SponsorPage = SponsorPage;