// Cinematic hero + nav — video bg, liquid-glass chrome, animated headline.
// IIFE-wrapped to avoid top-level identifier collisions with Sections.jsx.
(function () {
  function FadeIn({ children, delay = 0, duration = 1000, className = "", style = {} }) {
    const [visible, setVisible] = React.useState(false);
    React.useEffect(() => {
      const t = setTimeout(() => setVisible(true), delay);
      return () => clearTimeout(t);
    }, [delay]);
    return (
      <div
        className={`transition-opacity ${className}`}
        style={{
          opacity: visible ? 1 : 0,
          transitionDuration: `${duration}ms`,
          ...style,
        }}
      >
        {children}
      </div>
    );
  }

  function AnimatedHeading({ segments, className = "", style = {}, initialDelay = 200, charDelay = 30 }) {
    const [start, setStart] = React.useState(false);
    React.useEffect(() => {
      const t = setTimeout(() => setStart(true), initialDelay);
      return () => clearTimeout(t);
    }, [initialDelay]);

    let charCounter = 0;
    return (
      <h1 className={className} style={style}>
        {segments.map((seg, si) => (
          <span
            key={si}
            style={{
              display: seg.block ? "block" : "inline",
              color: seg.italic ? "#FF6F00" : undefined,
              fontStyle: seg.italic ? "italic" : undefined,
              fontWeight: seg.italic ? 500 : undefined,
            }}
          >
            {seg.text.split(/(\s+)/).map((word, wi) => {
              if (/^\s+$/.test(word)) {
                const d = charCounter++ * charDelay;
                return (
                  <span
                    key={wi}
                    style={{
                      opacity: start ? 1 : 0,
                      transition: "opacity 500ms ease",
                      transitionDelay: `${d}ms`,
                    }}
                  >{"\u00A0"}</span>
                );
              }
              return (
                <span key={wi} style={{ display: "inline-block", whiteSpace: "nowrap" }}>
                  {word.split("").map((ch, ci) => {
                    const d = charCounter++ * charDelay;
                    return (
                      <span
                        key={ci}
                        style={{
                          display: "inline-block",
                          opacity: start ? 1 : 0,
                          transform: start ? "translateX(0)" : "translateX(-18px)",
                          transition: "opacity 500ms ease, transform 500ms ease",
                          transitionDelay: `${d}ms`,
                        }}
                      >
                        {ch}
                      </span>
                    );
                  })}
                </span>
              );
            })}
          </span>
        ))}
      </h1>
    );
  }

  function useCountdown(targetIso) {
    const target = new Date(targetIso).getTime();
    const [now, setNow] = React.useState(() => Date.now());
    React.useEffect(() => {
      const id = setInterval(() => setNow(Date.now()), 1000);
      return () => clearInterval(id);
    }, []);
    const diff = Math.max(0, target - now);
    return {
      days: Math.floor(diff / 86400000),
      hours: Math.floor((diff / 3600000) % 24),
      minutes: Math.floor((diff / 60000) % 60),
      seconds: Math.floor((diff / 1000) % 60),
    };
  }

  function KickoffCard() {
    const { days, hours, minutes, seconds } = useCountdown("2026-06-11T20:00:00-06:00");
    const pad = (n) => String(n).padStart(2, "0");
    const tiles = [
      { label: "Days", value: pad(days) },
      { label: "Hours", value: pad(hours) },
      { label: "Minutes", value: pad(minutes) },
      { label: "Seconds", value: pad(seconds) },
    ];
    return (
      <div className="cin-glass" style={{ borderRadius: 20, padding: "20px 22px", width: "100%", maxWidth: 560 }}>
        <div className="cin-kickoff__head">
          <div className="cin-kickoff__eyebrow">Kickoff · Opening Match</div>
          <div className="cin-kickoff__live">
            <span className="cin-kickoff__live-dot" />
            <span className="cin-kickoff__live-label">Live</span>
          </div>
        </div>
        <div className="cin-kickoff__tiles">
          {tiles.map((t) => (
            <div key={t.label} className="cin-kickoff__tile">
              <div className="cin-kickoff__num">{t.value}</div>
              <div className="cin-kickoff__lbl">{t.label}</div>
            </div>
          ))}
        </div>
        <div className="cin-kickoff__foot">
          <div>
            Thu, <strong>June 11, 2026</strong> · Estadio Azteca
          </div>
          <div className="cin-kickoff__meta">104 matches · 16 host cities</div>
        </div>
      </div>
    );
  }

  function CinNav() {
    const [open, setOpen] = React.useState(false);
    React.useEffect(() => {
      document.body.style.overflow = open ? "hidden" : "";
      return () => { document.body.style.overflow = ""; };
    }, [open]);
    const close = () => setOpen(false);
    return (
      <div className="cin-navwrap">
        <nav className="cin-glass cin-nav">
          <a href="#" className="cin-nav__brand" aria-label="illuno">
            <img src="assets/logo-illuno-grey.svg" alt="illuno" className="cin-nav__logo" />
          </a>
          <div className="cin-nav__links">
            <a href="#cities" className="cin-nav__link">Host Cities</a>
            <a href="#how" className="cin-nav__link">How it Works</a>
            <a href="#compare" className="cin-nav__link">Comparison</a>
            <a href="#faq" className="cin-nav__link">FAQ</a>
          </div>
          <div className="cin-nav__ctas">
            <a href="https://calendly.com/briggs-illuno/illuno-platform?month=2026-04" className="cin-btn cin-btn--ghost">Book a Demo</a>
            <a href="https://app.illuno.com/signup" className="cin-btn cin-btn--primary">Post a Shift</a>
          </div>
          <button
            className="cin-nav__toggle"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}>
            <span className={`cin-nav__toggle-icon ${open ? "is-open" : ""}`}>
              <span /><span /><span />
            </span>
          </button>
        </nav>
        {open && (
          <div className="cin-nav__sheet" role="dialog" aria-modal="true">
            <a href="#cities" className="cin-nav__sheet-link" onClick={close}>Host Cities</a>
            <a href="#how" className="cin-nav__sheet-link" onClick={close}>How it Works</a>
            <a href="#compare" className="cin-nav__sheet-link" onClick={close}>Comparison</a>
            <a href="#faq" className="cin-nav__sheet-link" onClick={close}>FAQ</a>
            <div className="cin-nav__sheet-ctas">
              <a href="https://calendly.com/briggs-illuno/illuno-platform?month=2026-04" className="cin-btn cin-btn--ghost" onClick={close}>Book a Demo</a>
              <a href="https://app.illuno.com/signup" className="cin-btn cin-btn--primary" onClick={close}>Post a Shift</a>
            </div>
          </div>
        )}
      </div>
    );
  }

  window.CinematicHero = function CinematicHero() {
    return (
      <section className="cin-hero">
        <video
          className="cin-hero__video"
          src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4"
          autoPlay
          loop
          muted
          playsInline
        />
        <div className="cin-hero__overlay" />

        <div className="cin-hero__inner">
          <CinNav />

          <div className="cin-hero__body">
            <div className="cin-hero__grid">
              <div className="cin-hero__left">
                <AnimatedHeading
                  segments={[
                    { text: "The World Cup is coming. " },
                    { text: "Your regular officers won\u2019t be.", italic: true },
                  ]}
                  className="cin-hero__headline"
                />

                <FadeIn delay={800} duration={1000}>
                  <p className="cin-hero__lead">
                    When the whole world shows up in your city, be the business that&rsquo;s ready.
                    Get access to local vetted and verified off-duty officers in minutes.
                  </p>
                </FadeIn>

                <FadeIn delay={1200} duration={1000}>
                  <div className="cin-hero__cta-row">
                    <a href="https://app.illuno.com/signup" className="cin-btn cin-btn--primary cin-btn--lg">
                      Post your first shift
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                        <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </a>
                    <a href="#how" className="cin-btn cin-btn--ghost cin-btn--lg">See how it works</a>
                  </div>
                </FadeIn>

              </div>

              <div className="cin-hero__right">
                <FadeIn delay={1400} duration={1000}>
                  <KickoffCard />
                </FadeIn>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  };
})();