/* Marquee + Metrics + Industries + FAQ + CTA */

function Marquee() {
  const items = [
    "Custom software", "Adaptive websites", "Process automation",
    "AI agents", "Custom GPTs", "24/7 support",
    "Cost optimization", "Real-time analytics", "Workflow design",
  ];
  const all = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((tt, i) => <span className="marquee-item" key={i}>{tt}</span>)}
      </div>
    </div>
  );
}

function Metric({ target, unit, label, desc, decimals = 0, prefix = "", suffix = "", start }) {
  const v = useCounter(target, 1800, start);
  const display = decimals > 0 ? v.toFixed(decimals) : Math.round(v).toLocaleString();
  return (
    <div className="metric">
      <div className="num serif">
        {prefix}{display}{suffix}
        {unit ? <span className="unit">{unit}</span> : null}
      </div>
      <div className="label">{label}</div>
      <div className="desc">{desc}</div>
    </div>
  );
}

function Metrics() {
  const { t } = useT();
  const ref = useRef(null);
  const [start, setStart] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setStart(true); io.disconnect(); }
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <section className="metrics" ref={ref}>
      <div className="shell">
        <Reveal>
          <div className="section-head" style={{ marginBottom: 48 }}>
            <div className="eyebrow">{t.metrics.eyebrow}</div>
            <h2>{t.metrics.h2a}<em>{t.metrics.h2b}</em>{t.metrics.h2c}</h2>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="metrics-grid">
            <Metric target={80} suffix="%" label={t.metrics.m1.label} desc={t.metrics.m1.desc} start={start} />
            <Metric target={3.4} decimals={1} unit="x" label={t.metrics.m2.label} desc={t.metrics.m2.desc} start={start} />
            <Metric target={62} suffix="%" label={t.metrics.m3.label} desc={t.metrics.m3.desc} start={start} />
            <Metric target={24} suffix="/7" label={t.metrics.m4.label} desc={t.metrics.m4.desc} start={start} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Marquee, Metric, Metrics });