import { ArrowUpRight } from "lucide-react";
import { useTranslations } from "next-intl";

import Rule from "@/components/ui/Rule";
import Overline from "@/components/ui/Overline";

type PolicyKey =
  | "rjcCertificate"
  | "responsibleBusiness"
  | "supplyChain"
  | "grievance"
  | "conflictMinerals"
  | "oecdReport"
  | "objectives"
  | "energy"
  | "dei"
  | "rjcAnnual"
  | "complianceManager";

type Policy = { key: PolicyKey; url: string };

/** Host-based rather than key-based, so a second registry link stays followable. */
const isRegistry = (url: string) => url.startsWith("https://www.responsiblejewellery.com/");

// Documents publics — liens sortants vers le registre RJC officiel et les PDFs hébergés.
const POLICIES: readonly Policy[] = [
  {
    key: "rjcCertificate",
    url: "https://www.responsiblejewellery.com/member/advance-manufacturers-co-ltd",
  },
  {
    key: "responsibleBusiness",
    url: "https://www.dropbox.com/scl/fi/w039bpt5tfka3b9hal0mk/RJC-Policy-2025.pdf?rlkey=x92aca5pe9r85bd7a5n9ronlw&dl=0",
  },
  {
    key: "supplyChain",
    url: "https://www.dropbox.com/scl/fi/dpatee4gmu2m5cy8my74s/Supply-Chain-policy-2025.pdf?rlkey=iz8ciwdg9d00mt2w7gu32zcqi&dl=0",
  },
  {
    key: "grievance",
    url: "https://www.dropbox.com/scl/fi/yic1t40man0d0lca8qm00/Grievance_2025.pdf?rlkey=xqgmnn60g3ugki6gqp88i8qph&dl=0",
  },
  {
    key: "conflictMinerals",
    url: "https://www.dropbox.com/scl/fi/7lil84g1kdw7cpob7r7bo/Conflict-of-Mineral-2025.pdf?rlkey=r838uq6lomsyda6xmo8qiruot&dl=0",
  },
  {
    // Onzième document de l'ancien site, absent de la reprise initiale.
    key: "complianceManager",
    url: "https://www.dropbox.com/s/v2cnu7ydgwe6z3r/B3-%E0%B9%81%E0%B8%95%E0%B9%88%E0%B8%87%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87%E0%B8%95%E0%B8%B1%E0%B8%A7%E0%B9%81%E0%B8%97%E0%B8%99.pdf?dl=0",
  },
  {
    key: "oecdReport",
    url: "https://www.dropbox.com/scl/fi/rl6917ahlchi3qpycydwe/Annual-OECD-Report-2026.pdf?rlkey=y8x845p3r1hcv1yobz4gp2bug&dl=0",
  },
  {
    key: "objectives",
    url: "https://www.dropbox.com/scl/fi/6y1a9r8h6a8vkr07ex7p4/Annual-Objective-Target-2026.pdf?rlkey=1kfr3xb7rfl2bm2ac7jmnv2hj&dl=0",
  },
  {
    key: "energy",
    url: "https://www.dropbox.com/scl/fi/qvbdu1jgow9ulkh8b96mz/Energy-Conservation-Policy-2026.pdf?rlkey=l8wq2doovn8kr0blvayjr3rgn&dl=0",
  },
  {
    key: "dei",
    url: "https://www.dropbox.com/scl/fi/xdf4jye22dets25gn7j2f/DEI-Policy.pdf?rlkey=jhk454gyi51yufgaahxvl4g59&dl=0",
  },
  {
    key: "rjcAnnual",
    url: "https://www.dropbox.com/scl/fi/arjr45i4y88nsjl2vw7dh/RJC-Annual-report-2026.pdf?rlkey=kpbayi9d0vvqplsex0jp4tqws&dl=0",
  },
] as const;

export default function SustainabilityPolicies() {
  const t = useTranslations("SustainabilityPage.policies");

  return (
    <section className="border-t border-hairline bg-surface-container-low">
      <div className="mx-auto max-w-[1440px] px-6 py-[76px] lg:px-16 lg:py-[104px]">
        <div className="reveal mx-auto mb-14 max-w-[640px] text-center">
          <Overline>{t("overline")}</Overline>
          <h2 className="mt-4 mb-3 font-display text-[31px] font-normal leading-[1.18] text-foreground lg:text-[40px] lg:leading-[1.15]">
            {t("title")}
          </h2>
          <p className="text-[15.5px] leading-[1.6] text-on-surface-variant">{t("intro")}</p>
        </div>

        <div className="reveal-stagger grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {POLICIES.map((policy) => (
            <div key={policy.key} className="reveal h-full">
              <a
                href={policy.url}
                target="_blank"
                // The RJC registry entry is the evidence behind a certification
                // claim and stays followable. The hosted PDFs are files with no
                // link value to pass on, so they carry `nofollow`.
                rel={
                  isRegistry(policy.url) ? "noopener noreferrer" : "nofollow noopener noreferrer"
                }
                className="group flex h-full flex-col justify-between gap-9 border border-hairline bg-background p-[34px_30px] motion-safe:transition-all motion-safe:duration-300 motion-safe:hover:-translate-y-1 motion-safe:hover:shadow-[0_18px_40px_-22px_rgba(26,28,27,0.35)]"
              >
                <div>
                  <Rule size="md" className="mb-5" />
                  <h3 className="font-display text-[21px] font-normal leading-[1.35] text-foreground">
                    {t(`items.${policy.key}`)}
                  </h3>
                </div>
                <span className="inline-flex items-center gap-2.5 text-[10.5px] font-semibold uppercase tracking-[0.18em] text-gold-text">
                  {t("downloadLabel")}
                  {/* Decorative SVG rather than the `→` character, and an
                      up-right arrow rather than a rightwards one: every policy
                      opens a hosted document in a new tab. */}
                  <ArrowUpRight
                    aria-hidden="true"
                    className="size-4 transition-transform motion-safe:group-hover:translate-x-1.5"
                  />
                </span>
              </a>
            </div>
          ))}
        </div>

        <div className="reveal mx-auto mt-12 max-w-[560px]">
          <p className="text-center text-[13.5px] italic leading-[1.7] text-on-surface-variant">
            {t("note")}
          </p>
        </div>
      </div>
    </section>
  );
}