// Main sections of the FIFA landing page
const { useState, useEffect, useMemo, useRef } = React;

const HEADLINE_VARIANTS = {
  bold: {
    eyebrow: "FIFA World Cup 2026 · Host-city coverage",
    title: <>The World Cup is coming. <em style={{ color: "rgb(255, 111, 0)" }}>Your regular officers won&rsquo;t be.</em></>,
    lead: "Stadium security will absorb every off-duty officer your city has. We staff the businesses they leave behind — hotels, bars, venues, retail. Vetted, licensed, one invoice."
  },
  outcome: {
    eyebrow: "FIFA World Cup 2026 · Now booking",
    title: <>Security staffing for <em>FIFA 2026</em> that actually shows up.</>,
    lead: "Every FIFA host city will be short officers for 39 days straight. Post a shift in 90 seconds — claims land within the hour, every time."
  },
  direct: {
    eyebrow: "June 11 – July 19, 2026",
    title: <>Staff the 39 days that will <em>break your coverage.</em></>,
    lead: "Hotels, restaurants, venues, retail — during FIFA World Cup 2026, every local officer is at the stadium. We bring you the rest."
  },
  calm: {
    eyebrow: "FIFA 2026 · Private-sector staffing",
    title: <>When the tournament empties your coverage, <em>we fill it.</em></>,
    lead: "Vetted, licensed off-duty officers on demand. 95%+ fill rate. One invoice. Already staffing private-sector shifts in all 11 US host cities."
  }
};

window.Nav = function Nav({ visible, ctaShape }) {
  if (!visible) return null;
  return (
    <nav className="nav">
      <div className="container nav__row">
        <a href="#" className="nav__brand">
          <span className="nav__brand-bar" />illuno
        </a>
        <div className="nav__links">
          <a href="#cities" className="nav__link">Host cities</a>
          <a href="#how" className="nav__link">How it works</a>
          <a href="#compare" className="nav__link">vs. agencies</a>
          <a href="#faq" className="nav__link">FAQ</a>
        </div>
        <div className="nav__cta">
          <a href="#demo" className="nav__link" style={{ borderBottom: 0 }}>Book a demo</a>
          <a href="#post" className={`btn btn--primary ${ctaShape === "pill" ? "btn--pill" : ""}`} style={{ padding: "12px 20px", fontSize: 14 }}>
            Post a shift
          </a>
        </div>
      </div>
    </nav>);

};

window.Hero = function Hero({ tweaks }) {
  const cities = window.HOST_CITIES;
  const [activeChip, setActiveChip] = useState("dallas");
  const copy = HEADLINE_VARIANTS[tweaks.headline] || HEADLINE_VARIANTS.bold;
  const ctaClass = tweaks.ctaStyle === "navy" ? "btn--navy" : "btn--primary";
  const shape = tweaks.ctaShape === "pill" ? "btn--pill" : "";

  const heroClass = `hero ${tweaks.heroTheme === "navy" ? "hero--navy" : ""}`;

  return (
    <section className={heroClass}>
      <div className="hero__bg" aria-hidden="true" />
      <div className="container hero__grid">
        <div>
          {tweaks.showEyebrow &&
          <div className="hero__eyebrow">
              <span className="dot" />{copy.eyebrow}
            </div>
          }
          <h1 className="display-hero">{copy.title}</h1>
          <p className="hero__lead">{copy.lead}</p>

          <div className="hero__cta-row">
            <a href="#post" className={`btn btn--xl ${ctaClass} ${shape}`}>
              Post your first shift
              <span className="btn__arrow">→</span>
            </a>
            <a href="#how" className={`btn btn--xl btn--outline-light ${shape}`}>
              See how it works
            </a>
          </div>

          {tweaks.showProof &&
          <div className="hero__proof">
              <div className="hero__proof-item">
                <span className="hero__proof-num">95%+</span>
                <span className="hero__proof-label">Fill rate, match days included</span>
              </div>
              <div className="hero__proof-item">
                <span className="hero__proof-num">11</span>
                <span className="hero__proof-label">US host cities staffed</span>
              </div>
              <div className="hero__proof-item">
                <span className="hero__proof-num">{"<"}60 min</span>
                <span className="hero__proof-label">Average claim time</span>
              </div>
            </div>
          }

          {tweaks.showCityChips &&
          <>
              <div style={{ marginTop: 40, fontSize: 12, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: tweaks.heroTheme === "light" ? "var(--ink-400)" : "rgba(255,255,255,0.45)" }}>
                Staffing in
              </div>
              <div className="city-chip-row">
                {cities.slice(0, 8).map((c) =>
              <button
                key={c.id}
                className={`city-chip ${activeChip === c.id ? "city-chip--active" : ""}`}
                onClick={() => {
                  setActiveChip(c.id);
                  document.getElementById("cities")?.scrollIntoView({ behavior: "smooth" });
                  window.dispatchEvent(new CustomEvent("city-select", { detail: c.id }));
                }}>
                    {c.name.split(" / ")[0].split(" Bay")[0]}
                  </button>
              )}
                <button className="city-chip" onClick={() => document.getElementById("cities")?.scrollIntoView({ behavior: "smooth" })}>
                  + 3 more
                </button>
              </div>
            </>
          }
        </div>

        <div>
          {tweaks.heroVisual === "countdown" && <Countdown />}
          {tweaks.heroVisual === "phone" && <PhoneMock />}
          {tweaks.heroVisual === "both" &&
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
              <Countdown />
            </div>
          }
        </div>
      </div>
    </section>);

};

window.StatBand = function StatBand() {
  return (
    <section className="band">
      <div className="container band__grid">
        <div className="band__item">
          <div className="band__num"><em>39</em></div>
          <div className="band__lbl">Consecutive days of elevated demand, June 11 – July 19</div>
        </div>
        <div className="band__item">
          <div className="band__num">6.5M</div>
          <div className="band__lbl">Expected visitors to US host cities alone</div>
        </div>
        <div className="band__item">
          <div className="band__num">104</div>
          <div className="band__lbl">Matches across 16 North American host cities</div>
        </div>
        <div className="band__item">
          <div className="band__num"><em>40–50%</em></div>
          <div className="band__lbl">Fill rate from traditional agencies on peak nights</div>
        </div>
      </div>
    </section>);

};

window.CitiesSection = function CitiesSection() {
  const cities = window.HOST_CITIES;
  const [activeId, setActiveId] = useState("dallas");
  const active = cities.find((c) => c.id === activeId) || cities[0];

  useEffect(() => {
    const handler = (e) => setActiveId(e.detail);
    window.addEventListener("city-select", handler);
    return () => window.removeEventListener("city-select", handler);
  }, []);

  return (
    <section className="section" id="cities">
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__eyebrow"><span className="bar" />Host-city coverage</div>
          <h2 className="sec-head__title">Every US host city. Every match day. Every non-stadium shift.</h2>
          <p className="sec-head__lead">Pick your city. We show you the match schedule, visitor load, and where coverage capacity stands right now.</p>
        </div>

        <div className="cities">
          <div className="cities__grid">
            <div className="city-detail">
              <div>
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-400)", marginBottom: 10 }}>
                  {active.state} · {active.venue}
                </div>
                <h3 className="city-detail__name">{active.name}</h3>
                <p className="city-detail__sub">
                  {active.matches} matches bring {active.visitors} visitors to town — pulling every local officer into stadium security and leaving bars, restaurants, and hotels short-staffed at the worst possible moment.
                </p>
              </div>

              <div className="city-stat-grid">
                <div className="city-stat">
                  <div className="city-stat__lbl">Matches hosted</div>
                  <div className="city-stat__val">{active.matches}</div>
                  <div className="city-stat__note">Including group stage and knockout rounds</div>
                </div>
                <div className="city-stat">
                  <div className="city-stat__lbl">Stadium capacity</div>
                  <div className="city-stat__val">{active.stadiumCapacity.toLocaleString()}</div>
                  <div className="city-stat__note">{active.venue.split(",")[0]}</div>
                </div>
                <div className="city-stat">
                  <div className="city-stat__lbl">Visitor surge</div>
                  <div className="city-stat__val">{active.visitors}</div>
                  <div className="city-stat__note">Over tournament window</div>
                </div>
                <div className="city-stat">
                  <div className="city-stat__lbl">Capacity reserved</div>
                  <div className="city-stat__val city-stat__val--accent">{active.capacityReserved}%</div>
                  <div className="city-stat__note">
                    <div style={{ height: 4, background: "var(--paper-300)", borderRadius: 4, marginTop: 6, overflow: "hidden" }}>
                      <div style={{ height: "100%", width: `${active.capacityReserved}%`, background: "var(--orange-500)", transition: "width 400ms ease" }} />
                    </div>
                  </div>
                </div>
              </div>

              <div className="city-match-list">
                <div className="city-match-list__head">Upcoming matches · {active.name}</div>
                {active.matchList.map((m, i) =>
                <div className="city-match" key={i}>
                    <span className="city-match__date">{m.date}</span>
                    <span className="city-match__teams">{m.teams}</span>
                    <span className="city-match__type" data-k={m.type}>{m.type}</span>
                  </div>
                )}
              </div>
            </div>

            <div className="city-map">
              <div className="city-map__bg" />
              <UsMap cities={cities} activeId={activeId} onSelect={setActiveId} />
            </div>
          </div>

          <div style={{ marginTop: 32, display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center" }}>
            {cities.map((c) =>
            <button key={c.id}
            className={`city-chip ${activeId === c.id ? "city-chip--active" : ""}`}
            onClick={() => setActiveId(c.id)}
            style={{ background: activeId === c.id ? "var(--ink-950)" : "var(--paper-0)", color: activeId === c.id ? "var(--paper-50)" : "var(--ink-700)", borderColor: activeId === c.id ? "var(--ink-950)" : "var(--border-default)" }}>
                {c.name.split(" / ")[0].split(" Bay")[0]}
              </button>
            )}
          </div>
        </div>
      </div>
    </section>);

};

window.HowItWorks = function HowItWorks() {
  const [openStep, setOpenStep] = useState(0);
  const steps = [
  {
    title: "Post a shift",
    body: "Name the role, location, hours, and pay rate. Most posts take under 90 seconds. No sales call, no minimum booking.",
    time: "~90 SECONDS"
  },
  {
    title: "Watch claim shifts in real-time",
    body: "Local off-duty officers nearby see the post and claim it from their phone. You approve each claim and have 24/7 oversight.",
    time: "FIRST CLAIMS < 1 HOUR"
  },
  {
    title: "They show up, clocked in",
    body: "Every officer is vetted, insured, and tracked. One timecard. One invoice. One point of contact for the entire tournament window.",
    time: "95%+ FILL RATE"
  }];


  return (
    <section className="section" id="how" style={{ background: "var(--paper-100)" }}>
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__eyebrow"><span className="bar" />How it works</div>
          <h2 className="sec-head__title">Create an account. Post a shift. Get staffed today.</h2>
          <p className="sec-head__lead">No RFP, no agency contract, no 24-hour response window. Built for operators who need officers on the floor tonight.</p>
        </div>

        <div className="how">
          <div className="steps">
            {steps.map((s, i) =>
            <div key={i}
            className="step"
            onMouseEnter={() => setOpenStep(i)}
            style={openStep === i ? { background: "transparent" } : {}}>
                <div className="step__num">0{i + 1}</div>
                <div>
                  <div className="step__title">{s.title}</div>
                  <div className="step__body">{s.body}</div>
                  <div className="step__time">{s.time}</div>
                </div>
              </div>
            )}
          </div>
          <div>
            <PhoneMock />
          </div>
        </div>
      </div>
    </section>);

};

window.Compare = function Compare() {
  const rows = [
  ["Time to first confirmed officer", "< 1 hour", "24–72 hours"],
  ["Fill rate on match days", "95%+", "40–50%"],
  ["Minimum booking", "No Minimum", "5–10 shifts"],
  ["Officer vetting", "Every officer verified with ID.me", "Varies, often unknown"],
  ["Insurance & liability", "Carried by illuno", "On operator or unclear"],
  ["Per-shift pricing visibility", "Transparent, live", "Quote, invoice, surprise"],
  ["Invoices", "One, monthly", "Per-agency, per-event"]];


  return (
    <section className="section" id="compare">
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__eyebrow"><span className="bar" />illuno vs. traditional agencies</div>
          <h2 className="sec-head__title">The old playbook doesn&rsquo;t hold for 39 days.</h2>
          <p className="sec-head__lead">Agency rosters are already being drained by stadium contracts. Here&rsquo;s what changes when you staff off-duty shifts with us instead.</p>
        </div>

        <div className="compare">
          <div className="compare__row">
            <div className="compare__cell compare__cell--head compare__cell--lbl" style={{ background: "var(--paper-200)" }}>
              &nbsp;
            </div>
            <div className="compare__cell compare__cell--head compare__cell--illuno">
              <span>illuno</span>
              <span style={{ fontSize: 11, opacity: 0.7, letterSpacing: "0.12em" }}>MARKETPLACE</span>
            </div>
            <div className="compare__cell compare__cell--head compare__cell--other" style={{ background: "var(--paper-200)" }}>
              Traditional agency
            </div>
          </div>
          {rows.map((r, i) =>
          <div className="compare__row" key={i}>
              <div className="compare__cell compare__cell--lbl">{r[0]}</div>
              <div className="compare__cell compare__cell--illuno">
                <span className="compare__val-yes">{r[1]}</span>
              </div>
              <div className="compare__cell compare__cell--other">
                <span>{r[2]}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

window.FAQ = function FAQ() {
  const faqs = [
  {
    q: "Are these actually off-duty police officers?",
    a: "Yes. Every officer on illuno is a verified local officer working shifts. We partner with ID.me to ensure that every officer on the platform is exactly who they say they are."
  },
  {
    q: "Won't stadiums hire everyone away for the tournament?",
    a: "Stadium contracts pull a large share of local officers, but not all of them. Our marketplace spans 11 US host cities and adjacent markets, so we can route officers from surrounding jurisdictions to cover your private-sector shifts. We've been building this supply for years specifically for event-saturated windows."
  },
  {
    q: "How fast can we actually book for match days?",
    a: "You can post a shift right now and have claims within an hour. For match-day coverage we recommend posting 7–14 days out to lock in preferred officers at standard rates. Last-minute is possible but surges apply."
  },
  {
    q: "What does it cost?",
    a: "You set the hourly rate for each shift. We add a transparent marketplace fee on top — no surprise invoices, no minimum retainer. Pricing and officer pay are both visible on every post before you confirm."
  },
  {
    q: "What industries do you staff?",
    a: "Hotels, bars, restaurants, nightclubs, event venues, fan zones, concerts, corporate hospitality, retail, and property management. If there will be crowds and alcohol in a US host city this summer, we can help."
  },
  {
    q: "Do I need to sign a long-term contract?",
    a: "No. You can post one shift and be done, or run the whole 39-day window on illuno. Most operators start with a single post to see the fill rate, then scale up once they trust it."
  }];


  return (
    <section className="section" id="faq" style={{ background: "var(--paper-100)" }}>
      <div className="container">
        <div className="sec-head sec-head--center">
          <div className="sec-head__eyebrow" style={{ justifyContent: "center" }}><span className="bar" />Frequently asked</div>
          <h2 className="sec-head__title">The questions operators ask before their first shift.</h2>
        </div>

        <div className="faq-list">
          {faqs.map((f, i) =>
          <details className="faq" key={i}>
              <summary className="faq__q">
                <span>{f.q}</span>
                <span className="faq__icon">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M6 1V11M1 6H11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
                  </svg>
                </span>
              </summary>
              <div className="faq__a">{f.a}</div>
            </details>
          )}
        </div>
      </div>
    </section>);

};

window.FinalCTA = function FinalCTA({ tweaks }) {
  const ctaClass = tweaks.ctaStyle === "navy" ? "btn--primary" : "btn--navy";
  const shape = tweaks.ctaShape === "pill" ? "btn--pill" : "";
  return (
    <section className="section section--tight" id="post">
      <div className="container">
        <div className="final">
          <div className="sec-head__eyebrow" style={{ color: "var(--orange-400)", justifyContent: "center", display: "inline-flex" }}>
            <span className="bar" style={{ background: "var(--orange-400)" }} />Tournament opens June 11
          </div>
          <h2 className="final__title">Lock in coverage before the rest of your city does.</h2>
          <p className="final__lead">
            Create a free account in under 90 seconds. Post your first shift and get staffed today — or book a demo if you want to connect with our team first.
          </p>
          <div className="final__cta">
            <a href="https://app.illuno.com/signup" className={`btn btn--xl btn--primary ${shape}`}>
              Create account &amp; post a shift
              <span className="btn__arrow">→</span>
            </a>
            <a href="https://calendly.com/briggs-illuno/illuno-platform?month=2026-04" className={`btn btn--xl btn--outline-light ${shape}`}>
              Book a 20-min demo
            </a>
          </div>
          <div style={{ marginTop: 28, fontSize: 13, color: "rgba(255,255,255,0.5)" }}>
            No contract · No minimum booking · Licensed officers only
          </div>
        </div>
      </div>
    </section>);

};

window.Footer = function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brandcol">
            <a href="https://illuno.com" className="footer__brand" aria-label="illuno">
              <img src="assets/logo-illuno-grey.svg" alt="illuno" className="footer__brand-logo" />
            </a>
            <p className="footer__tag">
              On-demand off-duty officer staffing for the businesses protecting FIFA 2026 host cities.
            </p>
          </div>
          <div className="footer__ctas">
            <a href="https://illuno.com/businesses" className="footer__cta">
              <span className="footer__cta-label">For businesses</span>
              <span className="footer__cta-sub">Post shifts · approve officers · 24/7 oversight</span>
              <span className="footer__cta-arrow" aria-hidden="true">→</span>
            </a>
            <a href="https://illuno.com/officers" className="footer__cta">
              <span className="footer__cta-label">For officers</span>
              <span className="footer__cta-sub">Claim shifts near you · get paid fast</span>
              <span className="footer__cta-arrow" aria-hidden="true">→</span>
            </a>
          </div>
        </div>
        <div className="footer__bottom">
          <div>© 2026 illuno, Inc. · Dallas, TX</div>
          <div className="footer__legal">
            <a href="https://illuno.com/privacy">Privacy</a>
            <a href="https://illuno.com/terms">Terms</a>
            <a href="mailto:hello@illuno.com">Contact</a>
          </div>
        </div>
      </div>
    </footer>);

};