/* ¿Qué es Billboard Experience? + Los 4 pilares (sección consolidada). */

const PILLARS = [
  { i: 1, icon: Icons.graduation, t: "Preparación", d: "Cursos y encuentros previos con profesionales de la industria en Buenos Aires." },
  { i: 2, icon: Icons.mic, t: "Acceso", d: "Latin Music Week y Billboard Latin Music Awards. Accesos que no se consiguen por cuenta propia." },
  { i: 3, icon: Icons.network, t: "Industria", d: "Artistas, managers, ejecutivos y directores. Las conversaciones donde pasan las cosas." },
  { i: 4, icon: Icons.star, t: "Experiencia", d: "Una experiencia que cambia para siempre la forma en que ves la industria." },
];

function Pillars() {
  return (
    <Section id="programa" tone="dark">
      <Reveal>
        <div style={{ maxWidth: "60ch" }}>
          <SectionHeading size="lg" title={<>¿Qué es <span className="bb-gradient-text">Billboard Experience</span>?</>} />
          <p style={{ font: "var(--text-lead)", color: "var(--text-on-dark-muted)", marginTop: "24px" }}>
            Billboard Argentina presenta su primera plataforma de experiencias internacionales.{" "}
            <strong style={{ color: "var(--white)", fontWeight: 600 }}>Cupos limitados</strong>: un grupo de Argentina va a vivirla en Miami, en el marco del Latin Music Week — formación profesional y acceso real, desde adentro de la industria.
          </p>
        </div>
      </Reveal>
      <Reveal delay={80}>
        <span className="bb-eyebrow" style={{ display: "block", color: "var(--text-on-dark-faint)", letterSpacing: "0.16em", marginTop: "clamp(2.5rem, 5vw, 3.5rem)", marginBottom: "clamp(1.25rem, 2.5vw, 1.75rem)" }}>LOS 4 PILARES</span>
      </Reveal>
      <div className="kit-pillars" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "clamp(1rem, 2vw, 1.5rem)" }}>
        {PILLARS.map((p, i) => (
          <Reveal key={p.i} delay={i * 90}>
            <Tilt>
              <PillarCard index={p.i} title={p.t} icon={p.icon} style={{ height: "100%" }}>{p.d}</PillarCard>
            </Tilt>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { Pillars });