/* AI Exploration Lab — Landing UI Kit · primitives & sections
   Exports components to window for index.html to compose. */
const { useState } = React;

/* ---------- Atoms ---------- */
function Btn({ children, variant = "primary", onClick, type, as }) {
  const base = {
    fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 15,
    border: "none", borderRadius: 8, padding: "13px 26px", cursor: "pointer",
    transition: "transform .12s ease, box-shadow .2s ease, background .2s ease",
    display: "inline-flex", alignItems: "center", gap: 8, lineHeight: 1, whiteSpace: "nowrap",
  };
  const variants = {
    primary: { background: "#00FFF0", color: "#0A0F1E", boxShadow: "0 0 24px rgba(0,255,240,.35)" },
    violet:  { background: "#8A2BE2", color: "#fff", boxShadow: "0 0 24px rgba(138,43,226,.30)" },
    secondary: { background: "transparent", color: "#00FFF0", border: "1px solid rgba(0,255,240,.45)" },
    ghost: { background: "transparent", color: "#D0D0D0", border: "1px solid rgba(255,255,255,.14)" },
  };
  return (
    <button type={type || "button"} onClick={onClick}
      style={{ ...base, ...variants[variant] }}
      onMouseDown={(e) => (e.currentTarget.style.transform = "scale(.97)")}
      onMouseUp={(e) => (e.currentTarget.style.transform = "scale(1)")}
      onMouseLeave={(e) => (e.currentTarget.style.transform = "scale(1)")}>
      {children}
    </button>
  );
}

function Kicker({ children }) {
  return <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, letterSpacing: ".14em",
    textTransform: "uppercase", color: "#8A2BE2" }}>{children}</div>;
}

/* ---------- Nav ---------- */
function Nav({ onCta }) {
  const link = { fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: "#D0D0D0",
    textDecoration: "none", letterSpacing: ".04em" };
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 20, display: "flex", alignItems: "center",
      justifyContent: "space-between", padding: "16px 40px",
      background: "rgba(10,15,30,.72)", backdropFilter: "blur(12px)",
      borderBottom: "1px solid rgba(255,255,255,.07)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
        <img src="../../assets/isotipo-transparent.png" alt="" style={{ height: 48, width: 48, objectFit: "contain" }} />
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: "#fff" }}>
          [ <span style={{ color: "#00FFF0" }}>AI Exploration Lab</span> ]
        </span>
      </div>
      <nav style={{ display: "flex", alignItems: "center", gap: 28 }}>
        <a href="#como" style={link}>/// Cómo funciona</a>
        <a href="#sesiones" style={link}>Sesiones</a>
        <Btn variant="secondary" onClick={onCta}>Inscríbete &gt;</Btn>
      </nav>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero({ onCta }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", padding: "120px 40px 110px" }}>
      <div style={{ position: "absolute", inset: "-10% -10% 0", backgroundImage: "url(../../assets/latent-map.svg)",
        backgroundSize: "760px", opacity: 0.13, maskImage: "linear-gradient(#000, transparent 90%)" }} />
      <div style={{ position: "relative", maxWidth: 920, margin: "0 auto", textAlign: "center" }}>
        <Kicker>La IA ya está en tu celular</Kicker>
        <h1 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, color: "#fff",
          fontSize: 76, lineHeight: 0.98, letterSpacing: "-.02em", margin: "22px 0 0", textWrap: "balance" }}>
          La IA no era para ti.<br /><span style={{ color: "#00FFF0" }}>Hasta hoy.</span>
        </h1>
        <p style={{ fontFamily: "Inter, sans-serif", fontSize: 20, lineHeight: 1.5, color: "#D0D0D0",
          maxWidth: 620, margin: "26px auto 0" }}>
          No enseñamos IA. Encendemos la chispa. Sal de una sesión con algo creado —
          sin saber programar, sin ser "tech", desde cualquier carrera.
        </p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 38 }}>
          <Btn onClick={onCta}>Inscríbete &gt;</Btn>
          <a href="#como" style={{ textDecoration: "none" }}><Btn variant="ghost">Ver cómo funciona</Btn></a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Cómo funciona ---------- */
function HowItWorks() {
  const steps = [
    { g: "(*)", t: "Descubre", d: "Ya usas IA en Spotify, Maps y tu feed. Te mostramos cómo —y por qué importa para lo tuyo." },
    { g: ">",   t: "Explora", d: "Hands-on desde el minuto uno. Sin teoría infinita, sin requisitos técnicos." },
    { g: "{ }", t: "Crea", d: "Cada sesión termina con algo hecho: una herramienta, un prototipo, un resultado real." },
  ];
  return (
    <section id="como" style={{ padding: "90px 40px", borderTop: "1px solid rgba(255,255,255,.06)" }}>
      <div style={{ maxWidth: 1040, margin: "0 auto" }}>
        <Kicker>/// Cómo funciona</Kicker>
        <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 38,
          color: "#fff", letterSpacing: "-.01em", margin: "14px 0 44px" }}>
          Curiosidad primero. Código después.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
          {steps.map((s, i) => (
            <div key={i} style={{ background: "#0D1530", border: "1px solid rgba(255,255,255,.08)",
              borderRadius: 16, padding: 26 }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, fontSize: 30,
                color: i === 1 ? "#00FFF0" : "#8A2BE2" }}>{s.g}</div>
              <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 22,
                color: "#fff", margin: "16px 0 8px" }}>{s.t}</div>
              <div style={{ fontFamily: "Inter, sans-serif", fontSize: 14.5, lineHeight: 1.55, color: "#D0D0D0" }}>{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Sessions ---------- */
function Sessions({ onPick }) {
  const items = [
    { n: "01", t: "IA para tu carrera", meta: "90 min · Sin requisitos", status: ["Cupos limitados", "#FFD700"] },
    { n: "02", t: "Automatiza tu semana", meta: "90 min · Trae tu laptop", status: ["Inscripciones abiertas", "#00FF88"] },
    { n: "03", t: "Crea con texto e imagen", meta: "120 min · Nivel 0", status: ["Próxima sesión", "#00B4D8"] },
  ];
  return (
    <section id="sesiones" style={{ padding: "90px 40px", borderTop: "1px solid rgba(255,255,255,.06)" }}>
      <div style={{ maxWidth: 1040, margin: "0 auto" }}>
        <Kicker>/// Sesiones</Kicker>
        <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 38,
          color: "#fff", letterSpacing: "-.01em", margin: "14px 0 44px" }}>
          Elige tu punto de entrada.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
          {items.map((s) => (
            <button key={s.n} onClick={() => onPick(s.t)} style={{ textAlign: "left", cursor: "pointer",
              background: "#0D1530", border: "1px solid rgba(255,255,255,.08)", borderRadius: 16, padding: 26,
              transition: "box-shadow .2s, border-color .2s, transform .12s" }}
              onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "0 0 28px rgba(0,255,240,.16)"; e.currentTarget.style.borderColor = "rgba(0,255,240,.3)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = "rgba(255,255,255,.08)"; }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#00FFF0", letterSpacing: ".06em" }}>/// SESIÓN {s.n}</div>
              <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 21,
                color: "#fff", margin: "12px 0 14px" }}>{s.t}</div>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "'JetBrains Mono', monospace",
                fontSize: 12, color: s.status[1], background: s.status[1] + "1f", padding: "5px 11px", borderRadius: 9999 }}>
                <span style={{ width: 7, height: 7, borderRadius: "50%", background: s.status[1] }} />{s.status[0]}
              </div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#888", marginTop: 14 }}>{s.meta}</div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer style={{ padding: "44px 40px", borderTop: "1px solid rgba(255,255,255,.07)",
      display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#888" }}>
        [ AI Exploration Lab ] — UPB Medellín · 2026
      </span>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#5b6478" }}>
        Documento Vivo · v1.0
      </span>
    </footer>
  );
}

Object.assign(window, { Btn, Kicker, Nav, Hero, HowItWorks, Sessions, Footer });