/* v2 Bureaucracy — "El problema": 6 eines disperses → un sol expedient */

const V2_TOOLS = [
  { id: "01", t: "Plantilla PDF del CPF",     sub: "Redacció de l'IOF · procés analògic" },
  { id: "02", t: "Word",                      sub: "Iteració amb administració · ~1 any" },
  { id: "03", t: "Excel",                     sub: "Inventari forestal · cada cop diferent" },
  { id: "04", t: "SIDER",                     sub: "Tramitació d'ajuts · sense integració" },
  { id: "05", t: "Email i trucades",          sub: "Seguiment d'actuacions" },
  { id: "06", t: "Cap eina",                  sub: "Historial de finques · buit total" },
];

const V2BureaucracyFlow = () => {
  const [phase, setPhase] = React.useState(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          setTimeout(() => setPhase(1), 400);
          setTimeout(() => setPhase(2), 1800);
          io.disconnect();
        }
      }
    }, { threshold: 0.35 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (phase < 2) return;
    const t = setTimeout(() => {
      setPhase(0);
      setTimeout(() => setPhase(1), 800);
      setTimeout(() => setPhase(2), 2200);
    }, 4500);
    return () => clearTimeout(t);
  }, [phase]);

  return (
    <div className="v2-bureau" ref={ref}>
      <div className="v2-bureau__left">
        <div className="v2-bureau__label">
          <span className="v2-bureau__label-num">6</span>
          <span className="v2-bureau__label-txt">eines disperses<br/>per a una sola finca</span>
        </div>
        <div className="v2-bureau__papers">
          {V2_TOOLS.map((t, i) => {
            const angle = (i % 2 === 0 ? -1 : 1) * (4 + (i % 5));
            const offsetX = (i % 3 - 1) * 6;
            const offsetY = i * 22;
            const flying = phase >= 1;
            return (
              <div key={t.id} className="v2-bureau__paper" style={{
                transform: flying
                  ? `translate(${280 + i*4}px, ${-offsetY + 110}px) rotate(0deg) scale(0.4)`
                  : `translate(${offsetX}px, ${offsetY}px) rotate(${angle}deg)`,
                opacity: flying ? 0 : 1,
                transitionDelay: flying ? `${i * 40}ms` : `${i * 20}ms`,
                zIndex: 20 - i,
              }}>
                <div className="v2-bureau__paper-head">
                  <span className="v2-bureau__paper-seal" />
                  <span className="v2-bureau__paper-id">EINA · {t.id}</span>
                </div>
                <div className="v2-bureau__paper-ttl">{t.t}</div>
                <div className="v2-bureau__paper-lines">
                  <span style={{ width: "82%" }} />
                  <span style={{ width: "60%" }} />
                  <span style={{ width: "74%" }} />
                </div>
                <div className="v2-bureau__paper-foot">
                  <span className="v2-bureau__paper-stamp">{t.sub}</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <svg className="v2-bureau__lines" viewBox="0 0 200 400" preserveAspectRatio="none">
        {Array.from({ length: 8 }).map((_, i) => {
          const y1 = 40 + i * 40;
          return (
            <path key={i}
              d={`M 0 ${y1} C 80 ${y1}, 120 200, 200 200`}
              stroke="#B8E89B" strokeWidth="0.8" fill="none"
              opacity={phase >= 1 ? 0.65 : 0}
              strokeDasharray="400"
              strokeDashoffset={phase >= 1 ? 0 : 400}
              style={{ transition: `stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1) ${i*60}ms, opacity 400ms ease ${i*60}ms`, filter: "drop-shadow(0 0 4px rgba(184,232,155,0.4))" }}
            />
          );
        })}
      </svg>

      <div className="v2-bureau__right">
        <div className={`v2-bureau__exp ${phase >= 2 ? "is-active" : ""}`}>
          <div className="v2-bureau__exp-head">
            <div>
              <div className="v2-bureau__exp-eyebrow">Fitxa de finca · ForestOS</div>
              <div className="v2-bureau__exp-title">Mas Castanyer · Bages</div>
            </div>
            <span className={`v2-bureau__exp-pulse ${phase >= 2 ? "on" : ""}`} />
          </div>
          <div className="v2-bureau__exp-grid">
            {[
              ["IOF",                  "Vigent fins 2032"],
              ["Actuacions executades","14 (2010–2025)"],
              ["Inventari dasomètric", "AB 24,1 · ORGEST"],
              ["Costos acumulats",     "€ per finca i any"],
              ["Documents",            "Memòries, mapes, fotos"],
              ["Pròxim SIDER",         "ARP/836/2026"],
            ].map((d, i) => (
              <div key={i} className="v2-bureau__exp-cell" style={{ transitionDelay: `${800 + i * 80}ms` }}>
                <span className="v2-bureau__exp-lbl">{d[0]}</span>
                <span className="v2-bureau__exp-val">{d[1]}</span>
                <svg className="v2-bureau__exp-tick" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5L20 6"/></svg>
              </div>
            ))}
          </div>
          <div className="v2-bureau__exp-foot">
            <span className="v2-bureau__exp-one">01</span>
            <div>
              <div className="v2-bureau__exp-cap">una sola fitxa</div>
              <div className="v2-bureau__exp-meta">tota la vida de la finca</div>
            </div>
            <span className="v2-bureau__exp-action">Obrir fitxa
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

const V2Bureaucracy = () => (
  <section id="problema" className="v2-section">
    <div className="v2-container">
      <div className="reveal" style={{ maxWidth: 920, marginBottom: 56 }}>
        <V2Eyebrow>El flux actual</V2Eyebrow>
        <h2>Pla en Word. Inventari en Excel.<br/>Tramitació a SIDER. <em>Tu al mig.</em></h2>
        <p className="v2-section__lede">
          Avui, redactar un IOF passa per la plantilla PDF del CPF i un Word iteratiu
          durant gairebé un any. L'inventari viu a Excel, els ajuts es presenten a
          SIDER sense connexió amb cap eina de gestió, i el seguiment d'actuacions
          es fa per email, telèfon i carpetes de documents repetits.
        </p>
        <p className="v2-section__lede" style={{ marginTop: 16, color: "var(--v2-accent)" }}>
          <strong>Amb ForestOS:</strong> obre la fitxa d'una finca i veus tota la seva
          vida — instruments vigents, actuacions executades, costos i documents.
        </p>
      </div>

      <V2BureaucracyFlow />
    </div>
  </section>
);

window.V2Bureaucracy = V2Bureaucracy;