import { Button } from "@/registry/ui/button"
import { Separator } from "@/registry/ui/separator"

const included = [
  "Unlimited environments",
  "Preview deploys per branch",
  "Point-in-time restore, 30 days",
  "SOC 2 Type II report",
  "SSO via SAML and OIDC",
  "99.9% uptime SLA",
  "Log drains to any sink",
  "Terraform provider",
]

function Check() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 12 12"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.75"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="mt-0.5 size-3.5 shrink-0 text-accent"
    >
      <path d="M2.5 6.2l2.4 2.4 4.6-5" />
    </svg>
  )
}

export default function FeaturesList() {
  return (
    <section className="mx-auto grid max-w-5xl gap-12 px-6 py-20 md:grid-cols-[1fr_1.2fr]">
      <div>
        <h2 className="text-3xl font-semibold tracking-tight">
          What you get, without asking
        </h2>
        <p className="mt-4 text-sm leading-relaxed text-muted">
          The list procurement wants, on the page rather than in a PDF you have
          to request.
        </p>
        <Separator className="my-6" />
        <Button variant="outline">Download the security brief</Button>
      </div>

      <ul className="grid gap-x-8 gap-y-4 sm:grid-cols-2">
        {included.map((item) => (
          <li key={item} className="flex items-start gap-2.5 text-sm text-muted">
            <Check />
            {item}
          </li>
        ))}
      </ul>
    </section>
  )
}