// Writing page — longform / essays / Roar Bangla archive

const WRITING_DATA = {
  featured: [
    {
      tag: "Feature · Roar Bangla",
      year: "2017",
      title: "\"Subodh, Keep an Eye on the Sun!\"",
      blurb: "On the mysterious stencil art that appeared overnight on Dhaka's walls — and the international media attention it drew. One of my earliest pieces of public-facing writing, and the one that taught me how a single image can carry political weight across a city.",
      href: "https://archive.roar.media/bangla/main/bangladesh/protesting-wall-art-in-dhaka",
    },
    {
      tag: "Feature · Roar Bangla",
      year: "2017",
      title: "Life on the river: the Manta community",
      blurb: "Boat-dwelling fishers in southern Bangladesh, bound by a generational cycle of debt — and the small, stubborn ways they imagine a different future.",
      href: "https://archive.roar.media/bangla/main/bangladesh/life-on-the-river",
    },
    {
      tag: "Criticism · Roar Bangla",
      year: "2018",
      title: "On Kubrick's 2001: A Space Odyssey",
      blurb: "A close reading of the timeless classic — what its silences communicate, and why it remains the rare film that asks more of its viewer than it answers.",
      href: "https://archive.roar.media/bangla/main/book-movie/2001-a-space-odyssey",
    },
  ],
};

const PageWriting = ({ theme }) => (
  <main>
    <Container theme={theme} style={{ paddingTop: 72, paddingBottom: 32 }}>
      <Eyebrow theme={theme} color={theme.accent}>Writing</Eyebrow>
      <h1 style={{ fontFamily: theme.fontSans, fontSize: 40, fontWeight: 500, letterSpacing: "-0.02em", margin: "16px 0 20px", color: theme.ink, textWrap: "balance" }}>
        Essays, criticism, and reportage.
      </h1>
      <p style={{ fontFamily: theme.fontBody, fontSize: 18, color: theme.body, lineHeight: 1.6, margin: 0, maxWidth: 760 }}>
        I contributed roughly thirty in-depth feature stories to <em>Roar Bangla</em> during my undergraduate years — covering science, literature, philosophy, photography, film, and local communities. A few highlights below; the full archive lives at the link.
      </p>
    </Container>

    <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad }}>
      <Container theme={theme}>
        <SectionTitle theme={theme} kicker="Selected pieces" title="A few I keep returning to" />

        {WRITING_DATA.featured.map((p, i) => (
          <article key={i} style={{
            display: "grid", gridTemplateColumns: "100px 1fr",
            gap: 36, padding: "28px 0",
            borderBottom: `1px solid ${theme.line}`,
            alignItems: "baseline",
          }}>
            <div style={{ fontFamily: theme.fontMono, fontSize: 12, color: theme.muted, letterSpacing: "0.04em" }}>{p.year}</div>
            <div>
              <div style={{ fontFamily: theme.fontMono, fontSize: 10.5, color: theme.accent, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 8 }}>{p.tag}</div>
              <h3 style={{ fontFamily: theme.fontSans, fontSize: 22, fontWeight: 500, letterSpacing: "-0.012em", margin: 0, marginBottom: 10, lineHeight: 1.3, color: theme.ink }}>{p.title}</h3>
              <p style={{ fontFamily: theme.fontBody, fontSize: 15.5, color: theme.body, margin: 0, marginBottom: 12, lineHeight: 1.65, maxWidth: 720 }}>{p.blurb}</p>
              <a href={p.href} target="_blank" rel="noopener"
                 style={{ fontFamily: theme.fontMono, fontSize: 12, letterSpacing: "0.06em", color: theme.accent, textDecoration: "none", borderBottom: `1px solid ${theme.accent}` }}>
                Read ↗
              </a>
            </div>
          </article>
        ))}

        <div style={{ marginTop: 28, fontFamily: theme.fontMono, fontSize: 12, color: theme.muted }}>
          <a href="https://archive.roar.media/author/fuad" target="_blank" rel="noopener"
             style={{ color: theme.accent, textDecoration: "none", borderBottom: `1px solid ${theme.accent}`, paddingBottom: 1, letterSpacing: "0.06em" }}>
            Full author profile on Roar Bangla ↗
          </a>
        </div>
      </Container>
    </section>

    <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad, background: theme.paper2 }}>
      <Container theme={theme}>
        <SectionTitle theme={theme} kicker="Notebook" title="Coming soon" lede="A blog will live here — short-form notes on what I'm reading, methodological scratchpads, and dispatches from the PhD as it unfolds." />
      </Container>
    </section>
  </main>
);

window.PageWriting = PageWriting;