/* v2 Workflow — Cicle de vida real d'un pla de gestió forestal */

const V2_STEPS = [
  { id: "01", phase: "REDACCIÓ",     title: "Redacció del pla",         copy: "Procés iteratiu entre l'enginyer i l'administració. Plantilla CPF i Word — ~1 any de feina.",                  chip: "~1 ANY",         chipColor: "var(--v2-cyan)" },
  { id: "02", phase: "VIGÈNCIA",     title: "15-20 anys actius",        copy: "Un cop aprovat, el pla viu entre 15 i 20 anys, amb actuacions planificades any per any.",                       chip: "15-20 ANYS",     chipColor: "var(--v2-accent)" },
  { id: "03", phase: "ACTUACIÓ",     title: "Convocatòria anual SIDER", copy: "Cada any l'enginyer presenta memòria i pressupost a SIDER per a l'actuació anual.",                              chip: "CADA ANY",       chipColor: "var(--v2-accent)" },
  { id: "04", phase: "EXECUCIÓ",     title: "Comprovació i cobrament",  copy: "Tècnic del CPF verifica l'execució a camp. Un cop conforme, el propietari cobra la subvenció.",                  chip: "CPF · CAMP",     chipColor: "var(--v2-amber)" },
];

const V2WorkflowFlow = () => {
  const [progress, setProgress] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          let p = 0;
          const tick = () => {
            p += 0.012;
            if (p > 1) p = 1;
            setProgress(p);
            if (p < 1) requestAnimationFrame(tick);
          };
          tick();
          io.disconnect();
        }
      }
    }, { threshold: 0.25 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <div className="v2-flow" ref={ref}>
      <div className="v2-flow__rail">
        <div className="v2-flow__rail-fill" style={{ width: `${progress * 100}%` }} />
        <div className="v2-flow__rail-pulse" style={{ left: `${progress * 100}%`, opacity: progress > 0 && progress < 1 ? 1 : 0 }} />
      </div>
      <div className="v2-flow__steps">
        {V2_STEPS.map((s, i) => {
          const sp = Math.max(0, Math.min(1, progress * V2_STEPS.length - i));
          const active = sp > 0.1;
          const done = sp >= 1;
          return (
            <div key={s.id} className={`v2-flow-step ${active ? "is-active" : ""} ${done ? "is-done" : ""}`}>
              <div className="v2-flow-step__node">
                <span className="v2-flow-step__node-inner">
                  {done ? (
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5L20 6"/></svg>
                  ) : (
                    <span style={{ fontFamily: "var(--v2-font-mono)", fontSize: 13, fontWeight: 600 }}>{s.id}</span>
                  )}
                </span>
                <span className="v2-flow-step__phase">{s.phase}</span>
              </div>
              <div className="v2-flow-step__body">
                <div className="v2-flow-step__head">
                  <span className="v2-flow-step__id">FASE {s.id}</span>
                  <span className="v2-flow-step__chip" style={{ color: s.chipColor, borderColor: s.chipColor }}>
                    <span className="v2-flow-step__chip-dot" style={{ background: s.chipColor }} />
                    {s.chip}
                  </span>
                </div>
                <h3 className="v2-flow-step__title">{s.title}</h3>
                <p className="v2-flow-step__copy">{s.copy}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const V2Workflow = () => (
  <section id="cicle" className="v2-section">
    <div className="v2-container">
      <div className="reveal" style={{ maxWidth: 900, marginBottom: 56 }}>
        <V2Eyebrow>Cicle de vida d'un pla</V2Eyebrow>
        <h2>Un pla de gestió no és <em>un projecte</em>.<br/>És una conversa de vint anys.</h2>
        <p className="v2-section__lede">
          Redactar un IOF o un PTGMF és el primer any. Després vénen 15 a 20 anys
          d'actuacions planificades, convocatòries d'ajuts, comprovacions de camp i
          cobraments. ForestOS acompanya el pla des de la redacció fins a l'última
          subvenció cobrada.
        </p>
      </div>
      <V2WorkflowFlow />
    </div>
  </section>
);

window.V2Workflow = V2Workflow;