/* Vertical timeline that drives the demo on the right */
const { useEffect, useState } = React;

const STEPS = [
{ n: "01", title: "Seleziona il bando", body: "Esplora tutti i bandi attivi in Italia. Filtri per regione, scadenza e durata. Per ogni bando vedi requisiti completi, criteri di valutazione e base d'asta." },
{ n: "02", title: "Carica i tuoi dati", body: "Documenti, visure, bilanci, progetto tecnico. La piattaforma raccoglie tutto in un'unica pratica digitale, con firma e marca temporale." },
{ n: "03", title: "Compila la tua proposta", body: "Offerta Amministrativa, Tecnica ed Economica con il PEF precompilato a partire dai tuoi dati. L'AI ti guida in ogni campo." },
{ n: "04", title: "Valutazione AI immediata", body: "L'algoritmo stima il punteggio per ogni criterio del bando e suggerisce dove e come guadagnare punti per massimizzare le probabilità di assegnazione." },
{ n: "05", title: "Controllo ed esportazione", body: "Rilevamento automatico delle incongruenze tra i documenti. La piattaforma predispone il pacchetto completo della documentazione, pronto per essere esportato e protocollato al Comune." }];


window.HOW_IT_WORKS_STEPS = STEPS;

window.Timeline = function Timeline({ activeStep = 0, onStepChange }) {
  // Vertical fill: extends to the END of the active step
  const fillPct = (activeStep + 1) / STEPS.length * 100;
  const containerRef = React.useRef(null);
  const [loopBox, setLoopBox] = useState({ top: 0, height: 0 });

  useEffect(() => {
    const update = () => {
      const root = containerRef.current;
      if (!root) return;
      const nodes = root.querySelectorAll('.tl-v-node');
      if (nodes.length < 4) return;
      const rootRect = root.getBoundingClientRect();
      const n3 = nodes[2].getBoundingClientRect();
      const n4 = nodes[3].getBoundingClientRect();
      const n3Mid = (n3.top + n3.bottom) / 2 - rootRect.top;
      const n4Mid = (n4.top + n4.bottom) / 2 - rootRect.top;
      setLoopBox({ top: n3Mid, height: n4Mid - n3Mid });
    };
    update();
    const ro = new ResizeObserver(update);
    if (containerRef.current) ro.observe(containerRef.current);
    window.addEventListener('resize', update);
    return () => { ro.disconnect(); window.removeEventListener('resize', update); };
  }, [activeStep]);

  return (
    <div className="timeline-v" ref={containerRef}>
      <div className="timeline-v-rail">
        <div className="timeline-v-fill" style={{ height: `${fillPct}%` }}></div>
      </div>

      {/* Iteration loop: arrow from step 4 back to step 3 */}
      <div className="tl-loop" aria-hidden="true" style={{ top: loopBox.top, height: loopBox.height }}>
        <svg viewBox="0 0 60 200" preserveAspectRatio="none" width="60" height="100%">
          <defs>
            <marker id="tl-arr" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
              <path d="M0,0 L8,5 L0,10 z" fill="#f5a500" />
            </marker>
          </defs>
          <path
            d="M 50 195 C 5 195, 5 5, 50 5"
            fill="none"
            stroke="#f5a500"
            strokeWidth="2"
            markerEnd="url(#tl-arr)" />
        </svg>
      </div>

      <ul className="timeline-v-list">
        {STEPS.map((s, i) => {
          const state = i === activeStep ? "active" : i < activeStep ? "done" : "";
          return (
            <li
              key={i}
              className={"tl-row " + state}
              onClick={() => onStepChange && onStepChange(i)} style={{ padding: "14px 16px 14px 0px" }}>
              
              <span className={"tl-v-node " + state}>
                {i <= activeStep ? "✓" : i + 1}
              </span>
              <div className="tl-v-body">
                <div className="tl-step">FASE {s.n}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </li>);

        })}
      </ul>
    </div>);

};