/* Programación — custom show tiles */
function ShowTile({ show }) {
  const [h, setH] = React.useState(false);
  const dark = show.accent === LA.yellow || show.accent === LA.green;
  const fg = dark ? LA.black : "#fff";
  return (
    <div
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        position: "relative", borderRadius: 24, overflow: "hidden",
        background: show.accent, padding: "28px 22px 24px",
        display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center",
        boxShadow: h ? "0 22px 44px rgba(19,19,17,.22)" : "0 8px 20px rgba(19,19,17,.1)",
        transform: h ? "translateY(-5px)" : "none",
        transition: "transform .25s var(--ease-out), box-shadow .25s",
        cursor: "pointer",
      }}>
      {/* tag */}
      <span style={{
        position: "absolute", top: 14, left: 14,
        fontFamily: "var(--font-meta)", fontWeight: 700, fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase",
        color: fg, opacity: .7, background: dark ? "rgba(19,19,17,.08)" : "rgba(255,255,255,.16)",
        padding: "4px 9px", borderRadius: 999,
      }}>{show.tag}</span>
      {/* photo */}
      <div style={{
        width: 132, height: 132, borderRadius: "50%", overflow: "hidden", marginBottom: 16,
        border: "4px solid " + (dark ? "rgba(19,19,17,.15)" : "rgba(255,255,255,.35)"),
        boxShadow: "0 10px 24px rgba(0,0,0,.18)",
        transform: h ? "scale(1.05)" : "scale(1)", transition: "transform .3s var(--ease-out)",
      }}>
        <img src={"./assets/hosts2/" + show.photo + ".jpg"} alt={show.host} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 23, lineHeight: 1.02, color: fg, letterSpacing: "-0.01em" }}>{show.name}</div>
      <div style={{ color: fg, opacity: .82, fontSize: 14.5, fontWeight: 600, marginTop: 5 }}>{show.host}</div>
      <div style={{
        marginTop: 14, fontFamily: "var(--font-meta)", fontWeight: 700, fontSize: 12.5, letterSpacing: ".04em",
        color: dark ? LA.black : "#fff", background: dark ? "rgba(19,19,17,.1)" : "rgba(19,19,17,.28)",
        padding: "7px 14px", borderRadius: 999,
      }}>{show.time}</div>
    </div>
  );
}

function Programacion() {
  return (
    <section id="programacion" style={{ background: "var(--neutral-50)", padding: "88px 28px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <div className="la-kicker" style={{ justifyContent: "center" }}>La grilla</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(32px,4vw,48px)", letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "6px 0 10px" }}>
            Nuestra programación
          </h2>
          <p style={{ color: "var(--text-muted)", fontSize: 17, maxWidth: 560, margin: "0 auto" }}>
            Las voces más queridas de la radio argentina.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 22 }}>
          {SHOWS.map((s) => <ShowTile key={s.name} show={s} />)}
        </div>
      </div>
    </section>
  );
}
window.Programacion = Programacion;