// ============ LIVE STREAM =================
const LiveStream = () => {
  const [playing, setPlaying] = React.useState(false);
  const [elapsed, setElapsed] = React.useState(42 * 60 + 13);
  React.useEffect(() => {
    if (!playing) return;
    const t = setInterval(() => setElapsed((s) => s + 1), 1000);
    return () => clearInterval(t);
  }, [playing]);
  const hh = String(Math.floor(elapsed / 3600)).padStart(2, '0');
  const mm = String(Math.floor((elapsed % 3600) / 60)).padStart(2, '0');
  const ss = String(elapsed % 60).padStart(2, '0');

  return (
    <section className="live" id="live">
      <div className="section-head">
        <div className="section-head-l">
          <span className="section-num">01</span>
          <span className="section-kicker">
            <span className="live-dot" /> LIVE NOW
          </span>
        </div>
        <h2 className="section-title">
          <a href="https://www.youtube.com/@therightsidemedia" target="_blank" rel="noopener" className="title-link">
            The Broadcast
          </a>
          <span className="title-arrow" />
        </h2>
        <div className="section-head-r">
          Mon–Fri · 10A–12P CT · Watch live on{' '}
          <a href="https://www.youtube.com/@therightsidemedia" target="_blank" rel="noopener">YouTube →</a>
        </div>
      </div>

      <div className="live-player">
        <a className="live-video" href="https://www.youtube.com/@therightsidemedia" target="_blank" rel="noopener">
          <div className="live-waveform">
            {Array.from({ length: 60 }).map((_, i) => (
              <span
                key={i}
                style={{
                  height: `${20 + Math.abs(Math.sin(i * 0.6 + elapsed * (playing ? 0.1 : 0))) * (playing ? 80 : 20) + (playing ? Math.random() * 20 : 0)}%`,
                }}
              />
            ))}
          </div>
          <div className="live-overlay">
            <div className="live-overlay-top">
              <span className="live-badge">
                <span className="live-dot" /> LIVE
              </span>
              <span className="live-viewers">2,481 WATCHING</span>
            </div>
            <button className="live-playbtn" onClick={(e) => { e.preventDefault(); setPlaying((p) => !p); }}>
              {playing ? <Icon.Pause size={28} /> : <Icon.Play size={28} />}
            </button>
            <div className="live-overlay-bottom">
              <span className="live-timer">{hh}:{mm}:{ss}</span>
              <span className="live-title">WATCH LIVE ON YOUTUBE</span>
              <span className="live-hosts">w/ ALLISON, AMIE BETH &amp; JP</span>
            </div>
          </div>
        </a>

        <aside className="live-side">
          <div className="live-sidehead">WATCHING ELSEWHERE?</div>
          <a href="https://www.youtube.com/@therightsidemedia" target="_blank" rel="noopener" className="live-chan"><Icon.YouTube /> <span>YouTube</span><span className="live-chan-h">@therightsidemedia</span></a>
          <a href="https://rumble.com/user/RightsideRadio" target="_blank" rel="noopener" className="live-chan"><Icon.Rumble /> <span>Rumble</span><span className="live-chan-h">@RightsideRadio</span></a>
          <a href="https://www.facebook.com/Rightside.Media.AL/" target="_blank" rel="noopener" className="live-chan"><Icon.Facebook /> <span>Facebook</span><span className="live-chan-h">Rightside.Media.AL</span></a>
          <a href="https://x.com/Rightside_Media" target="_blank" rel="noopener" className="live-chan"><Icon.X /> <span>X</span><span className="live-chan-h">@Rightside_Media</span></a>

          <div className="live-callin">
            <div className="callin-lbl">TEXT THE SHOW</div>
            <div className="callin-num">833.687.4448</div>
            <div className="callin-hint">We take texts all two hours. Be nice. Or don't.</div>
          </div>
        </aside>
      </div>
    </section>
  );
};

// ============ HOSTS =================
const HOSTS = [
  {
    name: 'Allison Sinclair',
    first: 'ALLISON',
    role: 'HOST · OWNER',
    photo: 'assets/allison.jpeg',
    bio: 'Host and owner of Rightside Radio. Never one to shy away from tough conversations, Allison delivers witty, opinion-driven analysis of politics, culture, and current events — direct, personable, and energetic. She\'s also the founder of LOCAL Alabama, a grassroots organization partnering with school boards, city councils, and community leaders to restore freedom, liberty, and constitutional values at the local level. Lives in Birmingham with her husband and four children.',
    quote: 'God has truly opened this door, and we are stepping right on in.',
  },
  {
    name: 'Amie Beth Shaver',
    first: 'AMIE BETH',
    role: 'HOST · CO-OWNER',
    photo: 'assets/amiebeth.jpeg',
    bio: 'Co-owner of Rightside Media. Conservative talk show host, political commentator, and opinion writer who refuses to whisper in a culture that rewards silence. A former Miss Alabama, Amie Beth brings poise, precision, and unapologetic conviction to terrestrial radio and digital media. Married mother of four adult children, and a former runoff candidate for State House — she understands politics not as theory, but as combat. Known for cutting through narrative fog with clarity, wit, and moral confidence.',
    quote: 'We refuse to whisper in a culture that rewards silence.',
  },
  {
    name: 'Justin "JP" Plott',
    first: 'JP',
    role: 'CO-HOST · PRODUCER · CO-OWNER',
    photo: 'assets/jp.jpeg',
    bio: 'Producer, co-host of Rightside Radio, and co-owner of Rightside Media. After two years in the political media arena, JP has established himself as a top-notch multi-media producer and a voice of Gen-Z conservatism. He\'s also a syndicated columnist whose work runs in Yellowhammer News and Athens Now Alabama, writing from a conservative Gen-Z perspective.',
    quote: 'A voice of Gen-Z conservatism — somebody\'s gotta speak up.',
  },
];

const Hosts = () => (
  <section className="hosts" id="hosts">
    <div className="section-head">
      <div className="section-head-l">
        <span className="section-num">02</span>
        <span className="section-kicker">THE VOICES</span>
      </div>
      <h2 className="section-title">Three mics, <em>one mission.</em> <span className="title-arrow" /></h2>
      <div className="section-head-r">Speaking truth to power — with a bit of mayhem.</div>
    </div>

    <div className="hosts-grid">
      {HOSTS.map((h) => (
        <article className="hostblock" key={h.name}>
          <div className="hostblock-photo">
            <img src={h.photo} alt={h.name} />
          </div>
          <div className="hostblock-body">
            <div className="hostblock-role">{h.role}</div>
            <h3 className="hostblock-name">{h.first}</h3>
            <div className="hostblock-full">{h.name}</div>
            <p className="hostblock-bio">{h.bio}</p>
            <blockquote className="hostblock-q">&ldquo;{h.quote}&rdquo;</blockquote>
          </div>
        </article>
      ))}
    </div>
  </section>
);

window.LiveStream = LiveStream;
window.Hosts = Hosts;