const { useEffect: useEffectP, useState: useStateP, useRef: useRefP } = React;

function Timeline14() {
  const [progress, setProgress] = useStateP(0);
  const ref = useRefP(null);
  const targetRef = useRefP(0);
  const rafRef = useRefP(0);

  useEffectP(() => {
    const compute = () => {
      const el = ref.current;
      if (!el) return 0;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const start = vh * 0.75;
      const end = vh * 0.25;
      const total = start - end;
      const pos = Math.max(0, Math.min(total, start - rect.top));
      return (pos / total) * 100;
    };
    const onScroll = () => { targetRef.current = compute(); };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });

    // Smooth follow (lerp ~0.12)
    let current = targetRef.current;
    const tick = () => {
      const t = targetRef.current;
      current += (t - current) * 0.12;
      if (Math.abs(t - current) < 0.05) current = t;
      setProgress(current);
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener('scroll', onScroll);
      cancelAnimationFrame(rafRef.current);
    };
  }, []);

  const iconProps = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };

  const steps = [
    {
      day: 'JOUR 1',
      title: 'Démarrage',
      desc: "Analyse des processus internes, cartographie des tâches les plus chronophages et identification des axes d'amélioration.",
      icon: (
        <svg {...iconProps} className="t14-svg t14-svg-target">
          <circle cx="12" cy="12" r="9"/>
          <circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/>
        </svg>
      ),
    },
    {
      day: 'JOUR 2-3',
      title: 'Appel technique',
      desc: "Setup technique de l'application interne, accès à votre espace dédié et déploiement du plan d'action opérationnel.",
      icon: (
        <svg {...iconProps} className="t14-svg t14-svg-list">
          <path d="M4 6h10M18 6h2"/>
          <circle cx="16" cy="6" r="1.5"/>
          <path d="M4 12h4M12 12h8"/>
          <circle cx="10" cy="12" r="1.5"/>
          <path d="M4 18h12M20 18h0"/>
          <circle cx="18" cy="18" r="1.5"/>
        </svg>
      ),
    },
    {
      day: 'JOUR 4-6',
      title: 'Production',
      desc: "Déploiement des agents IA sur vos leviers commerciaux : prospection, qualification et prise de contact automatisée.",
      icon: (
        <svg {...iconProps} className="t14-svg t14-svg-bolt">
          <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/>
        </svg>
      ),
    },
    {
      day: 'JOUR 7-14',
      title: 'Appel stratégique',
      desc: "Analyse des données terrain, identification des points d'optimisation et amélioration continue du système de croissance.",
      icon: (
        <svg {...iconProps} className="t14-svg t14-svg-bars">
          <path d="M3 20V10M9 20V4M15 20v-8M21 20v-5"/>
        </svg>
      ),
    },
  ];

  const activeCount = Math.max(1, Math.floor((progress / 100) * steps.length));

  return (
    <section className="section" data-screen-label="03 Timeline" id="timeline" ref={ref}>
      <div className="reveal">
        <div className="eyebrow"><span className="num">/02</span><span className="bar"></span>Déploiement</div>
        <h2 className="section-title">Mise en place en <span className="italic">quelques jours.</span></h2>
      </div>

      <div className="timeline14">
        <div className="t14-rail-horizontal" style={{'--rail-progress': `${Math.min(100, progress)}%`}}>
          <div className="t14-rail-fill" style={{width: `${Math.min(100, progress)}%`}}></div>
        </div>

        <div className="t14-row">
          {steps.map((s, i) => (
            <div key={i} className={`t14-item ${i < activeCount ? 'active' : ''}`}>
              <div className="t14-marker">
                <span className="t14-icon">{s.icon}</span>
              </div>
              <span className="t14-chip">{s.day}</span>
              <div className="t14-title">{s.title}</div>
              <div className="t14-desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{display:'flex', justifyContent:'center', marginTop:60}}>
        <a href="#contact" className="cta-primary" style={{textDecoration:'none'}}>
          Prendre rendez-vous
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 12L12 2M12 2H4M12 2V10" stroke="currentColor" strokeWidth="1.5"/>
          </svg>
        </a>
      </div>
    </section>
  );
}

window.Timeline14 = Timeline14;