/* Estructura del programa (Before / Miami / After) + Agenda tentativa (10 días). */

const STAGES = [
  { tag: "10 días · Buenos Aires", t: "Preparación", d: "Cursos y encuentros exclusivos con profesionales de la industria antes de viajar.", items: ["Workshops con referentes", "Encuentros exclusivos", "Preparación de objetivos"] },
  { tag: "10 días · Miami", t: "Experiencia", d: "Latin Music Week desde adentro: artistas, managers, ejecutivos, fiestas de la industria y los Billboard Latin Music Awards.", items: ["Accesos exclusivos", "Networking de industria", "Billboard Latin Music Awards"] },
  { tag: "Cierre", t: "Certificación", d: "Certificación oficial Billboard AR y una red de contactos que te acompaña después.", items: ["Certificación oficial", "Red de contactos", "Comunidad"] },
];

function Program() {
  return (
    <Section tone="navy">
      <Reveal>
        <SectionHeading size="lg" title={<>Estructura del <span className="bb-gradient-text">programa</span></>} />
      </Reveal>
      <div className="kit-stages" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(1rem, 2.5vw, 2rem)", marginTop: "clamp(2.5rem, 5vw, 3.5rem)" }}>
        {STAGES.map((s, i) => (
          <Reveal key={s.t} delay={i * 110}>
            <div style={{ position: "relative", paddingTop: "26px" }}>
              <span style={{ display: "block", height: "2px", background: "var(--grad-accent)", marginBottom: "22px" }} />
              <h3 className="bb-display" style={{ fontSize: "var(--fs-display-sm)", marginTop: "10px", marginBottom: "14px" }}>{s.t}</h3>
              <p style={{ font: "var(--fw-regular) var(--fs-body)/1.55 var(--font-body)", color: "var(--text-on-dark-muted)", marginBottom: "20px" }}>{s.d}</p>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "10px" }}>
                {s.items.map((it) => (
                  <li key={it} style={{ display: "flex", alignItems: "center", gap: "12px", font: "var(--fw-medium) var(--fs-body-sm)/1.3 var(--font-body)", color: "var(--white)" }}>
                    <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--grad-accent)", flex: "none" }} />
                    {it}
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { Program });