/* global React, UIComponents */
const { useState } = React;
const { Header, Footer, ProjectCard, ArrowRight, ArrowUpRight, Download, Mail, GitHub, LinkedIn, PROJECTS, X_PROJECTS, PILL } = UIComponents;
const PROJECT_DETAILS = window.PROJECT_DETAILS || {};

// Defaults for projects that don't supply their own data
const DEFAULT_SPECS = [
  { k: 'Wingspan',   v: '1450',       n: 'mm' },
  { k: 'MTOW',       v: '5.20',       n: 'kg' },
  { k: 'Material',   v: 'CF + PA-CF', n: 'layup + FFF v2.1' },
  { k: 'Cruise',     v: '22',         n: 'm/s @ 60% throttle' },
  { k: 'Build time', v: '42',         n: 'hr (printer + layup)' },
  { k: 'Total cost', v: '$ 312',      n: 'incl. avionics' },
];

const DEFAULT_TAUGHT = [
  "The platform iterated through revisions over a build season. Each one surfaced a constraint the previous version had been quietly hiding, print-orientation choices that worked on the bench but couldn't survive a hard landing, fastener layouts that assumed access I didn't have at the field.",
];
const DEFAULT_PROJECT = [
  'The final spec reflects shop-time and flight-time learnings, not just CAD intent. The drawing on the right is what got fabricated; everything before it lives in the revision log.',
];

function TextBlock({ heading, paragraphs }) {
  if (!paragraphs || !paragraphs.length) return null;
  return (
    <div>
      <h2 style={{ fontFamily: 'var(--font-sans)', fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.2, margin: '0 0 14px' }}>{heading}</h2>
      {paragraphs.map((t, i) => (
        <p key={i} style={{ fontFamily: 'var(--font-sans)', fontSize: 15.5, lineHeight: 1.65, margin: '0 0 14px', color: 'var(--fg)' }}>{t}</p>
      ))}
    </div>
  );
}

function NerdsCollapsible({ nerds }) {
  const [open, setOpen] = useState(false);
  if (!nerds) return null;
  return (
    <div>
      <button
        type="button"
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
          background: open ? 'var(--ink-900)' : 'transparent',
          color: open ? 'var(--paper-100)' : 'var(--fg)',
          border: '1px solid var(--ink-900)', borderRadius: 0,
          padding: '12px 18px', cursor: 'pointer',
          transition: 'background 160ms ease, color 160ms ease',
        }}
      >
        <span aria-hidden="true" style={{ display: 'inline-block', width: 10, transition: 'transform 180ms ease', transform: open ? 'rotate(90deg)' : 'rotate(0deg)' }}>▸</span>
        {nerds.label || 'More information'}
      </button>
      {open ? (
        <div style={{ marginTop: 22, padding: '20px 24px', background: 'var(--bg-alt)', borderLeft: '2px solid var(--ink-900)' }}>
          {(nerds.paragraphs || []).map((t, i) => (
            <p key={'p'+i} style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.65, margin: '0 0 14px', color: 'var(--fg)' }}>{t}</p>
          ))}
          {nerds.bullets && nerds.bullets.length ? (
            <ul style={{ margin: nerds.paragraphs && nerds.paragraphs.length ? '4px 0 0' : '0', paddingLeft: 20 }}>
              {nerds.bullets.map((t, i) => (
                <li key={'b'+i} style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.65, margin: '0 0 10px', color: 'var(--fg)' }}>{t}</li>
              ))}
            </ul>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

// ============== HOME ==============
function HomePage({ go }) {
  return (
    <>
      <div className="container hero">
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 28 }}>
          <div style={{ width: 16, height: 16, borderRadius: 999, background: 'var(--accent)' }}></div>
          <span className="eyebrow">PORTFOLIO · REV C · 2026</span>
        </div>
        <h1 style={{ fontFamily: 'var(--font-sans)', fontSize: 'clamp(40px, 6vw, 80px)', fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '12px 0 24px', maxWidth: 900 }}>Jacob Pirnejad<br/>Project Portfolio.</h1>
        <p className="lead">Hello, below are seven of what I feel are my most unique projects, covering UAVs, composites, robotics, controls, and autonomy. Auxiliary work is in <a href="#" onClick={(e) => { e.preventDefault(); go('other'); }}>other projects</a>.</p>
      </div>

      <div className="container" style={{ padding: '64px 64px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '2px solid var(--ink-900)', paddingTop: 16, marginBottom: 24 }}>
          <span className="eyebrow">§01 · SELECTED WORK</span>
          <span className="eyebrow" style={{ color: 'var(--fg-faint)' }}>P-001, P-007</span>
        </div>
        <div className="grid-3">
          {PROJECTS.map(p => <ProjectCard key={p.id} p={p} onOpen={(id) => go('project', id)} />)}
        </div>
      </div>

      <div className="container" style={{ padding: '64px 64px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '2px solid var(--ink-900)', paddingTop: 16, marginBottom: 24 }}>
          <span className="eyebrow">§02 · ELSEWHERE</span>
          <span className="eyebrow" style={{ color: 'var(--fg-faint)' }}>X-INDEX</span>
        </div>
        <p style={{ maxWidth: 560, marginBottom: 24 }}>Smaller experiments, teardowns, and side projects, work that didn't warrant its own page but is worth keeping around.</p>
        <a className="btn btn-sec" href="#" onClick={(e) => { e.preventDefault(); go('other'); }}>View other projects <ArrowRight size={14}/></a>
      </div>
    </>
  );
}

// ============== PROJECT (case study) ==============
function ProjectPage({ id, go }) {
  const base = PROJECTS.find(x => x.id === id) || PROJECTS[0];
  const detail = PROJECT_DETAILS[base.id] || {};
  const p = { ...base, ...detail };
  const status = PILL[p.status];
  const taught = p.taught || DEFAULT_TAUGHT;
  const projectInfo = p.project || DEFAULT_PROJECT;
  return (
    <>
      {/* TOP: title + brief + stats (LEFT) · render (RIGHT), full-bleed dark like specs */}
      <section style={{ background: '#080808', color: 'var(--paper-100)' }}>
        <div className="container" style={{ padding: '40px 64px 64px' }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }} style={{ display: 'inline-block', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', textDecoration: 'none', color: 'rgba(245,243,238,0.6)', marginBottom: 32 }}>← Index</a>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'start' }}>
            {/* LEFT */}
            <div>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 20 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.14em', color: 'var(--accent)', fontWeight: 500 }}>{p.num}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(245,243,238,0.4)' }}>·</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(245,243,238,0.65)' }}>{p.year}</span>
              </div>
              <h1 style={{ fontFamily: 'var(--font-sans)', fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1.02, margin: '0 0 24px', color: 'var(--paper-100)' }}>{p.title}</h1>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, margin: '0 0 36px', color: 'rgba(245,243,238,0.85)', maxWidth: 520 }}>
                {p.blurb}
              </p>
              <dl style={{ display: 'grid', gridTemplateColumns: '110px 1fr', rowGap: 10, columnGap: 16, fontFamily: 'var(--font-mono)', fontSize: 12, margin: 0 }}>
                <dt style={{ color: 'var(--ink-400)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 10 }}>Role</dt>
                <dd style={{ margin: 0, color: 'var(--paper-100)' }}>{p.role || 'Lead designer + builder'}</dd>
                <dt style={{ color: 'var(--ink-400)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 10 }}>Year</dt>
                <dd style={{ margin: 0, color: 'var(--paper-100)' }}>{p.year}</dd>
                <dt style={{ color: 'var(--ink-400)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 10 }}>Materials</dt>
                <dd style={{ margin: 0, color: 'var(--paper-100)' }}>{p.materials || 'PLA, PETG, CF'}</dd>
                <dt style={{ color: 'var(--ink-400)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 10 }}>Tools</dt>
                <dd style={{ margin: 0, color: 'var(--paper-100)' }}>{p.tools || 'SolidWorks, Cura'}</dd>
              </dl>
            </div>
            {/* RIGHT */}
            <div style={{ background: '#000', minHeight: 480, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
              <img src={p.img} alt="" style={{ display: 'block', width: '100%', height: 'auto', objectFit: 'contain' }} />
              <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.7) 82%, #000 100%)' }}></div>
            </div>
          </div>
        </div>
      </section>

      {/* SPECS, between top section and drawing */}
      <section className="specs">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 32, marginBottom: 16, flexWrap: 'wrap' }}>
            <span className="eyebrow" style={{ color: 'var(--ink-400)' }}>SPECIFICATIONS</span>
            {p.classifiedNote ? (
              <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.55, letterSpacing: '0.02em', color: 'var(--ink-400)', margin: 0, maxWidth: 480, textAlign: 'right' }}>
                <span style={{ display: 'inline-block', padding: '1px 6px', marginRight: 8, border: '1px solid var(--ink-400)', borderRadius: 2, fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', verticalAlign: 'middle' }}>Classified</span>
                {p.classifiedNote}
              </p>
            ) : null}
          </div>
          <table>
            <thead><tr><th>Parameter</th><th>Value</th><th>Notes</th></tr></thead>
            <tbody>
              {(p.specs || DEFAULT_SPECS).map((row, i) => (
                <tr key={i}>
                  <td className="k">{row.k}</td>
                  <td className="v">{row.v}</td>
                  <td className="v">{row.n}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* BELOW: writeup (LEFT, stacked) + drawing (RIGHT), nerds dropdown spans full width underneath */}
      <section className="container" style={{ padding: '64px 64px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: p.hideDrawing ? '1fr' : '1fr 1.2fr', gap: 64, alignItems: 'start' }}>
          {/* LEFT: two stacked sections */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 36, maxWidth: p.hideDrawing ? 760 : 'none' }}>
            <div>
              <span className="eyebrow" style={{ display: 'block', marginBottom: 14 }}>§01 · WHAT IT TAUGHT ME</span>
              <TextBlock heading="What it taught me" paragraphs={taught} />
            </div>
            {projectInfo && projectInfo.length ? (
              <div>
                <span className="eyebrow" style={{ display: 'block', marginBottom: 14 }}>§02 · THE PROJECT</span>
                <TextBlock heading="The project" paragraphs={projectInfo} />
              </div>
            ) : null}
            {!p.hideDrawing ? (
              <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-faint)', margin: '8px 0 0' }}>Rev C · sheet 1 of 1</p>
            ) : null}
          </div>
          {/* RIGHT: drawing */}
          {!p.hideDrawing ? (
            <div>
              <span className="eyebrow" style={{ display: 'block', marginBottom: 12 }}>§03 · ENGINEERING DRAWING</span>
              <div className="figure">
                <span className="corners"><i></i></span>
                <img src={p.drawing} alt="" />
              </div>
            </div>
          ) : null}
        </div>
      </section>

      {/* NERDS dropdown, full-width band below */}
      {p.nerds ? (
        <section className="container" style={{ padding: '8px 64px 48px' }}>
          <div style={{ borderTop: '1px solid var(--ink-200, rgba(0,0,0,0.12))', paddingTop: 28 }}>
            <span className="eyebrow" style={{ display: 'block', marginBottom: 14 }}>§{p.hideDrawing ? '03' : '04'} · APPENDIX</span>
            <NerdsCollapsible nerds={p.nerds} />
          </div>
        </section>
      ) : null}

      <section className="container" style={{ padding: '64px 64px' }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <a className="btn btn-pri" href="#"><Download size={14}/> Download drawing (PDF)</a>
          <a className="btn btn-sec" href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>Next project <ArrowRight size={14}/></a>
        </div>
      </section>
    </>
  );
}

// ============== ABOUT ==============
function AboutPage({ go }) {
  return (
    <>
      <section style={{ background: 'var(--ink-900)', color: 'var(--paper-100)', padding: '48px 0 40px' }}>
        <div className="container">
          <span className="eyebrow" style={{ color: 'rgba(245,243,238,0.5)' }}>§00 · ABOUT</span>
          <h1 style={{ fontFamily: 'var(--font-sans)', fontSize: 28, fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.2, margin: '12px 0 0', color: 'var(--paper-100)' }}>About me.</h1>
        </div>
      </section>

      <section className="container" style={{ padding: '80px 64px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 64, alignItems: 'start' }}>
          {/* LEFT: prose */}
          <div style={{ maxWidth: 720 }}>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 20, lineHeight: 1.55, margin: '0 0 24px', letterSpacing: '-0.005em' }}>I knew I wanted to do this when I was ten years old. I saw the SR-71 Blackbird at the California Science Center and that was pretty much that.</p>

            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.7, margin: '0 0 20px' }}>It took a while to get to actual technical work, but Foothill College is where it started. I took a lot of lower-division courses, got into physics, and ended up going deep on aerospace and autonomy , aircraft design, aerodynamics, autonomous systems fundamentals. First time the things I&rsquo;d been interested in since I was a kid felt like something I could actually do.</p>

            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.7, margin: '0 0 20px', color: 'var(--fg)' }}>I transferred to SDSU, did research in a materials lab, and I&rsquo;m currently working in a robotics lab. My senior design is with NIWC Pacific, building a benthic microbial fuel cell lander. I moved through my coursework fast enough that I&rsquo;ve spent the back half of my degree in graduate-level classes covering manufacturing, control systems, and autonomy.</p>

            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.7, margin: '0 0 20px', color: 'var(--fg)' }}>Working across that many domains , hardware, software, controls, materials , has given me the ability to pick things up fast and bring perspectives into a problem that wouldn&rsquo;t be obvious coming from a narrower background. That breadth is something I&rsquo;ve built intentionally and think about a lot.</p>

            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.7, margin: '0 0 20px', color: 'var(--fg)' }}>Both of my internships were at startups. At Alef Aero I worked on flight components , composite mold making and structural parts. At BurnBot I was given my own project, supporting the operations team on electromechanical systems. Across all of it, what I&rsquo;ve enjoyed most is working on problems that don&rsquo;t have clean answers, with teams that are moving fast.</p>

            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.7, margin: '0 0 0', color: 'var(--fg)' }}>Finishing my degree in December 2026 and looking to land somewhere I can keep learning , autonomy, hardware, whatever&rsquo;s new and unknown. The <a href="#" onClick={(e) => { e.preventDefault(); go('contact'); }}>contact form</a> is the fastest way to reach me.</p>

            <hr className="divider-soft"/>

            <span className="eyebrow">CURRENTLY</span>
            <ul style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.8, listStyle: 'none', padding: 0, margin: '12px 0 0' }}>
              <li>· Senior design: benthic microbial fuel cell lander, with NIWC Pacific</li>
              <li>· Research: SDSU robotics lab</li>
              <li>· Graduating: December 2026</li>
            </ul>
          </div>

          {/* RIGHT: portrait */}
          <div>
            <div style={{ position: 'relative', background: 'var(--bg-alt)', borderRadius: 18, overflow: 'hidden' }}>
              <img src="img/jacob_portrait.png" alt="Jacob Pirnejad" style={{ display: 'block', width: '100%', height: 'auto' }} />
            </div>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-faint)', margin: '12px 0 0' }}>Jacob Pirnejad &middot; San Diego, CA</p>
          </div>
        </div>
      </section>
    </>
  );
}

// ============== RESUME ==============
function ResumePage() {
  return (
    <section style={{ background: 'var(--bg-alt)', minHeight: 'calc(100vh - 70px)' }}>
      <div className="container" style={{ padding: '64px 64px', maxWidth: 980 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <span className="eyebrow">CURRICULUM VITAE</span>
            <h1 style={{ fontFamily: 'var(--font-sans)', fontSize: 48, fontWeight: 600, letterSpacing: '-0.04em', margin: '8px 0 0' }}>Jacob Pirnejad</h1>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.5px', color: 'var(--fg-muted)', margin: '8px 0 0' }}>San Diego, CA &nbsp;/&nbsp; <a href="tel:+16504047830" style={{ color: 'inherit' }}>(650) 404-7830</a> &nbsp;/&nbsp; <a href="mailto:jpirnej1@gmail.com" style={{ color: 'inherit' }}>jpirnej1@gmail.com</a> &nbsp;/&nbsp; <a href="https://www.linkedin.com/in/jacob-pirnejad" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit' }}>LinkedIn ↗</a> &nbsp;/&nbsp; U.S. Citizen, Clearance Eligible</p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <a className="btn btn-pri" href="Jacob_Pirnejad_Resume.pdf" download><Download size={14}/> Download PDF</a>
          </div>
        </div>

        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--fg-muted)', maxWidth: 720, marginBottom: 40 }}>Mechanical engineering student (BSME, Dec 2026) with hands-on experience at robotics and aviation startups. Focused on complex, open-ended problems in autonomous systems, controls, and electromechanical design. Motivated by fast learning, building real hardware, and taking on technically demanding challenges.</p>

        <hr className="divider-soft"/>
        <span className="eyebrow">EDUCATION</span>
        <div className="resume-row">
          <div className="yr">2024 / 2026</div>
          <div>
            <h4>B.S. Mechanical Engineering</h4>
            <p className="org">San Diego State University</p>
            <p className="desc">Coursework: Mechatronics, CAD, Statics, Materials, Thermodynamics, Dynamics, Mechanics, Intro to Manufacturing, Additive Manufacturing, Automatic Control Systems, Autonomous Vehicle Design.</p>
          </div>
          <div className="loc">SAN DIEGO, CA</div>
        </div>
        <div className="resume-row">
          <div className="yr">2021 / 2024</div>
          <div>
            <h4>STEM Core, Foothill College</h4>
            <p className="org">Transfer prep</p>
            <p className="desc">Calculus I/III, Physics I/III, Engineering Graphics, Linear Algebra.</p>
          </div>
          <div className="loc">LOS ALTOS HILLS, CA</div>
        </div>

        <hr className="divider-soft"/>
        <span className="eyebrow">EXPERIENCE</span>
        <div className="resume-row">
          <div className="yr">Jun 2025 / Nov 2025</div>
          <div>
            <h4>Mechanical Engineering Intern</h4>
            <p className="org">BurnBot &nbsp;/&nbsp; Robotics &amp; Fire Prevention</p>
            <p className="desc">Led hardware improvements for field ops teams: identified ergonomic and functional pain points, then took redesigns from SolidWorks CAD through 3D-printed prototyping and test-fit iteration. Developed battery packs for robot controllers; supported PCB integration with printed housings for rapid electromechanical prototyping.</p>
          </div>
          <div className="loc">SOUTH SAN FRANCISCO, CA</div>
        </div>
        <div className="resume-row">
          <div className="yr">Jan 2025 / Jul 2025</div>
          <div>
            <h4>Mechanical Engineering Intern</h4>
            <p className="org">Alef.aero &nbsp;/&nbsp; Aviation &amp; Aerospace</p>
            <p className="desc">Modeled aerodynamic, structural, and mechanical components in SolidWorks for an eVTOL development program. Produced 3D-printed molds and composite parts used for prototyping and large-scale flight-vehicle parts.</p>
          </div>
          <div className="loc">MILPITAS, CA</div>
        </div>
        <div className="resume-row">
          <div className="yr">Spring 2026</div>
          <div>
            <h4>Undergraduate Research Assistant, Robotics</h4>
            <p className="org">Dr. Zahra Nili's Lab, SDSU Mechanical Engineering</p>
            <p className="desc">Taking over a graduate student's ongoing work to substantiate prior findings and develop materials toward writing a research proposal.</p>
          </div>
          <div className="loc">SDSU</div>
        </div>
        <div className="resume-row">
          <div className="yr">Fall 2025</div>
          <div>
            <h4>Undergraduate Research Assistant, Materials</h4>
            <p className="org">Dr. Elisa Torresani's Lab, SDSU Mechanical Engineering</p>
            <p className="desc">Supported PhD students with lab operations, experimental setup, and data workflows across active sintering and materials processing projects.</p>
          </div>
          <div className="loc">SDSU</div>
        </div>

        <hr className="divider-soft"/>
        <span className="eyebrow">ENGINEERING PROJECTS</span>
        <div className="resume-row">
          <div className="yr">Aug 2025 / present</div>
          <div>
            <h4>Deep-Sea Energy Harvesting Lander</h4>
            <p className="org">Senior Design &nbsp;/&nbsp; SDSU + NIWC Pacific</p>
            <p className="desc">Redesigning a Benthic Microbial Fuel Cell (BMFC) lander that harvests electrical energy from microbial activity in ocean-floor sediment, powering remote Navy sensor packages at ~2,000 m depth. Working with NIWC Pacific engineers on deployment and recovery requirements; presenting bi-weekly progress to faculty and Navy stakeholders.</p>
          </div>
          <div className="loc">SAN DIEGO, CA</div>
        </div>
        <div className="resume-row">
          <div className="yr">Feb 2026 / present</div>
          <div>
            <h4>Adaptive Constraint Tightening for Quadrotor NMPC</h4>
            <p className="org">Controls Research &nbsp;/&nbsp; SDSU</p>
            <p className="desc">Developing a velocity-triggered constraint tightening framework for learning-augmented Nonlinear MPC on quadrotors, using Gaussian Process residual models to maintain safety under aerodynamic uncertainty. Implementing the controller in Gazebo; analyzing constraint satisfaction across hover, cruise, and aggressive flight regimes.</p>
          </div>
          <div className="loc">SDSU</div>
        </div>
        <div className="resume-row">
          <div className="yr">Jul 2025 / Dec 2025</div>
          <div>
            <h4>3D Printed Compliant Aircraft</h4>
            <p className="org">Personal &nbsp;/&nbsp; Foothill College</p>
            <p className="desc">Led a team designing a lightweight long-range aircraft concept that cut part count using 3D printing and compliant mechanisms in place of traditional hinged assemblies. Built a custom test rig and ran MATLAB analysis, FEA, and physical load testing to evaluate lift/drag performance and validate structural integrity. Validated compliant hinge function through FEA and applied-force / cyclic fatigue tests.</p>
          </div>
          <div className="loc">LOS ALTOS HILLS, CA</div>
        </div>

        <hr className="divider-soft"/>
        <span className="eyebrow">LEADERSHIP</span>
        <div className="resume-row">
          <div className="yr">2024 / present</div>
          <div>
            <h4>Aztec Aerospace, Member</h4>
            <p className="org">SDSU</p>
            <p className="desc">Designed and modeled structural and mechanical components in SolidWorks for aerospace flight vehicles; contributed to part design and CAD iteration within a multidisciplinary student team.</p>
          </div>
          <div className="loc">SDSU</div>
        </div>
        <div className="resume-row">
          <div className="yr">2024 / present</div>
          <div>
            <h4>Mechatronics Club (RoboSub), Member</h4>
            <p className="org">SDSU</p>
            <p className="desc">Designed and integrated electrical systems for the Pico AUV competing in the international RoboSub competition; worked on power distribution and electromechanical subsystem integration.</p>
          </div>
          <div className="loc">SDSU</div>
        </div>
        <div className="resume-row">
          <div className="yr">2021 / 2024</div>
          <div>
            <h4>Engineering Club, President</h4>
            <p className="org">Foothill College</p>
            <p className="desc">Ran a 40+ member club for 2 years: managed ~$15K budget, launched prototyping workshops, grew membership ~200%.</p>
          </div>
          <div className="loc">LOS ALTOS HILLS, CA</div>
        </div>
        <div className="resume-row">
          <div className="yr">2017 / 2021</div>
          <div>
            <h4>Robotics Club, Member</h4>
            <p className="org">Monta Vista High School</p>
            <p className="desc">Competed in robotics design and build challenges for four years; developed early hands-on experience with mechanical systems and teamwork under competition constraints.</p>
          </div>
          <div className="loc">CUPERTINO, CA</div>
        </div>

        <hr className="divider-soft"/>
        <span className="eyebrow">SKILLS</span>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, marginTop: 16 }}>
          <div>
            <h4 style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, margin: '0 0 8px' }}>CAD &amp; Modeling</h4>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.5px', color: 'var(--fg-muted)', lineHeight: 1.7, margin: 0 }}>SolidWorks (CSWA), CATIA, NX, Fusion 360 (Generative Design)</p>
          </div>
          <div>
            <h4 style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, margin: '0 0 8px' }}>Analysis &amp; Simulation</h4>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.5px', color: 'var(--fg-muted)', lineHeight: 1.7, margin: 0 }}>ANSYS (FEA &amp; CFD), SolidWorks Simulation, MATLAB / Simulink, GD&amp;T, Tolerance Analysis, DFM / DFA</p>
          </div>
          <div>
            <h4 style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, margin: '0 0 8px' }}>Prototyping &amp; Manufacturing</h4>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.5px', color: 'var(--fg-muted)', lineHeight: 1.7, margin: 0 }}>3D Printing (FDM, SLA, SLS), CNC Machining, Composites, PCB Design / Integration, Soldering</p>
          </div>
          <div>
            <h4 style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, margin: '0 0 8px' }}>Programming &amp; Automation</h4>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.5px', color: 'var(--fg-muted)', lineHeight: 1.7, margin: 0 }}>Python, MATLAB, Arduino, LLM Workflows (n8n), API-Based Automation, Apps Script</p>
          </div>
        </div>

        <hr className="divider-soft"/>
        <span className="eyebrow">CERTIFICATIONS</span>
        <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.5px', color: 'var(--fg-muted)', lineHeight: 1.8, margin: '12px 0 0' }}>
          DEARKAero-Composites &nbsp;/&nbsp; SolidWorks CSWA &nbsp;/&nbsp; MATLAB Fundamentals &nbsp;/&nbsp; Multi-Agent AI Workshop &nbsp;/&nbsp; Python Basics &nbsp;/&nbsp; Google IT Certificate
        </p>
      </div>
    </section>
  );
}

// ============== CONTACT ==============
function ContactPage() {
  const [sent, setSent] = useState(false);
  return (
    <section className="container-narrow" style={{ padding: '96px 64px' }}>
      <span className="eyebrow">§00 · CONTACT</span>
      <h1 style={{ fontFamily: 'var(--font-sans)', fontSize: 56, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1.02, margin: '12px 0 24px' }}>Send a note.</h1>
      <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--fg-muted)', marginBottom: 40 }}>Best for internship inquiries, research collaborations, or questions about a project. I respond within a week.</p>

      {sent ? (
        <div style={{ border: '1px solid var(--ink-900)', padding: 24, background: 'var(--pure-white)' }}>
          <span className="eyebrow" style={{ color: 'var(--status-ok)' }}>SENT · LOG #00472</span>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: '12px 0 0' }}>Got it. I'll respond from jpirnej1@gmail.com.</p>
        </div>
      ) : (
        <form className="form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          <div className="row2">
            <div><label>Name</label><input type="text" placeholder="Jane Doe" required /></div>
            <div><label>Email</label><input type="email" placeholder="you@institution.edu" required /></div>
          </div>
          <div><label>Subject</label><input type="text" defaultValue="Internship, Summer 2026" /></div>
          <div><label>Message</label><textarea rows="5" placeholder="Brief note. Links welcome."></textarea></div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <button type="submit" className="btn btn-pri"><Mail size={14}/> Send</button>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.5px', color: 'var(--fg-faint)' }}>· Or email <a href="mailto:jpirnej1@gmail.com" style={{ color: 'var(--fg-faint)' }}>jpirnej1@gmail.com</a> · <a href="tel:+16504047830" style={{ color: 'var(--fg-faint)' }}>(650) 404-7830</a></span>
          </div>
        </form>
      )}
    </section>
  );
}

// ============== OTHER PROJECTS ==============
function OtherPage() {
  return (
    <section className="container" style={{ padding: '80px 64px' }}>
      <span className="eyebrow">§00 · OTHER PROJECTS</span>
      <h1 style={{ fontFamily: 'var(--font-sans)', fontSize: 56, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1.02, margin: '12px 0 16px' }}>X-Index.</h1>
      <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, maxWidth: 580, color: 'var(--fg-muted)', marginBottom: 32 }}>Smaller experiments, teardowns, and side projects. Not big enough to warrant their own page, but worth keeping around as a record of where the muscle memory came from. {X_PROJECTS.length} entries.</p>

      <div style={{ borderTop: '2px solid var(--ink-900)' }}>
        {X_PROJECTS.map(x => (
          <div key={x.num} className="xrow">
            <span className="xnum">{x.num}</span>
            <div className="ximg">
              {x.img ? <img src={x.img} alt="" loading="lazy" decoding="async" /> : null}
            </div>
            <div className="xbody">
              <h4>{x.title}</h4>
              <p>{x.blurb}</p>
            </div>
            <span className="xtag">{x.tag}</span>
            <span className="xyr">{x.year}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============== APP ==============
function App() {
  const [page, setPage] = useState('home');
  const [pid, setPid] = useState(null);

  const go = (p, id) => { setPage(p); if (id) setPid(id); window.scrollTo(0, 0); };

  return (
    <div className="app">
      <Header page={page} go={go} />
      <main>
        {page === 'home' && <HomePage go={go} />}
        {page === 'project' && <ProjectPage id={pid} go={go} />}
        {page === 'about' && <AboutPage go={go} />}
        {page === 'resume' && <ResumePage />}
        {page === 'contact' && <ContactPage />}
        {page === 'other' && <OtherPage />}
      </main>
      <Footer go={go} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);