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 { team } from "@/lib/content";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "About",
  description:
    "The Agentic Cloud, Inc. — building the operating fabric for institutions that have outgrown copilots.",
};

export default function AboutPage() {
  return (
    <>
      <Section className="pt-16 md:pt-24">
        <Eyebrow>About</Eyebrow>
        <h1 className="mt-4 max-w-3xl font-heading text-4xl leading-tight md:text-6xl">
          Built in the gap between the lake and the board packet.
        </h1>
        <p className="mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
          The Agentic Cloud, Inc. was founded in 2023 after a third
          transformation program tried to measure synergy with a survey. We
          are a team of fabric engineers, forward-deployed outcomes partners,
          and people who have sat through architecture reviews where
          “blockchain” was a slide and “agentic” was a vibe.
        </p>
        <p className="mt-4 max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
          Series B, $84M, led by Horizon Capital with participation from
          Signal Peak and several operators who asked us not to put their
          funds on the website. Headquarters in San Francisco and London.
          Continuity node in a jurisdiction we describe as “sovereignty
          optional until it isn’t.”
        </p>
      </Section>
      <Section className="border-y border-white/10 bg-white/5">
        <Eyebrow>Leadership</Eyebrow>
        <h2 className="mt-3 font-heading text-3xl md:text-4xl">
          The people who will not demo a chatbot.
        </h2>
        <div className="mt-10 grid gap-8 sm:grid-cols-2">
          {team.map((person) => (
            <article key={person.name}>
              <h3 className="font-heading text-2xl">{person.name}</h3>
              <p className="mt-1 font-mono text-[11px] uppercase tracking-[0.16em] text-primary">
                {person.role}
              </p>
              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                {person.bio}
              </p>
            </article>
          ))}
        </div>
      </Section>
      <Section>
        <Eyebrow>Join</Eyebrow>
        <h2 className="mt-3 max-w-2xl font-heading text-3xl md:text-4xl">
          We hire people who can say Mamba-2.5 in an architecture review
          without smiling.
        </h2>
        <Link
          href="/careers"
          className={cn(buttonVariants({ variant: "outline" }), "mt-6 h-10 px-4")}
        >
          Open roles
        </Link>
      </Section>
      <CtaBand />
    </>
  );
}