import type { Metadata } from "next";
import { Container, SectionHeader } from "@/src/components/site";
import { Timeline } from "@/src/components/about/Timeline";
import { TagList } from "@/src/components/about/TagList";
import {
  NOT_MY_THING,
  STACK_ITEMS,
  TIMELINE,
  WORKING_MODE,
} from "@/src/components/about/aboutData";

export const metadata: Metadata = {
  title: "About",
  description:
    "Senior engineer who makes AI-built software dependable. Web since 2011, remote since 2021, now independent.",
  alternates: { canonical: "/about" },
};

// TODO(owner): link a CV download here once the PDF exists (no file yet).

export default function Page() {
  return (
    <Container className="py-16 md:py-24">
      <SectionHeader
        as="h1"
        kicker="/about"
        title="About"
        lead="Senior engineer who makes AI-built software dependable."
      />

      <div className="mt-12 max-w-2xl space-y-4 text-base leading-relaxed text-muted">
        <p>
          I have worked on the web since 2011, starting with an apprenticeship.
          Since then I have worked in agencies and product companies, and led
          the frontend team at an agency. I have been fully remote since 2021
          and am now independent, while running a small product business.
        </p>
        <p>
          Design and frontend are my strength. I am comfortable with backend
          concepts and architecture. Today I mostly write TypeScript and
          Next.js, plus Rust and Solidity for systems work. The path started
          with Vue and plain JavaScript, and I would rather say so than pretend
          I always wrote Rust.
        </p>
      </div>

      <section className="mt-16 max-w-2xl" aria-labelledby="how-i-work">
        <h2 id="how-i-work" className="!mb-3 !mt-0 !text-xl">
          How I work
        </h2>
        <ul className="!m-0 space-y-2 !pl-5 text-muted">
          {WORKING_MODE.map((line) => (
            <li key={line}>{line}</li>
          ))}
        </ul>
      </section>

      <section className="mt-16 max-w-3xl" aria-labelledby="timeline">
        <h2 id="timeline" className="!mb-4 !mt-0 !text-xl">
          Timeline
        </h2>
        <Timeline entries={TIMELINE} />
      </section>

      <div className="mt-16 grid max-w-3xl gap-10 md:grid-cols-2">
        <TagList title="Stack" items={STACK_ITEMS} />
        <TagList title="Not my thing" items={NOT_MY_THING} />
      </div>
    </Container>
  );
}