// Roadmap with scroll-driven progress fill
const { useEffect, useRef, useState } = React;

const STAGES = [
  {
    n: '01',
    title: 'Adaptation',
    reuse: '+ MATERIAL REUSE',
    items: ['Product understanding', 'Business understanding', 'Material review', 'Market analysis', 'Roadmap'],
  },
  {
    n: '02',
    title: 'Access',
    reuse: '+ LOCAL TRUST',
    items: ['Customer profile', 'Influence map', 'Focus lists', 'Insight gathering', 'Warm entry routes'],
  },
  {
    n: '03',
    title: 'Opportunities',
    reuse: '+ DEMAND VALIDATION',
    items: ['Joint presales', 'Customer discovery with decision makers', 'Qualified opportunities', 'Pilot scenarios', 'Go / no-go decision'],
  },
  {
    n: '04',
    title: 'Scale',
    reuse: '+ BUSINESS REUSE',
    items: ['Team and processes', 'Metrics system', 'Brand promotion', 'Partnerships / communities', 'References'],
  },
];

function Roadmap() {
  const ref = useRef(null);
  const [active, setActive] = useState(-1);
  const [hoverProgress, setHoverProgress] = useState(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // start when top hits 70% of viewport, end when bottom passes 30%
      const total = r.height + vh * 0.6;
      const passed = vh * 0.7 - r.top;
      const p = Math.max(0, Math.min(1, passed / total));
      const stage = Math.min(3, Math.floor(p * 4.2));
      setActive(stage);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const handleMouseMove = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const p = Math.max(0, Math.min(100, (x / rect.width) * 100));
    setHoverProgress(p);
  };

  const handleMouseLeave = () => {
    setHoverProgress(null);
  };

  const scrollFill = active < 0 ? 0 : ((active + 1) / 4) * 100;
  const fill = hoverProgress !== null ? hoverProgress : scrollFill;

  // Derive which stages are active based on fill
  // Stage 0 is active if fill > 0
  // Stage 1 is active if fill > 25%
  // Stage 2 is active if fill > 50%
  // Stage 3 is active if fill > 75%
  const currentActive = Math.floor((fill / 100) * 4);

  return (
    <div className="roadmap" ref={ref}>
      <div 
        className="roadmap-track" 
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
      >
        <div className="roadmap-line">
          <div className="fill" style={{ '--p': `${fill}%` }} />
        </div>
        {STAGES.map((s, i) => (
          <div key={s.n} className={`stage ${i <= currentActive ? 'is-active' : ''}`}>
            <div className="dot" />
            <div className="num">STAGE {s.n}</div>
            <h4>{s.title}</h4>
            <div className="reuse">{s.reuse}</div>
            <ul>
              {s.items.map((it) => <li key={it}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

window.Roadmap = Roadmap;