import ActionLink from "@/components/ActionLink";
import {
  IconCompliant,
  IconHightAvailable,
  IconSecure,
} from "@/components/Icons";
import Container from "@/components/NAWebsite/Container";
import { SectionSubTitle, SectionTitle } from "./Section";

function SecuritySectionItem({
  icon,
  title,
  description,
  footer,
}: {
  icon: React.ReactNode;
  title: React.ReactNode;
  description: React.ReactNode;
  footer: React.ReactNode;
}) {
  return (
    <div className="flex flex-col">
      <div className="h-full">
        {icon}
        <h3 className="text-2xl font-bold leading-[30px] text-white">
          {title}
        </h3>
        <div className="text-carbon flex-auto">{description}</div>
      </div>
      <div className="flex flex-auto flex-col">{footer}</div>
    </div>
  );
}

export default function SecuritySection() {
  return (
    <div className="bg-black py-10 md:py-20">
      <Container>
        <div>
          <SectionSubTitle>Build with Confidence</SectionSubTitle>
          <SectionTitle>Enterprise-grade Security</SectionTitle>
        </div>
        <div className="mt-16 lg:max-w-none">
          <div className="grid max-w-xl grid-cols-1 gap-x-16 gap-y-12 lg:max-w-none lg:grid-cols-3">
            <SecuritySectionItem
              icon={<IconCompliant className="mb-5 h-14 w-14" />}
              title="Compliant"
              description={
                <p className="text-carbon mb-8 mt-4 text-base font-light leading-[22px]">
                  We are in compliance with the latest industry standards: SOC2
                  Type II and SOC3 certified, EU CoC, PCI DSS and HIPAA
                  compliant.
                </p>
              }
              footer={
                <ActionLink href="https://www.pingcap.com/trust-hub/compliance/">
                  Get Compliance Reports
                </ActionLink>
              }
            />
            <SecuritySectionItem
              icon={<IconSecure className="mb-5 h-14 w-14" />}
              title="Secure"
              description={
                <p className="text-carbon mb-8 mt-4 text-base font-light leading-[22px]">
                  TiDB Serverless supports Role-based Access Control, Encryption
                  at rest, Private Link, and more.
                </p>
              }
              footer={
                <div className="flex flex-col gap-y-2">
                  <ActionLink
                    href="https://docs.pingcap.com/tidbcloud/set-up-private-endpoint-connections-serverless"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Security Features Documentation
                  </ActionLink>
                </div>
              }
            />
            <SecuritySectionItem
              icon={<IconHightAvailable className="mb-5 h-14 w-14" />}
              title="High Available"
              description={
                <p className="text-carbon mb-8 mt-4 text-base font-light leading-[22px]">
                  TiDB Serverless offers 99.9% uptime SLA and Zonal HA by
                  default. Supports cross-AZ HA and automatic backups.
                </p>
              }
              footer={
                <div className="flex flex-col gap-y-2">
                  {/* <ActionLink href="#">
                    High availability white paper
                  </ActionLink> */}
                  <ActionLink href="https://www.pingcap.com/legal/service-level-agreement-for-tidb-cloud-services/">
                    SLA Policy
                  </ActionLink>
                </div>
              }
            />
          </div>
        </div>
      </Container>
    </div>
  );
}