import Link from "next/link"
import { LegalPage, Section, LegalContact } from "@/components/marketing/legal"
import { LEGAL, SUBPROCESSORS } from "@/lib/legal"

export const metadata = {
  title: "Sub-processors",
  description: `The third-party sub-processors that ${LEGAL.entity} engages to process personal data on behalf of Customers of ${LEGAL.service}.`,
  alternates: { canonical: "/subprocessors" },
}

export default function SubprocessorsPage() {
  return (
    <LegalPage
      title="Sub-processors"
      subtitle={`The third parties that ${LEGAL.entity} engages to process personal data on behalf of Customers of ${LEGAL.service}.`}
    >
      <Section id="overview" heading="1. Overview">
        <p>
          A <strong>sub-processor</strong> is a third party that we engage to process
          personal data on behalf of the Customer in connection with the Service. When the
          Customer uses {LEGAL.service}, the Customer grants us a general authorization to
          engage the sub-processors listed below under the terms of our{" "}
          <Link href="/dpa">Data Processing Addendum</Link>. Each sub-processor is bound by
          data-protection obligations that are substantially equivalent to those we owe the
          Customer.
        </p>
      </Section>

      <Section id="current" heading="2. Current sub-processors">
        <p>
          The following third parties are the sub-processors currently engaged to process
          personal data on the Customer&rsquo;s behalf:
        </p>
        <div className="rounded-2xl border border-white/[0.06] bg-[#111118] overflow-hidden">
          <div className="hidden sm:grid grid-cols-[1.2fr_2fr_1.4fr] gap-4 border-b border-white/[0.08] px-5 py-3 text-xs font-semibold uppercase tracking-wider text-white/40">
            <span>Sub-processor</span>
            <span>Purpose</span>
            <span>Location</span>
          </div>
          {SUBPROCESSORS.map((sp, i) => (
            <div
              key={sp.name}
              className={`grid grid-cols-1 gap-1 px-5 py-4 text-sm sm:grid-cols-[1.2fr_2fr_1.4fr] sm:gap-4 ${
                i !== SUBPROCESSORS.length - 1 ? "border-b border-white/[0.04]" : ""
              }`}
            >
              <span className="text-white/80 font-medium">{sp.name}</span>
              <span className="text-white/50">{sp.purpose}</span>
              <span className="text-white/50">{sp.location}</span>
            </div>
          ))}
        </div>
      </Section>

      <Section id="changes" heading="3. Changes to this list">
        <p>
          We update this page whenever our sub-processors change. The Customer may request
          to be notified of additions to, or replacements of, our sub-processors, and may
          object to a change on legitimate data-protection grounds, as described in our{" "}
          <Link href="/dpa">Data Processing Addendum</Link>.
        </p>
      </Section>

      <LegalContact email={LEGAL.dpoEmail} />
    </LegalPage>
  )
}