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

import { PageHero } from "@/components/marketing/page-hero";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "For business",
  description:
    "krypco for partners and operators who need confidential execution with public verifiability.",
};

const POINTS = [
  {
    title: "Confidential by default",
    body: "Permissioned execution keeps sensitive commercial data off the open mempool while still producing checkable proofs.",
  },
  {
    title: "Proof you can show",
    body: "Public anchors give auditors, partners, and counterparties a way to verify commitments without a private-chain invite.",
  },
  {
    title: "A portal, not a black box",
    body: "Follow status through the hybrid path so operations teams can see pending, confirmed, and anchored states clearly.",
  },
] as const;

export default function BusinessPage() {
  return (
    <>
      <PageHero
        eyebrow="For business"
        title="Trust without the theatre"
        description="krypco is for teams that need real confidentiality and real verifiability — not a hype deck. Private execution for operations; public anchors for proof."
      >
        <div className="flex flex-wrap gap-3">
          <Link href="/contact" className={cn(buttonVariants({ size: "lg" }))}>
            Get in touch
          </Link>
          <Link
            href="/security"
            className={cn(buttonVariants({ variant: "outline", size: "lg" }))}
          >
            Security model
          </Link>
        </div>
      </PageHero>

      <section className="section-pad">
        <div className="mx-auto max-w-6xl px-5 lg:px-8">
          <div className="grid gap-6 md:grid-cols-3">
            {POINTS.map((p) => (
              <article
                key={p.title}
                className="rounded-2xl border border-border bg-card p-7"
              >
                <h2 className="font-display text-xl font-semibold tracking-tight">
                  {p.title}
                </h2>
                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                  {p.body}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}