import type { Metadata } from "next";
import { IconBrandLinkedinFilled, IconMailFilled } from "@tabler/icons-react";
import Hero from "@/components/content/Hero";
import SectionLabel from "@/components/layout/SectionLabel";
import AccentLink from "@/components/navigation/AccentLink";
import GiteaIcon from "@/components/icons/GiteaIcon";
import Tooltip from "@/components/ui/Tooltip";
import { colors, education, timeline } from "@/constants";

export const metadata: Metadata = {
  title: "About — Angel Mankel",
};

export default function AboutPage() {
  return (
    <div className="space-y-14">
      <Hero label="About">
        <div className="space-y-5 text-[19px] leading-[1.65]">
          <p>
            I came up through healthcare IT — help desk, then Salesforce
            administration, then software engineering. A path that taught me
            to translate between operations, design, and engineering without
            losing the thread.
          </p>
          <p>
            These days I write React and TypeScript for production, lead
            component-library work, and spend a lot of time in Claude Code —
            custom slash commands, MCP integrations, agent workflows. The
            AI-tooling layer is reshaping how I work across the stack.
          </p>
          <p>
            Based in Arizona, looking for remote-US roles where shipping
            frontend product and building AI tooling around it are both
            first-class. Bonus points for teams that take design seriously
            and don&apos;t hand things off at every layer.
          </p>
        </div>
      </Hero>

      <section className="space-y-4">
        <SectionLabel label="Education" />
        <ul className="space-y-2">
          {education.map((row) => (
            <li key={row.span} className="flex gap-2 text-sm">
              <span className="w-36 shrink-0 text-neutral-500">
                {row.span}
              </span>
              <span className="text-neutral-200">{row.degree} · {row.location}</span>
            </li>
          ))}
        </ul>
      </section>

      <section className="space-y-4">
        <SectionLabel label="Timeline" />
        <ul className="space-y-2">
          {timeline.map((row) => (
            <li key={row.span} className="flex gap-2 text-sm">
              <span className="w-36 shrink-0 text-neutral-500">
                {row.span}
              </span>
              <span className="text-neutral-200">{row.role}</span>
            </li>
          ))}
        </ul>
      </section>

      <AccentLink link="/cv.pdf" label="Download CV (PDF)" />

      <nav aria-label="Contact" className="flex gap-5 text-neutral-300">
        <Tooltip text="Email">
          <a
            href="mailto:angelmankel@gmail.com"
            aria-label="Email"
            className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
          >
            <IconMailFilled size={32} />
          </a>
        </Tooltip>
        <Tooltip text="LinkedIn">
          <a
            href="https://www.linkedin.com/in/angel-mankel-0616aa132/"
            target="_blank"
            rel="noreferrer"
            aria-label="LinkedIn"
            className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
          >
            <IconBrandLinkedinFilled size={32} />
          </a>
        </Tooltip>
        <Tooltip text="Gitea">
          <a
            href="#"
            aria-label="Gitea"
            className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
          >
            <GiteaIcon size={32} />
          </a>
        </Tooltip>
      </nav>
    </div>
  );
}