function ThemesSection() {
  const mobile = useMobile();
  return (
    <section id="temi" style={{ padding: "var(--section-pad) 0", borderTop: "1px solid var(--line)", background: "var(--paper-2)" }}>
      <div className="container">
        <SectionHeader kicker="Esplora per tema" title="Sei modi di leggere la Calabria" />
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(3, 1fr)", gap: 2, background: "var(--line)" }}>
          {THEMES.map((t, i) => <ThemeCard key={t.key} theme={t} index={i} />)}
        </div>
      </div>
    </section>
  );
}

function ThemeCard({ theme, index }) {
  const [hover, setHover] = useState(false);
  return (
    <a href="#"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: "relative", aspectRatio: "4/3", overflow: "hidden", background: "var(--paper)", display: "block" }}>
      <Placeholder label={theme.caption} src={theme.img} style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
        transform: hover ? "scale(1.05)" : "scale(1)", transition: "transform .6s cubic-bezier(.2,.8,.2,1)",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, transparent 30%, color-mix(in oklab, var(--ink) 85%, transparent) 100%)",
      }} />
      <div style={{
        position: "absolute", inset: 0, padding: 32, display: "flex", flexDirection: "column", justifyContent: "space-between",
        color: "var(--paper)",
      }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", opacity: 0.85 }}>
          {String(index + 1).padStart(2, "0")} / 06
        </div>
        <div>
          <div style={{
            fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 500,
            letterSpacing: "-0.02em", lineHeight: 1,
            transform: hover ? "translateY(-6px)" : "none", transition: "transform .3s",
          }}>{theme.label}</div>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "end", marginTop: 10,
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", opacity: 0.85,
          }}>
            <span>{theme.count} articoli</span>
            <span style={{ opacity: hover ? 1 : 0, transform: hover ? "none" : "translateX(-8px)", transition: "all .3s" }}>
              ESPLORA →
            </span>
          </div>
        </div>
      </div>
    </a>
  );
}
window.ThemesSection = ThemesSection;