/* global React */
const { useState: useStateR, useEffect: useEffectR, useRef: useRefR } = React;

function BigNumber() {
  const ref = useRefR(null);
  const [val, setVal] = useStateR(0);
  useEffectR(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const dur = 1600;
          const tick = (now) => {
            const t = Math.min(1, (now - start) / dur);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(eased * 2.5);
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref}>
      <div className="big-num">{val.toFixed(1)}<span style={{ fontSize: '0.4em', verticalAlign: 'baseline', color: 'var(--fg-3)', marginLeft: 12 }}>hrs/day</span></div>
      <span className="big-num-label">average operations coordinator</span>
    </div>
  );
}

function Results() {
  return (
    <section id="results">
      <span className="section-mark">§ 04 / Outcome</span>
      <div className="wrap">
        <Reveal><span className="eyebrow">What this gives back</span></Reveal>
        <div className="results" style={{ marginTop: 40 }}>
          <Reveal>
            <BigNumber />
          </Reveal>
          <Reveal delay={150}>
            <p>
              The average short-term rental operations coordinator spends around two and a half hours per day on coordination that should be automated. Chasing cleaner confirmations, catching inspection issues, drafting owner updates. We build the system that handles that layer so your team can focus on growth, not damage control.
            </p>
          </Reveal>
        </div>

        {/* Testimonial — add when available
        <Reveal delay={120}>
          <div className="quote">
            <div className="quote-body">
              [ Testimonial goes here once available. A short, specific sentence about a turnover that didn’t get missed, or an owner call that never happened. ]
            </div>
            <div className="quote-author">— [ Name ], [ Company ]</div>
          </div>
        </Reveal>
        */}
      </div>
    </section>
  );
}

window.Results = Results;