// pages.jsx — About (+education), Skills, More, Experience, Awards, Contact
// Content sourced from Sofi Le's résumé.

const RESUME_HREF = 'https://docs.google.com/document/d/1LSiiTswNaVK_wCGNX8npZ3owXrpXHVFX/edit?usp=sharing&ouid=116388131907682056071&rtpof=true&sd=true';

/* ---------- ABOUT (chair + window: who am i + education) ---------- */
function AboutPage() {
  const involvement = ['Eagle Intern Fellow', 'CEI Summer Fellow', 'Vietnamese Student Assoc. — External Rep', 'Women Innovators Network — Mentorship Program', 'Schiller Institute — Research Board', 'WiCS', 'Society of Women Engineers', 'MakeBC', 'The Hatchery (Makerspace) — Instructor'];
  return (
    <div className="page-wrap">
      <div className="about-hero">
        <div className="page-head" style={{ marginBottom: 0 }}>
          <h2><span className="ital">About</span> me</h2>
          <p className="lead">Hi! I'm an incoming sophomore at Boston College, double-majoring in
            <span className="t-gold">Human-Centered Engineering</span> and <span className="t-gold">Computer Science</span>. I work across
            <span className="t-red"> software development, AI systems,</span> and <span className="t-red">physical engineering</span>: building everything
            from machine learning models and full-stack applications to physical prototypes. I'm passionate about
            building systems that serve overlooked fields and underserved communities, and I'm especially focused on
            leveraging AI to improve <span className="t-gold">agricultural systems</span> and <span className="t-gold">sustainability</span>.</p>
        <a className="btn-resume" href={RESUME_HREF} target="_blank" rel="noopener">My Resume <span className="arr">↗</span></a>
        </div>
        <div className="about-portrait-wrap">
          <img className="portrait" src="about-portrait.webp" alt="Sofi Le" />
        </div>
      </div>

      <div className="cols-2" style={{ marginTop: 'clamp(28px,3.5vw,44px)' }}>
        <div className="section-block" style={{ marginBottom: 0 }}>
          <h3>numbers…</h3>
          {React.createElement(window.NumbersPool)}
        </div>
        <div className="section-block" style={{ marginBottom: 0 }}>
          <h3>What am I up to?</h3>
          <ul className="t-list" style={{ fontSize: '16.5px' }}>
            <li>Building machine learning systems that interact with the physical world</li>
            <li>Developing computer vision models for precision agriculture</li>
            <li>Working toward my first research publication!</li>
            <li>Developing a pre-pilot startup; more to share soon 👀</li>
          </ul>
          <div className="ball-hint">
            <span className="ball-hint-text">Click on a ball!</span>
          </div>
        </div>
      </div>

      <div className="section-block" id="education" style={{ marginTop: 'clamp(40px,5vw,64px)', marginBottom: 0, scrollMarginTop: '80px' }}>
        <h3>Education</h3>
        <div className="cols-2">
          <div className="card" style={{ alignSelf: 'start' }}>
            <div className="label-sm">Expected May 2029</div>
            <div style={{ fontFamily: 'var(--display)', fontSize: '26px', margin: '10px 0 4px', color: 'var(--ink)' }}>Boston College</div>
            <p style={{ color: 'var(--ink-soft)', margin: '0 0 16px', fontSize: '15.5px' }}>
              Morrissey College of Arts &amp; Sciences<br />
              B.S. Human Centered Engineering <span style={{ color: 'var(--gold-deep)' }}>+</span> B.S. Computer Science
            </p>
            <div className="chips">
              <span className="chip">Double Major</span>
              <span className="chip">Chestnut Hill, MA</span>
            </div>
          </div>
          <div>
            <div className="label-sm" style={{ marginBottom: '12px' }}>Involvement</div>
            <div className="chips">{involvement.map((c) => <span className="chip" key={c}>{c}</span>)}</div>
          </div>
        </div>
      </div>
    </div>);

}

/* ---------- SKILLS (bookshelf) ---------- */
function SkillsPage() {
  const groups = {
    'Proficient': ['Python', 'MATLAB', 'Java'],
    'Familiar': ['C++', 'Go', 'JavaScript', 'HTML / CSS', 'PHP'],
    'Hands-on / hardware': ['CAD (Fusion)', '3D Printing', 'Woodworking', 'Metalworking', 'Circuitry', 'Microcontrollers'],
    'Languages': ['Vietnamese — Native', 'English — Native', 'Spanish — Conv.', 'Chinese — Conv.']
  };
  const domains = ['AgriTech & Precision Agriculture', 'Healthcare AI Tech', 'Assistive Hardware', 'Neuroscience AI Tech', 'Web Development', 'App Development', 'Embedded Systems'];

  return (
    <div className="page-wrap">
      <div className="page-head">
        <h2><span className="ital">Skills</span></h2>
        <p className="lead">Particularly good at the intersection between software and hardware!</p>
      </div>

      <div className="cols-12-2">
        <div className="stack" style={{ gap: '22px' }}>
          {Object.entries(groups).map(([k, v]) =>
          <div key={k}>
              <div className="label-sm" style={{ marginBottom: '12px' }}>{k}</div>
              <div className="chips">{v.map((s) => <span className="chip" key={s}>{s}</span>)}</div>
            </div>
          )}
        </div>
        <div className="section-block" style={{ marginBottom: 0 }}>
          <h3>Domains I've shipped in</h3>
          <div className="domain-grid">
            {domains.map((d) =>
            <div key={d} className="domain-tag"><span className="dt-dot" aria-hidden="true"></span>{d}</div>
            )}
          </div>
        </div>
      </div>
    </div>);

}

/* ---------- MORE (guitar / off the clock) ---------- */
function MorePage() {
  const fun = [
  { tag: 'Music', title: 'A beat-up red Strat', body: 'Placeholder — what I play, the bands on repeat, and the one solo I can almost nail.' },
  { tag: 'Maker', title: 'Always mid-build', body: 'Placeholder — the CAD file, 3D print, or woodworking project currently taking over my desk.' },
  { tag: 'Green thumb', title: 'An over-watered monstera', body: 'Placeholder — the windowsill jungle and the plants somehow surviving me.' },
  { tag: 'Community', title: 'Vietnamese Student Association', body: 'Placeholder — events, culture, and the people that make BC feel like home.' }];

  return (
    <div className="page-wrap">
      <div className="page-head">
        <div className="eyebrow">The guitar · off the clock</div>
        <h2><span className="ital">More</span></h2>
        <p className="lead">The stuff that doesn't fit on a résumé.
          <span style={{ color: 'var(--ink-faint)' }}> (placeholders for now — I'll make these mine.)</span></p>
      </div>
      <div className="cols-2">
        {fun.map((f) =>
        <div className="card" key={f.tag}>
            <div className="label-sm">{f.tag}</div>
            <h3 style={{ fontFamily: 'var(--display)', fontSize: '24px', margin: '10px 0 8px', color: 'var(--ink)' }}>{f.title}</h3>
            <p style={{ margin: 0, color: 'var(--ink-soft)', fontSize: '15.5px', lineHeight: 1.6 }}>{f.body}</p>
          </div>
        )}
      </div>
    </div>);

}

/* ---------- EXPERIENCE (laptop) ---------- */
function ExperiencePage() {
  const roles = [
  { when: 'June 2026 — Present', role: 'Undergraduate ML Research Assistant', org: 'US Department of Agriculture · ARS Lab', at: 'Chestnut Hill, MA',
    bullets: ['Building YOLO-based detection and instance segmentation models to identify and segment apple fruit and tree canopies from tractor-mounted multi-modal camera imagery.',
    'Optimizing models for real-time inference on edge hardware to enable variable-rate precision spraying for fruit thinning.'] },
  { when: 'May 2026 — Present', role: 'LLM Trainer', org: 'Handshake AI Solutions', at: 'Remote',
    bullets: ['Author challenging multimodal eval tasks with verified ground-truth answers.',
    'Benchmark vision-language models on visual and compositional reasoning.'] },
  { when: 'Jan 2026 — Present', role: 'Software Engineer', org: 'MechaEagles Baja SAE Racing', at: 'Chestnut Hill, MA',
    bullets: ['Building an embedded firmware driver-HUD with live telemetry — speed, RPM, engine temp, and system diagnostics.',
    'Designed and developed the MechaEagles Baja SAE team website with the CS team.'] },
  { when: 'Feb 2026 — Present', role: 'Research Subcommittee Board Member', org: 'Schiller Institute for Integrated Science & Society', at: 'Boston College',
    bullets: ['Work with faculty and graduate researchers to expand undergraduate access to research opportunities.'] }];

  return (
    <div className="page-wrap">
      <div className="page-head">
        <div className="eyebrow"></div>
        <h2><span className="ital">Research & Experience</span></h2>
        <p className="lead"></p>
      </div>
      <div className="timeline">
        {roles.map((r, i) =>
        <div className="t-item fade-item" key={i} style={{ transitionDelay: (i * 0.06) + 's' }}>
            <div className="t-when" style={{ fontFamily: "Righteous" }}>{r.when}</div>
            <div className="t-role">{r.role}</div>
            <div className="t-org">{r.org} <span className="at">· {r.at}</span></div>
            <ul className="t-list">{r.bullets.map((b, j) => <li key={j}>{b}</li>)}</ul>
          </div>
        )}
      </div>
    </div>);

}

/* ---------- AWARDS (trophies) ---------- */
function AwardCol({ label, rows }) {
  return (
    <div>
      <div className="label-sm awards-col-head">{label}</div>
      <div className="stack">
        {rows.map((a, i) =>
        <div className="award-row fade-item" key={i} style={{ transitionDelay: (i * 0.06) + 's' }}>
            <div className="award-medal">{a.medal}</div>
            <div className="award-main">
              <div className="award-title">{a.title}</div>
              <div className="award-sub">{a.sub}</div>
            </div>
            {a.place && <div className="award-place">{a.place}</div>}
          </div>
        )}
      </div>
    </div>);
}

function AwardsPage() {
  const wins = [
  { medal: '🏆', place: '1st', title: 'BioFeedback Hackathon @ MIT', sub: 'Real-time EEG cognitive-fatigue biofeedback platform · 2026' },
  { medal: '🏆', place: '1st', title: 'Assistive Technology Hackathon', sub: 'Most Functional · assistive cleaning attachment for limited-mobility users · 2026' },
  { medal: '🥈', place: '2nd', title: 'GNOMI AI Marketing Hackathon', sub: 'UGC Track · $2,000 · ICP-driven content for an AI news-agent platform · NYC Tech Week 2026' },
  { medal: '🥈', place: '2nd', title: 'AI × Bio Hackathon 2026', sub: 'ML-augmented pharmacogenomics platform · 2026' },
  { medal: '🥈', place: '2nd', title: 'Technovation MA Showcase Pitch', sub: 'Food-bank & pantry access app for immigrant communities · 2025' }];

  const fellowships = [
  { medal: '🎓', title: 'Center for Economics of Ideas Fellowship', sub: '1 of 3 students selected for the inaugural CEI Summer Fellowship. Mentored by Center faculty including Nobel laureate Paul Romer. · 2026' },
  { medal: '🎓', title: 'Eagle Intern Fellowship', sub: 'Selected as an Eagle Intern Fellowship recipient; awarded a stipend to support the completion of a summer internship. · 2026' },
  { medal: '⭐', title: 'AI4ALL Ignite Accelerator', sub: 'Selective applied-ML accelerator for responsible AI projects · 2026' },
  { medal: '⚡', title: 'Cursor Boston Cohort', sub: 'Selected for a six-week AI-native builder cohort with Boston-based developers, founders, and students focused on shipping projects using Cursor · 2026' }];

  return (
    <div className="page-wrap">
      <div className="page-head">
        <div className="eyebrow">The trophy shelf</div>
        <h2>Awards & <span className="ital">Recognition</span></h2>
        <p className="lead"></p>
      </div>
      <div className="cols-2 awards-cols">
        <AwardCol label="Competition wins" rows={wins} />
        <AwardCol label="Fellowships & honors" rows={fellowships} />
      </div>
    </div>);

}

/* ---------- CONTACT (plant) ---------- */
function ContactPage() {
  const ICONS = {
    email: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3.5 7 8.5 6 8.5-6" /></svg>
    ),
    linkedin: (
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 1 0 3.5a2.5 2.5 0 0 1 4.98 0ZM.5 8h4V24h-4V8Zm7.5 0h3.8v2.2h.06c.53-1 1.82-2.2 3.76-2.2 4.02 0 4.76 2.65 4.76 6.1V24h-4v-6.99c0-1.67-.03-3.82-2.33-3.82-2.33 0-2.69 1.82-2.69 3.7V24h-3.96V8Z" /></svg>
    ),
    phone: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.72c.12.9.34 1.78.65 2.61a2 2 0 0 1-.45 2.11L8.1 9.65a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.11-.45c.83.31 1.71.53 2.61.65A2 2 0 0 1 22 16.92Z" /></svg>
    ),
    github: (
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1.5A10.5 10.5 0 0 0 8.68 22c.52.1.71-.23.71-.5v-1.77c-2.92.64-3.54-1.4-3.54-1.4-.48-1.22-1.17-1.54-1.17-1.54-.95-.65.07-.64.07-.64 1.06.07 1.62 1.09 1.62 1.09.94 1.6 2.46 1.14 3.06.87.1-.68.37-1.14.67-1.4-2.33-.27-4.78-1.17-4.78-5.18 0-1.15.41-2.08 1.08-2.81-.11-.27-.47-1.34.1-2.79 0 0 .89-.28 2.91 1.07a10.1 10.1 0 0 1 5.3 0c2.02-1.35 2.9-1.07 2.9-1.07.58 1.45.22 2.52.11 2.79.67.73 1.08 1.66 1.08 2.81 0 4.02-2.46 4.91-4.8 5.17.38.33.71.97.71 1.96v2.91c0 .28.19.61.72.5A10.5 10.5 0 0 0 12 1.5Z" /></svg>
    ),
  };
  const links = [
  { v: 'sofi.le@bc.edu', icon: 'email', href: 'https://mail.google.com/mail/?view=cm&fs=1&to=sofi.le@bc.edu', blank: true },
  { v: 'LinkedIn', icon: 'linkedin', href: 'https://linkedin.com/in/sofile', blank: true },
  { v: '(+1) 781-502-5280', icon: 'phone', href: 'tel:+17815025280', blank: false },
  { v: 'Github', icon: 'github', href: 'https://github.com/sofi-le', blank: true }];

  return (
    <div className="page-wrap">
      <div className="page-head">
        <div className="eyebrow">shoot me a message!</div>
        <h2>Let's <span className="ital">connect</span></h2>
        <p className="lead">Based in <b>Boston, MA</b>; available to work in NYC, and willing to relocate to
          other regions during seasonal academic breaks.</p>
        <a className="btn-resume" href={RESUME_HREF} target="_blank" rel="noopener">My Resume <span className="arr">↗</span></a>
      </div>
      <div className="contact-grid">
        {links.map((l) =>
        <a className="contact-link" href={l.href} key={l.v} target={l.blank ? '_blank' : undefined} rel={l.blank ? 'noopener' : undefined}>
            <span className="cl-left">
              <span className="cl-icon" aria-hidden="true">{ICONS[l.icon]}</span>
              <span className="cl-v">{l.v}</span>
            </span>
            <span className="arrow">↗</span>
          </a>
        )}
      </div>
    </div>);

}

Object.assign(window, { AboutPage, SkillsPage, MorePage, ExperiencePage, AwardsPage, ContactPage });