// ─── Nav ────────────────────────────────────────────────────────────────────

function Nav() {
  return (
    <nav className="h-pad" style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'rgba(28,35,46,0.88)', backdropFilter: 'blur(12px)',
      paddingTop: 16, paddingBottom: 16,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      borderBottom: `1px solid ${V3.rule}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontWeight: 600, letterSpacing: -0.2 }}>
        <span style={{ width: 22, height: 22, background: V3.accent, borderRadius: 6, display: 'inline-block', position: 'relative' }}>
          <span style={{ position: 'absolute', inset: 6, borderRadius: 2, background: V3.bg }} />
        </span>
        <span>Miguel.</span>
      </div>
      <div style={{ display: 'flex', gap: 28, fontSize: 13.5 }}>
        <a className="nav-link" href="#work">Work</a>
        <a className="nav-link" href="#about">About</a>
        <a className="nav-link" href="#skills">Skills</a>
        <a className="nav-link" href="#contact">Contact</a>
      </div>
      <a href="#contact" style={{
        fontSize: 13, padding: '8px 14px', borderRadius: 999,
        background: V3.accent, color: V3.bg, textDecoration: 'none', fontWeight: 500,
      }}>Get in touch →</a>
    </nav>
  );
}

// ─── Hero ───────────────────────────────────────────────────────────────────

function Hero() {
  return (
    <div className="h-pad" style={{ paddingTop: 108, paddingBottom: 60, minHeight: 'calc(100vh - 64px)', position: 'relative', overflow: 'hidden' }}>
      <video
        src="src/assets/hero_background.mov"
        autoPlay
        muted
        loop
        playsInline
        aria-hidden="true"
        style={{
          position: 'absolute',
          right: 0, top: 0, bottom: 0,
          height: '100%', width: '65%',
          objectFit: 'cover', objectPosition: 'center center',
          pointerEvents: 'none',
          maskImage: 'linear-gradient(to left, black 35%, transparent 100%)',
          WebkitMaskImage: 'linear-gradient(to left, black 10%, transparent 100%)',
        }}
      />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px', borderRadius: 999,
          border: `1px solid ${V3.highlightSoft}`,
          background: 'rgba(244,220,124,0.06)',
          fontSize: 12, color: V3.highlight, marginBottom: 28,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: V3.highlight, display: 'inline-block', boxShadow: `0 0 8px ${V3.highlight}` }} />
          Open to work · 2026
        </div>

        <h1 style={{
          fontSize: 'clamp(48px, 6.5vw, 80px)', lineHeight: 1.04, letterSpacing: -1.8,
          fontWeight: 600, margin: 0, maxWidth: 800, color: V3.ink, marginBottom: 28,
        }}>
          Robotics engineer. From simulation{' '}
          <span style={{ color: V3.accent }}>to real hardware.</span>
        </h1>

        <p style={{ marginTop: 24, fontSize: 18, color: V3.muted, maxWidth: 640 }}>
          {PROFILE.shortBio}
        </p>

        <div className="hero-actions" style={{ marginTop: 36 }}>
          <a href="#work" style={{
            padding: '12px 20px', borderRadius: 999,
            background: V3.highlight, color: V3.panelHi,
            fontWeight: 600, fontSize: 14, textDecoration: 'none', display: 'inline-block',
          }}>See projects</a>
          <a href="src/assets/Resume_Miguel_Angel_Garcia_de_Vicente.pdf" target="_blank" rel="noopener noreferrer" style={{
            padding: '12px 20px', borderRadius: 999,
            border: `1px solid ${V3.rule}`, background: V3.panel,
            color: V3.ink, fontSize: 14, textDecoration: 'none', display: 'inline-block',
          }}>Résumé</a>
        </div>
      </div>
    </div>
  );
}

// ─── Section heading ─────────────────────────────────────────────────────────

function SectionHead({ label, title, sub }) {
  return (
    <div className="section-head">
      <div>
        <div style={{ fontSize: 12, color: V3.highlight, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6, fontWeight: 600 }}>{label}</div>
        <h2 style={{ fontSize: 30, fontWeight: 600, letterSpacing: -0.6, margin: 0 }}>{title}</h2>
      </div>
      {sub && <div style={{ color: V3.muted, fontSize: 14, maxWidth: 320, textAlign: 'right' }}>{sub}</div>}
    </div>
  );
}

// ─── Featured projects ───────────────────────────────────────────────────────

function Featured() {
  return (
    <div id="work" className="h-pad" style={{ paddingTop: 68 }}>
      <SectionHead label="Featured" title="Three projects I'd open with" sub="The work I'm most proud of, and happy to talk through." />
      <div className="grid-featured">
        {FEATURED.map((p) => <FeaturedCard key={p.id} project={p} />)}
      </div>
    </div>
  );
}

function FeaturedCard({ project: p }) {
  return (
    <a href={`projects/index.html?id=${p.id}`} className="project-card"
      style={{ background: V3.panel }}>
      <div style={{ padding: 14 }}>
        <div style={{ borderRadius: 10, overflow: 'hidden' }}>
          {p.cardImage
            ? <img src={p.cardImage} alt={p.title} style={{ display: 'block', width: '100%', aspectRatio: '4/3', objectFit: 'cover' }} />
            : <Placeholder kind="hero" label={p.id} ratio="4/3" accent={V3.muted} bg="#1d293b" stripe="rgba(100,140,201,0.10)" />
          }
        </div>
      </div>
      <div style={{ padding: '4px 22px 22px' }}>
        <div style={{ fontSize: 11.5, color: V3.muted, letterSpacing: '0.04em', display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
          <span>{p.code} · {p.year}</span>
          <span style={{ display: 'flex', gap: 6 }}>
            {p.tags.slice(0, 2).map((t) => (
              <span key={t} style={{ padding: '1px 8px', borderRadius: 999, background: V3.accentSoft, color: V3.accent, fontSize: 11 }}>{t}</span>
            ))}
          </span>
        </div>
        <h3 style={{ fontSize: 19, fontWeight: 600, letterSpacing: -0.3, margin: 0, lineHeight: 1.25 }}>{p.title}</h3>
        <p style={{ marginTop: 8, color: V3.muted, fontSize: 13.5, lineHeight: 1.5 }}>{p.subtitle}</p>
        <div style={{ marginTop: 18, display: 'flex', gap: 16, paddingTop: 14, borderTop: `1px solid ${V3.rule}` }}>
          {p.metrics.slice(0, 2).map((m) => (
            <div key={m.k}>
              <div style={{ fontSize: 16, fontWeight: 600, color: V3.highlight, letterSpacing: -0.2 }}>{m.v}</div>
              <div style={{ fontSize: 10.5, color: V3.muted, marginTop: 2, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{m.k}</div>
            </div>
          ))}
          <div style={{ marginLeft: 'auto', alignSelf: 'flex-end', color: V3.accent, fontSize: 13 }}>Open →</div>
        </div>
      </div>
    </a>
  );
}

// ─── Project grid ────────────────────────────────────────────────────────────

function Grid() {
  return (
    <div className="h-pad" style={{ paddingTop: 100 }}>
      <SectionHead label="More work" title="Selected builds" />
      <div className="grid-projects">
        {GRID_PROJECTS.map((p) => (
          <a key={p.id} href={`projects/index.html?id=${p.id}`}
            className="grid-card"
            style={{ padding: 14, background: V3.panel }}>
            <div style={{ borderRadius: 10, overflow: 'hidden' }}>
              {p.cardImage
                ? <img src={p.cardImage} alt={p.title} style={{ display: 'block', width: '100%', aspectRatio: '4/3', objectFit: 'cover' }} />
                : <Placeholder kind="img" label={p.id} ratio="4/3" accent={V3.muted} bg="#1d293b" stripe="rgba(100,140,201,0.10)" />
              }
            </div>
            <div style={{ padding: '14px 6px 4px' }}>
              <div style={{ fontSize: 11, color: V3.muted, letterSpacing: '0.04em', fontFamily: V3.mono }}>{p.code} · {p.year}</div>
              <h4 style={{ margin: '6px 0 4px', fontSize: 16, fontWeight: 600, letterSpacing: -0.2 }}>{p.title}</h4>
              <p style={{ margin: 0, color: V3.muted, fontSize: 13, lineHeight: 1.5 }}>{p.subtitle}</p>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

// ─── About ───────────────────────────────────────────────────────────────────

function About() {
  return (
    <div id="about" className="h-pad" style={{ paddingTop: 108 }}>
      <SectionHead label="About" title="The short version" />
      <div className="grid-about">
        <p style={{ fontSize: 22, lineHeight: 1.5, fontWeight: 400, margin: 0, color: V3.ink, maxWidth: 720 }}>
          {PROFILE.bio}
        </p>
        <div>
          {TIMELINE.map((item) => (
            <div key={item.y} style={{
              display: 'grid', gridTemplateColumns: '80px 1fr',
              padding: '12px 0', borderBottom: `1px solid ${V3.rule}`, alignItems: 'baseline',
            }}>
              <span style={{ fontSize: 12, color: V3.highlight, fontFamily: V3.mono, fontWeight: 600 }}>{item.y}</span>
              <span style={{ color: V3.ink, fontSize: 14 }}>{item.t}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Skills ──────────────────────────────────────────────────────────────────

const SKILL_ICONS = {
  'ROS':        'ros-original',
  'ROS2':       'ros-original',
  'Gazebo':     'gazebo-plain',
  'MATLAB':     'matlab-plain',
  'Simulink':   'matlab-plain',
  'Python':     'python-plain',
  'C/C++':      'cplusplus-plain',
  'R':          'r-plain',
  'Blender':    'blender-original',
  'Git':        'git-plain',
  'Trello':     'trello-plain',
  'LaTeX':      'latex-original',
  'Fusion 360': 'fusion-plain',
  'Anaconda':    'anaconda-original',
  'Arduino':     'arduino-plain',
  'Raspberry Pi':'raspberrypi-plain',
};

const SKILL_MONOS = {
  'Simulink':            'SLK',
  'FlexSim':             'FSM',
  'Assembly (AVR)':      'AVR',
  'AVR (Microchip Studio)': 'AVR',
  'VHDL':                'VHDL',
  'Vivado':              'VIV',
  'Siemens TIA Portal':  'TIA',
  'LTSpice':             'LTS',
  'Solid Edge':          'SE',
  'Navigation Systems':  'NAV',
  'Optimization':        'OPT',
  'Microsoft Office':    'MSO',
};

function getMonogram(name) {
  if (SKILL_MONOS[name]) return SKILL_MONOS[name];
  const words = name.split(/[\s\-\/\(\)]+/).filter(Boolean);
  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
  return name.slice(0, 2).toUpperCase();
}

function SkillPill({ name }) {
  const iconClass = SKILL_ICONS[name];
  const mono = getMonogram(name);
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 12px', borderRadius: 8,
      background: V3.accentSoft, fontSize: 14, color: V3.ink,
    }}>
      {iconClass
        ? <i className={`devicon-${iconClass} colored`} style={{ fontSize: 22, lineHeight: 1, flexShrink: 0 }} />
        : <span style={{
            width: 22, height: 22, borderRadius: 5, background: V3.panelHi, flexShrink: 0,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: mono.length > 3 ? 8 : mono.length > 2 ? 9 : 10,
            fontFamily: V3.mono, color: V3.accent, fontWeight: 600,
          }}>{mono}</span>
      }
      {name}
    </div>
  );
}

function Skills() {
  return (
    <div id="skills" className="h-pad" style={{ paddingTop: 108 }}>
      <SectionHead label="Stack" title="Tools I reach for" />
      <div className="grid-skills">
        {SKILLS.map((s) => (
          <div key={s.group} style={{ background: V3.panel, border: `1px solid ${V3.rule}`, borderRadius: 14, padding: 18 }}>
            <div style={{ fontSize: 13, color: V3.accent, fontWeight: 600, marginBottom: 12 }}>{s.group}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {s.items.map((it) => (
                <SkillPill key={it} name={it} />
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Contact ─────────────────────────────────────────────────────────────────

function Contact() {
  return (
    <div id="contact" className="h-pad" style={{ paddingTop: 108, paddingBottom: 76 }}>
      <div className="grid-contact" style={{
        background: V3.panel, border: `1px solid ${V3.rule}`, borderRadius: 20, padding: 48,
      }}>
        <div>
          <h2 style={{ fontSize: 40, fontWeight: 600, letterSpacing: -1, margin: 0, lineHeight: 1.05 }}>
            Hiring for an autonomous systems role?{' '}
            <span style={{ color: V3.highlight }}>Let's talk.</span>
          </h2>
          <p style={{ marginTop: 14, color: V3.muted, fontSize: 16, maxWidth: 520 }}>
            Good work tends to start with a conversation, and my door's always open.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <ContactRow k="Email"    v={PROFILE.email}    href={`mailto:${PROFILE.email}`} />
          <ContactRow k="LinkedIn" v={PROFILE.linkedin} href={`https://${PROFILE.linkedin}`} />
          <ContactRow k="GitHub"   v={PROFILE.github}   href={`https://${PROFILE.github}`} />
        </div>
      </div>
      <div style={{ marginTop: 40, fontSize: 12, color: V3.faint, display: 'flex', justifyContent: 'space-between' }}>
        <span>© 2026 {PROFILE.shortName}</span>
        <span>Built with care.</span>
      </div>
    </div>
  );
}

function ContactRow({ k, v, href }) {
  const external = !href.startsWith('mailto:');
  return (
    <a
      href={href}
      className="contact-row"
      style={{ padding: '14px 18px', background: V3.bg }}
      {...(external && { target: '_blank', rel: 'noopener noreferrer' })}
    >
      <span style={{ color: V3.muted, fontSize: 13 }}>{k}</span>
      <span style={{ color: V3.ink, fontSize: 14 }}>{v} <span style={{ color: V3.accent, marginLeft: 6 }}>↗</span></span>
    </a>
  );
}

// ─── App ─────────────────────────────────────────────────────────────────────

function App() {
  return (
    <div style={{ width: '100%', minHeight: '100vh', background: V3.bg, fontSize: 14.5, lineHeight: 1.55 }}>
      <Nav />
      <Hero />
      <Featured />
      <Grid />
      <About />
      <Skills />
      <Contact />
    </div>
  );
}

const _root = document.getElementById('root');
if (_root) ReactDOM.createRoot(_root).render(<App />);
