import type { Metadata } from "next";
import Hero from "@/components/content/Hero";
import SectionLabel from "@/components/layout/SectionLabel";

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

type Section =
  | { label: string; kind: "list"; items: string[] }
  | { label: string; kind: "prose"; paragraphs: string[] };

const sections: Section[] = [
  {
    label: "Hardware",
    kind: "list",
    items: [
      "Custom desktop — i9-12900H, 32GB RAM, Intel Iris Xe",
      "Nobara Linux 43 · KDE Plasma 6 · Wayland",
      "Headphones / keyboard / monitor — placeholder",
    ],
  },
  {
    label: "Editor & Shell",
    kind: "list",
    items: [
      "VS Code with a personal extension pack — placeholder",
      "Bash / zsh — placeholder for shell",
      "JetBrains Mono as the editor font",
      "Theme — placeholder",
    ],
  },
  {
    label: "AI Workflow",
    kind: "prose",
    paragraphs: [
      "Claude Code is the daily driver — custom slash commands, MCP servers wired into my editor, and agent workflows that handle the repeat work so I can stay in the design problem.",
      "Placeholder paragraph two — name a specific workflow and the time it saves.",
    ],
  },
  {
    label: "Self-hosting",
    kind: "list",
    items: [
      "Bare-metal home server, exposed to the internet through Traefik",
      "This site lives on it — Next.js standalone build, no managed host",
      "Other services — placeholder",
    ],
  },
];

export default function UsesPage() {
  return (
    <div className="space-y-14">
      <Hero label="Uses" subtitle="What I reach for daily." />

      {sections.map((section) => (
        <section key={section.label} className="space-y-4">
          <SectionLabel label={section.label} />
          {section.kind === "list" ? (
            <ul className="space-y-2 text-[15px] leading-[1.65] text-neutral-200">
              {section.items.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          ) : (
            <div className="space-y-4 text-[15px] leading-[1.65] text-neutral-200">
              {section.paragraphs.map((p) => (
                <p key={p}>{p}</p>
              ))}
            </div>
          )}
        </section>
      ))}
    </div>
  );
}