/* eslint-disable react/no-unescaped-entities */
const { useEffect, useState, useRef, useCallback, useMemo } = React;

/* =========================================================
   CONSTANTS — official links
   ========================================================= */
const FIFA_HOME = "https://www.fifa.com/en/tournaments/mens/worldcup/canadamexicousa2026";
const FIFA_TICKETS = "https://www.fifa.com/en/tournaments/mens/worldcup/canadamexicousa2026/tickets";
const FIFA_SCHEDULE = "https://www.fifa.com/en/tournaments/mens/worldcup/canadamexicousa2026/match-schedule";
const FIFA_TEAMS = "https://www.fifa.com/en/tournaments/mens/worldcup/canadamexicousa2026/teams";
const FIFA_VENUES = "https://www.fifa.com/en/tournaments/mens/worldcup/canadamexicousa2026/destination";
const FIFA_NEWS = "https://www.fifa.com/en/tournaments/mens/worldcup/canadamexicousa2026/news";

/* =========================================================
   COUNTDOWN
   ========================================================= */
const KICKOFF = new Date("2026-06-11T20:00:00-05:00"); // Opening match · Estadio Azteca · Mexico City
const FINAL_DATE = new Date("2026-07-19T15:00:00-04:00"); // Final · MetLife Stadium

function useCountdown(target) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target.getTime() - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  return { d, h, m, s, total: diff };
}

function pad(n) { return String(n).padStart(2, "0"); }

function Countdown({ target, big = false }) {
  const { d, h, m, s, total } = useCountdown(target);
  if (total === 0) {
    return <span className={`countdown${big ? " big" : ""}`}><span className="cnum">LIVE</span></span>;
  }
  return (
    <span className={`countdown${big ? " big" : ""}`}>
      <span className="cseg"><span className="cnum">{d}</span><span className="clbl">d</span></span>
      <span className="csep">·</span>
      <span className="cseg"><span className="cnum">{pad(h)}</span><span className="clbl">h</span></span>
      <span className="csep">·</span>
      <span className="cseg"><span className="cnum">{pad(m)}</span><span className="clbl">m</span></span>
      <span className="csep">·</span>
      <span className="cseg"><span className="cnum">{pad(s)}</span><span className="clbl">s</span></span>
    </span>
  );
}

/* Flag colors — simple two-or-three-stripe rendering */
function Flag({ stripes, vertical = false }) {
  return (
    <span className="flag" style={{
      background: vertical
        ? `linear-gradient(90deg, ${stripes.map((c, i) => `${c} ${(i * 100 / stripes.length).toFixed(1)}% ${((i + 1) * 100 / stripes.length).toFixed(1)}%`).join(", ")})`
        : `linear-gradient(180deg, ${stripes.map((c, i) => `${c} ${(i * 100 / stripes.length).toFixed(1)}% ${((i + 1) * 100 / stripes.length).toFixed(1)}%`).join(", ")})`
    }} />
  );
}

/* =========================================================
   FLOATING BALL FIELD — parallax via mouse / gyro
   ========================================================= */
// Procedurally generate ~60 balls across the hero area
const BALLS = (() => {
  const out = [];
  const rand = (seed) => {
    // deterministic pseudo-random so layout doesn't reshuffle on every render
    const x = Math.sin(seed * 9301 + 49297) * 233280;
    return x - Math.floor(x);
  };
  for (let i = 0; i < 60; i++) {
    const r1 = rand(i + 1);
    const r2 = rand(i + 100);
    const r3 = rand(i + 200);
    const r4 = rand(i + 300);
    const r5 = rand(i + 400);
    // bias towards edges & corners — leave a gap in the middle for mascot
    const cornerBias = r5 < 0.7;
    let top, left;
    if (cornerBias) {
      // pick a corner / edge band
      top  = r1 < 0.5 ? r2 * 28 : 72 + r2 * 28;        // 0–28% or 72–100%
      left = r3 < 0.5 ? r4 * 36 : 64 + r4 * 36;        // 0–36% or 64–100%
    } else {
      top  = r1 * 100;
      left = r3 * 100;
    }
    const size = 22 + Math.floor(r2 * 90); // 22–112 px
    const depth = (r3 - 0.5) * 0.14;
    out.push({
      id: i,
      top: `${top.toFixed(1)}%`,
      left: `${left.toFixed(1)}%`,
      width: `${size}px`,
      depth,
      db: `-${(r4 * 7).toFixed(1)}s`,
      ds: `-${(r5 * 10).toFixed(1)}s`,
      spin: `${8 + r4 * 14}s`,
    });
  }
  return out;
})();

function BallField() {
  const containerRef = useRef(null);
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;
    const wrappers = Array.from(container.children);
    const p = BALLS.map(() => ({ x: 0, y: 0, tx: 0, ty: 0 }));
    let raf = 0;
    const onMouse = (e) => {
      const dx = e.clientX - window.innerWidth / 2;
      const dy = e.clientY - window.innerHeight / 2;
      p.forEach((v, i) => { v.tx = dx * BALLS[i].depth; v.ty = dy * BALLS[i].depth; });
    };
    const onOri = (e) => {
      if (e.gamma == null || e.beta == null) return;
      const dx = Math.max(-40, Math.min(40, e.gamma)) * (window.innerWidth / 2 / 40);
      const dy = Math.max(-40, Math.min(40, e.beta - 90)) * (window.innerHeight / 2 / 40);
      p.forEach((v, i) => { v.tx = dx * BALLS[i].depth; v.ty = dy * BALLS[i].depth; });
    };
    const startGyro = () => {
      const DOE = window.DeviceOrientationEvent;
      if (DOE && typeof DOE.requestPermission === "function") {
        DOE.requestPermission().then(perm => {
          if (perm === "granted") window.addEventListener("deviceorientation", onOri);
        }).catch(() => {});
      } else if (DOE) {
        window.addEventListener("deviceorientation", onOri);
      }
    };
    const tick = () => {
      p.forEach((v, i) => {
        v.x += (v.tx - v.x) * 0.14;
        v.y += (v.ty - v.y) * 0.14;
        if (wrappers[i]) wrappers[i].style.transform = `translate(${v.x.toFixed(2)}px,${v.y.toFixed(2)}px)`;
      });
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener("mousemove", onMouse, { passive: true });
    window.addEventListener("touchstart", startGyro, { once: true, passive: true });
    raf = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener("mousemove", onMouse);
      window.removeEventListener("deviceorientation", onOri);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <div ref={containerRef} className="ball-field">
      {BALLS.map((b) => (
        <div key={b.id} className="ballwrap" style={{ top: b.top, left: b.left, width: b.width }}>
          <img
            className="ball"
            src="assets/ball.png"
            alt=""
            style={{ animationDelay: `${b.db}, ${b.ds}`, animationDuration: `7s, ${b.spin}` }}
          />
        </div>
      ))}
    </div>
  );
}

/* =========================================================
   MASCOT — kicks when you click him
   ========================================================= */
function Mascot() {
  const [kick, setKick] = useState(false);
  return (
    <div
      className={`mascot-wrap${kick ? " kick" : ""}`}
      onClick={() => { setKick(true); setTimeout(() => setKick(false), 600); }}
      style={{ pointerEvents: "auto", cursor: "pointer" }}
    >
      <img src="assets/mascot.png" alt="World Cup House — Subject WCH-2026" draggable="false" />
    </div>
  );
}

/* =========================================================
   HERO LIVE STATS — counting down to kickoff
   ========================================================= */
function HeroLiveStats() {
  const { d, h, m, s } = useCountdown(KICKOFF);
  return (
    <div className="hero-stats">
      <div className="stat">
        <div className="num"><em>{d}</em></div>
        <div className="lbl">Days until first whistle</div>
      </div>
      <div className="stat">
        <div className="num"><em>{pad(h)}:{pad(m)}:{pad(s)}</em></div>
        <div className="lbl">Hours · Minutes · Seconds</div>
      </div>
      <div className="stat">
        <div className="num"><em>48</em></div>
        <div className="lbl">National teams in the draw</div>
      </div>
      <div className="stat">
        <div className="num"><em>104</em></div>
        <div className="lbl">Fixtures across 16 host cities</div>
      </div>
    </div>
  );
}

/* =========================================================
   TICKER (top of page) — pre-tournament countdown messages
   ========================================================= */
function MatchTicker() {
  const { d, h, m } = useCountdown(KICKOFF);
  const items = [
    `KICKOFF IN ${d}D ${pad(h)}H ${pad(m)}M`,
    "OPENING MATCH · ESTADIO AZTECA · MEXICO CITY · JUN 11",
    "48 NATIONS · 16 CITIES · 104 MATCHES",
    "FIRST WORLD CUP HELD ACROSS THREE NATIONS",
    "FINAL · METLIFE STADIUM · JUL 19 · SUNDAY",
    "GET THE FRIDGE FILLED · GET THE COUCH READY",
    "FOOTBALL ALL SUMMER · OFFICIAL TICKETS ON FIFA.COM",
  ];
  const segment = items.join("   ·   ");
  return (
    <div className="ob-ticker-bar" role="marquee" aria-label="Live match ticker">
      <div className="ob-ticker-row">
        <div className="ob-ticker-badge">
          <span className="tick-dot" />
          COUNTDOWN
        </div>
        <div className="ob-ticker-scroll">
          <span className="ob-ticker-inner ob-ticker-text">
            {segment}&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;{segment}
          </span>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   FIXTURE COUNTDOWN FEED
   ========================================================= */
const FIXTURES = [
  {
    tier: "OPENER",
    homeName: "Mexico",       homeStripes: ["#006847", "#ffffff", "#ce1126"],
    awayName: "Morocco",      awayStripes: ["#c1272d", "#006233"],
    comp: "Group A · Estadio Azteca · Mexico City",
    iso: "2026-06-11T20:00:00-05:00",
  },
  {
    tier: "GROUP",
    homeName: "United States", homeStripes: ["#b22234", "#ffffff", "#3c3b6e"],
    awayName: "Wales",         awayStripes: ["#ffffff", "#00703c", "#d30731"],
    comp: "Group D · SoFi Stadium · Los Angeles",
    iso: "2026-06-12T18:00:00-07:00",
  },
  {
    tier: "GROUP",
    homeName: "Argentina",     homeStripes: ["#75aadb", "#ffffff", "#75aadb"],
    awayName: "Saudi Arabia",  awayStripes: ["#006c35", "#ffffff"],
    comp: "Group C · MetLife Stadium · New Jersey",
    iso: "2026-06-13T15:00:00-04:00",
  },
  {
    tier: "GROUP",
    homeName: "France",        homeStripes: ["#0055a4", "#ffffff", "#ef4135"], vertical: true,
    awayName: "Australia",     awayStripes: ["#012169", "#e4002b"],
    comp: "Group F · BMO Field · Toronto",
    iso: "2026-06-14T18:00:00-04:00",
  },
  {
    tier: "GROUP",
    homeName: "England",       homeStripes: ["#ffffff", "#cf142b"],
    awayName: "Iran",          awayStripes: ["#239f40", "#ffffff", "#da0000"],
    comp: "Group B · Lumen Field · Seattle",
    iso: "2026-06-21T14:00:00-07:00",
  },
  {
    tier: "GROUP",
    homeName: "Brazil",        homeStripes: ["#009c3b", "#ffdf00", "#002776"],
    awayName: "Portugal",      awayStripes: ["#006600", "#ff0000"], vertical: true,
    comp: "Group H · Hard Rock Stadium · Miami",
    iso: "2026-06-24T19:00:00-04:00",
  },
  {
    tier: "KNOCKOUT",
    homeName: "TBD · Winner Group A", homeStripes: ["#ddd6b8"],
    awayName: "TBD · Runner-up Group B", awayStripes: ["#ddd6b8"],
    comp: "Round of 32 · Gillette Stadium · Boston",
    iso: "2026-06-28T16:00:00-04:00",
  },
  {
    tier: "FINAL",
    homeName: "TBD",           homeStripes: ["#e6c66c"],
    awayName: "TBD",           awayStripes: ["#e6c66c"],
    comp: "Final · MetLife Stadium · New Jersey",
    iso: "2026-07-19T15:00:00-04:00",
  },
];

function FixtureRow({ f }) {
  const target = useMemo(() => new Date(f.iso), [f.iso]);
  const date = target.toLocaleDateString("en-US", { month: "short", day: "numeric" });
  const time = target.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", timeZoneName: "short" });
  return (
    <div className="ob-sig-row">
      <span className={`ob-tier-badge ob-tier-${f.tier.toLowerCase()}`}>{f.tier}</span>
      <div style={{ display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
          <span className="team-chip"><Flag stripes={f.homeStripes} vertical={f.vertical} />{f.homeName}</span>
          <span style={{ color: "var(--muted)", fontStyle: "italic", fontFamily: "var(--font-serif)", fontSize: 14 }}>vs</span>
          <span className="team-chip"><Flag stripes={f.awayStripes} vertical={f.vertical} />{f.awayName}</span>
        </div>
        <span style={{ fontSize: 12, color: "var(--muted)" }}>{f.comp} · {date} · {time}</span>
      </div>
      <Countdown target={target} />
    </div>
  );
}

function LiveDashboard() {
  const opening = useCountdown(KICKOFF);
  const final = useCountdown(FINAL_DATE);
  return (
    <section className="ob-dash" id="fixtures">
      <div className="wrap">
        <div className="ob-dash-head">
          <div>
            <div className="eyebrow">The Schedule</div>
            <h2>Eight fixtures to circle. <em>Then the other ninety-six.</em></h2>
          </div>
          <div className="ob-dash-meta">
            <div className="ob-live-dot" />
            <span className="ob-dash-updated">Ticking down · every second</span>
          </div>
        </div>

        <div className="ob-stat-grid">
          <div className="ob-stat-cell">
            <div className="ob-stat-val"><em>{opening.d}</em></div>
            <div className="ob-stat-lbl">Days until opener · Jun 11</div>
          </div>
          <div className="ob-stat-cell">
            <div className="ob-stat-val" style={{ fontVariantNumeric: "tabular-nums" }}>
              {pad(opening.h)}:{pad(opening.m)}:{pad(opening.s)}
            </div>
            <div className="ob-stat-lbl">Hours · Mins · Secs to first whistle</div>
          </div>
          <div className="ob-stat-cell">
            <div className="ob-stat-val"><em>{final.d}</em></div>
            <div className="ob-stat-lbl">Days until the final · Jul 19</div>
          </div>
          <div className="ob-stat-cell">
            <div className="ob-stat-val">104</div>
            <div className="ob-stat-lbl">Fixtures loaded · 0 played</div>
          </div>
        </div>

        <div className="ob-signals-head">Marquee fixtures · the ones to plan your week around</div>

        {FIXTURES.map((f, i) => <FixtureRow key={i} f={f} />)}

        <div className="ob-dash-footer">
          <span className="ob-source-note">Full 104-match schedule on <a href={FIFA_SCHEDULE} target="_blank" rel="noopener noreferrer" style={{ color: "var(--red)", textDecoration: "underline" }}>fifa.com ↗</a> · 16 host cities · USA · Canada · Mexico · Jun 11 – Jul 19, 2026</span>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   BAR CHART
   ========================================================= */
const BARS = [
  { name: "No plan",           small: "Won't even know when group stage ends",   target: 8,  cls: "",      value: "~6",  unit: "matches" },
  { name: "Casual viewer",     small: "Will catch the games on a phone at work", target: 36, cls: "navy",  value: "~24", unit: "matches" },
  { name: "World Cup House",   small: "Couch booked, fridge full, day cleared",  target: 100, cls: "green", value: "104", unit: "matches" },
];

function BarChart() {
  const ref = useRef(null);
  const animated = useRef(false);
  useEffect(() => {
    const fills = ref.current?.querySelectorAll(".bar-fill");
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !animated.current) {
        animated.current = true;
        fills?.forEach((el) => {
          const t = parseFloat(el.dataset.target ?? "0");
          el.style.width = Math.min(100, t) + "%";
        });
        observer.disconnect();
      }
    }, { threshold: 0.3 });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);
  return (
    <div className="bars" ref={ref}>
      {BARS.map((b) => (
        <div className="bar-row" key={b.name}>
          <div className="name">{b.name}<small>{b.small}</small></div>
          <div className="bar-track">
            <div className={`bar-fill ${b.cls}`} data-target={b.target} />
          </div>
          <div className="val">{b.value} <em>{b.unit}</em></div>
        </div>
      ))}
    </div>
  );
}

/* =========================================================
   FAQ
   ========================================================= */
const FAQS = [
  {
    q: "Wait — what's this site, actually?",
    a: "World Cup House is a love letter to the 2026 FIFA World Cup, the first to be held across three countries (United States, Canada, Mexico) and the first with 48 teams. We made you a checklist, a schedule, and an excuse to do nothing for 39 days but watch football.",
  },
  {
    q: "When and where does it actually start?",
    a: "Opening match kicks off June 11, 2026 at Estadio Azteca in Mexico City. The final is Sunday, July 19 at MetLife Stadium in New Jersey. 104 matches in between, across 16 host cities. Full schedule on the official site.",
  },
  {
    q: "Do I have to watch every single match?",
    a: "There are 104 of them across 39 days. That's about three a day on average — perfectly doable if you commit. But really, pick a team, pick a group, pick a region. Watch the matches you care about. Stay loyal through extra time. Loyalty after a 4–0 group stage exit is the truest kind there is.",
  },
  {
    q: "Where can I get tickets?",
    a: "The official ticketing portal is on fifa.com. Phases of sale have been rolling since 2025; remaining inventory and resale moves fast. If you can't get to a match, the next best thing is a couch with a clear sightline to the screen and a fridge within five steps.",
  },
  {
    q: "Which host city should I road-trip to?",
    a: "If you want spectacle, the big SoFi/MetLife/Hard Rock dates are pure mayhem. If you want atmosphere, Estadio Azteca and BMO Field will hum for days. Smaller venues like Gillette and Arrowhead get the underdog ties everyone forgets about until they're suddenly classics.",
  },
  {
    q: "My team won't make it past the group stage. What now?",
    a: "Grief comes in three stages: denial, bargaining, and switching to whoever your second cousin supports. All three are allowed. There's no shame in adopting a second team in the round of 16. There is also no honor in it. Carry on regardless.",
  },
  {
    q: "What time zone should I prepare for?",
    a: "Matches will run from late morning to late evening local time depending on the venue. Stock caffeine for the early kickoffs and something else for the late ones. Set every device to the local time of the match you're watching.",
  },
];

function FaqAccordion() {
  const [open, setOpen] = useState(null);
  return (
    <div className="faq-list">
      {FAQS.map((item, i) => (
        <div key={i} className={`faq-item${open === i ? " open" : ""}`}>
          <button className="faq-q" type="button" onClick={() => setOpen(open === i ? null : i)}>
            {item.q}
            <span className="plus">+</span>
          </button>
          <div className="faq-a" style={{ maxHeight: open === i ? "400px" : "0px" }}>
            <div className="faq-a-inner">{item.a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* =========================================================
   FOOTER TICKER
   ========================================================= */
function FooterTicker() {
  const { d, h, m, s } = useCountdown(KICKOFF);
  return (
    <div className="footer-ticker">
      <div className="footer-ticker-inner">
        <div className="ft-live"><span className="ft-dot" /><span className="ft-live-label">Countdown</span></div>
        <div className="ft-divider" />
        <span className="ft-stat">Kickoff in: <strong>{d}d {pad(h)}h {pad(m)}m {pad(s)}s</strong></span>
        <div className="ft-divider" />
        <span className="ft-stat">Opener: <strong>Mexico City · Jun 11</strong></span>
        <div className="ft-divider" />
        <span className="ft-stat">Final: <strong>MetLife · Jul 19</strong></span>
        <div className="ft-divider" />
        <span className="ft-stat">Matches: <strong>104</strong></span>
        <div className="ft-divider" />
        <span className="ft-stat">Get tickets on <strong>fifa.com</strong></span>
      </div>
    </div>
  );
}

/* =========================================================
   PAINT SPLATTER — for hero color accents
   ========================================================= */
function Splatter({ color, className }) {
  // irregular drip-like blob with smaller satellite dots
  return (
    <svg className={`splat ${className}`} viewBox="0 0 200 200" fill={color} aria-hidden="true">
      <path d="M104 12c14-6 33 3 41 15 9 13-2 24 5 38 7 13 28 19 30 35s-16 27-21 42c-5 14 7 32-4 43-12 12-33 4-49 8-15 4-27 22-43 19-17-2-26-23-37-35-12-13-31-15-34-31-3-15 14-27 17-43 3-15-9-33 2-46 11-13 32-6 46-15 14-8 33-26 47-30z" />
      <circle cx="172" cy="44" r="6" />
      <circle cx="188" cy="92" r="4" />
      <circle cx="22" cy="58" r="5" />
      <circle cx="14" cy="142" r="7" />
      <circle cx="166" cy="178" r="5" />
      <circle cx="92" cy="194" r="4" />
      <ellipse cx="42" cy="22" rx="8" ry="3" transform="rotate(35 42 22)" />
      <ellipse cx="180" cy="138" rx="10" ry="3" transform="rotate(-20 180 138)" />
    </svg>
  );
}

/* =========================================================
   PAGE
   ========================================================= */
function Page() {
  return (
    <React.Fragment>
      {/* NOTIFY */}
      <div className="notify" role="status">
        <span className="pulse" />
        <span className="label">
          <strong>Calendar cleared.</strong> Couch booked. Football is coming home — across three of them.
        </span>
      </div>

      {/* TICKER */}
      <MatchTicker />

      {/* NAV */}
      <header className="nav">
        <div className="nav-inner">
          <a className="logo" href="#top">
            <span className="crest" aria-hidden="true">
              <img src="assets/icon.png" alt="" />
            </span>
            <span className="mark">World Cup <span className="rx">House</span></span>
          </a>
          <nav className="primary" aria-label="Primary">
            <a href="#vibe">The Vibe</a>
            <a href="#fixtures">Schedule</a>
            <a href="#protocol">Game Plan</a>
            <a href="#supplies">The Kit</a>
            <a href="#faq">FAQ</a>
            <a href={FIFA_TICKETS} target="_blank" rel="noopener noreferrer">Tickets ↗</a>
          </nav>
        </div>
      </header>

      <a id="top" />

      {/* HERO */}
      <section className="hero">
        <Splatter color="#c8242d" className="splat-red" />
        <Splatter color="#1d4ed8" className="splat-blue" />
        <Splatter color="#6d28d9" className="splat-purple" />
        <Splatter color="#156a3a" className="splat-green" />
        <Splatter color="#d97706" className="splat-orange" />
        <BallField />
        <div className="wrap">
          <div className="hero-grid">
            <div>
              <div className="eyebrow">39 days of football · 16 cities · 48 nations</div>
              <h1 className="hero-title">Make your house a <em>World Cup House</em>.</h1>
              <p className="hero-lede">
                The biggest tournament ever played is rolling into the United States, Canada and
                Mexico on June 11. One hundred and four matches across thirty-nine days. The only
                acceptable response is to clear the calendar, push the couch up to the screen,
                and watch football all day. We made you a checklist. You're welcome.
              </p>
              <div className="hero-countdown">
                <span className="hero-countdown-lbl">Opening match · Estadio Azteca · Jun 11, 2026</span>
                <Countdown target={KICKOFF} big />
              </div>
              <div className="hero-cta">
                <a className="btn primary" href="#fixtures">See the schedule <span className="arrow">→</span></a>
                <a className="btn ghost" href={FIFA_TICKETS} target="_blank" rel="noopener noreferrer">Get tickets ↗</a>
              </div>
            </div>

            <div className="hero-art">
              <div className="platter" />
              <Mascot />
              <svg className="seal-stamp" viewBox="0 0 200 200" aria-hidden="true">
                <g fill="none" stroke="#156a3a" strokeWidth="4" opacity="0.9">
                  <circle cx="100" cy="100" r="92"/>
                  <circle cx="100" cy="100" r="78"/>
                </g>
                <text x="100" y="84" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="700" fontSize="13" letterSpacing="2" fill="#156a3a">FOOTBALL</text>
                <text x="100" y="110" textAnchor="middle" fontFamily="Newsreader, serif" fontWeight="700" fontSize="22" fill="#156a3a">ALL DAY</text>
                <text x="100" y="132" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="700" fontSize="11" letterSpacing="2" fill="#156a3a">SUMMER · 2026</text>
              </svg>
            </div>
          </div>

          <HeroLiveStats />
        </div>
      </section>

      {/* STATEMENT */}
      <section className="statement" id="vibe">
        <div className="wrap">
          <div className="statement-inner">
            <div className="eyebrow">The Vibe</div>
            <h2 className="big">For 39 days the world stops, and we all just <em>watch football</em>.</h2>
            <p className="lede">
              Sixteen cities. Three host nations. Forty-eight teams arriving with their entire
              country on their backs. One hundred and four matches packed between June 11 and
              July 19. This is the biggest <a href={FIFA_HOME} target="_blank" rel="noopener noreferrer">World Cup</a> ever staged
              and it is happening on your continent. The living room becomes a stadium. The
              couch becomes an away-end. Lunch becomes whatever can be eaten with one hand. The
              correct posture is <strong>feet up, screen on, phone face-down</strong>. Pour
              something cold. Pick a team. Stay for the penalties.
            </p>
          </div>
        </div>
      </section>

      {/* DASHBOARD */}
      <LiveDashboard />

      {/* COMPARE */}
      <section className="compare">
        <div className="wrap">
          <div className="compare-card">
            <div className="lbl-row">
              <div>
                <h3>How many matches you'll actually catch — with vs without the game plan</h3>
                <div className="subhead">Couch hours · group stage to final · single household · own count</div>
              </div>
              <div className="eyebrow" style={{ margin: 0 }}>Don't fumble it</div>
            </div>
            <BarChart />
          </div>
        </div>
      </section>

      {/* PROTOCOL */}
      <section className="protocol" id="protocol">
        <div className="wrap">
          <div className="section-head">
            <div className="left">
              <div className="eyebrow">The Game Plan</div>
              <h2>Four moves to turn the house into a <em>stadium</em>.</h2>
            </div>
            <div className="right">
              <p>Start now, finish before the opening whistle on June 11. Then sit down. The most important thing you'll do for the next thirty-nine days is not stand up.</p>
            </div>
          </div>
          <div className="protocol-grid">
            <article className="proto-card">
              <div className="step-no">Step 01</div>
              <div className="icon-disc green">I</div>
              <h4>Pick a team.</h4>
              <p>Doesn't have to be your country. Pick the kit you like. Pick the manager who screams. Pick the underdog and feel things. <a href={FIFA_TEAMS} target="_blank" rel="noopener noreferrer">All 48 squads</a> are right there.</p>
            </article>
            <article className="proto-card">
              <div className="step-no">Step 02</div>
              <div className="icon-disc red">II</div>
              <h4>Sort the screen.</h4>
              <p>Bigger TV than you think you need. Dust off the sound bar. Test the stream once before kickoff so you're not yelling at the router in the 89th minute.</p>
            </article>
            <article className="proto-card">
              <div className="step-no">Step 03</div>
              <div className="icon-disc navy">III</div>
              <h4>Stock the fridge.</h4>
              <p>Snacks for thirty-nine days. Something cold for the wins. Something else cold for the draws. A backup snack for the penalties. <a href="#supplies">See the kit list →</a></p>
            </article>
            <article className="proto-card">
              <div className="step-no">Step 04</div>
              <div className="icon-disc purple">IV</div>
              <h4>Call your people.</h4>
              <p>Group chat opened. Watch-party slots claimed. Find at least one friend who supports your team and one who supports the rival. Both are essential.</p>
            </article>
          </div>
        </div>
      </section>

      {/* SUPPLIES */}
      <section className="supplies" id="supplies">
        <div className="wrap">
          <div className="section-head">
            <div className="left">
              <div className="eyebrow">The Kit</div>
              <h2>Six things to keep within arm's reach of the couch.</h2>
            </div>
            <div className="right">
              <p>Thirty-nine days, ninety-minute blocks, one continuous vibe. Double the quantities for any household with more than one supporter — and triple them for any household with two supporters of different teams.</p>
            </div>
          </div>
          <div className="supplies-grid">
            <article className="supply c-red">
              <div className="ration">Kit 01 · The Colours</div>
              <h4>Scarf, jersey, flag in the window</h4>
              <p>Wear the kit at home. Hang the flag where the neighbours can see it. A scarf, even in July, is not a costume — it is identification. Loyalty is a fabric.</p>
              <div className="qty"><span>Get</span><strong>1 set · per supporter</strong></div>
            </article>
            <article className="supply c-orange">
              <div className="ration">Kit 02 · Snacks &amp; drinks</div>
              <h4>Cold things, salty things, sharing things</h4>
              <p>Beer, soda, ice. Crisps, nuts, wings. Frozen pizzas for back-to-back kickoffs. Pre-cut vegetables to deceive yourself. A bottle for the wins, a bottle for the draws.</p>
              <div className="qty"><span>Get</span><strong>39 days · per head</strong></div>
            </article>
            <article className="supply c-blue">
              <div className="ration">Kit 03 · The Setup</div>
              <h4>Big screen, second screen, real speakers</h4>
              <p>Largest TV available. Tablet open on the simultaneous match. A speaker that does the anthems justice. Picture set to <em>vivid</em>. The pitch should look like a pitch.</p>
              <div className="qty"><span>Get</span><strong>1 main · 1 backup</strong></div>
            </article>
            <article className="supply c-purple">
              <div className="ration">Kit 04 · The Superstition</div>
              <h4>Lucky chair, lucky socks, lucky everything</h4>
              <p>Identify the seat from which you watched the most decisive goal. Sit there for the duration. Do not wash the socks. Superstition is data, and you are now a statistician.</p>
              <div className="qty"><span>Get</span><strong>1 chair · 1 pair</strong></div>
            </article>
            <article className="supply c-navy">
              <div className="ration">Kit 05 · The Wallchart</div>
              <h4>Printed schedule, pencil, fridge magnet</h4>
              <p>The full <a href={FIFA_SCHEDULE} target="_blank" rel="noopener noreferrer">match schedule</a>, on paper, tacked above the screen. Cross out results in ink. Annotate the disputed offsides in the margin for future generations.</p>
              <div className="qty"><span>Get</span><strong>1 sheet · 2 pencils</strong></div>
            </article>
            <article className="supply">
              <div className="ration">Kit 06 · The Crew</div>
              <h4>One friend, one rival, one whistle</h4>
              <p>One mate who supports your team. One who supports the team you most love to lose to. A whistle for goals scored, a horn for goals scored in stoppage time. Watching alone is permitted but not preferred.</p>
              <div className="qty"><span>Get</span><strong>1 horn · 1 crew</strong></div>
            </article>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="faq" id="faq">
        <div className="wrap" style={{ maxWidth: "920px" }}>
          <div className="section-head" style={{ gridTemplateColumns: "1fr" }}>
            <div className="left">
              <div className="eyebrow">Questions Friends Have Asked</div>
              <h2>The things people always want to know.</h2>
            </div>
          </div>
          <FaqAccordion />
        </div>
      </section>

      {/* CTA — schedule download */}
      <section className="cta-banner">
        <div className="wrap">
          <div className="cta-card">
            <div className="left">
              <div className="eyebrow" style={{ color: "var(--gold-light)" }}>The Final · Sunday · July 19, 2026</div>
              <h2>It all ends at <em>MetLife Stadium</em>.</h2>
              <p>One match. Ninety minutes. Maybe thirty more. Maybe penalties. Block out the entire Sunday. Tell work. Tell the in-laws. Get the snacks in by Saturday so you don't have to leave the house on the day of. There will be one game on this planet that afternoon and it'll be this one.</p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a className="btn primary" href={FIFA_TICKETS} target="_blank" rel="noopener noreferrer" style={{ background: "#fff", color: "var(--ink)" }}>
                  Tickets to the final ↗
                </a>
                <a className="btn ghost" href="#fixtures" style={{ borderColor: "rgba(255,255,255,0.4)", color: "#fff" }}>
                  See the full schedule <span className="arrow">→</span>
                </a>
              </div>
            </div>
            <div className="right">
              <div className="stamp-mini">Block the Sunday</div>
            </div>
          </div>
        </div>
      </section>

      <FooterTicker />

      <footer className="site">
        <div className="row">
          <div className="brand-block">
            <a className="logo" href="#top" style={{ marginBottom: 12, display: "inline-flex" }}>
              <span className="crest" aria-hidden="true">
                <img src="assets/icon.png" alt="" />
              </span>
              <span className="mark">World Cup <span className="rx">House</span></span>
            </a>
            <p>A love letter to the 2026 FIFA World Cup. Read it, share it, then go set up the couch. The first whistle is sooner than you think.</p>
          </div>
          <div>
            <h5>This Site</h5>
            <ul>
              <li><a href="#vibe">The vibe</a></li>
              <li><a href="#protocol">The game plan</a></li>
              <li><a href="#supplies">The kit</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h5>The Tournament</h5>
            <ul>
              <li><a href={FIFA_HOME} target="_blank" rel="noopener noreferrer">Official site ↗</a></li>
              <li><a href={FIFA_SCHEDULE} target="_blank" rel="noopener noreferrer">Match schedule ↗</a></li>
              <li><a href={FIFA_TICKETS} target="_blank" rel="noopener noreferrer">Tickets ↗</a></li>
              <li><a href={FIFA_NEWS} target="_blank" rel="noopener noreferrer">News ↗</a></li>
            </ul>
          </div>
          <div>
            <h5>Host Cities</h5>
            <ul>
              <li><a href={FIFA_VENUES} target="_blank" rel="noopener noreferrer">All 16 venues ↗</a></li>
              <li><a href={FIFA_TEAMS} target="_blank" rel="noopener noreferrer">48 qualified teams ↗</a></li>
              <li><a href={FIFA_HOME} target="_blank" rel="noopener noreferrer">USA · 11 cities ↗</a></li>
              <li><a href={FIFA_HOME} target="_blank" rel="noopener noreferrer">Canada · 2 · Mexico · 3 ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="disclaimer">
          <span>World Cup House is a fan project, not affiliated with FIFA or any organising body. All countdowns, fixtures and external links point to public sources. This page is for the love of the game and nothing else.</span>
          <span>© MMXXVI · World Cup House</span>
        </div>
      </footer>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Page />);