// Personal page — photography, book covers, logos, advocacy

const PHOTOS = [
  { src: "static/assets/portfolio/travels/rohingya-camp.jpg",   caption: "In front of the Rohingya Refugee Camp", place: "Ukhia, Cox's Bazar", date: "23 Feb 2023" },
  { src: "static/assets/portfolio/travels/rohingya-school.jpg", caption: "A vibrant school in the camp",         place: "Ukhia, Cox's Bazar", date: "22 Feb 2023" },
  { src: "static/assets/portfolio/photography/lonely-house.jpg",caption: "A lonely house at the shore",          place: "Cox's Bazar",         date: "24 Feb 2023" },
  { src: "static/assets/portfolio/photography/shampan.jpg",     caption: "Shampan boats resting on the shore",   place: "Cox's Bazar",         date: "24 Feb 2023" },
  { src: "static/assets/portfolio/photography/atlia.jpg",       caption: "Drifting on a tranquil lake beside my ancestral home", place: "Bangladesh", date: "13 Dec 2012" },
  { src: "static/assets/portfolio/photography/cheese.jpg",      caption: "Handcrafted cheese",                   place: "Kishoreganj, Bangladesh", date: "16 Feb 2023" },
  { src: "static/assets/portfolio/photography/undulatus-asperatus.jpg", caption: "Undulatus Asperatus",          place: "RUET campus, Rajshahi", date: "22 Apr 2017" },
  { src: "static/assets/portfolio/travels/gulf-of-mexico.jpg",  caption: "Dawn at the Gulf of Mexico",           place: "Biloxi, MS",         date: "29 Oct 2023" },
];

const BOOKS = [
  { src: "static/assets/portfolio/book-covers/badda.png",    title: "Badda General",  meta: "Autobiographical novel by Tyabur Rahman · Amar Ekushey Grontho Mela 2019", link: { href: "https://www.rokomari.com/book/179410/badda-genarel", label: "rokomari.com" } },
  { src: "static/assets/portfolio/book-covers/zugjatra.jpg", title: "Zugjatra",       meta: "Historical fiction · forthcoming 2026" },
];

const LOGOS = [
  { src: "static/assets/portfolio/logos/socchar.png", title: "Socchar", meta: "Volunteering with a US-based human-rights group active in Bangladesh — focusing on enforced disappearances, extrajudicial killings, and marginalized rights.", link: { href: "https://socchar.com/", label: "socchar.com" } },
  { src: "static/assets/portfolio/logos/rit.png",     title: "Research & Integration Thoughts (RIT)", meta: "Logo for an independent think tank launching in Bangladesh — visual cue inspired by the MIT mark." },
];

const PagePersonal = ({ theme }) => (
  <main>
    <Container theme={theme} style={{ paddingTop: 72, paddingBottom: 32 }}>
      <Eyebrow theme={theme} color={theme.accent}>Personal</Eyebrow>
      <h1 style={{ fontFamily: theme.fontSans, fontSize: 40, fontWeight: 500, letterSpacing: "-0.02em", margin: "16px 0 20px", color: theme.ink, textWrap: "balance" }}>
        Outside the work — and yet, often, the source of it.
      </h1>
      <p style={{ fontFamily: theme.fontBody, fontSize: 18, color: theme.body, lineHeight: 1.6, margin: 0, maxWidth: 760 }}>
        Photographs from solo travels, book covers I have designed, logos for organizations I care about, and a quiet record of advocacy work.
      </p>
    </Container>

    {/* Photography */}
    <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad }}>
      <Container theme={theme}>
        <SectionTitle theme={theme} kicker="Photography" title="Solo travels & quiet observations" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
          {PHOTOS.map((p, i) => (
            <figure key={i} style={{ margin: 0 }}>
              <div style={{
                width: "100%", aspectRatio: "4/5",
                background: `${theme.chip} url(${p.src}) center/cover no-repeat`,
                border: `1px solid ${theme.line}`,
              }} />
              <figcaption style={{ marginTop: 10 }}>
                <div style={{ fontFamily: theme.fontSans, fontSize: 13.5, color: theme.ink, lineHeight: 1.4 }}>{p.caption}</div>
                <div style={{ fontFamily: theme.fontMono, fontSize: 10.5, color: theme.muted, letterSpacing: "0.04em", marginTop: 4 }}>{p.place} · {p.date}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </Container>
    </section>

    {/* Writing in print — Roar */}
    <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad, background: theme.paper2 }}>
      <Container theme={theme}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }}>
          <div>
            <Eyebrow theme={theme}>Roar Bangla</Eyebrow>
            <h2 style={{ fontFamily: theme.fontSans, fontSize: 26, fontWeight: 500, letterSpacing: "-0.015em", margin: "12px 0 14px", color: theme.ink, lineHeight: 1.25 }}>
              Roughly thirty feature stories, written between 2017 and 2019.
            </h2>
            <p style={{ fontFamily: theme.fontBody, fontSize: 15.5, color: theme.body, margin: 0, marginBottom: 14, lineHeight: 1.65 }}>
              Topics ranged across science, literature, philosophy, photography, film, and local communities — the writing apprenticeship that taught me how to attend to a story.
            </p>
            <a onClick={() => location.hash = "#/writing"} style={{ fontFamily: theme.fontMono, fontSize: 12, letterSpacing: "0.06em", color: theme.accent, textDecoration: "none", borderBottom: `1px solid ${theme.accent}` }}>
              Read selected pieces →
            </a>
          </div>
          <img src="static/assets/portfolio/roar.jpg" alt="" style={{ width: "100%", border: `1px solid ${theme.line}` }} />
        </div>
      </Container>
    </section>

    {/* Books */}
    <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad }}>
      <Container theme={theme}>
        <SectionTitle theme={theme} kicker="Book covers" title="Two covers" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 48 }}>
          {BOOKS.map((b, i) => (
            <figure key={i} style={{ margin: 0, display: "grid", gridTemplateColumns: "180px 1fr", gap: 28 }}>
              <img src={b.src} alt="" style={{ width: "100%", border: `1px solid ${theme.line}`, background: theme.chip }} />
              <figcaption>
                <h3 style={{ fontFamily: theme.fontSans, fontSize: 18, fontWeight: 500, margin: 0, marginBottom: 8, color: theme.ink, letterSpacing: "-0.005em" }}>{b.title}</h3>
                <p style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.body, margin: 0, marginBottom: 12, lineHeight: 1.6 }}>{b.meta}</p>
                {b.link && (
                  <a href={b.link.href} target="_blank" rel="noopener" style={{ fontFamily: theme.fontMono, fontSize: 11.5, color: theme.accent, textDecoration: "none", borderBottom: `1px solid ${theme.accent}`, letterSpacing: "0.05em" }}>{b.link.label} ↗</a>
                )}
              </figcaption>
            </figure>
          ))}
        </div>
      </Container>
    </section>

    {/* Logos / advocacy */}
    <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad, background: theme.paper2 }}>
      <Container theme={theme}>
        <SectionTitle theme={theme} kicker="Marks" title="Logos & advocacy" lede="Two organizations whose work I support — and the visual marks I've contributed." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 48 }}>
          {LOGOS.map((l, i) => (
            <figure key={i} style={{ margin: 0, display: "grid", gridTemplateColumns: "160px 1fr", gap: 28, alignItems: "start" }}>
              <div style={{
                width: "100%", aspectRatio: "1/1",
                background: `${theme.paper} url(${l.src}) center/contain no-repeat`,
                border: `1px solid ${theme.line}`,
              }} />
              <figcaption>
                <h3 style={{ fontFamily: theme.fontSans, fontSize: 18, fontWeight: 500, margin: 0, marginBottom: 8, color: theme.ink }}>{l.title}</h3>
                <p style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.body, margin: 0, marginBottom: 12, lineHeight: 1.6 }}>{l.meta}</p>
                {l.link && (
                  <a href={l.link.href} target="_blank" rel="noopener" style={{ fontFamily: theme.fontMono, fontSize: 11.5, color: theme.accent, textDecoration: "none", borderBottom: `1px solid ${theme.accent}`, letterSpacing: "0.05em" }}>{l.link.label} ↗</a>
                )}
              </figcaption>
            </figure>
          ))}
        </div>
      </Container>
    </section>
  </main>
);

window.PagePersonal = PagePersonal;