/* ReflectionReader.jsx — reading-view overlay (sharp, dark, sans prose) */
function ReflectionReader({ item, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, []);
  if (!item) return null;
  const paras = item.major ? item.paras : [item.body];
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(15,17,20,0.96)", overflowY: "auto", animation: "neelFade var(--dur) var(--ease)" }}>
      <div className="reader-panel" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 740, margin: "0 auto", minHeight: "100%", background: "var(--bg)", borderLeft: "1px solid var(--border)", borderRight: "1px solid var(--border)", padding: "28px 64px 96px" }}>
        <div style={{ display: "flex", justifyContent: "flex-end", position: "sticky", top: 0, background: "var(--bg)", paddingTop: 12, paddingBottom: 16, marginBottom: 8 }}>
          <button onClick={onClose} style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "transparent", border: "1px solid var(--border-strong)", color: "var(--fg-2)", cursor: "pointer", borderRadius: 0, padding: "9px 14px", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase" }}>
            <Icon name="x" size={15} /> Close
          </button>
        </div>
        <Kicker blue>{item.major ? "Major reflection" : `Reflection R/${item.n}`}</Kicker>
        <h1 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 40, color: "var(--fg)", margin: "18px 0 12px", lineHeight: 1.08, letterSpacing: "-.015em" }}>{item.topic}</h1>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 40, paddingBottom: 28, borderBottom: "1px solid var(--border)" }}>
          <span className="label" style={{ color: "var(--fg-2)" }}>NEEL SATYAVOLU</span>
          <span style={{ width: 3, height: 3, background: "var(--fg-4)" }} />
          <span className="timecode" style={{ color: "var(--fg-4)" }}>{item.major ? item.read : "~100 WORDS"}</span>
        </div>
        {paras.map((p, i) => <p key={i} className="prose" style={{ margin: "0 0 24px" }}>{p}</p>)}
      </div>
    </div>
  );
}

Object.assign(window, { ReflectionReader });