/* Statement (standalone hook) → Acceso (split) → keyword marquee → metrics. */

function Statement() {
  return (
    <Section tone="dark">
      <Reveal>
        <p className="bb-display" style={{ fontSize: "var(--fs-display-md)", lineHeight: 1.05, margin: "0 auto", maxWidth: "20ch", textAlign: "center", color: "var(--text-on-dark-muted)", textWrap: "balance" }}>
          No mirando historias. No desde una pantalla.{" "}
          <span className="bb-gradient-text" style={{ color: "var(--white)" }}>Estando ahí.</span>
        </p>
      </Reveal>
    </Section>
  );
}

function AccessSplit() {
  return (
    <Section id="acceso" tone="dark">
      <div className="kit-split" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "clamp(2rem, 5vw, 5rem)", alignItems: "center" }}>
        <Reveal>
          <div>
            <SectionHeading
              size="lg"
              title={<>La diferencia no está en el viaje. Está en el <span className="bb-gradient-text">acceso</span></>}
            />
            <p style={{ font: "var(--text-body)", color: "var(--text-on-dark-muted)", maxWidth: "48ch", marginTop: "26px" }}>
              Cualquiera puede ver los paneles después, o las fotos. Pero muy pocos pueden estar en las
              conversaciones y los encuentros donde realmente suceden las cosas. Eso es lo que hace
              diferente a Billboard Experience.
            </p>
            <div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "30px" }}>
              <GradientPill tone="dark" interactive>Accesos exclusivos</GradientPill>
              <GradientPill tone="dark" interactive>Artistas, managers y directores</GradientPill>
              <GradientPill tone="dark" interactive>Fiestas de la industria</GradientPill>
            </div>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div style={{ position: "relative", borderRadius: "var(--radius-xl)", overflow: "hidden", border: "1px solid var(--border-on-dark)" }}>
            <img src="assets/photos/panel-stage-2.jpg" alt="Panel en vivo en Latin Music Week Miami" style={{ display: "block", width: "100%", height: "clamp(360px, 46vw, 560px)", objectFit: "cover", objectPosition: "50% 30%" }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 55%, rgba(7,8,15,0.55) 100%)" }} />
            <span style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: "4px", background: "var(--grad-accent)" }} />
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function KeywordMarquee() {
  return (
    <div style={{ background: "var(--black)", borderBlock: "1px solid var(--border-on-dark)", paddingBlock: "clamp(20px, 3vw, 34px)" }}>
      <Marquee tone="dark" speed={32} items={["Miami", "Latin Music Week", "Artistas", "Managers", "Ejecutivos", "Networking", "Billboard Latin Music Awards"]} />
    </div>
  );
}

const METRICS = [
  { value: 10, suffix: "M", label: "Seguidores" },
  { value: 150, suffix: "M", label: "Alcance mensual" },
  { value: 5, suffix: "M", label: "Interacciones mensuales" },
  { value: 15, suffix: "", label: "Países · presencia internacional" },
];

function Metrics() {
  return (
    <Section tone="light">
      <Reveal>
        <SectionHeading
          tone="light"
          align="center"
          size="md"
          title={<>La marca que te <span className="bb-gradient-text">abre la puerta</span></>}
          style={{ marginInline: "auto", maxWidth: "20ch" }}
        />
      </Reveal>
      {/* Verified-account attribution + metrics, behind doors that swing open
          on scroll — a literal nod to "la marca que te abre la puerta". */}
      <DoorReveal style={{ marginTop: "clamp(1.75rem, 4vw, 2.75rem)" }}>
        <div style={{ background: "var(--white)", padding: "clamp(2.25rem, 4vw, 3.25rem) clamp(1rem, 3vw, 2rem)", display: "flex", flexDirection: "column", alignItems: "center" }}>
          <a
            href="https://www.instagram.com/billboardar"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Cuenta verificada de Billboard AR: @billboardar"
            style={{ borderRadius: "999px", padding: "1.5px", background: "var(--grad-accent)", boxShadow: "0 8px 30px rgba(7,8,15,0.12)" }}
          >
            <span style={{ display: "inline-flex", alignItems: "center", gap: "11px", padding: "8px 18px 8px 10px", borderRadius: "999px", background: "var(--white)" }}>
              <img src="assets/logos/billboard-ar-black.png" alt="" aria-hidden="true" style={{ height: "20px", width: "auto", display: "block" }} />
              <span style={{ font: "var(--fw-semibold) var(--fs-body-sm)/1 var(--font-body)", color: "var(--ink)" }}>@billboardar</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{ display: "block" }}>
                <path d="M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82 1.89 3.19L12 21.04l3.4 1.46 1.89-3.2 3.61-.82-.34-3.69L23 12z" fill="var(--blue)" />
                <path d="M9.38 16.01L5 11.63l1.41-1.41 2.97 2.97 8.2-8.2 1.41 1.42-9.61 9.6z" fill="#fff" />
              </svg>
            </span>
          </a>
          <div className="kit-metrics" style={{ width: "100%", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "clamp(1.5rem, 4vw, 3.5rem)", marginTop: "clamp(2rem, 4vw, 3rem)" }}>
            {METRICS.map((m) => (
              <div key={m.label} style={{ position: "relative", display: "flex", flexDirection: "column", alignItems: "center" }}>
                <StatCounter value={m.value} suffix={m.suffix} label="" align="center" />
                <div style={{ marginTop: "12px", maxWidth: "16ch", font: "var(--fw-medium) var(--fs-body)/1.35 var(--font-body)", color: "var(--gray-700)", letterSpacing: "0.01em", textAlign: "center" }}>
                  {m.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </DoorReveal>
      <Reveal delay={220}>
        <p style={{ textAlign: "center", marginTop: "clamp(2rem, 4vw, 3rem)", font: "var(--fw-medium) var(--fs-body)/1.5 var(--font-body)", color: "var(--text-on-light-muted)" }}>
          Además, cobertura oficial de los principales eventos de la industria de la música latina.
        </p>
      </Reveal>
    </Section>
  );
}

Object.assign(window, { Statement, AccessSplit, KeywordMarquee, Metrics });