// Contact — navigation hub replacing the single form.
// Three destination cards: Escolas → levar.html, Parcerias → parceria.html, Contato → contato.html

function Contact() {
  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 destinations = [
    {
      id: "escola",
      icon: "◈",
      title: "Para Escolas",
      desc: "Leve experimentos reais de física para os seus alunos — sem custo, sem burocracia.",
      cta: "Solicitar visita",
      href: "./levar.html",
      color: [45, 111, 247],
    },
    {
      id: "parceiro",
      icon: "◇",
      title: "Parcerias",
      desc: "Escola, empresa, fundação ou poder público — vamos construir juntos.",
      cta: "Ser parceiro",
      href: "./parceria.html",
      color: [107, 63, 255],
    },
    {
      id: "contato",
      icon: "○",
      title: "Fale conosco",
      desc: "Imprensa, pesquisadores, curiosos ou quem simplesmente quiser conversar.",
      cta: "Entrar em contato",
      href: "./contato.html",
      color: [0, 229, 255],
    },
  ];

  return (
    <section id="contato" className="section grain" style={{
      position: "relative", overflow: "hidden",
      background: "linear-gradient(180deg, var(--void) 0%, #0A0E1C 100%)",
    }}>
      {/* ambient blobs — same as before */}
      <div style={{
        position: "absolute", left: "-10%", top: "10%",
        width: 640, height: 640, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(255,45,157,0.15), transparent 60%)",
        filter: "blur(60px)", pointerEvents: "none",
        animation: "blobDrift1 14s ease-in-out infinite",
      }} />
      <div style={{
        position: "absolute", right: "-10%", bottom: "-10%",
        width: 720, height: 720, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(45,111,247,0.17), transparent 60%)",
        filter: "blur(60px)", pointerEvents: "none",
        animation: "blobDrift2 18s ease-in-out infinite",
      }} />
      <div style={{
        position: "absolute", right: "12%", top: "-8%",
        width: 480, height: 480, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(107,63,255,0.11), transparent 60%)",
        filter: "blur(70px)", pointerEvents: "none",
        animation: "blobDrift3 22s ease-in-out infinite",
      }} />

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div className="overline-row" style={{ justifyContent: "center" }}>/ 06 — Contato & Parcerias</div>

        <div style={{ textAlign: "center", maxWidth: 680, margin: "0 auto 52px" }}>
          <h2 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(28px, 4.5vw, 60px)",
            fontWeight: 400, lineHeight: 1.05, letterSpacing: "-0.025em",
            color: "var(--fg-1)", margin: 0,
          }}>
            A física vai até{" "}
            <span style={{ color: "var(--plasma-magenta)" }}>onde você está</span>.
          </h2>
          <p style={{
            margin: "20px auto 0", fontSize: isMobile ? 15 : 17, lineHeight: 1.65,
            color: "var(--fg-2)", maxWidth: 540,
          }}>
            Escolha o caminho que faz sentido para você.
          </p>
        </div>

        {/* Destination cards */}
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
          gap: isMobile ? 14 : 20,
        }}>
          {destinations.map((dest) => {
            const [r, g, b] = dest.color;
            return (
              <DestCard key={dest.id} dest={dest} r={r} g={g} b={b} isMobile={isMobile} />
            );
          })}
        </div>

        {/* Bottom tagline */}
        <div style={{
          marginTop: 40, textAlign: "center",
          fontFamily: "var(--font-mono)", fontSize: 11,
          color: "var(--fg-4)", letterSpacing: "0.16em", textTransform: "uppercase",
        }}>
          Respondemos em até 48h úteis · @fisicaalemdopapel
        </div>
      </div>
    </section>
  );
}

function DestCard({ dest, r, g, b, isMobile }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={dest.href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "block", textDecoration: "none",
        background: hover ? `rgba(${r},${g},${b},0.06)` : "var(--deep)",
        border: `1px solid ${hover ? `rgba(${r},${g},${b},0.45)` : "var(--line)"}`,
        borderRadius: "var(--r-xl)", padding: isMobile ? "28px 24px" : "32px 28px",
        position: "relative", overflow: "hidden",
        transform: hover ? "translateY(-4px)" : "none",
        boxShadow: hover
          ? `0 24px 60px rgba(0,0,0,0.45), 0 0 50px rgba(${r},${g},${b},0.12)`
          : "0 1px 0 rgba(255,255,255,0.04) inset",
        transition: "all 0.35s var(--ease-out)",
      }}>
      <div style={{
        position: "absolute", top: 0, left: 24, right: 24, height: 1,
        background: `linear-gradient(90deg, transparent, rgba(${r},${g},${b},${hover ? 0.55 : 0.20}), transparent)`,
        transition: "opacity 0.35s",
      }} />

      <div style={{
        fontSize: 28, marginBottom: 18,
        color: `rgba(${r},${g},${b},${hover ? 1 : 0.75})`,
        transition: "color 0.25s",
      }}>{dest.icon}</div>

      <div style={{
        fontFamily: "var(--font-display)", fontSize: isMobile ? 20 : 22, fontWeight: 500,
        color: "var(--fg-1)", marginBottom: 12, letterSpacing: "-0.01em",
      }}>{dest.title}</div>

      <div style={{
        fontSize: 14.5, lineHeight: 1.6, color: "var(--fg-3)", marginBottom: 24,
      }}>{dest.desc}</div>

      <div style={{
        fontFamily: "var(--font-display)", fontSize: 13.5, fontWeight: 500,
        color: `rgba(${r},${g},${b},${hover ? 1 : 0.7})`,
        display: "flex", alignItems: "center", gap: 6,
        transition: "color 0.25s",
      }}>
        {dest.cta}
        <span style={{
          display: "inline-block",
          transform: hover ? "translateX(5px)" : "translateX(0)",
          transition: "transform 0.3s var(--ease-out)",
        }}>→</span>
      </div>
    </a>
  );
}

window.Contact = Contact;