// hero.jsx — results-card panel (no Claude Code aesthetic)

const TASKS = [
  { name: "Invoice routing",        manualS: 480,   autoS: 4,  manualLbl: "8 min",  autoLbl: "4 sec"  },
  { name: "Customer reply draft",   manualS: 720,   autoS: 9,  manualLbl: "12 min", autoLbl: "9 sec"  },
  { name: "Weekly report build",    manualS: 12000, autoS: 22, manualLbl: "3h 20m", autoLbl: "22 sec" },
  { name: "Vendor reconciliation",  manualS: 2700,  autoS: 11, manualLbl: "45 min", autoLbl: "11 sec" },
  { name: "CRM lead enrichment",    manualS: 360,   autoS: 2,  manualLbl: "6 min",  autoLbl: "2 sec"  },
  { name: "Contract clause review", manualS: 1500,  autoS: 8,  manualLbl: "25 min", autoLbl: "8 sec"  },
];

function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }

function fmtSec(s) {
  s = Math.max(0, Math.round(s));
  if (s < 60) return `${s}s`;
  if (s < 3600) {
    const m = Math.floor(s / 60);
    const sec = s % 60;
    return sec === 0 ? `${m}m` : `${m}m ${sec}s`;
  }
  const h = Math.floor(s / 3600);
  const m = Math.round((s % 3600) / 60);
  return m === 0 ? `${h}h` : `${h}h ${m}m`;
}

function TimeSavedPanel() {
  const [idx, setIdx] = React.useState(0);
  const [phase, setPhase] = React.useState("entering");
  const [manualPct, setManualPct] = React.useState(0);
  const [savedSec, setSavedSec] = React.useState(0);

  React.useEffect(() => {
    let cancelled = false;
    let i = 0;

    async function loop() {
      while (!cancelled) {
        const task = TASKS[i];
        setIdx(i);
        setPhase("entering");
        setManualPct(0);
        setSavedSec(0);
        await sleep(300);
        if (cancelled) return;

        setPhase("running");
        const startGrow = performance.now();
        const growDur = 1000;
        await new Promise((resolve) => {
          function step(t) {
            if (cancelled) return resolve();
            const p = Math.min(1, (t - startGrow) / growDur);
            setManualPct(p * 100);
            if (p < 1) requestAnimationFrame(step);
            else resolve();
          }
          requestAnimationFrame(step);
        });
        if (cancelled) return;

        setPhase("done");
        const total = task.manualS - task.autoS;
        const startCount = performance.now();
        const countDur = 600;
        await new Promise((resolve) => {
          function step(t) {
            if (cancelled) return resolve();
            const p = Math.min(1, (t - startCount) / countDur);
            const eased = 1 - Math.pow(1 - p, 3);
            setSavedSec(total * eased);
            if (p < 1) requestAnimationFrame(step);
            else resolve();
          }
          requestAnimationFrame(step);
        });
        if (cancelled) return;

        await sleep(2500);
        if (cancelled) return;

        setPhase("leaving");
        await sleep(300);
        i = (i + 1) % TASKS.length;
      }
    }

    loop();
    return () => { cancelled = true; };
  }, []);

  const task = TASKS[idx];
  const axelPct = Math.max(3, (task.autoS / task.manualS) * 100);
  const showAxelBar = phase === "done" || phase === "leaving";

  return (
    <div className="tsp">
      <div className="tsp-tally">
        <span className="tsp-tally-num">1,420</span>
        <span className="tsp-tally-text"> hrs reclaimed across all clients this year</span>
      </div>

      <div className="tsp-divider" />

      <div className="tsp-label">Last completed workflow</div>
      <div className="tsp-task" data-phase={phase}>{task.name}</div>

      <div className="tsp-bars">
        <div className="tsp-row">
          <span className="tsp-row-label">By hand</span>
          <div className="tsp-track">
            <div className="tsp-fill tsp-fill-manual" style={{ width: `${manualPct}%` }} />
          </div>
          <span className="tsp-row-time">{task.manualLbl}</span>
        </div>
        <div className="tsp-row">
          <span className="tsp-row-label">Axel</span>
          <div className="tsp-track">
            <div className="tsp-fill tsp-fill-axel" style={{ width: showAxelBar ? `${axelPct}%` : "0%" }} />
          </div>
          <span className="tsp-row-time">{task.autoLbl}</span>
        </div>
      </div>

      <div className="tsp-saved-block">
        <div className="tsp-saved-num">{fmtSec(savedSec)}</div>
        <div className="tsp-saved-lbl">saved on this run</div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-left">
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <h1 className="h-display">
            Get your team's<br />
            <em>time back.</em>
          </h1>
          <p className="lede">
            We build custom AI automation for the workflows your team
            shouldn't be doing by hand. Backend pipelines, recurring reports,
            and internal systems that quietly save real hours every week.
          </p>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <div className="hero-cta">
            <a href="#contact" className="btn btn-primary">
              Book a discovery call <span className="arrow">→</span>
            </a>
            <a href="#roi" className="btn btn-ghost">
              See the math <span className="arrow">↓</span>
            </a>
          </div>

          <ul className="hero-bullets">
            <li>4-week first-deploy guarantee</li>
            <li>Founder-led builds</li>
            <li>You own the code</li>
          </ul>
        </div>
      </div>

      <div className="hero-right">
        <TimeSavedPanel />
      </div>
    </section>
  );
}

window.Hero = Hero;