/* Stat reveal — a huge number counts up 0 -> $500 as it enters view,
   over a red parallax glow. */
function Problem() {
  const { Reveal, useCountUp, Parallax, Ic } = window;
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    const node = ref.current; if (!node) return;
    let done = false;
    const trigger = () => { if (!done) { done = true; setInView(true); } };
    // Fire only when the stat is genuinely in the viewport (near center), so the
    // count-up plays as you actually reach it — never preemptively.
    const check = () => {
      const r = node.getBoundingClientRect();
      const vh = window.innerHeight || 800;
      if (r.top < vh * 0.6 && r.bottom > vh * 0.3) trigger();
    };
    check();
    window.addEventListener('scroll', check, { passive: true });
    window.addEventListener('resize', check);
    return () => { window.removeEventListener('scroll', check); window.removeEventListener('resize', check); };
  }, []);
  const val = useCountUp(500, inView, 1700);
  const running = inView && val < 500;

  return (
    <section id="stat" ref={ref} style={{
      position: 'relative', overflow: 'hidden',
      padding: 'clamp(96px, 14vw, 200px) clamp(20px, 5vw, 48px)',
      borderTop: '1px solid var(--line-100)', background: 'var(--bg)',
    }}>
      {/* deep parallax layer: the transmission image — vibrates/works while the
         count climbs, then settles the instant it lands on $500 */}
      <Parallax speed={0.34} style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
        <div className="engine-run" style={{
          position: 'absolute', top: '-12%', left: 0, width: '100%', height: '124%',
          backgroundImage: `url("${window.ALEROQ_IMG.problem}")`, backgroundSize: 'cover', backgroundPosition: 'center',
          opacity: running ? 0.34 : 0.22,
          filter: running ? 'grayscale(0.1) contrast(1.12) brightness(1.08)' : 'grayscale(0.3) contrast(1.05)',
          animationPlayState: running ? 'running' : 'paused',
          transition: 'opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out)',
          maskImage: 'radial-gradient(75% 70% at 50% 50%, #000 10%, transparent 78%)',
          WebkitMaskImage: 'radial-gradient(75% 70% at 50% 50%, #000 10%, transparent 78%)',
        }} />
      </Parallax>
      {/* mid parallax layer: red glow */}
      <Parallax speed={0.18} style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
        <div style={{
          position: 'absolute', top: '50%', left: '50%', width: 'min(900px, 110vw)', height: 700,
          transform: 'translate(-50%,-50%)',
          background: 'radial-gradient(closest-side, rgba(255,46,63,0.18), rgba(255,46,63,0.04) 55%, transparent 75%)',
          opacity: inView ? 1 : 0, transition: 'opacity 1.2s var(--ease-out)',
        }} />
      </Parallax>

      <div style={{ position: 'relative', zIndex: 1, maxWidth: 920, margin: '0 auto', textAlign: 'center' }}>
        <Reveal>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(96px, 18vw, 240px)', lineHeight: 0.92,
            letterSpacing: '-0.04em', color: 'var(--text-strong)',
            textShadow: '0 0 70px rgba(255,46,63,0.22)',
          }}>
            <span style={{ color: 'var(--accent)' }}>$</span>{val}
          </div>
        </Reveal>
        <Reveal delay={120}>
          <p style={{
            fontSize: 'clamp(18px, 2.4vw, 26px)', lineHeight: 1.55, color: 'var(--text-body)',
            maxWidth: 680, margin: '28px auto 0', textWrap: 'balance',
          }}>
            Drivers overpay an average of <strong style={{ color: 'var(--text-strong)' }}>$500 a year</strong> on
            repairs they never understood. It&rsquo;s not the mechanics &mdash; it&rsquo;s the
            <strong style={{ color: 'var(--text-strong)' }}> information gap</strong>. They know exactly
            what&rsquo;s wrong and what it should cost. You don&rsquo;t. ALEROQ closes that gap.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.Problem = Problem;