/* global React */
const { useState } = React;

// ============== ICONS (Lucide-style, 1.5px stroke) ==============
const Icon = ({ d, size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter">
    {d}
  </svg>
);
const ArrowRight = ({ size }) => <Icon size={size} d={<><path d="M5 12h14M13 6l6 6-6 6" /></>} />;
const ArrowUpRight = ({ size }) => <Icon size={size} d={<><path d="M7 17 17 7M8 7h9v9" /></>} />;
const Download = ({ size }) => <Icon size={size} d={<><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" /></>} />;
const Mail = ({ size }) => <Icon size={size} d={<><rect x="3" y="5" width="18" height="14" /><path d="M3 7l9 7 9-7" /></>} />;
const GitHub = ({ size }) => <Icon size={size} d={<path d="M9 19c-4 1-4-2-6-2m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12 12 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21" />} />;
const LinkedIn = ({ size }) => <Icon size={size} d={<><rect x="2" y="2" width="20" height="20" /><path d="M7 10v8M7 6.5v.01M11 18v-5a3 3 0 0 1 6 0v5M11 18v-8" /></>} />;

// ============== HEADER ==============
function Header({ page, go }) {
  const NavLink = ({ id, label }) => (
    <a href="#" onClick={(e) => { e.preventDefault(); go(id); }} className={page === id ? 'active' : ''}>{label}</a>
  );
  return (
    <header className="hdr">
      <div className="hdr-inner">
        <a href="#" className="brand" onClick={(e) => { e.preventDefault(); go('home'); }}>
          <span style={{ width: 14, height: 14, borderRadius: 999, background: 'var(--accent)', display: 'inline-block' }} aria-hidden="true"></span>
          <span className="name">Jacob Pirnejad</span>
        </a>
        <nav>
          <NavLink id="home" label="Index" />
          <NavLink id="other" label="Other" />
          <NavLink id="about" label="About" />
          <NavLink id="resume" label="Résumé" />
          <NavLink id="contact" label="Contact" />
        </nav>
      </div>
    </header>
  );
}

// ============== FOOTER ==============
function Footer({ go }) {
  return (
    <footer className="ftr">
      <div className="ftr-inner">
        <div>
          <h5>Currently</h5>
          <p className="sig">Senior at SDSU, graduating Dec 2026. Open to internships in mech, aero, robotics.</p>
        </div>
        <div>
          <h5>Site</h5>
          <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>Index</a>
          <a href="#" onClick={(e) => { e.preventDefault(); go('other'); }}>Other projects</a>
          <a href="#" onClick={(e) => { e.preventDefault(); go('about'); }}>About</a>
          <a href="#" onClick={(e) => { e.preventDefault(); go('resume'); }}>Résumé</a>
        </div>
        <div>
          <h5>Elsewhere</h5>
          <a href="https://www.linkedin.com/in/jacob-pirnejad" target="_blank" rel="noopener noreferrer">LinkedIn ↗</a>
          <a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
          <a href="https://grabcad.com/" target="_blank" rel="noopener noreferrer">GrabCAD ↗</a>
        </div>
        <div>
          <h5>Contact</h5>
          <a href="#" onClick={(e) => { e.preventDefault(); go('contact'); }}>Send a note</a>
          <a href="mailto:jpirnej1@gmail.com">jpirnej1@gmail.com</a>
          <a href="tel:+16504047830">(650) 404-7830</a>
        </div>
        <div className="copy">
          <span>© 2026 JACOB PIRNEJAD · SAN DIEGO, CA</span>
          <span>BUILT BY HAND · REV C</span>
        </div>
      </div>
    </footer>
  );
}

// ============== PROJECT DATA ==============
const PROJECTS = [
  { id: 'helldiver', num: 'P-001', year: '2026', title: 'Helldiver',
    blurb: 'Tube-deployable deep-sea microbial fuel cell lander. Generates its own power from sediment chemistry over an extended-duration mission, then surfaces passively for recovery. Developed under a U.S. government sponsor.',
    tags: ['Marine', 'Senior design', 'Sponsor'], status: 'wip', img: 'img/helldiver_render.png', drawing: 'img/helldiver_drawing.png' },
  { id: 'drone',     num: 'P-002', year: '2026', title: 'Drone',
    blurb: 'Learning-based NMPC for quadrotor flight. A GP residual learner tightens model constraints online; CasADi/IPOPT solver runs at the edge against a Gazebo/RotorS plant.',
    tags: ['Controls', 'Autonomy', 'Software'], status: 'wip', img: 'img/drone_diagram.png', drawing: 'img/drone_diagram.png' },
  { id: 'atlas-c',   num: 'P-003', year: '2025', title: 'Atlas-C', blurb: 'Carbon-fiber flying wing. 1091 mm span, swept planform with sectioned cells, designed for long-endurance autonomous flight.', tags: ['UAV', 'Composite', 'Flying wing'], status: 'shipped', img: 'img/atlas-c_render.png',   drawing: 'img/atlas-c_drawing.png' },
  { id: 'gambit',    num: 'P-004', year: '2024', title: 'Gambit', blurb: 'Chess-playing robotic arm built on a used UR10. Python wrapper drives the cobot, talking to a chess.com engine; player input via NFC or QR codes on the pieces.', tags: ['Robotics', 'Vision', 'Cobot'], status: 'shipped', img: 'img/gambit_render.png',  drawing: 'img/gambit_photo.jpg' },
  { id: 'maxwell',   num: 'P-005', year: '2024', title: 'Maxwell', blurb: 'Bench wind tunnel with honeycomb flow conditioner and contraction nozzle. Built for aerofoil + small-airframe testing.', tags: ['Test rig', 'Aero', 'Manufacturing'], status: 'shipped', img: 'img/maxwell_render.png',   drawing: 'img/maxwell_drawing.png' },
  { id: 'gustav',    num: 'P-006', year: '2024', title: 'Gustav', blurb: 'Linear-actuated launch rail for fixed-wing UAVs. Belt-driven carriage on extruded rail with foldable A-frame stand.', tags: ['Mechanism', 'Launcher'],     status: 'shipped', img: 'img/gustav_render.png',    drawing: 'img/gustav_drawing.png' },
  { id: 'lift-kit-3',num: 'P-007', year: '2024', title: 'Lift Kit 3', blurb: 'Wind-tunnel test fixture: balance, sting, and modular wing mount. Third revision; designed for the Maxwell tunnel.', tags: ['Test rig', 'Aero'],            status: 'shipped', img: 'img/lift-kit-three_render.png', drawing: 'img/lift-kit-three_drawing.png' },
];

const X_PROJECTS = [
  { num: 'X-001', year: '2025', title: 'Jumble of Wires', blurb: 'PID-tuned harmonic oscillator on a stepper. Closed-loop position control, breadboard-grade wiring, lessons in tuning by feel.', tag: 'Controls', img: 'img/x_jumble.jpg' },
  { num: 'X-002', year: '2024', title: 'OllO scooter', blurb: 'Single-wheel electric scooter on a skate deck. Hub motor up front, custom battery pack rear, throttle on the stem.', tag: 'EV', img: 'img/x_ollo.jpg' },
  { num: 'X-003', year: '2024', title: 'Rose B', blurb: 'Outer-mold-line study of a tandem-wing variant. Shaped fuselage with nose pod and rear lifting surface, surfaced from scratch.', tag: 'UAV', img: 'img/x_rose_b.png' },
  { num: 'X-004', year: '2024', title: 'Rose Zero', blurb: 'Internal-structure SolidWorks study for the Rose airframe lineage. Ribbed wing + tail boom with full FFF print plan.', tag: 'UAV', img: 'img/x_rose_zero.png' },
  { num: 'X-005', year: '2022', title: 'Arcade machine', blurb: 'Plywood + steel cabinet around a salvaged monitor. Trackball, joystick, eight buttons, MAME on a low-end PC.', tag: 'Build', img: 'img/x_arcade_machine.jpg' },
  { num: 'X-006', year: '2021', title: 'Arcade controller', blurb: 'Hardwired joystick + button panel on a Zero Delay encoder. Daughter to the cabinet that came after it.', tag: 'Electronics', img: 'img/x_arcade_controller.jpg' },
  { num: 'X-007', year: '2020', title: 'Trebuchet', blurb: 'Counterweight trebuchet with metal bucket. Trigger-released swing arm; built from dimensional lumber over a weekend.', tag: 'Mechanism', img: 'img/x_trebuchet.jpg' },
  { num: 'X-008', year: '2019', title: 'Ballista', blurb: 'Hand-built medieval-style ballista. Tensioned bow on a wheeled wooden carriage; full-draw, free-flight tests in the backyard.', tag: 'Mechanism', img: 'img/x_ballista.jpg' },
];

const PILL = {
  shipped: { c: 'pill-shipped', l: 'Shipped' },
  wip:     { c: 'pill-wip',     l: 'In progress' },
  archive: { c: 'pill-archive', l: 'Archived' },
  private: { c: 'pill-private', l: 'Private' },
};

// ============== PROJECT CARD ==============
function ProjectCard({ p, onOpen }) {
  return (
    <a className="pcard" href="#" onClick={(e) => { e.preventDefault(); onOpen(p.id); }}>
      <div className="pcard-meta">
        <span className="pcard-num">{p.num}</span>
        <span className="pcard-yr">{p.year}</span>
      </div>
      <img className="pcard-img" src={p.img} alt="" loading="lazy" decoding="async" />
      <h3>{p.title}</h3>
      <p>{p.blurb}</p>
      <div className="pcard-tags">
        {p.tags.map(t => <span key={t} className="tag">{t}</span>)}
      </div>
    </a>
  );
}

window.UIComponents = { Header, Footer, ProjectCard, ArrowRight, ArrowUpRight, Download, Mail, GitHub, LinkedIn, PROJECTS, X_PROJECTS, PILL };