// Hero with kinetic typography, live clock, animated stats
function KineticHeadline() {
  // We split the headline into tokens, each with a staggered rise animation
  const line1 = ["Autonomous"];
  const line2 = ["Quantitative"];
  const line3 = ["Intelligence."];
  return (
    <h1 style={{ fontSize: '100.6px' }}>
      <span className="word" style={{ animationDelay: '0ms' }}>
        <span style={{ animationDelay: '0ms' }}>{line1[0]}</span>
      </span>
      <br/>
      <span className="word">
        <span style={{ animationDelay: '120ms' }} className="italic">{line2[0]}</span>
      </span>
      <br/>
      <span className="word">
        <span style={{ animationDelay: '240ms' }}>{line3[0]}</span>
      </span>
    </h1>
  );
}

function LiveClock() {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const int = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(int);
  }, []);
  const hh = String(now.getUTCHours()).padStart(2, '0');
  const mm = String(now.getUTCMinutes()).padStart(2, '0');
  const ss = String(now.getUTCSeconds()).padStart(2, '0');
  return (
    <div className="hero-clock">
      <div className="big">{hh}:{mm}<span style={{ color: 'var(--accent)' }}>:{ss}</span></div>
      <div>UTC · SYSTEMS NOMINAL</div>
    </div>
  );
}

function AnimatedStat({ value, suffix, label, delay = 0 }) {
  const [shown, setShown] = React.useState(0);
  React.useEffect(() => {
    let raf; const start = performance.now() + delay;
    const tick = (now) => {
      if (now < start) { raf = requestAnimationFrame(tick); return; }
      const t = Math.min(1, (now - start) / 1800);
      const eased = 1 - Math.pow(1 - t, 3);
      setShown(value * eased);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value, delay]);
  const isFloat = value % 1 !== 0;
  const display = isFloat ? shown.toFixed(1) : Math.floor(shown).toString();
  return (
    <div className="stat">
      <div className="stat-num">
        {display}<span className="suffix">{suffix}</span>
      </div>
      <div className="stat-label">{label}</div>
      <div className="stat-bar" />
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-top">
        <div className="label">Obsidian · Labs</div>
        <div className="hero-top-meta">
          INDEX · 2026<br/>
          SYS · v3.4.12<br/>
          MODE · AUTONOMOUS
        </div>
      </div>
      <KineticHeadline />
      <div className="hero-bottom">
        <p className="hero-lede reveal in">
          <strong>15+ autonomous AI agents</strong> operating 24/7. Multi-model ensemble intelligence.
          GPU-accelerated inference. Systematic alpha generation at machine speed.
        </p>
        <LiveClock />
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section className="stats">
      <AnimatedStat value={15} suffix="+" label="Strategies Running" delay={100} />
      <AnimatedStat value={2000} suffix="+" label="Trades Executed" delay={250} />
      <AnimatedStat value={85.4} suffix="%" label="Win Rate" delay={400} />
      <AnimatedStat value={260} suffix="+" label="Modules in Production" delay={550} />
    </section>
  );
}

function Marquee() {
  const phrase = [
    { text: "machine-speed alpha", italic: true },
    { text: "· 15+ AGENTS ·", accent: true },
    { text: "causal signal sourcing", italic: true },
    { text: "· 85.4% WIN RATE ·", accent: true },
    { text: "multi-model inference", italic: true },
    { text: "· 260+ MODULES ·", accent: true },
    { text: "autonomous execution", italic: true },
    { text: "· OBSIDIAN LABS ·", accent: true },
  ];
  const full = [...phrase, ...phrase];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {full.map((p, i) => (
          <span key={i} className={p.accent ? 'accent' : ''}>{p.text}</span>
        ))}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-brand">Obsidian</div>
      <div>© 2026 · Obsidian Labs · All Rights Reserved</div>
      <div>Autonomous Quantitative Intelligence</div>
    </footer>
  );
}

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-brand">
        <svg className="nav-brand-mark" viewBox="0 0 22 22">
          <polygon points="11,2 20,8 17,20 5,20 2,8" fill="none" stroke="currentColor" strokeWidth="1" />
          <polygon points="11,2 20,8 11,11 2,8" fill="currentColor" opacity="0.3" />
        </svg>
        Obsidian
      </div>
      <div className="nav-links">
        <a href="#strategies">Strategies</a>
        <a href="#architecture">Architecture</a>
        <a href="#technology">Technology</a>
        <a href="#contact">Contact</a>
      </div>
      <div className="nav-status">
        <span className="dot" />SYSTEMS ONLINE
      </div>
    </nav>
  );
}

Object.assign(window, { Hero, Stats, Marquee, Footer, Nav });