/* CrickAI marketing — the three product pillars */

function Feat({ icon, gold, title, desc }) {
  return (
    <div className={"feat " + (gold ? "feat--gold" : "")}>
      <div className="feat__ic"><Icon name={icon} size={20} /></div>
      <div>
        <p className="feat__t">{title}</p>
        <p className="feat__d">{desc}</p>
      </div>
    </div>
  );
}

function Pillar({ id, num, gold, eyebrow, title, lead, feats, cta, ctaHref, media, reversed }) {
  return (
    <section className="section" id={id}>
      <div className={"wrap pillar " + (reversed ? "pillar--rev" : "")}>
        <div className="pillar__copy">
          <span className="pillar__num">{num}</span>
          <Eyebrow gold={gold}>{eyebrow}</Eyebrow>
          <h3>{title}</h3>
          <p className="pillar__lead">{lead}</p>
          <div className="feat-list">
            {feats.map((f) => <Feat key={f.title} {...f} gold={gold} />)}
          </div>
          {cta ? <a className="btn-link" href={ctaHref || "#"} target={ctaHref ? "_blank" : undefined} rel={ctaHref ? "noopener noreferrer" : undefined}>{cta} <Icon name="arrow" size={15} /></a> : null}
        </div>
        <div className="pillar__media media-stack">{media}</div>
      </div>
    </section>
  );
}

/* --- Pillar 1: Pro Broadcasting --- */
function PillarBroadcasting() {
  const media = (
    <div style={{ position: 'relative' }}>
      <a href="https://www.youtube.com/watch?v=CyEkMQRcjHU" target="_blank" rel="noopener noreferrer" className="frame" style={{ display: 'block' }}>
        <img src={(window.CRICK_ASSETS && window.CRICK_ASSETS.liveOverlay) || "../assets/sample-live-overlay.png"} alt="Live YouTube broadcast with auto overlay" />
      </a>
      <div className="float-badge" style={{ top: -14, right: -10 }}>
        <Chip variant="green" dot>Streaming to YouTube</Chip>
      </div>
    </div>
  );
  return (
    <Pillar id="streaming" num="01"
      eyebrow="Pro Streaming, Simplified"
      title="Go live in high quality. Setup in two minutes."
      lead="Studio-grade streams without the studio. CrickAI films, scores, and broadcasts the match for you — straight to YouTube, while you watch the cricket."
      feats={[
        { icon: "video", title: "Broadcast-quality live stream", desc: "Crisp 60fps coverage your audience can actually enjoy — streamed live straight to YouTube." },
        { icon: "zap", title: "Live in two minutes", desc: "Point your phone, confirm the teams, go live. No capture cards, no production crew, no setup headache." },
        { icon: "sync", title: "Integration with scoring app", desc: "The scorebug syncs automatically from your scoring app — no one stuck typing scores all day." },
      ]}
      cta="Watch a live match on YouTube" ctaHref="https://www.youtube.com/watch?v=CyEkMQRcjHU" media={media} />
  );
}

/* --- Pillar 2: Data-Driven Coaching --- */
function PillarCoaching() {
  const rows = [
    { n: "Adithya VidhyaShankar", out: "not out", r: 48, b: 30, sr: 160, top: true },
    { n: "Krishang Patel", out: "c & b Vilas", r: 23, b: 19, sr: 121 },
    { n: "R. Menon", out: "lbw Sharma", r: 12, b: 14, sr: 86 },
  ];
  const media = (
    <div className="coach-board">
      <div className="coach-board__preview">
        <img src={(window.CRICK_ASSETS && window.CRICK_ASSETS.liveOverlay) || "../assets/sample-live-overlay.png"} alt="Match preview" />
        <span className="coach-board__chip"><i></i> POST-MATCH</span>
        <span className="coach-board__play">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M6 3l16 9-16 9z"/></svg>
        </span>
      </div>
      <div className="coach-board__head">
        <span className="coach-board__title">MK Daredevils — 1st innings</span>
        <span className="coach-board__score">142<span>/4</span> <em>(20 ov)</em></span>
      </div>
      <div className="scoreboard">
        <div className="scoreboard__hr">
          <span>Batter</span><span>R</span><span>B</span><span>SR</span>
        </div>
        {rows.map((p) => (
          <div className={"scoreboard__r" + (p.top ? " is-top" : "")} key={p.n}>
            <span className="sb-name">{p.n}<em>{p.out}</em></span>
            <span className="sb-r">{p.r}</span>
            <span className="sb-b">{p.b}</span>
            <span className="sb-sr">{p.sr}</span>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
        <Chip variant="gold">iPad overlay cues</Chip>
        <Chip>Talent archive</Chip>
      </div>
    </div>
  );
  return (
    <Pillar id="coaching" gold reversed num="02"
      eyebrow="Data-Driven Coaching Tools"
      title="See what happened, minutes after it happens."
      lead="Every ball turns into clear, player-by-player insight — ready for the coach courtside and the academy back home before the players have cooled down."
      feats={[
        { icon: "trend", title: "Analytics in minutes, not days", desc: "Per-player batting & bowling breakdowns land the moment the innings ends — no manual tagging." },
        { icon: "tablet", title: "Coach live, even from afar", desc: "An iPad app with video & audio overlay cues lets coaches guide players in real time, from anywhere." },
        { icon: "archive", title: "Every innings, searchable", desc: "A growing video library of every player and match — so academies can track progress and spot talent." },
      ]}
      cta="Explore coaching tools" media={media} />
  );
}

/* --- Pillar 3: Engagement & Shorts (two halves) --- */
function HighlightVideo({ id }) {
  const [play, setPlay] = React.useState(false);
  if (play) {
    return (
      <iframe className="half__video"
        src={"https://www.youtube-nocookie.com/embed/" + id + "?autoplay=1&playsinline=1&rel=0&modestbranding=1"}
        title="CrickAI match highlights" allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowFullScreen></iframe>
    );
  }
  return (
    <button className="half__poster" onClick={() => setPlay(true)} aria-label="Play match highlights">
      <img src={"https://i.ytimg.com/vi/" + id + "/hqdefault.jpg"} alt="CrickAI match highlights" />
      <span className="half__play"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M6 3l16 9-16 9z"/></svg></span>
    </button>
  );
}

function PillarShorts() {
  return (
    <section className="section" id="shorts">
      <div className="wrap">
        <div className="section__head">
          <span className="pillar__num">03</span>
          <Eyebrow>Engagement &amp; Shorts</Eyebrow>
          <h2>Turn every match into content — automatically.</h2>
          <p>Two ways your match keeps living after the last ball: full highlight reels and
            social-ready player shorts, both generated for you with zero editing.</p>
        </div>

        <div className="split">
          {/* Half 1 — Highlights */}
          <div className="half">
            <div className="half__top">
              <div className="half__ic"><Icon name="clock" size={20} /></div>
              <div>
                <h3 className="half__title">Highlights</h3>
                <Chip variant="green">Ready in minutes</Chip>
              </div>
            </div>
            <div className="half__media half__media--wide">
              <HighlightVideo id="XyUi_Ui3PMk" />
            </div>
            <p className="half__desc">Full match wrap-ups ready in minutes — with engaging commentary and
              real insights into how the match unfolded. No editor, no waiting.</p>
            <a className="btn-link" href="https://www.youtube.com/watch?v=XyUi_Ui3PMk" target="_blank" rel="noopener noreferrer">
              Watch a highlights reel <Icon name="arrow" size={15} />
            </a>
          </div>

          {/* Half 2 — Video Shorts */}
          <div className="half">
            <div className="half__top">
              <div className="half__ic half__ic--gold"><Icon name="clapper" size={20} /></div>
              <div>
                <h3 className="half__title">Video Shorts</h3>
                <Chip variant="gold">Ready in seconds</Chip>
              </div>
            </div>
            <div className="half__media half__media--tall">
              <a className="phone phone--sm phone--link" href="https://youtube.com/shorts/qUnXNri46Yk" target="_blank" rel="noopener noreferrer" aria-label="Watch a CrickAI player short on YouTube">
                <div className="phone__notch"></div>
                <img src={(window.CRICK_ASSETS && window.CRICK_ASSETS.shorts) || "../assets/sample-player-shorts.png"} alt="Auto-generated vertical player short" />
                <span className="half__play phone__play"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 3l16 9-16 9z"/></svg></span>
              </a>
            </div>
            <p className="half__desc">Social-media-ready shorts that showcase a player's performance — generated
              in seconds, during or right after the match. Formatted for Reels &amp; TikTok, ready to post.</p>
            <a className="btn-link" href="https://youtube.com/shorts/qUnXNri46Yk" target="_blank" rel="noopener noreferrer">
              Watch a player short <Icon name="arrow" size={15} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pillar, PillarBroadcasting, PillarCoaching, PillarShorts });