/* CrickAI marketing — hero */
function LiteYT({ id, title }) {
  const [play, setPlay] = React.useState(false);
  if (play) {
    return (
      <iframe className="device__video"
        src={"https://www.youtube-nocookie.com/embed/" + id + "?autoplay=1&playsinline=1&rel=0&modestbranding=1"}
        title={title} allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowFullScreen></iframe>
    );
  }
  return (
    <button className="device__poster" onClick={() => setPlay(true)} aria-label="Play live match">
      <img src={(window.CRICK_ASSETS && window.CRICK_ASSETS.liveOverlay) || "../assets/sample-live-overlay.png"} alt="CrickAI live high-quality broadcast" />
      <span className="device__play">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M6 3l16 9-16 9z"/></svg>
      </span>
    </button>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero__grid"></div>
      <div className="hero__glow1"></div>
      <div className="hero__glow2"></div>
      <div className="wrap hero__inner">
        <div className="hero__copy">
          <Eyebrow>Edge-AI Cricket Intelligence</Eyebrow>
          <h1>
            Broadcast Like a Pro.<br />
            Analyze Like an <span className="gold">Elite Academy.</span><br />
            <span className="green">Instantly.</span>
          </h1>
          <p className="hero__sub">
            Pro-quality live streams and <strong style={{color:'var(--fg)'}}>real-time match analytics in minutes</strong> —
            every ball captured, analyzed, and ready the moment play ends. No crew, no editing, no waiting.
          </p>
          <EmailCTA
            label="Get Early Access"
            subject="Early access — CrickAI beta"
            body={"Hi CrickAI team,\n\nI'd like early access to the beta.\n\nName:\nRole (player / coach / academy / league / organizer):\nLocation:\nWhat I'm hoping to use CrickAI for:\n\nThanks!"}
            fine="Drop us a line and tell us how you'd use CrickAI — we're onboarding the early beta by hand."
          />
          <div className="hero__chips">
            <Chip variant="green">Real-time, every ball</Chip>
            <Chip variant="gold">Analytics in minutes</Chip>
            <Chip>Live in 2 minutes</Chip>
          </div>
        </div>

        <div className="media-stack">
          <div className="device">
            <div className="device__body">
              <span className="device__island"></span>
              <div className="device__screen">
                <LiteYT id="CyEkMQRcjHU" title="CrickAI live match on YouTube (@crickai)" />
                <div className="scr-rec"><i></i> REC · HIGH QUALITY</div>
                <div className="scr-edge"><span className="dot"></span> EDGE AI · ON-DEVICE</div>
              </div>
            </div>
          </div>
          <p className="device-cap">One phone. Capture, AI, broadcast &amp; shorts — all on-device.</p>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });