// Impact — stat blocks + Brazil presence map.
function Impact() {
  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 stats = [
    { value: "+250h", label: "Horas em sala", color: "cyan", rgb: "0,229,255" },
    { value: "200+",  label: "Alunos impactados", color: "magenta", rgb: "255,45,157" },
    { value: "6+",    label: "Experimentos ativos", color: "violet", rgb: "107,63,255" },
    { value: "3+",    label: "Cidades atendidas", color: "cyan", rgb: "0,229,255" },
  ];

  return (
    <section id="impacto" className="section" style={{
      position: "relative",
      background: "linear-gradient(180deg, #060912 0%, var(--void) 100%)",
    }}>
      {/* top accent line */}
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0, height: 1,
        background: "linear-gradient(90deg, transparent 0%, rgba(0,229,255,0.18) 30%, rgba(107,63,255,0.18) 70%, transparent 100%)",
      }} />

      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="overline-row">/ 04 — Impacto</div>

        <div style={{
          display: "flex", justifyContent: "space-between",
          alignItems: "end", flexWrap: "wrap", gap: 24, marginBottom: isMobile ? 36 : 64,
        }}>
          <h2 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(28px, 4.5vw, 64px)",
            fontWeight: 400, lineHeight: 1.05, letterSpacing: "-0.025em",
            color: "var(--fg-1)", margin: 0, maxWidth: 640,
          }}>
            Ciência que{" "}
            <span style={{
              background: "linear-gradient(135deg, #00E5FF, #6B3FFF)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
            }}>chega onde precisa</span>.
          </h2>
          {!isMobile && (
            <p style={{
              fontSize: 15, lineHeight: 1.65, color: "var(--fg-3)",
              maxWidth: 380, margin: 0,
            }}>
              Cada visita é voluntária. Cada real arrecadado vira material.
              A física sai do papel e entra na mão de quem nunca teve laboratório.
            </p>
          )}
        </div>

        {/* stat grid — 4-col desktop, 2-col mobile */}
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)",
          gap: isMobile ? 12 : 20,
          marginBottom: isMobile ? 28 : 64,
        }}>
          {stats.map((s, i) => (
            <StatBlock key={i} {...s} />
          ))}
        </div>

        {/* map + sidebar — stacked on mobile */}
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr",
          gap: isMobile ? 16 : 40,
          alignItems: "stretch",
        }}>
          <CityList isMobile={isMobile} />
          <ImpactMap />
        </div>
      </div>
    </section>
  );
}

function StatBlock({ value, label, color, rgb }) {
  const [hover, setHover] = React.useState(false);
  const accent = { cyan: "#00E5FF", magenta: "#FF2D9D", violet: "#6B3FFF" }[color];

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "var(--deep)",
        border: `1px solid ${hover ? `rgba(${rgb},0.45)` : "var(--line)"}`,
        borderRadius: "var(--r-lg)",
        padding: "24px 20px",
        position: "relative", overflow: "hidden",
        boxShadow: hover
          ? `0 1px 0 rgba(255,255,255,0.06) inset, 0 0 36px rgba(${rgb},0.14)`
          : "0 1px 0 rgba(255,255,255,0.04) inset",
        transition: "all 0.4s var(--ease-out)",
      }}
    >
      <div style={{
        position: "absolute", top: 0, left: 16, right: 16, height: 1,
        background: `linear-gradient(90deg, transparent, rgba(${rgb},${hover ? 0.7 : 0.3}), transparent)`,
        transition: "all 0.4s var(--ease-out)",
      }} />

      <div style={{
        fontFamily: "var(--font-display)",
        fontSize: "clamp(28px, 3.5vw, 52px)",
        fontWeight: 300, letterSpacing: "-0.03em", lineHeight: 1,
        color: accent,
        textShadow: hover ? `0 0 32px rgba(${rgb},0.6)` : "none",
        transition: "text-shadow 0.4s var(--ease-out)",
      }}>{value}</div>

      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--fg-3)", letterSpacing: "0.18em",
        textTransform: "uppercase", marginTop: 10,
        lineHeight: 1.4,
      }}>{label}</div>
    </div>
  );
}

const CITIES = [
  { name: "Goiânia", note: "base do projeto", primary: true, x: 44, y: 62 },
  { name: "Aparecida de Goiânia", note: "comunidade Alto da Boa Vista", x: 47, y: 67 },
  { name: "Anápolis", note: "escola parceira", x: 52, y: 51 },
];

function CityList({ isMobile }) {
  return (
    <div style={{
      background: "var(--deep)",
      border: "1px solid var(--line)",
      borderRadius: "var(--r-lg)",
      padding: isMobile ? "20px 20px 18px" : "28px 28px 24px",
      position: "relative", overflow: "hidden",
      boxShadow: "0 1px 0 rgba(255,255,255,0.04) inset",
    }}>
      <div style={{
        position: "absolute", top: 0, left: 24, right: 24, height: 1,
        background: "linear-gradient(90deg, transparent, rgba(0,229,255,0.28), transparent)",
      }} />

      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 11,
        color: "var(--plasma-cyan)", letterSpacing: "0.22em",
        textTransform: "uppercase", marginBottom: 20,
      }}>Onde chegamos</div>

      <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
        {CITIES.map((c, i) => (
          <div key={c.name} style={{
            display: "grid", gridTemplateColumns: "36px 1fr",
            gap: 14, paddingTop: 14, paddingBottom: 14,
            borderTop: i === 0 ? "none" : "1px solid var(--line)",
            alignItems: "start",
          }}>
            <div style={{ paddingTop: 4 }}>
              <div style={{
                width: 8, height: 8, borderRadius: "50%",
                background: c.primary ? "var(--plasma-cyan)" : "var(--fg-3)",
                boxShadow: c.primary ? "0 0 12px rgba(0,229,255,0.7)" : "none",
                marginLeft: 4,
              }} />
            </div>
            <div>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 15,
                fontWeight: 500, color: c.primary ? "var(--fg-1)" : "var(--fg-2)",
                letterSpacing: "-0.01em",
              }}>{c.name}</div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10,
                color: "var(--fg-3)", letterSpacing: "0.1em",
                textTransform: "uppercase", marginTop: 3,
              }}>{c.note}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--line)",
        fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--fg-3)", letterSpacing: "0.12em", textTransform: "uppercase",
        lineHeight: 1.7,
      }}>
        Kits experimentais chegando a onde<br/>a equipe ainda não chegou →
        <div style={{ marginTop: 8, color: "var(--fg-4)" }}>
          Mais cidades confirmadas para 2026.
        </div>
      </div>
    </div>
  );
}

function ImpactMap() {
  return (
    <div style={{
      background: "var(--deep)",
      border: "1px solid var(--line)",
      borderRadius: "var(--r-lg)",
      overflow: "hidden",
      position: "relative",
      minHeight: 280,
      boxShadow: "0 1px 0 rgba(255,255,255,0.04) inset",
    }}>
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0, height: 1,
        background: "linear-gradient(90deg, transparent, rgba(0,229,255,0.22), rgba(107,63,255,0.22), transparent)",
      }} />

      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 11,
        color: "var(--fg-3)", letterSpacing: "0.22em",
        textTransform: "uppercase", padding: "18px 24px 0",
        position: "relative", zIndex: 2,
      }}>Brasil — Rede de Impacto</div>

      {/* Brazil constellation canvas */}
      <div style={{ position: "relative", width: "100%", height: 300 }}>
        <BrazilMapCanvas />
      </div>
    </div>
  );
}

window.Impact = Impact;