// Kits — narrative section about experimental kits and national reach.
// Placed between Impact and Gallery on the main index page.
// Compact, not a full page-height section — a narrative bridge.

function Kits() {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const h = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener("resize", h);
    return () => window.removeEventListener("resize", h);
  }, []);

  const pillars = [
    {
      icon: "◈",
      title: "Kit enviado",
      desc: "Materiais completos e guia pedagógico embalados e enviados para qualquer escola do Brasil.",
      color: "cyan", rgb: "0,229,255",
    },
    {
      icon: "◇",
      title: "Experimento em sala",
      desc: "O aluno conduz o experimento com as próprias mãos. A física acontece onde nunca existiu laboratório.",
      color: "electric", rgb: "45,111,247",
    },
    {
      icon: "△",
      title: "Sem barreiras",
      desc: "Distância não é mais obstáculo. A ciência experimental chega a toda escola que a quiser.",
      color: "violet", rgb: "107,63,255",
    },
  ];

  return (
    <section className="section-tight" style={{
      position: "relative",
      background: "linear-gradient(180deg, var(--void) 0%, #060912 100%)",
      overflow: "hidden",
    }}>
      {/* Warm amber glow blob — left side, representing kits radiating out */}
      <div style={{
        position: "absolute", left: "-8%", top: "20%",
        width: 480, height: 480, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(255,179,71,0.08), transparent 65%)",
        filter: "blur(48px)", pointerEvents: "none",
      }} />
      <div style={{
        position: "absolute", right: "-4%", bottom: "0%",
        width: 360, height: 360, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(45,111,247,0.07), transparent 65%)",
        filter: "blur(48px)", pointerEvents: "none",
      }} />

      {/* top accent line */}
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0, height: 1,
        background: "linear-gradient(90deg, transparent 0%, rgba(255,179,71,0.22) 30%, rgba(45,111,247,0.14) 70%, transparent 100%)",
      }} />

      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="overline-row" style={{ color: "var(--plasma-amber)" }}>/ 04.5 — Kits Experimentais</div>

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr",
          gap: isMobile ? 40 : 72,
          alignItems: "center",
          marginBottom: isMobile ? 40 : 56,
        }}>
          {/* Left: big statement */}
          <div>
            <h2 style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(28px, 4vw, 56px)",
              fontWeight: 400, lineHeight: 1.06, letterSpacing: "-0.025em",
              color: "var(--fg-1)", margin: 0,
            }}>
              A física além{" "}
              <span style={{
                background: "linear-gradient(135deg, #FFB347 0%, #FF6B35 40%, #FF2D9D 100%)",
                WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
              }}>das fronteiras físicas</span>.
            </h2>

            <p style={{
              fontSize: isMobile ? 15 : 17, lineHeight: 1.7, color: "var(--fg-2)",
              marginTop: 24, maxWidth: 540,
            }}>
              O projeto não se limita mais a onde a equipe pode ir. Estamos desenvolvendo
              kits experimentais que chegam pelo correio a qualquer escola, comunidade ou
              instituição do país.
            </p>
            <p style={{
              fontSize: isMobile ? 15 : 17, lineHeight: 1.7, color: "var(--fg-2)",
              marginTop: 16, maxWidth: 540,
            }}>
              De Goiânia para o Brasil — ciência experimental sem barreiras geográficas,
              na mão de quem nunca teve laboratório.
            </p>

            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="./levar.html#kits" className="btn btn-primary"
                style={isMobile ? { width: "100%", justifyContent: "center" } : {}}>
                Saiba mais sobre os kits <span className="arrow">→</span>
              </a>
              <a href="./levar.html#acao" className="btn btn-secondary"
                style={isMobile ? { width: "100%", justifyContent: "center" } : {}}>
                Solicitar para minha escola
              </a>
            </div>
          </div>

          {/* Right: mini visual with signal-send metaphor */}
          <KitSignalVisual isMobile={isMobile} />
        </div>

        {/* Three pillars */}
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
          gap: isMobile ? 12 : 20,
        }}>
          {pillars.map((p) => {
            const accent = { cyan: "#00E5FF", electric: "#2D6FF7", violet: "#6B3FFF" }[p.color];
            return (
              <div key={p.title} style={{
                background: "var(--deep)", border: "1px solid var(--line)",
                borderRadius: "var(--r-lg)", padding: "24px 22px",
                position: "relative", overflow: "hidden",
                boxShadow: "0 1px 0 rgba(255,255,255,0.04) inset",
              }}>
                <div style={{
                  position: "absolute", top: 0, left: 20, right: 20, height: 1,
                  background: `linear-gradient(90deg, transparent, rgba(${p.rgb},0.30), transparent)`,
                }} />
                <div style={{ fontSize: 22, color: accent, marginBottom: 14 }}>{p.icon}</div>
                <div style={{
                  fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 500,
                  color: "var(--fg-1)", marginBottom: 8, letterSpacing: "-0.01em",
                }}>{p.title}</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--fg-3)" }}>{p.desc}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// Mini animated visual: a glowing source dot with pulses radiating outward,
// surrounded by small target dots representing schools receiving kits.
function KitSignalVisual({ isMobile }) {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    let w = 0, h = 0, raf = null;
    let paused = document.hidden;

    const pulses = [];
    let nextPulse = 800;

    // Static target dots spread around the source
    const TARGETS = [
      { ax: 0.18, ay: 0.20 },
      { ax: 0.82, ay: 0.15 },
      { ax: 0.88, ay: 0.60 },
      { ax: 0.70, ay: 0.85 },
      { ax: 0.22, ay: 0.78 },
      { ax: 0.10, ay: 0.50 },
    ];

    function resize() {
      const rect = canvas.getBoundingClientRect();
      w = rect.width; h = rect.height;
      canvas.width  = w * dpr;
      canvas.height = h * dpr;
      ctx.scale(dpr, dpr);
    }
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);

    function checkPaused() {
      const should = document.hidden;
      if (!paused && should) paused = true;
      else if (paused && !should) { paused = false; if (!raf) tick(); }
    }
    document.addEventListener("visibilitychange", checkPaused);

    function tick(t) {
      if (paused) { raf = null; return; }

      const dt = 16;
      nextPulse -= dt;
      if (nextPulse <= 0) {
        pulses.push({ t: 0, dur: 1800 });
        nextPulse = 1600 + Math.random() * 800;
      }

      ctx.clearRect(0, 0, w, h);

      // Background
      ctx.fillStyle = "rgba(4,6,12,0)"; // transparent — inherits section bg
      ctx.fillRect(0, 0, w, h);

      const cx = w * 0.5, cy = h * 0.48;

      // Pulses
      for (let i = pulses.length - 1; i >= 0; i--) {
        pulses[i].t += dt;
        if (pulses[i].t >= pulses[i].dur) { pulses.splice(i, 1); continue; }
        const prog = pulses[i].t / pulses[i].dur;
        const radius = prog * Math.max(w, h) * 0.55;
        const alpha = Math.max(0, (1 - prog * 1.4) * 0.18);
        ctx.strokeStyle = `rgba(255,179,71,${alpha.toFixed(3)})`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, Math.PI * 2);
        ctx.stroke();
      }

      // Target school dots
      const time = t || performance.now();
      TARGETS.forEach((tg, ti) => {
        const px = tg.ax * w, py = tg.ay * h;
        const pulse = (Math.sin(time * 0.001 + ti * 1.1) * 0.5 + 0.5);
        const alpha = 0.28 + pulse * 0.28;

        ctx.fillStyle = `rgba(45,111,247,${alpha.toFixed(3)})`;
        ctx.shadowColor = "rgba(45,111,247,0.6)";
        ctx.shadowBlur = 8;
        ctx.beginPath();
        ctx.arc(px, py, 4, 0, Math.PI * 2);
        ctx.fill();
        ctx.shadowBlur = 0;

        // Faint connection line to center
        ctx.strokeStyle = `rgba(45,111,247,${(0.04 + pulse * 0.05).toFixed(3)})`;
        ctx.lineWidth = 0.6;
        ctx.setLineDash([3, 8]);
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(px, py);
        ctx.stroke();
        ctx.setLineDash([]);
      });

      // Source node — Goiânia
      const sgr = ctx.createRadialGradient(cx, cy, 0, cx, cy, 40);
      sgr.addColorStop(0,   "rgba(255,179,71,0.35)");
      sgr.addColorStop(0.5, "rgba(255,120,40,0.10)");
      sgr.addColorStop(1,   "rgba(255,100,30,0)");
      ctx.fillStyle = sgr;
      ctx.beginPath();
      ctx.arc(cx, cy, 40, 0, Math.PI * 2);
      ctx.fill();

      ctx.fillStyle = "#FFB347";
      ctx.shadowColor = "rgba(255,179,71,0.9)";
      ctx.shadowBlur = 16;
      ctx.beginPath();
      ctx.arc(cx, cy, 6, 0, Math.PI * 2);
      ctx.fill();
      ctx.shadowBlur = 0;

      raf = requestAnimationFrame(tick);
    }
    tick(0);

    return () => {
      if (raf) cancelAnimationFrame(raf);
      ro.disconnect();
      document.removeEventListener("visibilitychange", checkPaused);
    };
  }, []);

  const h = isMobile ? 200 : 260;
  return (
    <div style={{
      position: "relative",
      background: "var(--deep)", border: "1px solid var(--line)",
      borderRadius: "var(--r-xl)", overflow: "hidden",
      height: h,
    }}>
      <div style={{
        position: "absolute", top: 0, left: 24, right: 24, height: 1,
        background: "linear-gradient(90deg, transparent, rgba(255,179,71,0.30), transparent)",
      }} />
      <canvas ref={ref} style={{ width: "100%", height: "100%", display: "block" }} />
      <div style={{
        position: "absolute", bottom: 16, left: 0, right: 0, textAlign: "center",
        fontFamily: "var(--font-mono)", fontSize: 9,
        color: "var(--fg-4)", letterSpacing: "0.22em", textTransform: "uppercase",
      }}>Kits a partir de Goiânia → Brasil</div>
    </div>
  );
}

window.Kits = Kits;