// ============ Top Bar with auto-populating ticker =================
const TopBar = () => {
  const [time, setTime] = React.useState(new Date());
  const [items, setItems] = React.useState([
    'Allison & Amie Beth go live at 10A CT',
    'Subscribe to The Rightside Dispatch',
    'Listen on Apple, Spotify & YouTube',
    'Watch live on YouTube — @therightsidemedia',
    'Text the show: 833.687.4448',
  ]);
  React.useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  React.useEffect(() => {
    // Auto-populate ticker via Claude with today's headlines
    let cancelled = false;
    (async () => {
      try {
        const today = new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
        const txt = await window.claude.complete(
          `It is ${today}. List 6 short, punchy news/culture/political tickers (max 8 words each) for a conservative Alabama-based talk show called The Rightside (with hosts Allison & Amie Beth). Cover Alabama news, national politics, and culture. Return ONLY the 6 items separated by " // " — no numbering, no quotes, no extra text.`
        );
        if (cancelled) return;
        const parts = txt.split('//').map(s => s.trim()).filter(s => s && s.length < 80);
        if (parts.length >= 3) setItems(parts.slice(0, 8));
      } catch (e) { /* keep fallback */ }
    })();
    return () => { cancelled = true; };
  }, []);
  const fmt = time.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', timeZone: 'America/Chicago' });
  return (
    <div className="topbar topbar-with-ticker">
      <div className="topbar-inner">
        <div className="topbar-left">
          <span className="live-dot" aria-hidden />
          <span className="topbar-label">DAILY TICKER</span>
          <span className="topbar-sep">/</span>
          <span className="topbar-show">{fmt} CT · BIRMINGHAM, AL</span>
        </div>
        <div className="topbar-right">
          <a className="topbar-btn" href="https://www.youtube.com/@therightsidemedia" target="_blank" rel="noopener">
            <Icon.Play size={10} /> WATCH LIVE
          </a>
        </div>
      </div>
      <div className="topbar-ticker">
        <div className="topbar-ticker-track">
          {[...items, ...items].map((t, i) => (
            <span className="topbar-ticker-item" key={i}>
              <Icon.Dot size={5} /> {t}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
};

// ============ Nav =================
const Nav = () => {
  const links = [
    { label: 'The Show', href: '#live' },
    { label: 'Hosts', href: '#hosts' },
    { label: 'Op-Eds', href: '#opeds' },
    { label: 'Newsletter', href: '#newsletter' },
    { label: 'Contact', href: '#contact' },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="nav-logo">
          <RightsideLogo size={0.42} showTagline={false} />
        </a>
        <ul className="nav-links">
          {links.map((l) => (
            <li key={l.label}>
              <a href={l.href}>{l.label}</a>
            </li>
          ))}
        </ul>
        <div className="nav-right">
          <a className="nav-sub" href="https://www.youtube.com/@therightsidemedia" target="_blank" rel="noopener">
            Subscribe <Icon.Arrow size={14} />
          </a>
        </div>
      </div>
    </nav>
  );
};

// Auto-formatted today date e.g. "APR 30, 2026"
const formatToday = () => {
  const d = new Date();
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase();
};

// ============ Hero =================
const HeroEditorial = () => (
  <section className="hero hero-editorial" id="top">
    <div className="hero-grid">
      <div className="hero-meta">
        <div className="hero-tag">
          <Icon.Dot size={6} /> ON AIR TO LIGHT UP · LIVE TODAY
        </div>
        <div className="hero-date">{formatToday()} · 10A–12P CT</div>
      </div>

      <h1 className="hero-headline">
        <span className="hl-line">THE RIGHT PLACE.</span>
        <span className="hl-line">THE RIGHT TIME.</span>
        <span className="hl-line hl-accent">
          THE RIGHTSIDE.
        </span>
      </h1>

      <div className="hero-sub">
        <p>
          Because you can't influence conversations you aren't in.
        </p>
        <div className="hero-ctas">
          <a href="https://www.youtube.com/@therightsidemedia" target="_blank" rel="noopener" className="btn btn-primary">
            <span className="btn-pulse" /> WATCH LIVE
            <Icon.Arrow size={14} />
          </a>
          <a href="https://www.youtube.com/@therightsidemedia" target="_blank" rel="noopener" className="btn btn-ghost">
            SUBSCRIBE <Icon.ArrowUpRight size={14} />
          </a>
        </div>
      </div>

      <div className="hero-hosts">
        <div className="host-card">
          <div className="host-photo">
            <img src="assets/allison.jpeg" alt="Allison Sinclair" />
          </div>
          <div className="host-name">ALLISON</div>
          <div className="host-role">HOST / OWNER</div>
        </div>
        <div className="host-card">
          <div className="host-photo">
            <img src="assets/amiebeth.jpeg" alt="Amie Beth Shaver" />
          </div>
          <div className="host-name">AMIE BETH</div>
          <div className="host-role">HOST / OWNER</div>
        </div>
        <div className="host-card">
          <div className="host-photo">
            <img src="assets/jp.jpeg" alt="JP Plott" />
          </div>
          <div className="host-name">JP</div>
          <div className="host-role">CO-HOST / PRODUCER</div>
        </div>
      </div>
    </div>
  </section>
);

// Alt hero: full-bleed studio poster
const HeroPoster = () => (
  <section className="hero hero-poster" id="top">
    <div className="poster-frame">
      <div className="poster-tag">
        <span className="live-dot" /> LIVE FROM BIRMINGHAM
      </div>
      <div className="poster-stack">
        <div className="poster-word">WE</div>
        <div className="poster-word poster-word-red">SPEAK</div>
        <div className="poster-word">TRUTH</div>
        <div className="poster-word poster-word-italic">to power.</div>
      </div>
      <div className="poster-footer">
        <div>
          <div className="poster-footer-lbl">PRESENTED BY</div>
          <div className="poster-footer-val">YELLOWHAMMER NEWS</div>
        </div>
        <div>
          <div className="poster-footer-lbl">TODAY</div>
          <div className="poster-footer-val">{formatToday()}</div>
        </div>
        <div>
          <div className="poster-footer-lbl">NEXT LIVE</div>
          <div className="poster-footer-val">TODAY 10:00A CT</div>
        </div>
      </div>
      <a href="https://www.youtube.com/@therightsidemedia" target="_blank" rel="noopener" className="poster-cta">
        <span className="btn-pulse" /> WATCH LIVE <Icon.Arrow size={14} />
      </a>
    </div>
  </section>
);

window.TopBar = TopBar;
window.Nav = Nav;
window.HeroEditorial = HeroEditorial;
window.HeroPoster = HeroPoster;