function StoriesGrid({ cardStyle = "editorial", onOpen }) {
  const [filter, setFilter] = useState("Tutto");
  const cats = ["Tutto", ...new Set(STORIES.map(s => s.cat))];
  const shown = filter === "Tutto" ? STORIES : STORIES.filter(s => s.cat === filter);

  return (
    <section id="storie" style={{ padding: "var(--section-pad) 0", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <SectionHeader kicker="Ultimi articoli" title="Dal diario di viaggio" link linkLabel="Tutti gli articoli" />

        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 40 }}>
          {cats.map(c => (
            <button key={c} onClick={() => setFilter(c)} style={{
              padding: "8px 16px", borderRadius: 999,
              border: "1px solid " + (filter === c ? "var(--ink)" : "var(--line)"),
              background: filter === c ? "var(--ink)" : "transparent",
              color: filter === c ? "var(--paper)" : "var(--ink)",
              fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase",
              transition: "all .2s",
            }}>{c}</button>
          ))}
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
          gap: 48,
        }}>
          {shown.map((s, i) => <Card key={s.title} story={s} variant={cardStyle} index={i} onOpen={onOpen} />)}
        </div>
      </div>
    </section>
  );
}

function Card({ story, variant, index, onOpen }) {
  const [hover, setHover] = useState(false);
  const isOverlay = variant === "overlay";
  const isCompact = variant === "compact";

  return (
    <a href="#"
      onClick={(e) => { e.preventDefault(); onOpen && onOpen(story); }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="card"
      style={{
        display: "block",
        position: "relative",
        paddingBottom: isCompact ? 0 : 4,
      }}>
      {/* Image */}
      <div style={{ position: "relative", overflow: "hidden", aspectRatio: isCompact ? "3/2" : "4/3" }}>
        <Placeholder label={story.imgCaption} src={story.img} style={{
          width: "100%", height: "100%",
          transform: hover ? "scale(1.04)" : "scale(1)",
          transition: "transform .6s cubic-bezier(.2,.8,.2,1)",
        }} />
        <div style={{
          position: "absolute", inset: 0,
          background: isOverlay
            ? "linear-gradient(180deg, transparent 30%, color-mix(in oklab, var(--ink) 80%, transparent) 100%)"
            : "linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--ink) 18%, transparent) 100%)",
          opacity: hover ? 1 : (isOverlay ? 1 : 0.5),
          transition: "opacity .3s",
        }} />
        <div style={{ position: "absolute", top: 12, right: 12 }}>
          <FavoriteButton id={story.title} />
        </div>
        <div style={{
          position: "absolute", top: 14, left: 14,
          background: "var(--paper)", color: "var(--ink)",
          padding: "5px 10px", fontSize: 10,
          fontFamily: "var(--font-mono)", letterSpacing: "0.14em",
          textTransform: "uppercase",
        }}>{String(index + 1).padStart(2, "0")} · {story.cat}</div>

        {isOverlay && (
          <div style={{
            position: "absolute", left: 20, right: 20, bottom: 20, color: "var(--paper)",
          }}>
            <h3 style={{
              fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500,
              lineHeight: 1.1, margin: 0, letterSpacing: "-0.01em",
            }}>{story.title}</h3>
            <div style={{ fontSize: 12, opacity: 0.85, marginTop: 8, fontFamily: "var(--font-mono)", letterSpacing: "0.1em" }}>
              {story.date} · {story.read}
            </div>
          </div>
        )}
      </div>

      {!isOverlay && (
        <>
          <h3 style={{
            fontFamily: "var(--font-display)",
            fontSize: isCompact ? 22 : 30,
            fontWeight: 500, lineHeight: 1.1, margin: "20px 0 10px",
            letterSpacing: "-0.01em",
            color: hover ? "var(--ocra)" : "var(--ink)",
            transition: "color .2s",
          }}>{story.title}</h3>
          {!isCompact && (
            <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink)", opacity: 0.8, margin: 0 }}>
              {story.dek}
            </p>
          )}
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            marginTop: 16, paddingTop: 12, borderTop: "1px solid var(--line)",
            fontSize: 12, color: "var(--muted)", fontFamily: "var(--font-mono)", letterSpacing: "0.08em",
          }}>
            <span>{story.author}</span>
            <span>{story.date} · {story.read}</span>
          </div>
        </>
      )}
    </a>
  );
}
window.StoriesGrid = StoriesGrid;