// File-based routing: this file's location IS the URL.
// /app/about/page.tsx  →  https://yoursite.com/about
//
// Conventions:
//   page.tsx     = the route's UI
//   layout.tsx   = a wrapper shared across this folder + any nested routes
//   loading.tsx  = shown while the page is loading
//   not-found.tsx = shown on 404 within this segment

import type { Metadata } from "next";
import Link from "next/link";

// Route-level metadata. Next reads this at build time and emits the
// correct <title>, <meta description>, OG tags, etc. into <head>.
// The root layout (/app/layout.tsx) had its own metadata; this overrides
// the title for /work specifically.
export const metadata: Metadata = {
  title: "Work — Angel Mankel",
//   description:
//     "Frontend engineer with deep AI-tooling fluency. Currently at Village Medical.",
};

// This is a Server Component by default. It runs on the server, sends
// HTML to the browser, and ships zero JavaScript for this page itself.
// You only add "use client" at the top of a file when you need
// interactivity (useState, onClick, etc).
//
// Because it's a server component, you could `await fetch()` here, read
// a markdown file from disk, or query a DB directly — no API route needed.
export default function WorkPage() {
  return (
    <main className="mx-auto max-w-2xl px-6 py-24">
      <h1 className="text-3xl font-semibold mb-12">Work</h1>

      <section className="space-y-6 text-base leading-relaxed text-neutral-200">
        <p>
          I came up through healthcare IT — help desk, then Salesforce admin,
          then software engineer at Village Medical, where I lead React and
          TypeScript redesigns of patient-facing apps and the internal
          component library.
        </p>
        <p>
          In parallel I&apos;ve gone deep on AI-assisted development. Claude
          Code, custom slash commands, MCP integrations — the tooling layer
          that&apos;s reshaping how I work across the stack.
        </p>
        <p>
          I&apos;m looking for remote-US product-engineering roles where
          shipping React is the day job and using and building AI tooling is
          first-class.
        </p>
      </section>

      <section className="mt-16">
        <div className="text-xs uppercase tracking-wider text-neutral-500 mb-3">
          Timeline
        </div>
        <ul className="font-mono text-sm space-y-1.5 text-neutral-200">
          <li>
            <span className="text-neutral-500 mr-3">2024 – now</span>
            Village Medical · Software Engineer
          </li>
          <li>
            <span className="text-neutral-500 mr-3">2022 – 2024</span>
            Village Medical · Salesforce Admin
          </li>
          <li>
            <span className="text-neutral-500 mr-3">2019 – 2022</span>
            Gila River · Help Desk / IT
          </li>
        </ul>
      </section>

      <nav className="mt-16 pt-8 border-t border-neutral-800 flex gap-6 text-sm text-neutral-400">
        <Link href="/" className="hover:text-white">
          ← Back home
        </Link>
        <Link href="/about" className="hover:text-white">
          See about
        </Link>
      </nav>
    </main>
  );
}
