/* Hero — full-screen photo + navy/accent bloom overlay, animated gradient,
   official Billboard AR Experience · Latin Music Week Miami lockup, tagline, CTA. */

function Hero() {
  return (
    <section
      id="top"
      style={{
        position: "relative",
        minHeight: "100svh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        textAlign: "center",
        overflow: "hidden",
        background: "var(--black)",
      }}
    >
      {/* photo (slow ken-burns drift for life) */}
      <img
        className="kit-kenburns"
        src="assets/photos/redcarpet-portrait-3.jpg"
        alt=""
        aria-hidden="true"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 22%", opacity: 1 }}
      />
      {/* navy darkening overlay */}
      <div style={{ position: "absolute", inset: 0, background: "var(--grad-hero-overlay)" }} />
      {/* center vignette so the white lockup reads clearly */}
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(85% 72% at 50% 46%, rgba(7,8,15,0.46) 0%, rgba(7,8,15,0.20) 48%, transparent 78%)" }} />
      {/* accent bloom rising from bottom (animated pan) */}
      <div className="bb-grad-anim" style={{ position: "absolute", inset: 0, background: "var(--grad-hero-bloom)", mixBlendMode: "screen", opacity: 0.42 }} />
      {/* WebGL flowing-gradient shader — the signature living backdrop */}
      <ShaderBG opacity={0.3} style={{ mixBlendMode: "screen" }} />

      <div style={{ position: "relative", zIndex: 2, width: "min(100% - calc(var(--gutter) * 2), 980px)", marginInline: "auto", paddingTop: "calc(var(--nav-h) + 1rem)", paddingBottom: "clamp(2rem, 5vw, 4rem)", display: "flex", flexDirection: "column", alignItems: "center" }}>
        {/* H1 semántico (SEO/a11y) — visualmente oculto; el lockup visual es el logo SVG de abajo */}
        <h1 style={{ position: "absolute", width: "1px", height: "1px", padding: 0, margin: "-1px", overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", border: 0 }}>
          Billboard AR Experience — Latin Music Week Edition · Miami
        </h1>
        {/* eyebrow — scarcity */}
        <span className="hero-rise bb-eyebrow" style={{ color: "var(--text-on-dark)", letterSpacing: "0.18em", marginBottom: "clamp(1rem, 2.5vw, 1.5rem)", padding: "8px 16px", borderRadius: "var(--radius-pill)", border: "1px solid var(--border-on-dark)", background: "rgba(255,255,255,0.04)" }}>
          CUPOS LIMITADOS
        </span>

        {/* official lockup — Billboard Experience wordmark (new logo) */}
        <img
          className="hero-rise"
          src="assets/logos/billboard-experience-white.svg"
          alt="Billboard Experience"
          style={{ width: "min(100%, 680px)", height: "auto", display: "block", filter: "drop-shadow(0 12px 40px rgba(0,0,0,0.45))" }}
        />

        <p className="hero-rise" style={{ marginTop: "clamp(1.25rem, 3vw, 1.75rem)", maxWidth: "34ch", font: "300 clamp(1.05rem, 2.3vw, 1.4rem)/1.45 var(--font-body)", color: "rgba(255,255,255,0.9)", textWrap: "balance" }}>
          Dejás de estudiar la industria y te convertís en <strong style={{ fontWeight: 600, color: "var(--white)" }}>parte de ella</strong>. 10 días en <span className="bb-script" style={{ fontSize: "1.35em", lineHeight: 1 }}>miami</span> durante la Latin Music Week.
        </p>

        <div className="hero-rise" style={{ animationDelay: "220ms", marginTop: "clamp(1.75rem, 4vw, 2.5rem)", display: "flex", flexWrap: "wrap", gap: "14px", alignItems: "center", justifyContent: "center" }}>
          <Button size="lg" variant="primary" href="#sumate" icon={Icons.arrow} onClick={() => bbTrack("cta_click", { cta: "hero_sumate" })}>Inscribite a la experiencia</Button>
          <Button size="lg" variant="outline" href="#programa" onClick={() => bbTrack("cta_click", { cta: "hero_programa" })}>Conocé el programa</Button>
        </div>
      </div>

      {/* scroll cue */}
      <a href="#acceso" aria-label="Bajar" style={{ position: "absolute", bottom: "22px", left: "50%", transform: "translateX(-50%)", width: 26, height: 26, color: "var(--text-on-dark-muted)" }} className="kit-scrollcue">
        {Icons.chevronDown}
      </a>
    </section>
  );
}

window.Hero = Hero;