// About — visual storytelling, not text dump.
function About() {
  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);
  }, []);

  return (
    <section id="projeto" className="section" style={{ position: "relative" }}>
      <div className="container">
        <div className="overline-row">/ 02 — O Projeto</div>

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr",
          gap: isMobile ? 40 : 80,
          alignItems: "start",
        }}>
          <div>
            <h2 style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(32px, 4.5vw, 64px)",
              fontWeight: 400, lineHeight: 1.05,
              letterSpacing: "-0.025em",
              color: "var(--fg-1)", margin: 0,
            }}>
              Nascemos na <span style={{ color: "var(--plasma-cyan)" }}>IYPT 2024</span> — e voltamos para colocar a ciência onde ela falta.
            </h2>

            <p style={{
              fontSize: isMobile ? 16 : 17, lineHeight: 1.7, color: "var(--fg-2)",
              marginTop: 28, maxWidth: 580,
            }}>
              O Física Além do Papel surgiu da união de estudantes de olimpíadas científicas, conectados pela
              experiência em uma competição nacional de física experimental — a IYPT 2024.
              Foi ali, construindo e testando com as próprias mãos, que descobrimos o poder da prática em
              tornar a ciência algo vivo e próximo.
            </p>
            <p style={{
              fontSize: isMobile ? 16 : 17, lineHeight: 1.7, color: "var(--fg-2)",
              marginTop: 20, maxWidth: 580,
            }}>
              De volta às nossas escolas em Goiás, vimos uma oportunidade: levar essa mesma vivência a
              outros jovens. Na comunidade Alto da Boa Vista, ouvimos de muitos alunos que "não gostavam
              de ciência". Quando perguntamos se queriam parar os experimentos para receber doces ou
              continuar com mais três — todas as crianças escolheram <em style={{ color: "var(--fg-1)", fontStyle: "normal" }}>mais três</em>.
              É por isso que existimos.
            </p>
          </div>

          <ManifestoPanel />
        </div>
      </div>
    </section>
  );
}

function ManifestoPanel() {
  const pillars = [
    { num: "01", t: "Paixão pela descoberta", d: "Cada experimento começa com a mesma pergunta: e se?" },
    { num: "02", t: "Acessibilidade", d: "Vamos onde a escola não tem laboratório — nem perspectiva de ter." },
    { num: "03", t: "Curiosidade & criatividade", d: "O estudante constrói, testa, erra, refaz e descobre." },
    { num: "04", t: "Colaboração & impacto", d: "Transporte e tempo são voluntários. Cada real arrecadado vira material." },
  ];
  return (
    <div style={{
      background: "var(--deep)", border: "1px solid var(--line)",
      borderRadius: "var(--r-lg)", padding: 32,
      boxShadow: "0 1px 0 rgba(255,255,255,0.05) inset",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", top: -1, left: 32, right: 32, height: 1,
        background: "linear-gradient(90deg, transparent, var(--plasma-cyan), transparent)",
      }} />
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 11,
        color: "var(--plasma-cyan)", letterSpacing: "0.22em",
        textTransform: "uppercase", marginBottom: 28,
      }}>Nossos pilares</div>

      <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
        {pillars.map((p, i) => (
          <div key={p.num} style={{ display: "grid", gridTemplateColumns: "40px 1fr", gap: 18 }}>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 13,
              color: "var(--fg-3)", letterSpacing: "0.04em",
              borderTop: "1px solid var(--line-strong)", paddingTop: 8,
            }}>{p.num}</div>
            <div style={{ borderTop: "1px solid var(--line-strong)", paddingTop: 8 }}>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 17,
                fontWeight: 500, color: "var(--fg-1)", marginBottom: 4,
                letterSpacing: "-0.01em",
              }}>{p.t}</div>
              <div style={{ fontSize: 13.5, color: "var(--fg-3)", lineHeight: 1.55 }}>{p.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.About = About;