import type { Metadata } from "next";
import { CtaBand } from "@/components/cta-band";
import { Eyebrow, Section } from "@/components/section";
import { cases } from "@/lib/content";

export const metadata: Metadata = {
  title: "Customers",
  description:
    "How institutions use The Agentic Cloud to turn lakes, agents, and unofficial rules into attested outcomes.",
};

export default function CustomersPage() {
  return (
    <>
      <Section className="pt-16 md:pt-24">
        <Eyebrow>Customers</Eyebrow>
        <h1 className="mt-4 max-w-3xl font-heading text-4xl leading-tight md:text-6xl">
          Outcomes, attributed. Synergy, attested.
        </h1>
        <p className="mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
          We do not publish logos for sport. These institutions let us name
          the number, the thesis, and the person who will still take the
          call.
        </p>
      </Section>
      <Section className="pt-0">
        <div className="space-y-6">
          {cases.map((c) => (
            <article
              key={c.company}
              className="grid gap-8 rounded-3xl border border-white/10 bg-white/5 p-6 backdrop-blur-xl md:grid-cols-[200px_1fr] md:p-10"
            >
              <div>
                <p className="vibe-text font-heading text-5xl">{c.stat}</p>
                <p className="mt-2 text-sm text-muted-foreground">
                  {c.statLabel}
                </p>
                <p className="mt-6 text-sm font-medium">{c.company}</p>
                <p className="text-xs text-muted-foreground">{c.sector}</p>
              </div>
              <div>
                <p className="text-[15px] leading-relaxed text-foreground/90">
                  {c.summary}
                </p>
                <blockquote className="mt-6 border-l border-primary/40 pl-4 text-sm italic text-muted-foreground">
                  “{c.quote}”
                  <footer className="mt-2 not-italic text-foreground/80">
                    {c.person}
                  </footer>
                </blockquote>
              </div>
            </article>
          ))}
        </div>
      </Section>
      <CtaBand />
    </>
  );
}