function ArticleModal({ story, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, []);

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 8000,
      background: "var(--paper)", overflowY: "auto",
      animation: "rise .35s ease both",
    }}>
      {/* Barra superiore */}
      <div style={{
        position: "sticky", top: 0, zIndex: 10, background: "var(--paper)",
        borderBottom: "1px solid var(--line)", padding: "14px 32px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)" }}>
          Calabria Svelata · {story.cat}
        </div>
        <button onClick={onClose} style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          background: "transparent", color: "var(--ink)",
          border: "1px solid var(--line)", padding: "8px 16px",
          fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em",
          textTransform: "uppercase", cursor: "pointer",
          transition: "background .2s",
        }}
          onMouseEnter={e => e.currentTarget.style.background = "var(--paper-2)"}
          onMouseLeave={e => e.currentTarget.style.background = "transparent"}
        >
          <IconClose /> Chiudi
        </button>
      </div>

      {/* Contenuto articolo */}
      <div style={{ maxWidth: 760, margin: "0 auto", padding: "56px 32px 120px" }}>
        <Eyebrow>{story.cat}</Eyebrow>

        <h1 style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(36px, 6vw, 68px)",
          fontWeight: 500, lineHeight: 1.05, letterSpacing: "-0.02em",
          margin: "16px 0 24px",
        }}>{story.title}</h1>

        <div style={{
          display: "flex", gap: 24, alignItems: "center",
          paddingBottom: 24, borderBottom: "1px solid var(--line)", marginBottom: 40,
          fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--muted)",
        }}>
          <span>Redazione Calabria Svelata</span>
          <span style={{ width: 3, height: 3, borderRadius: 999, background: "var(--line)" }} />
          <span>{story.date}</span>
          <span style={{ width: 3, height: 3, borderRadius: 999, background: "var(--line)" }} />
          <span>{story.read || story.readTime} di lettura</span>
        </div>

        {story.img && (
          <div style={{ marginBottom: 40 }}>
            <div style={{ aspectRatio: "16/9", overflow: "hidden" }}>
              <img src={story.img} alt={story.imgCaption || story.title}
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            {story.imgCaption && (
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--muted)",
                marginTop: 8, letterSpacing: "0.12em", textTransform: "uppercase",
              }}>{story.imgCaption}</div>
            )}
          </div>
        )}

        {/* Occhiello / dek */}
        <p style={{
          fontSize: 21, lineHeight: 1.55,
          fontFamily: "var(--font-display)", fontStyle: "italic",
          color: "var(--ink)", marginBottom: 36,
          paddingBottom: 36, borderBottom: "1px solid var(--line)",
        }}>{story.dek}</p>

        {/* Corpo dell'articolo */}
        {(story.body || []).map((para, i) => (
          <p key={i} style={{
            fontSize: 17, lineHeight: 1.8, marginBottom: 28,
            color: "var(--ink)",
          }}>{para}</p>
        ))}

        <div style={{ marginTop: 64, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
          <button onClick={onClose} style={{
            background: "var(--ink)", color: "var(--paper)", border: "none",
            padding: "14px 32px", fontFamily: "var(--font-mono)", fontSize: 11,
            letterSpacing: "0.14em", textTransform: "uppercase", cursor: "pointer",
          }}>← Torna agli articoli</button>
        </div>
      </div>
    </div>
  );
}
window.ArticleModal = ArticleModal;