// ── Hero ──────────────────────────────────────────────────────────
const { useState, useEffect, useRef, useMemo } = React;

function useTicker(targetRef, speed = 1) {
  // counts up — increments grow as the count grows for that "exponential" feel
  useEffect(() => {
    let n = 0;
    let raf;
    const start = performance.now();
    const tick = (t) => {
      const elapsed = (t - start) / 1000;
      // organic-ish: starts slow, accelerates
      n = Math.floor((elapsed ** 1.4) * 1400 * speed);
      if (targetRef.current) targetRef.current.textContent = formatTokensFull(n);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
}

function Hero() {
  const tokenRef = useRef(null);
  const costRef = useRef(null);
  const apiRef = useRef(null);
  useEffect(() => {
    let raf, start = performance.now();
    const tick = (t) => {
      const el = (t - start) / 1000;
      const tokens = Math.floor((el ** 1.4) * 1400);
      const cost = (tokens / 1_000_000) * 3.25; // ~$3.25/M tokens blended
      if (tokenRef.current) tokenRef.current.textContent = formatTokensFull(tokens);
      if (costRef.current) costRef.current.textContent = formatUSD(cost);
      if (apiRef.current) apiRef.current.textContent = (Math.floor(el * 1.7)).toString().padStart(3, '0');
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-meta">
        <span className="eyebrow">v.2 · Token Familiar · 2026</span>
        <h1 className="h-display">
          Your AI bill,<br/>
          <em>watched.</em>
        </h1>
        <p className="lede">
          Toki is a token-counting creature who lives in your browser. It hatches from your first prompt, evolves with every conversation, and trims 85% of the words you didn't need to send.
        </p>
        <div className="hero-cta-row">
          <a className="btn btn-primary" href="#install">
            Install Toki — free
            <span className="btn-arrow">↗</span>
          </a>
          <a className="btn btn-ghost" href="#evolution">See the evolution</a>
        </div>
        <div className="hero-stats">
          <div className="hero-stat">
            <div className="hero-stat-num">12</div>
            <div className="hero-stat-lbl">EVOLUTION STAGES</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-num">4</div>
            <div className="hero-stat-lbl">AI PLATFORMS WATCHED</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-num">85%</div>
            <div className="hero-stat-lbl">AVG. PROMPT TRIM</div>
          </div>
        </div>
      </div>

      <div className="counter-stage">
        <div className="counter-glow"></div>
        <div className="counter-rings"></div>

        <span className="counter-tag tl">LIVE · SESSION 04</span>
        <span className="counter-tag tr">CHROME · v.2.4.1</span>
        <span className="counter-tag bl">CLAUDE · GPT · GEMINI · CURSOR</span>

        <div className="counter-toki">
          <img src={STAGE_IMG('05_junior')} alt="Toki, Junior stage" />
        </div>

        <div className="counter-overlay">
          <div className="counter-row">
            <span className="counter-label">Tokens this session</span>
            <span className="counter-value mono" ref={apiRef}>000</span>
          </div>
          <div className="counter-big mono" ref={tokenRef}>0</div>
          <div className="counter-row">
            <span className="counter-label">Estimated cost</span>
            <span className="counter-value mono" ref={costRef}>$0.00</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;