/* global React */

function Pipeline() {
  const stageRef = React.useRef(null);
  const sp = (window.useElementScrollProgress || (() => 0))(stageRef);
  const p = Math.max(0, Math.min(1, (sp - 0.2) / 0.7));
  const stage = Math.min(4, Math.floor(p * 5));

  const modules = [
    { name: "Blueprint",  sub: "Identidade", desc: "ADN visual codificado" },
    { name: "Visual",     sub: "Conteúdo",   desc: "Assets contínuos" },
    { name: "Social",     sub: "Presença",   desc: "Calendário + posts" },
    { name: "Production", sub: "Campanhas",  desc: "Filmes acabados" },
    { name: "Informed",   sub: "Inteligência", desc: "Relatório curado" }
  ];

  return (
    <Section id="system" tone="paper">
      <SectionHead
        num="03 / Sistema"
        title="O sistema <em>Be</em>, em cinco camadas."
        sub="Identidade → Conteúdo → Presença → Campanhas → Inteligência. Tudo conectado pelo <strong style='color:var(--ink)'>Be Connected</strong>. Powered by Boldy."
      />

      <div ref={stageRef} style={{ position: "relative", padding: "24px 0 16px" }}>
        <div aria-hidden style={{ position: "absolute", left: "5%", right: "5%", top: 28, height: 1, background: "var(--rule-strong)" }} />
        <div aria-hidden style={{ position: "absolute", left: "5%", top: 28, width: `${p * 90}%`, height: 1, background: "var(--coral)" }} />
        <div aria-hidden style={{
          position: "absolute",
          left: `calc(5% + ${p * 90}%)`,
          top: 22,
          width: 12, height: 12,
          borderRadius: "50%",
          background: "var(--coral)",
          transform: "translateX(-50%)",
          boxShadow: "0 0 0 6px rgba(255,79,43,0.16)"
        }} />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16, position: "relative", marginTop: 48 }} className="pipe-grid">
          {modules.map((m, i) => {
            const active = stage === i;
            return (
              <a key={i} href={`#${m.name.toLowerCase()}`} style={{ textDecoration: "none", color: "inherit" }}>
                <div style={{
                  padding: 20,
                  borderRadius: 12,
                  border: active ? "1px solid var(--coral)" : "1px solid var(--rule)",
                  background: active ? "var(--cream)" : "transparent",
                  minHeight: 180,
                  transition: "all 300ms var(--easing)"
                }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
                    <BeTag name={m.name} />
                    <span className="mono" style={{ fontSize: 9 }}>0{i + 1}</span>
                  </div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 19, lineHeight: 1.1, letterSpacing: "-0.015em", marginBottom: 6, fontWeight: 500 }}>
                    {m.desc}
                  </div>
                  <span className="mono">{m.sub}</span>
                </div>
              </a>
            );
          })}
        </div>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 32, paddingTop: 20, borderTop: "1px solid var(--rule)", alignItems: "center" }}>
        <PoweredByBoldy />
        <span className="mono">Plataforma · Be Connected</span>
      </div>

      <style>{`
        @media (max-width: 960px) { .pipe-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px) { .pipe-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </Section>
  );
}

window.Pipeline = Pipeline;