/* ¿Qué vas a vivir? (3 columnas) + ¿Qué incluye? + cierre. */

const LIVE = [
  { icon: Icons.mic, t: "Accesos exclusivos", d: "Latin Music Week y los Billboard Latin Music Awards desde adentro. Accesos que no se consiguen por cuenta propia.", img: "assets/photos/panel-stage-2.jpg", pos: "50% 30%" },
  { icon: Icons.users, t: "Contacto con la industria", d: "Artistas, managers, ejecutivos y directores. Las conversaciones y encuentros donde realmente suceden las cosas.", img: "assets/photos/redcarpet-portrait-2.jpg", pos: "50% 12%" },
  { icon: Icons.star, t: "Fiestas de la industria", d: "Los eventos y experiencias exclusivas donde se mueve la música latina, acompañado por Billboard AR.", img: "assets/photos/redcarpet-portrait-3.jpg", pos: "50% 16%" },
];

function LiveExperience() {
  return (
    <Section id="vivir" tone="dark">
      <Reveal>
        <SectionHeading size="lg" title={<>¿Qué vas a <span className="bb-gradient-text">vivir</span>?</>} />
      </Reveal>
      <div className="kit-live" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(1rem, 2vw, 1.75rem)", marginTop: "clamp(2.5rem, 5vw, 3.5rem)" }}>
        {LIVE.map((c, i) => (
          <Reveal key={c.t} delay={i * 100}>
            <Tilt max={5}>
            <article style={{ display: "flex", flexDirection: "column", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--border-on-dark)", background: "var(--surface-card-dark)", height: "100%" }}>
              <div style={{ position: "relative", height: "250px" }}>
                <img src={c.img} alt="" aria-hidden="true" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: c.pos || "50% 35%" }} />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 40%, var(--surface-card-dark) 100%)" }} />
                <span style={{ position: "absolute", left: "18px", bottom: "16px", width: 30, height: 30, color: "var(--white)", background: "rgba(7,8,15,0.5)", borderRadius: "8px", padding: "6px", backdropFilter: "blur(6px)" }} aria-hidden="true">{c.icon}</span>
              </div>
              <div style={{ padding: "20px 22px 26px", display: "flex", flexDirection: "column", gap: "10px" }}>
                <h4 className="bb-display" style={{ fontSize: "1.45rem" }}>{c.t}</h4>
                <p style={{ margin: 0, font: "var(--fw-regular) var(--fs-body-sm)/1.55 var(--font-body)", color: "var(--text-on-dark-muted)" }}>{c.d}</p>
              </div>
            </article>
            </Tilt>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

const INCLUDES = [
  "Pasajes aéreos", "Alojamiento en Miami", "Cursos y workshops previos",
  "Acceso a Latin Music Week", "Acceso a los Billboard Latin Music Awards", "Experiencias y fiestas de la industria",
  "Networking con la industria", "Certificación Oficial Billboard AR", "Acompañamiento de Billboard AR de principio a fin",
];

function IncludesGrid() {
  return (
    <Section id="incluye" tone="dark">
      <Reveal>
        <SectionHeading size="lg" title={<>Experiencia <span className="bb-gradient-text">completa</span></>} />
        <p style={{ font: "var(--text-body)", color: "var(--text-on-dark-muted)", marginTop: "18px", maxWidth: "52ch" }}>
          Pasajes, alojamiento, accesos y experiencias. Todo acompañado por Billboard AR, de principio a fin.
        </p>
      </Reveal>
      <div className="kit-includes" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: "clamp(2rem, 5vw, 4rem)", marginTop: "clamp(2.5rem, 5vw, 3.5rem)" }}>
        <Reveal>
          <ul style={{ margin: 0, padding: 0 }}>
            {INCLUDES.slice(0, 5).map((t) => <CheckItem key={t} type="positive">{t}</CheckItem>)}
          </ul>
        </Reveal>
        <Reveal delay={120}>
          <ul style={{ margin: 0, padding: 0 }}>
            {INCLUDES.slice(5).map((t) => <CheckItem key={t} type="positive">{t}</CheckItem>)}
          </ul>
        </Reveal>
      </div>
    </Section>
  );
}

/* Closing statement — the 3D signpost planted on the section edge,
   transitioning into the final CTA so the pole reads as grounded. */
function BrandSign() {
  return (
    <section style={{ background: "var(--grad-light)", color: "var(--ink)", overflow: "hidden", paddingTop: "var(--section-y)", paddingBottom: 0, textAlign: "center" }}>
      <div style={{ width: "min(100% - calc(var(--gutter) * 2), var(--maxw))", marginInline: "auto" }}>
        <Reveal>
          <p className="bb-display" style={{ fontSize: "clamp(1.9rem, 4.4vw, 3.4rem)", lineHeight: 1.04, color: "var(--ink)", margin: "0 auto", maxWidth: "min(100%, 840px)", textWrap: "balance" }}>
            Esta edición es la primera.<br />
            Y la que todos van a <span className="bb-gradient-text">recordar</span>.
          </p>
        </Reveal>
        <img
          className="kit-sign-img"
          src="assets/illustrations/billboard-experience-sign-3d.png"
          alt="Cartel billboard Experience que señala el camino hacia Miami"
          style={{ display: "block", width: "clamp(360px, 56vw, 720px)", height: "auto", margin: "clamp(2rem, 5vw, 3.5rem) auto 0", filter: "drop-shadow(0 26px 50px rgba(7,8,15,0.22))", pointerEvents: "none" }}
        />
      </div>
    </section>
  );
}

Object.assign(window, { LiveExperience, IncludesGrid, BrandSign });