// ============ LIVE STREAM =================
const LiveStream = () => {
  const fallbackBroadcast = {
    status: 'offline',
    label: 'THE BROADCAST',
    message: 'We\'ll be back live at 10A CT. Catch the latest from Rightside on YouTube.',
    channelUrl: 'https://www.youtube.com/@therightsidemedia',
  };
  const [broadcast, setBroadcast] = React.useState({ status: 'loading', label: 'THE BROADCAST', message: 'Checking broadcast status...' });

  React.useEffect(() => {
    let cancelled = false;
    fetch('/api/youtube-live')
      .then((res) => res.ok ? res.json() : Promise.reject(new Error('Broadcast unavailable')))
      .then((data) => {
        if (!cancelled) setBroadcast(data);
      })
      .catch(() => {
        if (!cancelled) setBroadcast(fallbackBroadcast);
      });
    return () => { cancelled = true; };
  }, []);

  const isLive = broadcast.status === 'live';
  const hasVideo = Boolean(broadcast.embedUrl);
  const watchUrl = broadcast.watchUrl || broadcast.channelUrl || 'https://www.youtube.com/@therightsidemedia';

  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">
            {isLive && <span className="live-dot" />} {broadcast.label || 'THE BROADCAST'}
          </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">
        <div className="live-main">
          <div className={`live-video live-video-${broadcast.status || 'offline'}`}>
            {hasVideo ? (
              <iframe
                title={broadcast.title || 'Rightside broadcast'}
                src={`${broadcast.embedUrl}?rel=0&modestbranding=1`}
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
              />
            ) : (
              <a className="live-fallback" href={watchUrl} target="_blank" rel="noopener">
                <Icon.YouTube size={42} />
                <span>{broadcast.status === 'loading' ? 'Checking YouTube...' : 'Open Rightside on YouTube'}</span>
              </a>
            )}
          </div>
          <div className="live-caption">
            <span className={`live-badge ${isLive ? 'is-live' : ''}`}>
              {isLive && <span className="live-dot" />} {broadcast.label || 'THE BROADCAST'}
            </span>
            <div>
              <div className="live-title">{broadcast.title || 'Rightside Media'}</div>
              <div className="live-message">{broadcast.message || fallbackBroadcast.message}</div>
            </div>
          </div>
        </div>

        <aside className="live-side">
          <div className="live-sidehead">WATCH ANYWHERE</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">Send a note during the show, or catch the replay here after broadcast.</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;