/* global React */
const { useEffect, useRef, useState } = React;

function Counter({ target, suffix = '', duration = 1400 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    let started = false;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(target * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [target]);
  return <span ref={ref}>{Math.round(val)}{suffix}</span>;
}

function Results() {
  const { t } = window.useT();
  const r = t.results;
  return (
    <section id="results" className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>{r.eyebrow}</span>
          <h2>{r.h2line1}<br />{r.h2line2}</h2>
          <p className="lead">{r.lead}</p>
        </div>

        <div className="results-grid">
          <div className="card result-card">
            <span className="kicker"><span className="pulse"></span>{r.c1.kicker}</span>
            <div className="figure"><Counter target={10} />×<span className="unit"> {r.c1.unit}</span></div>
            <div className="label">{r.c1.label}</div>
            <div className="meter"><div className="meter-fill" style={{ width: '100%' }}></div></div>
          </div>
          <div className="card result-card">
            <span className="kicker"><span className="pulse"></span>{r.c2.kicker}</span>
            <div className="figure">−<Counter target={70} />%</div>
            <div className="label">{r.c2.label}</div>
            <div className="meter"><div className="meter-fill" style={{ width: '70%' }}></div></div>
          </div>
          <div className="card result-card">
            <span className="kicker"><span className="pulse"></span>{r.c3.kicker}</span>
            <div className="figure"><Counter target={3} /><span className="unit"> + AI</span></div>
            <div className="label">{r.c3.label}</div>
            <div className="meter"><div className="meter-fill" style={{ width: '50%' }}></div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function POC() {
  const { t } = window.useT();
  const p = t.poc;
  return (
    <section id="poc" className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>{p.eyebrow}</span>
          <h2>{p.h2line1}<br />{p.h2line2}</h2>
          <p className="lead">{p.lead}</p>
        </div>

        <div className="poc-grid">
          <div className="card poc-card">
            <span className="kicker"><span className="pulse"></span>{p.cardKicker}</span>
            <h3 style={{ marginTop: 18 }}>{p.cardTitle}</h3>
            <p style={{ color: 'var(--fg-2)' }}>{p.cardSub}</p>
            <ul className="poc-list">
              {p.checks.map((c, i) => (
                <li key={i}><span className="check">✓</span><span>{c}</span></li>
              ))}
            </ul>
          </div>
          <div className="card poc-timeline">
            <span className="kicker"><span className="pulse"></span>{p.timelineKicker}</span>
            <h3 style={{ marginTop: 18, marginBottom: 8 }}>{p.timelineTitle}</h3>
            {p.timeline.map((r, i) => (
              <div className="timeline-row" key={i}>
                <div className="week">{r.w}</div>
                <div className="what">{r.t}<small>{r.s}</small></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Synapse() {
  const { t } = window.useT();
  const sy = t.synapse;
  return (
    <section id="synapse" className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>{sy.eyebrow}</span>
          <h2>{sy.h2line1}<br />{sy.h2line2}</h2>
          <p className="lead">{sy.lead}</p>
        </div>

        <div className="synapse-stack">
          {sy.levels.map((l, i) => (
            <div className="card synapse-level" key={i}>
              <span className="level-num">{sy.levelLabel} {l.n}</span>
              <div className="level-bar">
                {[0,1,2].map(b => <i key={b} className={b < l.bars ? 'on' : ''}></i>)}
              </div>
              <h3>{l.name}</h3>
              <p>{l.body}</p>
              <div className="pct">{l.pct}<span className="unit">{sy.autonomyUnit}</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Results = Results;
window.POC = POC;
window.Synapse = Synapse;