/* ════════════════════════════════════════════════════════════════════════
   Portfolio sections for the Ali Soltani academic site.
   Composes design-system primitives from the bundle namespace and exposes
   each section on window for index.html to assemble.
   (Sample content is illustrative — swap in real copy.)
═══════════════════════════════════════════════════════════════════════════ */

const DS = window.AliSoltaniDesignSystem_14b99b;
const { NavBar, Button, SectionHeading, Tag, ContactLink, WritingCard, ResearchEntry, TimelineEntry } = DS;

/* ── shared layout helpers ─────────────────────────────────────────────── */
function Section({ id, children, narrow }) {
  return (
    <section
      id={id}
      data-screen-label={id}
      style={{
        padding: 'var(--space-8) 0',
        scrollMarginTop: 'var(--nav-height)',
      }}
    >
      <div
        style={{
          maxWidth: narrow ? 'var(--content-narrow)' : 'var(--content-max)',
          margin: '0 auto',
          padding: '0 var(--gutter)',
        }}
      >
        <div
          style={{
            background: 'var(--glass-bg)',
            backdropFilter: 'blur(var(--glass-blur)) saturate(125%)',
            WebkitBackdropFilter: 'blur(var(--glass-blur)) saturate(125%)',
            border: '1px solid var(--glass-border)',
            boxShadow: 'var(--glass-shadow)',
            borderRadius: 'var(--radius-xl)',
            padding: 'clamp(1.75rem, 4vw, 3.25rem)',
          }}
        >
          {children}
        </div>
      </div>
    </section>
  );
}

const NAV_SECTIONS = [
  { id: 'about', label: 'About' },
  { id: 'education', label: 'Education' },
  { id: 'research', label: 'Research' },
  { id: 'service', label: 'Service' },
  { id: 'writing', label: 'Writing' },
  { id: 'contact', label: 'Contact' },
];

/* ── Hero ──────────────────────────────────────────────────────────────── */
function Hero() {
  return (
    <header
      id="top"
      style={{
        minHeight: '92vh',
        display: 'flex',
        alignItems: 'center',
        padding: 'calc(var(--nav-height) + var(--space-9)) 0 var(--space-12)',
      }}
    >
      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)', width: '100%' }}>
        <div style={{ maxWidth: '40ch' }}>
          <span className="eyebrow">Urban Planning · Transport Research · Education</span>
        </div>
        <h1
          style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'var(--fs-hero)',
            fontWeight: 'var(--fw-display)',
            color: 'var(--text-heading)',
            lineHeight: 'var(--lh-tight)',
            letterSpacing: 'var(--ls-tight)',
            margin: 'var(--space-4) 0 0',
          }}
        >
          Ali Soltani
        </h1>
        <p
          style={{
            fontSize: 'var(--fs-lead)',
            lineHeight: 'var(--lh-normal)',
            color: 'var(--text-secondary)',
            maxWidth: '60ch',
            margin: 'var(--space-5) 0 0',
          }}
        >
          PhD | Urban Planner · Transport Researcher · Educator
          <br />
          Flinders University &amp; UNSW Sydney · Marie Curie Fellow, University of Orléans
          <br />
          World's Top 2% Scientist (Stanford/Elsevier, 2023–2025) · 3,450+ Citations · h-index 31
        </p>
        <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-7)', flexWrap: 'wrap' }}>
          <Button variant="primary" href="#contact">Get in touch</Button>
          <Button variant="secondary" href="#research" iconRight={<span>→</span>}>Read the research</Button>
        </div>
      </div>
    </header>
  );
}

/* ── About ─────────────────────────────────────────────────────────────── */
function About() {
  return (
    <Section id="about" narrow>
      <SectionHeading eyebrow="About" title="Urban planner with a global perspective" />
      <div style={{ marginTop: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
        <p style={{ fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-primary)' }}>
          I am an urban planning and transport researcher currently based in Adelaide, South Australia, holding
          appointments at Flinders University and the City Futures Research Centre at the University of New South Wales.
          I also hold a Senior Fellowship under the European Union Marie Curie program at the University of Orléans,
          France, where I lead an independent research program in sustainable urban mobility. My work spans vulnerable
          road users, transport safety, urban heat island mitigation, housing markets, and the application of artificial
          intelligence and digital twins to next-generation urban challenges.
        </p>
        <p style={{ fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-secondary)' }}>
          I completed my PhD in Urban and Regional Planning at the University of South Australia, where I investigated
          the links between neighbourhood design, walkability, and travel behaviour — work that established the
          foundation for a research career now recognised in Stanford and Elsevier's World Top 2% Scientists list for
          three consecutive years. My academic journey has taken me across Iran, Turkey, Japan, Italy, France, and
          Australia, and I have held research and teaching positions at institutions including Shiraz University, the
          University of South Australia, Griffith University, and the University of Naples Federico II.
        </p>
        <p style={{ fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-secondary)' }}>
          In the classroom, my teaching is shaped by a deep belief in learning through doing. I draw on live datasets,
          real-world case studies, and problem-based methods to equip students with the analytical skills that matter
          in practice — an approach recognised with a Faculty Best Teacher Award and consistently strong student
          evaluations. I have supervised more than 70 Master's and Honours students to completion, and many have gone
          on to secure competitive PhD scholarships and postdoctoral positions at institutions across Australia,
          Europe, and North America.
        </p>
        <p style={{ fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-secondary)' }}>
          I welcome research collaborations in urban planning, transport analytics, spatial data science, and related
          disciplines. I am available to supervise Master of Philosophy and PhD candidates, with particular interest
          in topics aligned with road safety, urban mobility, housing dynamics, and AI applications in urban systems.
          Feel free to reach out to discuss potential collaboration in teaching or research, or to connect about my work.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)', marginTop: 'var(--space-3)' }}>
          <Tag tone="soft">Future Urban Analytics</Tag>
          <Tag>Autonomous Mobility</Tag>
          <Tag>Transport Safety</Tag>
          <Tag>Urban Heat Island</Tag>
          <Tag>GIS &amp; Spatial Analytics</Tag>
          <Tag>Housing Markets</Tag>
        </div>
      </div>
    </Section>
  );
}

/* ── Education ─────────────────────────────────────────────────────────── */
function Education() {
  return (
    <Section id="education" alt narrow>
      <SectionHeading eyebrow="Education" title="Training" aside="2013 — 2024" />
      <div style={{ marginTop: 'var(--space-5)' }}>
        <TimelineEntry
          date="2019 — 2024"
          title="Ph.D., Computational Social Science"
          place="Stanford University"
          note="Dissertation: Attention cascades in moderated networks. Advised by Prof. L. Hart." />
        <TimelineEntry
          date="2017 — 2019"
          title="M.Sc., Statistics"
          place="University of Toronto"
          note="Focus on causal inference and experimental design." />
        <TimelineEntry
          date="2013 — 2017"
          title="B.Sc., Computer Science & Sociology"
          place="University of Toronto"
          note="Graduated with high distinction." />
      </div>
    </Section>
  );
}

/* ── Research ──────────────────────────────────────────────────────────── */
function Research() {
  return (
    <Section id="research">
      <SectionHeading
        eyebrow="Research"
        title="Selected work"
        aside="Full list on Scholar ↗"
        lead="Peer-reviewed publications on networked attention, moderation, and platform design." />
      <div style={{ marginTop: 'var(--space-4)' }}>
        <ResearchEntry
          title="Attention cascades in moderated networks"
          authors="A. Soltani, M. Rivera, & K. Osei"
          venue="Nature Human Behaviour" year="2024" href="#"
          tags={['Networks', 'Field experiments', 'Moderation']} />
        <ResearchEntry
          title="The quiet cost of recommendation"
          authors="J. Lindqvist, A. Soltani, & D. Park"
          venue="Proceedings of the National Academy of Sciences" year="2023" href="#"
          tags={['Platform design', 'Causal inference']} />
        <ResearchEntry
          title="Measuring exposure to low-quality information at scale"
          authors="A. Soltani & L. Hart"
          venue="ICWSM" year="2022" href="#"
          tags={['Misinformation', 'Measurement']} />
      </div>
    </Section>
  );
}

/* ── Academic Service ──────────────────────────────────────────────────── */
function Service() {
  return (
    <Section id="service" alt narrow>
      <SectionHeading eyebrow="Academic Service" title="Reviewing & community" />
      <div style={{ marginTop: 'var(--space-5)' }}>
        <TimelineEntry date="2023 — present" title="Program Committee" place="ICWSM" end="Reviewer" />
        <TimelineEntry date="2022 — present" title="Ad-hoc Reviewer" place="Nature Human Behaviour · PNAS · CSCW" />
        <TimelineEntry date="2021 — 2023" title="Graduate Mentor" place="Stanford Summer Research Program" />
        <TimelineEntry date="2020" title="Co-organizer" place="Workshop on Networked Attention, NetSci" />
      </div>
    </Section>
  );
}

/* ── Recognition ───────────────────────────────────────────────────────── */
function Recognition() {
  return (
    <Section id="recognition" narrow>
      <SectionHeading eyebrow="Recognition" title="Honors & awards" />
      <div style={{ marginTop: 'var(--space-5)' }}>
        <TimelineEntry date="2024" title="Best Paper, Honourable Mention" place="ICWSM" end="Award" />
        <TimelineEntry date="2022" title="Graduate Research Fellowship" place="National Science Foundation" />
        <TimelineEntry date="2021" title="Dissertation Completion Grant" place="Stanford Institute for Human-Centered AI" />
      </div>
    </Section>
  );
}

/* ── Writing ───────────────────────────────────────────────────────────── */
function Writing() {
  return (
    <Section id="writing" alt>
      <SectionHeading
        eyebrow="Writing"
        title="Essays & notes"
        lead="Less formal pieces — arguments in progress, reading notes, and the occasional talk." />
      <div
        style={{
          marginTop: 'var(--space-6)',
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
          gap: 'var(--space-5)',
        }}
      >
        <WritingCard kind="Essay" meta="Mar 2025"
          title="On the cost of attention"
          description="Why platform design choices quietly reshape what we collectively notice — and why that's a measurement problem before it's a moral one." href="#" />
        <WritingCard kind="Note" meta="6 min"
          title="Reading networks sideways"
          description="A short argument for studying edges before nodes when you care about how information actually travels." href="#" />
        <WritingCard kind="Talk" meta="Dec 2024"
          title="What moderation can and can't do"
          description="Slides and notes from a department seminar on the limits of content moderation as a lever." href="#" />
      </div>
    </Section>
  );
}

/* ── Contact ───────────────────────────────────────────────────────────── */
function Contact() {
  return (
    <Section id="contact" narrow>
      <SectionHeading
        eyebrow="Contact"
        title="Get in touch"
        lead="The best way to reach me is email. I read everything, and reply to most." />
      <div style={{ marginTop: 'var(--space-6)' }}>
        <ContactLink label="Email" value="ali.soltani@university.edu" href="mailto:ali.soltani@university.edu" />
        <div style={{ borderBottom: '1px solid var(--border-faint)' }}></div>
      </div>
    </Section>
  );
}

/* ── Footer ────────────────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer style={{ background: 'transparent', borderTop: '1px solid var(--border-faint)', padding: 'var(--space-7) 0' }}>
      <div
        style={{
          maxWidth: 'var(--content-max)',
          margin: '0 auto',
          padding: '0 var(--gutter)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 'var(--space-3)',
        }}
      >
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-small)', color: 'var(--text-faint)' }}>
          © 2026 Ali Soltani
        </span>
        <a href="#top" style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-small)', color: 'var(--text-muted)' }}>
          Back to top ↑
        </a>
      </div>
    </footer>
  );
}

/* ── Page ──────────────────────────────────────────────────────────────── */
function Portfolio() {
  return (
    <React.Fragment>
      <NavBar
        name="Ali Soltani"
        sections={NAV_SECTIONS}
        cta={<Button size="sm" variant="secondary" href="#">CV</Button>} />
      <main>
        <Hero />
        <About />
        <Education />
        <Research />
        <Service />
        <Recognition />
        <Writing />
        <Contact />
      </main>
      <Footer />
    </React.Fragment>
  );
}

window.Portfolio = Portfolio;
