/* One AI FDE, two modes — pre-production stress-testing + production monitoring.
   Framed as vision (labeled "the vision"). Cards reveal in sequence on scroll-in. */
function ModesSection() {
  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("in"); return; }
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting && e.intersectionRatio >= 0.25) {
          root.classList.add("in");
          io.disconnect();
          break;
        }
      }
    }, { threshold: [0.25] });
    io.observe(root);
    return () => io.disconnect();
  }, []);

  return (
    <section className="block modes" data-screen-label="02 modes" ref={ref}>
      <div className="wrap">
        <div className="modes-head reveal-item" style={{ ["--d"]: 0 }}>
          <div className="modes-eyebrow"><span className="modes-pip"/>The vision</div>
          <h2 className="section-title modes-title">One AI forward deployed engineer. <span className="ink-soft">Two modes.</span></h2>
          <p className="section-sub modes-sub">
            Audia hardens your agent before launch, then keeps fixing it in production.
            One loop, one compounding memory across both.
          </p>
        </div>

        <div className="modes-grid">
          <div className="mode-card warm reveal-item" style={{ ["--d"]: 1 }}>
            <div className="mode-tag">Pre-production</div>
            <h3 className="mode-title">Red-teaming</h3>
            <p className="mode-desc">
              Audia runs thousands of adversarial test calls against your agent, surfaces every way
              it breaks, and hardens it before a real caller ever hits it.
            </p>
          </div>

          <div className="mode-card accent reveal-item" style={{ ["--d"]: 2 }}>
            <div className="mode-tag">Post-production</div>
            <h3 className="mode-title">Monitoring</h3>
            <p className="mode-desc">
              Audia listens to every production call, catches regressions the moment they surface,
              and feeds each failure back into the same fix and remember loop.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ModesSection });