import Badge from '@/components/Badge'

const skills = [
  {
    category: 'Languages',
    items: ['TypeScript', 'JavaScript', 'Go', 'Python', 'SQL', 'Bash'],
  },
  {
    category: 'Frontend',
    items: ['React', 'Next.js', 'Tailwind CSS', 'Radix UI', 'Framer Motion'],
  },
  {
    category: 'Backend',
    items: ['Node.js', 'PostgreSQL', 'Redis', 'REST', 'GraphQL', 'tRPC'],
  },
  {
    category: 'Tooling',
    items: ['Docker', 'Git', 'GitHub Actions', 'Vercel', 'Linux'],
  },
  {
    category: 'Focus Areas',
    items: ['Web Performance', 'Developer Experience', 'API Design', 'UI Engineering', 'Accessibility'],
  },
]

const timeline = [
  {
    year: '2024',
    title: 'Senior Engineer — Acme Corp',
    description:
      'Leading frontend infrastructure and design systems. Building core platform features used by millions of users.',
  },
  {
    year: '2022',
    title: 'Software Engineer — Startup XYZ',
    description:
      'Full-stack product work across a SaaS platform. Owned the billing system, onboarding flow, and internal tooling.',
  },
  {
    year: '2021',
    title: 'Open Source — Deploy CLI',
    description:
      'Built and published an open-source CLI tool in Go for automating local dev environment setup.',
  },
  {
    year: '2020',
    title: 'Software Engineer — Agency Co.',
    description:
      'Client work spanning e-commerce, marketing sites, and web apps. Introduced TypeScript and component-driven development.',
  },
  {
    year: '2019',
    title: 'BSc Computer Science',
    description: 'Graduated with a focus on distributed systems and human-computer interaction.',
  },
]

export default function AboutPage() {
  return (
    <div className="mx-auto max-w-3xl px-6 py-16">

      {/* Intro */}
      <section className="mb-16">
        <h1 className="mb-6 text-3xl font-semibold text-zinc-900 dark:text-white">About</h1>
        <p className="text-base leading-7 text-zinc-600 dark:text-zinc-400">
          I&apos;m a software engineer with a focus on the web — building products
          that are fast, accessible, and well-crafted. I care about the details:
          clean APIs, readable code, and interfaces that feel good to use. Outside
          of work I contribute to open source, write about things I&apos;m learning,
          and tinker with side projects.
        </p>
      </section>

      {/* Skills */}
      <section className="mb-16">
        <h2 className="mb-8 text-xl font-semibold text-zinc-900 dark:text-white">Skills</h2>
        <dl className="flex flex-col gap-6">
          {skills.map(({ category, items }) => (
            <div key={category} className="flex flex-col gap-3 sm:flex-row sm:gap-8">
              <dt className="w-32 shrink-0 pt-0.5 text-sm text-zinc-500">{category}</dt>
              <dd>
                <ul className="flex flex-wrap gap-2">
                  {items.map((item) => (
                    <li key={item}>
                      <Badge label={item} />
                    </li>
                  ))}
                </ul>
              </dd>
            </div>
          ))}
        </dl>
      </section>

      {/* Timeline */}
      <section>
        <h2 className="mb-8 text-xl font-semibold text-zinc-900 dark:text-white">Timeline</h2>
        <ol className="flex flex-col">
          {timeline.map(({ year, title, description }) => (
            <li key={year} className="flex gap-8 pb-10 last:pb-0">
              <div className="flex flex-col items-center">
                <span className="font-mono text-xs text-zinc-500">{year}</span>
                <div className="mt-2 w-px flex-1 bg-zinc-200 dark:bg-zinc-800" />
              </div>
              <div className="pb-2 pt-0.5">
                <p className="text-sm font-medium text-zinc-900 dark:text-white">{title}</p>
                <p className="mt-1.5 text-sm leading-6 text-zinc-600 dark:text-zinc-400">{description}</p>
              </div>
            </li>
          ))}
        </ol>
      </section>

    </div>
  )
}