// Editorial Hub (centerpiece), Testimonials, CTA, Footer const { useState: useState2 } = React; /* ================= EDITORIAL HUB ================= */ function Insights({ data }) { const ins = data.insights; const [topic, setTopic] = useState2("All"); const filtered = topic === "All" ? ins.secondary : ins.secondary.filter(s => s.topic === topic); return (
{/* Masthead */}
{ins.issue}

The Diplomatic Diary

A reading on
practice · negotiation · foreign policy · statecraft
{/* Framing + topics */}

{ins.title}

{ins.framing}

{ins.topics.map((t) => ( ))}
View all {ins.archiveCount} entries →
{/* FEATURED ESSAY — large editorial anchor */}
{ins.featured.kicker} · {ins.featured.topic}

{ins.featured.title}

{ins.featured.excerpt}

{ins.featured.author}
{ins.featured.role} · {ins.featured.date} · {ins.featured.readtime}
Read essay →
{/* Secondary grid — editorial cards */}
More from the Diary {topic !== "All" ? `· ${topic}` : ""}
{filtered.length} entries
{filtered.map((s, i) => ( ))} {filtered.length === 0 && (
No entries under this topic yet.
)}
{/* Editorial column / from the editor */}
{ins.column.label}

"{ins.column.title}"

{ins.column.lede}

— {ins.column.author}
Subscribe to the Diary →
); } function ArticleCard({ s, index, totalCols = 3 }) { const [hover, setHover] = useState2(false); const isLeftEdge = index % totalCols === 0; return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ textDecoration: "none", color: "inherit", padding: "32px 24px 28px", borderLeft: isLeftEdge ? "none" : "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", display: "grid", gridTemplateRows: "180px auto 1fr auto", gap: 18, background: hover ? "rgba(255,255,255,0.55)" : "transparent", transition: "background 280ms", }} > {s.img && (
)}
{s.topic} No. {String(index + 47).padStart(3, "0")}

{s.title}

{s.excerpt}

{s.author}
{s.date} · {s.readtime}
→
); } /* ================= TESTIMONIALS ================= */ function Testimonials({ data }) { return (
§ 04 — Voices

From practitioners who passed through.

{data.testimonials.map((t, i) => (
"
{t.quote}
{t.name}
{t.role} · {t.country}
))}
); } /* ================= FINAL CTA ================= */ function FinalCTA({ data }) { const a = data.admissions; return (
{a.eyebrow}

{a.title}

{a.lede}

{a.primary} → {a.secondary}
{a.metrics.map((m, i) => (
{m.l}
{m.v}
{m.k}
))}
); } /* ================= FOOTER ================= */ function Footer({ data }) { const c = data.contact; return ( ); } Object.assign(window, { Insights, Testimonials, FinalCTA, Footer, ArticleCard });