function CarAnimation() {
  const sectionRef = React.useRef(null);
  const [p, setP] = React.useState(0);
  const [, force] = React.useState(0);

  React.useEffect(() => {
    const onLang = () => force(n => n + 1);
    window.addEventListener('langchange', onLang);
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const el = sectionRef.current;
        if (el) {
          const rect = el.getBoundingClientRect();
          const total = rect.height - window.innerHeight;
          const prog = total > 0 ? Math.min(1, Math.max(0, -rect.top / total)) : 0;
          setP(prog);
        }
        ticking = false;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('langchange', onLang); };
  }, []);

  React.useEffect(() => {
    const s = document.createElement('style');
    s.id = 'car-anim-kf-v6';
    s.textContent = `
      @keyframes wheelSpinV6 { to { transform: rotate(360deg); } }
      @keyframes dashFlowV6 { to { background-position: -80px 0; } }
      @keyframes hintBobV6 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
    `;
    document.head.appendChild(s);
    return () => { const el = document.getElementById('car-anim-kf-v6'); if (el) el.remove(); };
  }, []);

  const t = window.t;
  const km = Math.round(p * 500);
  const moving = p > 0.001 && p < 0.999;

  const stat = (threshold) => Math.min(1, Math.max(0, (p - threshold) / 0.12));
  const stats = [
    { v: `${km}`, sub: 'km / 500', appear: 0.0, accent: 'text-[#171717]' },
    { v: '4h 50m', sub: t('car.time'), appear: 0.35, accent: 'text-[#171717]' },
    { v: '€18.50', sub: t('car.seat'), accent: 'text-[#0096F7]', appear: 0.7 },
  ];

  return (
    <section ref={sectionRef} className="relative height-[100vh] bg-white py-16">
      <div className="sticky top-0 h-[80vh] flex flex-col justify-center items-center gap-8">
        
        {/* Header */}
        <div className="text-center">
          <span className="text-xs font-semibold text-[#0096F7] uppercase tracking-wider block mb-1">
            {t('car.from')} — {t('car.to')}
          </span>
          <h2 className="font-sans font-normal text-3xl md:text-5xl text-[#171717] tracking-tight">
            {t('car.from')} <span className="text-[#a3a3a3]">→</span> {t('car.to')}
          </h2>
        </div>

        {/* Road Stage */}
        <div className="relative w-[min(900px,86vw)] h-40 flex items-center justify-center">
          <div className="relative w-full">
            <div className="h-1 rounded-full bg-[#e5e5e5] w-full" />
            <div className="h-1 rounded-full bg-[#0096F7] absolute top-0 left-0" style={{ width: `${p * 100}%` }} />
            
            {/* Pins */}
            <div className="absolute top-4 left-0 -translate-x-1/2 text-center">
              <div className="w-3.5 h-3.5 rounded-full bg-white border-2 border-[#0096F7] mx-auto" />
              <div className="text-xs font-semibold text-[#171717] mt-1">{t('car.from')}</div>
            </div>
            <div className="absolute top-4 right-0 translate-x-1/2 text-center">
              <div className="w-3.5 h-3.5 rounded-full bg-white border-2 border-[#0096F7] mx-auto" />
              <div className="text-xs font-semibold text-[#171717] mt-1">{t('car.to')}</div>
            </div>

            {/* Moving Car */}
            <div className="absolute top-0 -translate-y-full -translate-x-1/2" style={{ left: `${p * 100}%` }}>
              <svg width="120" height="46" viewBox="0 0 154 60" fill="none">
                <path d="M5 42 C5 37 8 35 14 34.4 C23 24 41 18.5 66 18.5 C86 18.5 101 22 114 31 C119 33 124 34.4 130 35.2 L138 36.4 C143 37.1 146 39.2 146 43 L146 44.4 L5 44 Z" fill="#171717"/>
                <path d="M40 32 C48 23 60 20 76 20 C90 20 102 23 110 31 Z" fill="#E6F4FE"/>
                <rect x="22" y="39.5" width="112" height="2" rx="1" fill="#0096F7"/>
                {[44, 112].map((cx) => (
                  <g key={cx}>
                    <circle cx={cx} cy="47.4" r="9" fill="#171717"/>
                    <circle cx={cx} cy="47.4" r="5" fill="#fff"/>
                  </g>
                ))}
              </svg>
            </div>
          </div>
        </div>

        {/* Live Stats */}
        <div className="flex gap-12 md:gap-20 justify-center">
          {stats.map((s, i) => {
            const a = stat(s.appear);
            return (
              <div key={i} className="text-center transition-all duration-200" style={{ opacity: 0.3 + a * 0.7 }}>
                <div className={`font-bold text-3xl md:text-4xl tracking-tight ${s.accent}`}>{s.v}</div>
                <div className="text-xs uppercase text-[#6a6a6a] mt-1 tracking-wider">{s.sub}</div>
              </div>
            );
          })}
        </div>

      </div>
    </section>
  );
}

window.CarAnimation = CarAnimation;