// --- Reusable primitives ---
const { useState, useEffect, useRef, useMemo, useCallback } = React;

function LivePill({ live }) {
  if (live) {
    return (
      <span className="live-pill">
        <span className="pulse"></span>
        LIVE NOW
      </span>
    );
  }
  return <span className="offline-pill">OFFLINE — παίρνω καφέ</span>;
}

function Stars({ n }) {
  return (
    <span className="stars">
      {'★'.repeat(n)}{'☆'.repeat(5 - n)}
    </span>
  );
}

function TopBar({ live, theme }) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const pad = (n) => String(n).padStart(2, '0');
  const time = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
  return (
    <div className="topbar">
      <div className="dots">
        <span className="dot" style={{background:'var(--red)'}}></span>
        <span className="dot" style={{background:'var(--amber)'}}></span>
        <span className="dot" style={{background:'var(--ink)'}}></span>
      </div>
      <div className="title">GREEKGRANDPA.OS v3.8.{GRANDPA.realAge} — {live ? 'STREAMING' : 'STANDBY'}</div>
      <div className="sys">
        <span className="dim">[{theme.toUpperCase()}]</span>
        <span style={{margin:'0 10px'}}>·</span>
        CRT {pad(now.getHours())}:{pad(now.getMinutes())}
      </div>
    </div>
  );
}

function Ticker({ items }) {
  const str = items.join('   ●   ');
  return (
    <div className="ticker">
      <div className="track">
        <span>{str}</span>
        <span>{str}</span>
      </div>
    </div>
  );
}

function SectionHeader({ id, title, kicker }) {
  return (
    <div className="sec-header" id={id}>
      <div>
        <div className="mono-sm dim">&gt; {kicker}</div>
        <h2>{title}</h2>
      </div>
      <div className="mono dim">──────────</div>
    </div>
  );
}

Object.assign(window, { LivePill, Stars, TopBar, Ticker, SectionHeader });