/* How Audia works — 4-step pipeline that deposits into a compounding-memory foundation */

const HOW_STEPS = [
  { n: "01", title: "Capture",   sub: "Production calls and simulated red-team runs, aligned to the semantic events you emit — on one timeline." },
  { n: "02", title: "Diagnose",  accent: true, sub: "Rank root causes by confidence across prompt and workflow — not log lines." },
  { n: "03", title: "Prescribe", accent: true, sub: "Draft the fix: the corrected prompt and workflow, ready to ship." },
  { n: "04", title: "Verify",    accent: true, sub: "Replay the fix against the exact conditions that caused the break, before it ships." },
];

function HowSection() {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const root = ref.current;
    if (!root) return;

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) {
      root.classList.add("how-played", "how-reduce");
      return;
    }

    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting && e.intersectionRatio >= 0.3) {
          root.classList.add("how-played");
          io.disconnect();
          break;
        }
      }
    }, { threshold: [0.3] });
    io.observe(root);
    return () => io.disconnect();
  }, []);

  return (
    <section className="block how-section" data-screen-label="03 how" ref={ref} style={{ paddingTop: 130, paddingBottom: 120 }}>
      <div className="wrap">
        <div className="how-head">
          <div className="section-eyebrow">How Audia works</div>
          <h2 className="section-title how-title-lg">
            A closed loop — <span className="ink-soft">from broken call to compounding memory.</span>
          </h2>
        </div>

        <div className="how-flow">
          <div className="how-row" role="list">
            {HOW_STEPS.map((s, i) => (
              <div className={"how-card" + (s.accent ? " accent" : "")} style={{ ["--ci"]: i }} role="listitem" key={s.n}>
                <div className="how-num">{s.n}</div>
                <div className="how-title">{s.title}</div>
                <div className="how-sub">{s.sub}</div>
              </div>
            ))}
          </div>

          <div className="how-deposit" aria-hidden="true">
            {HOW_STEPS.map((s) => (
              <div className="how-drop" key={s.n}>
                <svg viewBox="0 0 20 46" preserveAspectRatio="xMidYMid meet">
                  <path className="rail" d="M 10 0 L 10 40"/>
                  <path className="flow" d="M 10 0 L 10 40"/>
                  <path className="chev" d="M 6 33 L 10 40 L 14 33"/>
                </svg>
              </div>
            ))}
          </div>

          <div className="how-mem">
            <div className="how-mem-badge"><span className="pip"/></div>
            <div className="how-mem-txt">
              <div className="k">Compounding memory</div>
              <div className="t">Everything the loop produces settles here — and stays.</div>
              <div className="s">
                Each verified fix becomes a regression test that guards that failure forever, plus org memory that lets
                every future agent start ahead of where the last one shipped. The floor only rises.
              </div>
            </div>
            <div className="how-mem-count">
              <div className="big">1,204</div>
              <div className="cap">fixes remembered</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowSection });