import type { Metadata } from "next";
import Link from "next/link";
import { CtaBand } from "@/components/cta-band";
import { Eyebrow, Section } from "@/components/section";
import { buttonVariants } from "@/components/ui/button";
import { jobs } from "@/lib/content";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "Careers",
  description:
    "Join The Agentic Cloud — fabric engineers, outcomes partners, and people who can say Mamba-2.5 in an architecture review.",
};

export default function CareersPage() {
  return (
    <>
      <Section className="pt-16 md:pt-24">
        <Eyebrow>Careers</Eyebrow>
        <h1 className="mt-4 max-w-3xl font-heading text-4xl leading-tight md:text-6xl">
          Come build the cloud that agents actually run on.
        </h1>
        <p className="mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
          We are hiring people who have sat in the room where the real
          decision happened after the meeting — and who can encode that
          without writing a chatbot.
        </p>
      </Section>
      <Section className="pt-0">
        <div className="divide-y divide-white/10 border-y border-white/10">
          {jobs.map((job) => (
            <article key={job.id} className="grid gap-4 py-8 md:grid-cols-[1fr_auto]">
              <div>
                <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-primary">
                  {job.team} · {job.location}
                </p>
                <h2 className="mt-2 font-heading text-2xl md:text-3xl">
                  {job.title}
                </h2>
                <p className="mt-3 max-w-2xl text-sm leading-relaxed text-muted-foreground">
                  {job.blurb}
                </p>
              </div>
              <Link
                href="/request-access"
                className={cn(
                  buttonVariants({ variant: "outline" }),
                  "h-9 self-start px-3.5"
                )}
              >
                Apply via access
              </Link>
            </article>
          ))}
        </div>
      </Section>
      <CtaBand
        title="Do not see the role?"
        body="Send the thesis anyway. We open roles around people more often than the other way around."
      />
    </>
  );
}