import { Check } from "lucide-react";

import { Button } from "@/components/ui/button";

const included = [
  "SSO / SAML and SCIM provisioning",
  "Custom DPA and security review",
  "99.99% SLA with financial penalties",
  "Dedicated support engineer, 4h response",
  "Invoicing, procurement and POs",
  "On-prem or single-tenant deployment",
];

export default function PricingEnterprise() {
  return (
    <section className="bg-background">
      <div className="mx-auto grid w-full max-w-5xl gap-12 px-6 py-20 sm:py-24 lg:grid-cols-2">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Enterprise, without the enterprise theater
          </h2>
          <p className="mt-3 max-w-md text-muted-foreground">
            Everything your security and procurement teams will ask for — we've
            answered the questionnaire a hundred times.
          </p>
          <ul className="mt-8 grid gap-3 sm:grid-cols-2">
            {included.map((item) => (
              <li key={item} className="flex items-start gap-2.5 text-sm">
                <Check className="mt-0.5 size-4 shrink-0" />
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="flex flex-col justify-center rounded-xl border border-border/60 bg-card p-8">
          <p className="font-mono text-xs tracking-wide text-muted-foreground uppercase">
            How it works
          </p>
          <ol className="mt-5 space-y-4">
            {[
              "30-minute call with an engineer, not a rep",
              "Pilot on your real workload, 30 days, free",
              "One contract, one invoice, live in a week",
            ].map((step, index) => (
              <li key={step} className="flex gap-3 text-sm">
                <span className="flex size-6 shrink-0 items-center justify-center rounded-full border border-border/60 font-mono text-xs tabular-nums">
                  {index + 1}
                </span>
                <span className="pt-0.5">{step}</span>
              </li>
            ))}
          </ol>
          <Button size="lg" className="mt-8">
            Talk to an engineer
          </Button>
          <p className="mt-3 text-center text-xs text-muted-foreground">
            Median first response: 3 hours.
          </p>
        </div>
      </div>
    </section>
  );
}
Pricing Enterprise
