const SKILL_GROUPS = [
  {
    k: 'ai leadership',
    items: ['AI adoption programs', 'Agentic dev workflows', 'Claude / ChatGPT / Codex', 'LLM product design', 'Prompt engineering', 'Evals & guardrails', 'Tool use / agents', 'MCP servers', 'RAG pipelines'],
  },
  {
    k: 'frontend',
    items: ['React', 'React Native', 'Next.js / Vite', 'TypeScript', 'TanStack', 'Apollo', 'Tailwind', 'Figma', 'Maestro / Cypress / Playwright'],
  },
  {
    k: 'backend',
    items: ['Go', 'Node.js', 'Rust', 'Python', 'Rails', 'GraphQL', 'PostgreSQL', 'Docker', 'AWS'],
  },
  {
    k: 'leadership',
    items: ['Team building (1→10)', 'DORA / delivery metrics', 'Architectural review', 'Mentorship', 'Hiring', 'HIPAA-aware delivery', 'Agile / sprint planning', 'Cross-functional delivery', 'International launches'],
  },
];

function Skills() {
  return (
    <section id="skills" className="section" data-screen-label="05 Stack">
      <div className="section-head">
        <span className="section-num">05</span>
        <h2 className="section-title">Stack</h2>
        <span className="section-rule" />
      </div>
      <div className="skills-grid">
        {SKILL_GROUPS.map((g) => (
          <div key={g.k} className="skill-col">
            <div className="skill-k mono small muted">{g.k}</div>
            <ul className="skill-list">
              {g.items.map((it) => <li key={it}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

function Resume() {
  return (
    <section id="resume" className="section section-cta" data-screen-label="06 Resume">
      <div className="cta">
        <div className="cta-left">
          <div className="eyebrow"><span className="dot-live" /> currently @ rugiet</div>
          <h2 className="cta-title">
            Building production agents today, ready to build them at the frontier.
          </h2>
          <p className="cta-sub">
            I ship agents, open-source the tooling, write about what I learn,
            and lead the teams that put it all in production. I want to do
            this work at the labs defining what AI-native software looks like.
          </p>
          <div className="cta-actions">
            {/* Download résumé hidden for now — LinkedIn is enough */}
            <a className="btn btn-primary" href="https://www.linkedin.com/in/bleach/" target="_blank" rel="noopener">LinkedIn ↗</a>
            <a className="btn btn-ghost" href="mailto:bleach@gmail.com">bleach@gmail.com</a>
          </div>
        </div>
        <div className="cta-right">
          <a className="resume-card" href="https://www.linkedin.com/in/bleach/" target="_blank" rel="noopener">
            <div className="rc-head mono small muted">resume.pdf</div>
            <div className="rc-lines">
              <div className="rc-line w-60" />
              <div className="rc-line w-40" />
              <div className="rc-line w-90" />
              <div className="rc-line w-70" />
              <div className="rc-line w-80" />
              <div className="rc-line w-50" />
              <div className="rc-line w-85" />
              <div className="rc-line w-65" />
              <div className="rc-line w-75" />
              <div className="rc-line w-55" />
            </div>
            <div className="rc-foot mono small muted">view on linkedin ↗</div>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Skills = Skills;
window.Resume = Resume;