/* Hero with integrated live player */
function LivePlayerCard({ playing, onToggle, show }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 16,
      background: "rgba(255,255,255,.06)",
      border: "1px solid rgba(255,255,255,.12)",
      backdropFilter: "blur(14px)",
      borderRadius: 20, padding: 14, maxWidth: 460,
      boxShadow: "0 20px 50px rgba(0,0,0,.4)",
    }}>
      <button onClick={onToggle} aria-label={playing ? "Pausar" : "Reproducir"} style={{
        flex: "0 0 auto", width: 62, height: 62, borderRadius: "50%",
        background: LA.yellow, color: LA.black, border: "none", cursor: "pointer",
        display: "flex", alignItems: "center", justifyContent: "center",
        boxShadow: "0 8px 22px rgba(255,176,0,.5)",
        transition: "transform .15s var(--ease-pop)",
      }}
        onMouseDown={(e) => e.currentTarget.style.transform = "scale(.92)"}
        onMouseUp={(e) => e.currentTarget.style.transform = "scale(1)"}
        onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
      >
        {playing ? <PauseGlyph size={22} /> : <PlayGlyph size={22} />}
      </button>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 6, background: "#EA2C2C", color: "#fff",
            fontFamily: "var(--font-meta)", fontWeight: 700, fontSize: 10.5, letterSpacing: ".1em",
            padding: "3px 9px", borderRadius: 999, textTransform: "uppercase", whiteSpace: "nowrap",
          }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#fff" }} /> En vivo
          </span>
          <span style={{ color: "rgba(255,255,255,.6)", fontFamily: "var(--font-meta)", fontSize: 12, fontWeight: 600, whiteSpace: "nowrap" }}>98.3 FM</span>
        </div>
        <div style={{ color: "#fff", fontWeight: 700, fontSize: 16, fontFamily: "var(--font-body)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
          Escuchanos en vivo
        </div>
        <div style={{ color: "rgba(255,255,255,.62)", fontSize: 13, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
          Las 24 horas · La radio #1 de Carlos Paz
        </div>
      </div>
      <div style={{ paddingRight: 8 }}>
        <Equalizer playing={playing} color={LA.yellow} bars={5} h={22} />
      </div>
    </div>
  );
}

function Hero({ playing, onToggle, show }) {
  return (
    <section id="top" style={{ position: "relative", background: LA.black, overflow: "hidden", minHeight: 640 }}>
      {/* decorative rings */}
      <div aria-hidden style={{ position: "absolute", top: -120, left: -80, width: 340, height: 340, borderRadius: "50%", border: "26px solid " + LA.teal, opacity: .12 }} />
      <div aria-hidden style={{ position: "absolute", bottom: -140, left: "38%", width: 260, height: 260, borderRadius: "50%", border: "20px solid " + LA.pink, opacity: .1 }} />
      <div aria-hidden style={{ position: "absolute", top: "20%", right: "6%", width: 150, height: 150, borderRadius: "50%", border: "16px solid " + LA.blue, opacity: .12 }} />
      {/* soft glow */}
      <div aria-hidden style={{ position: "absolute", top: "-30%", left: "-10%", width: 700, height: 700, background: "radial-gradient(circle, rgba(255,176,0,.16), transparent 62%)", pointerEvents: "none" }} />

      <div style={{ position: "relative", maxWidth: 1240, margin: "0 auto", padding: "84px 28px 72px", display: "flex", alignItems: "center", gap: 44, minHeight: 640 }}>
        <div style={{ flex: "1 1 0", maxWidth: 600 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 9, background: "rgba(255,255,255,.08)", border: "1px solid rgba(255,255,255,.14)", padding: "7px 14px", borderRadius: 999, marginBottom: 22 }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#EA2C2C", boxShadow: "0 0 0 0 rgba(234,44,44,.6)", animation: "la100-pulse 1.6s infinite" }} />
            <span style={{ color: "#fff", fontFamily: "var(--font-meta)", fontWeight: 700, fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase" }}>En vivo · 98.3 FM · Villa Carlos Paz</span>
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(44px, 6vw, 82px)", lineHeight: .96, letterSpacing: "-0.01em", color: "#fff", margin: 0 }}>
            La radio <span style={{ color: LA.yellow }}>#1</span><br />de Carlos Paz
          </h1>
          <p style={{ color: "rgba(255,255,255,.78)", fontSize: 18, lineHeight: 1.55, maxWidth: 480, margin: "20px 0 30px" }}>
            Música, compañía y la mejor programación las 24 horas, con las figuras más grandes de la radio argentina.
          </p>
          <LivePlayerCard playing={playing} onToggle={onToggle} show={show} />
          <div style={{ display: "flex", gap: 26, marginTop: 30, flexWrap: "wrap" }}>
            {[["#1", "FM de Argentina"], ["+1M", "oyentes diarios"], ["98.3", "FM Carlos Paz"], ["+195K", "seguidores en redes"]].map(([n, l]) => (
              <div key={l}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 30, color: LA.yellow, lineHeight: 1 }}>{n}</div>
                <div style={{ color: "rgba(255,255,255,.6)", fontSize: 13, marginTop: 3, fontFamily: "var(--font-meta)", fontWeight: 600 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="hero-photo" style={{ flex: "0 0 auto", width: "42%", maxWidth: 500, position: "relative" }}>
          <div aria-hidden style={{ position: "absolute", inset: -16, background: LA.yellow, borderRadius: 30, transform: "rotate(-3.5deg)" }} />
          <img src="./assets/promos/hero-duo.jpg" alt="El equipo de LA 100" style={{ position: "relative", width: "100%", display: "block", borderRadius: 24, aspectRatio: "760 / 620", objectFit: "cover", boxShadow: "0 30px 70px rgba(0,0,0,.5)" }} />
          <div style={{ position: "absolute", left: 16, bottom: 16, display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(19,19,17,.82)", backdropFilter: "blur(6px)", padding: "8px 14px", borderRadius: 999 }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#EA2C2C", animation: "la100-pulse 1.6s infinite" }} />
            <span style={{ color: "#fff", fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 13 }}>Escuchanos en vivo · 24 hs</span>
          </div>
        </div>
      </div>
      {/* triple color band */}
      <div style={{ position: "relative", display: "flex", height: 8 }}>
        <div style={{ flex: 1, background: LA.yellow }} /><div style={{ flex: 1, background: LA.teal }} /><div style={{ flex: 1, background: LA.pink }} />
      </div>
    </section>
  );
}
window.Hero = Hero;