// Home page — Variant A

const PageHome = ({ theme, setRoute }) => {
  const news = [
    { d: "2026.04", k: "Working Paper", t: "Universities as Torture Environments: A Mixed-Methods Study of 3,078 Students Across Three Bangladeshi Public Universities", v: "Quasi-experimental detection of an 8× post-regime decline in violence." },
    { d: "2026.02", k: "In Progress",   t: "Quantifying Legitimization in Bangla & English Media Coverage of Extrajudicial Killings (2009–2024)", v: "With Dr. Naeemul Hassan, UMD Computational Journalism Lab." },
    { d: "2025.10", k: "Spotlight",     t: "Agentic Simulations of Narrative Propagation under Moderation Regimes", v: "Agents4Science 2025." },
    { d: "2024.12", k: "Conference",    t: "Mondrian Map: Pathway Visualization with Language-Model Embeddings", v: "IEEE BIBM, Lisbon, Portugal." },
  ];

  const aims = [
    { n: "01", t: "Theory-grounded multilingual narrative analysis",
      b: "Embedding sociological constructs — framing, moral evaluation, mythopoesis — directly into LLM-based measurement, across regimes, media systems and languages of the Global South and North." },
    { n: "02", t: "Inferring repression from community traces",
      b: "Multimodal models that read self-censorship, hedging, churn and topic migration as early-warning signals of democratic backsliding." },
    { n: "03", t: "Cultural evolution through agentic simulation",
      b: "Agent-based models parameterized by NLP-derived semantic, affective and moral profiles — to study how human and AI-generated narratives co-evolve under different platform regimes." },
  ];

  return (
    <main>
      {/* Hero */}
      <Container theme={theme} style={{ paddingTop: 88, paddingBottom: 64 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.45fr 1fr", gap: theme.gap }}>
          <div>
            <Eyebrow theme={theme} color={theme.accent}>Incoming PhD · Fall 2026</Eyebrow>
            <h1 style={{
              fontFamily: theme.fontSans, fontSize: 46, lineHeight: 1.1, fontWeight: 500,
              letterSpacing: "-0.02em", margin: "20px 0 28px", textWrap: "balance", color: theme.ink,
            }}>
              I study how political narratives and cultural dynamics evolve across digital media — with particular attention to the Global South.
            </h1>
            <p style={{ fontFamily: theme.fontBody, fontSize: 18, color: theme.body, lineHeight: 1.6, margin: 0, marginBottom: 18, maxWidth: 640 }}>
              I build interpretable, theory-grounded computational frameworks to trace contested narratives, model their propagation, and surface the mechanisms by which meaning, power, and influence travel through media ecosystems.
            </p>
            <p style={{ fontFamily: theme.fontBody, fontSize: 15, color: theme.muted, margin: 0, maxWidth: 640 }}>
              Starting Fall 2026 as a PhD student in Information Studies at the University of Maryland, advised by Dr.&nbsp;Naeemul&nbsp;Hassan and Dr.&nbsp;Julia&nbsp;Mendelsohn.
            </p>

            <div style={{ marginTop: 36, display: "flex", gap: 24, fontSize: 14, fontFamily: theme.fontSans, flexWrap: "wrap" }}>
              <a onClick={() => setRoute("research")} style={{ color: theme.ink, textDecoration: "none", borderBottom: `1.5px solid ${theme.accent}`, paddingBottom: 2 }}>Research →</a>
              <a href="https://scholar.google.com/citations?user=z9XgyOkAAAAJ&hl=en" target="_blank" rel="noopener" style={{ color: theme.muted, textDecoration: "none" }}>Scholar</a>
              <a href="mailto:alabir.fuad@gmail.com" style={{ color: theme.muted, textDecoration: "none" }}>Email</a>
              <a onClick={() => setRoute("writing")} style={{ color: theme.muted, textDecoration: "none" }}>Writing</a>
              <span style={{ color: theme.muted }}>CV (PDF)</span>
            </div>
          </div>

          <aside>
            <div style={{
              width: "100%", aspectRatio: "4/5", background: theme.chip,
              backgroundImage: `repeating-linear-gradient(135deg, ${theme.line} 0 2px, transparent 2px 14px)`,
              display: "flex", alignItems: "flex-end", padding: 18,
              fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: "0.06em",
            }}>portrait · fuad al abir</div>
            <div style={{
              fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, marginTop: 12,
              letterSpacing: "0.04em", lineHeight: 1.7,
            }}>
              <div>Birmingham, AL → College Park, MD</div>
              <div>iSchool · University of Maryland · Aug 2026</div>
            </div>
          </aside>
        </div>
      </Container>

      {/* About — 'Background and motivation' */}
      <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad }}>
        <Container theme={theme}>
          <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: theme.gap }}>
            <Eyebrow theme={theme}>About</Eyebrow>
            <div style={{ maxWidth: 760 }}>
              <p style={{ fontFamily: theme.fontBody, fontSize: 19, lineHeight: 1.55, color: theme.ink, margin: 0, marginBottom: 18 }}>
                My interest in computational social science grew from recognizing that the analytical tools I used in earlier research could address more fundamental questions about our lives. While I value my technical training in HCI and bioinformatics, my experience in Bangladesh made the stakes of the information ecosystem urgent to address.
              </p>
              <p style={{ fontFamily: theme.fontBody, fontSize: 16, lineHeight: 1.65, color: theme.body, margin: 0, marginBottom: 14 }}>
                I had seen how media framing, selective reporting, and institutional power shape public opinion. Large-scale computational analysis offers an effective way to reveal these opaque mechanisms of influence — and that realization led me to move into computational journalism, political communication, and human-rights research.
              </p>
              <p style={{ fontFamily: theme.fontBody, fontSize: 16, lineHeight: 1.65, color: theme.body, margin: 0 }}>
                I earned a B.Sc. in Computer Science and Engineering from RUET, and currently work as a Graduate Research Assistant at the ai.med Lab, UAB, advised by Prof. Jake&nbsp;Y.&nbsp;Chen. My prior work spans gait & gesture recognition, explainable AI for cancer biomarkers, and CV pipelines for safe browsing — three years of industry experience that I now redirect toward sociopolitical inquiry.
              </p>
            </div>
          </div>
        </Container>
      </section>

      {/* Research aims */}
      <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad, background: theme.paper2 }}>
        <Container theme={theme}>
          <SectionTitle theme={theme}
            kicker="Research Aims"
            title="Three threads of inquiry"
            lede="They share a common question: how does meaning travel — and how does power inflect its trajectory?" />

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 36 }}>
            {aims.map((x) => (
              <div key={x.n} style={{ borderTop: `1px solid ${theme.ink}`, paddingTop: 18 }}>
                <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.accent, letterSpacing: "0.1em", marginBottom: 12 }}>AIM {x.n}</div>
                <h3 style={{ fontFamily: theme.fontSans, fontSize: 18, fontWeight: 500, letterSpacing: "-0.005em", margin: 0, marginBottom: 12, lineHeight: 1.3, color: theme.ink }}>{x.t}</h3>
                <p style={{ fontFamily: theme.fontBody, fontSize: 14.5, color: theme.body, margin: 0, lineHeight: 1.65 }}>{x.b}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* Recent */}
      <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad }}>
        <Container theme={theme}>
          <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: theme.gap }}>
            <Eyebrow theme={theme}>Recent</Eyebrow>
            <div>
              {news.map((x, i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "90px 130px 1fr",
                  gap: 28, padding: "20px 0",
                  borderBottom: i < news.length - 1 ? `1px solid ${theme.line}` : "none",
                  alignItems: "baseline",
                }}>
                  <div style={{ fontFamily: theme.fontMono, fontSize: 12, color: theme.muted }}>{x.d}</div>
                  <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.accent, letterSpacing: "0.1em", textTransform: "uppercase" }}>{x.k}</div>
                  <div>
                    <div style={{ fontFamily: theme.fontSans, fontSize: 16, fontWeight: 500, color: theme.ink, marginBottom: 4, letterSpacing: "-0.005em" }}>{x.t}</div>
                    <div style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.muted }}>{x.v}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Container>
      </section>

      {/* UMD */}
      <section style={{ borderTop: `1px solid ${theme.line}`, paddingTop: theme.sectionPad, paddingBottom: theme.sectionPad, background: theme.paper2 }}>
        <Container theme={theme}>
          <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: theme.gap }}>
            <Eyebrow theme={theme}>Why UMD</Eyebrow>
            <div style={{ maxWidth: 780 }}>
              <p style={{ fontFamily: theme.fontBody, fontSize: 17, lineHeight: 1.6, color: theme.ink, margin: 0, marginBottom: 16 }}>
                The UMD iSchool sits at the intersection of computation, communication, and information science I want to occupy. My advisors map directly onto the two halves of the work I want to do.
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, marginTop: 8 }}>
                <div>
                  <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.accent, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>Advisor</div>
                  <div style={{ fontFamily: theme.fontSans, fontSize: 17, fontWeight: 500, color: theme.ink, marginBottom: 6 }}>Dr. Naeemul Hassan</div>
                  <p style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.body, lineHeight: 1.6, margin: 0 }}>
                    Computational Journalism Lab. Multilingual framing analysis (SUFA), misleading visual content. Already collaborating on the EJK-coverage study.
                  </p>
                </div>
                <div>
                  <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.accent, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>Advisor</div>
                  <div style={{ fontFamily: theme.fontSans, fontSize: 17, fontWeight: 500, color: theme.ink, marginBottom: 6 }}>Dr. Julia Mendelsohn</div>
                  <p style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.body, lineHeight: 1.6, margin: 0 }}>
                    Computational sociolinguistics. Dog-whistle rhetoric, identity-based framing, implicit dehumanization — the sociolinguistic backbone for my multilingual & agentic methods.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </section>
    </main>
  );
};

window.PageHome = PageHome;