function GlitchText({ children, className = '', tag: Tag = 'span' }) {
  return (
    <Tag className={`glitch ${className}`} data-text={children}>
      {children}
    </Tag>
  );
}

function TypingLine({ text, speed = 40, delay = 0, cursor = true, className = '' }) {
  const [out, setOut] = React.useState('');
  const [done, setDone] = React.useState(false);
  React.useEffect(() => {
    let i = 0;
    let to;
    const startTo = setTimeout(() => {
      const tick = () => {
        i++;
        setOut(text.slice(0, i));
        if (i < text.length) to = setTimeout(tick, speed);
        else setDone(true);
      };
      tick();
    }, delay);
    return () => { clearTimeout(startTo); clearTimeout(to); };
  }, [text, speed, delay]);
  return (
    <span className={className}>
      {out}
      {cursor && <span className={`type-caret ${done ? 'done' : ''}`}>▌</span>}
    </span>
  );
}

function useClock() {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  return now;
}

function formatUTC(d) {
  const pad = (n) => String(n).padStart(2, '0');
  return `${d.getUTCFullYear()}.${pad(d.getUTCMonth()+1)}.${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())} UTC`;
}

function TopBar({ variant = 1 }) {
  const now = useClock();
  return (
    <header className="top-bar">
      <div className="top-bar__left">
        <span className="brand-mark">01Forge</span>
        <span className="top-sep">//</span>
        <span className="mono dim">NODE_{String(variant).padStart(2,'0')}</span>
      </div>
      <nav className="top-bar__nav" aria-hidden="true"></nav>
      <div className="top-bar__right">
        <span className="status-dot" />
        <span className="mono dim">ONLINE</span>
        <span className="top-sep">//</span>
        <span className="mono">{formatUTC(now)}</span>
        <span className="top-sep">//</span>
        <a href="#/contact" className="nav-link accent">CONTACT</a>
      </div>
    </header>
  );
}

function BottomTicker({ items }) {
  if (!items || items.length === 0) return null;
  const stream = [...items, ...items, ...items];
  return (
    <div className="bottom-ticker">
      <div className="ticker-label">SIG</div>
      <div className="ticker-track">
        <div className="ticker-inner">
          {stream.map((s, i) => (
            <span key={i} className="ticker-item">
              <span className="ticker-bullet">◇</span> {s}
            </span>
          ))}
        </div>
      </div>
      <div className="ticker-label">01Forge</div>
    </div>
  );
}

function ScanlineOverlay({ intensity = 0.5 }) {
  return (
    <>
      <div className="scanlines" style={{ opacity: 0.15 * intensity }} />
      <div className="vignette" />
      <div className="noise" style={{ opacity: 0.06 * intensity }} />
    </>
  );
}

function Crosshair() {
  const [pos, setPos] = React.useState({ x: -100, y: -100 });
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const m = (e) => { setPos({ x: e.clientX, y: e.clientY }); setVisible(true); };
    const leave = () => setVisible(false);
    window.addEventListener('mousemove', m);
    window.addEventListener('mouseleave', leave);
    return () => { window.removeEventListener('mousemove', m); window.removeEventListener('mouseleave', leave); };
  }, []);
  return (
    <div className="crosshair" style={{ opacity: visible ? 1 : 0 }}>
      <div className="crosshair-h" style={{ top: pos.y }} />
      <div className="crosshair-v" style={{ left: pos.x }} />
      <div className="crosshair-box" style={{ left: pos.x, top: pos.y }} />
    </div>
  );
}

Object.assign(window, { GlitchText, TypingLine, useClock, formatUTC, TopBar, BottomTicker, ScanlineOverlay, Crosshair });