ldc-qualimaine/resources/ts/front/Components/NormsSection.tsx

import { usePage } from "@inertiajs/react";

import duckJpg from "&/images/normes/elevage-canard.jpg";
import duckWebp from "&/images/normes/elevage-canard.webp";
import turkeyJpg from "&/images/normes/elevage-dinde.jpg";
import turkeyWebp from "&/images/normes/elevage-dinde.webp";
import chickenJpg from "&/images/normes/elevage-poulet.jpg";
import chickenWebp from "&/images/normes/elevage-poulet.webp";
import vectorImg from "&/images/vectors/poulet.svg";
import useTrans from "@/hooks/use-translations";
import { GetTranslation } from "@/lib/utils";

const NORM_KEYS = [
  "livingSpace",
  "enrichments",
  "outdoorAccess",
  "feeding",
  "rearingDuration",
  "operation",
  "externalControls",
] as const;

interface NormCardProps {
  titleKey: string;
  speciesKey: string;
  webp: string;
  fallback: string;
  altImg: string;
  titleImg: string;
  downloadLabelKey: string;
  downloadUrl: string;
  imagePosition: "left" | "right";
}

function NormCard({
  titleKey,
  speciesKey,
  webp,
  fallback,
  altImg,
  titleImg,
  downloadLabelKey,
  downloadUrl,
  imagePosition,
}: Readonly<NormCardProps>) {
  return (
    <div
      className={`flex flex-col gap-8 lg:items-start ${imagePosition === "left" ? "lg:flex-row" : "lg:flex-row-reverse"}`}
    >
      <picture className="flex-none lg:w-[440px]">
        <source srcSet={webp} type="image/webp" />
        <img
          src={fallback}
          alt={useTrans(altImg)}
          title={useTrans(titleImg)}
          className="h-[240px] w-full rounded-2xl object-cover lg:h-[300px]"
        />
      </picture>

      <div className="flex flex-1 flex-col gap-4">
        <h3 className="font-sans text-[26px] font-extrabold uppercase text-neutral-800">
          {useTrans(titleKey)}
        </h3>

        <ul className="flex list-disc flex-col gap-2 pl-5">
          {NORM_KEYS.map((key) => (
            <li
              key={key}
              className="font-sans text-lg leading-tight text-neutral-700"
            >
              <span className="font-bold">
                {GetTranslation(`norms.labels.${key}`)} :{" "}
              </span>
              {GetTranslation(`norms.${speciesKey}.texts.${key}`)}
            </li>
          ))}
        </ul>

        <a
          href={downloadUrl}
          target="_blank"
          rel="noreferrer noopener"
          className="mt-2 inline-block w-fit text-center rounded-full bg-primary lg:px-8 px-4 py-2 font-sans text-[18px] lg:text-[20px] font-semibold text-white transition-opacity hover:bg-[#FFD41F] hover:text-black hover:opacity-90"
        >
          {useTrans(downloadLabelKey)}
        </a>
      </div>
    </div>
  );
}
export default function NormsSection() {
  const { appEnv } = usePage().props as unknown as {
    appEnv: { locale: string };
  };

  const documentUrl = (filename: string) =>
    `/documents/${appEnv.locale}/${filename}`;

  return (
    <section
      id={useTrans("norms.slug")}
      className="relative w-full overflow-hidden px-8 pt-14 pb-0 md:px-12 lg:px-[60px]"
    >
      <div className="mx-auto max-w-[1320px]">
        <img
          src={vectorImg}
          alt=""
          aria-hidden="true"
          className="pointer-events-none absolute -left-11 translate-y-2/3 z-0 opacity-10 hidden lg:block lg:w-[160px]"
        />
        <div className="mx-auto my-5 h-1 w-60 rounded-full bg-neutral-300 lg:w-6xl" />

        <div className="text-center">
          <h2 className="font-sans text-3xl lg:text-[32px] font-extrabold text-neutral-800 uppercase">
            {useTrans("norms.title")}
          </h2>
          <p className="mx-auto mt-3 max-w-[820px] font-sans text-[22px] leading-none text-neutral-700">
            {useTrans("norms.subtitle")}
          </p>
        </div>

        <div className="mt-12 flex flex-col gap-14">
          <NormCard
            titleKey="norms.chicken.title"
            speciesKey="chicken"
            imagePosition="right"
            webp={chickenWebp}
            fallback={chickenJpg}
            altImg="norms.chicken.imgAlt"
            titleImg="norms.chicken.imgTitle"
            downloadLabelKey="norms.chicken.downloadLabel"
            downloadUrl={documentUrl("cdc_chicken.pdf")}
          />

          <NormCard
            titleKey="norms.turkey.title"
            speciesKey="turkey"
            imagePosition="left"
            webp={turkeyWebp}
            fallback={turkeyJpg}
            altImg="norms.turkey.imgAlt"
            titleImg="norms.turkey.imgTitle"
            downloadLabelKey="norms.turkey.downloadLabel"
            downloadUrl={documentUrl("cdc_turkey.pdf")}
          />

          <NormCard
            titleKey="norms.duck.title"
            speciesKey="duck"
            imagePosition="right"
            webp={duckWebp}
            fallback={duckJpg}
            altImg="norms.duck.imgAlt"
            titleImg="norms.duck.imgTitle"
            downloadLabelKey="norms.duck.downloadLabel"
            downloadUrl={documentUrl("cdc_duck.pdf")}
          />
        </div>

        <div className="w-full pt-12 lg:pt-32 pb-0 text-center">
          <h2 className="font-sans text-2xl lg:text-[32px] font-extrabold text-neutral-800 uppercase text-balance">
            {GetTranslation("norms.title_2")}
          </h2>

          <p className="mx-auto my-3 max-w-[820px] font-sans text-[22px] leading-none text-neutral-700">
            {GetTranslation("norms.subtitle_2")}
          </p>

          <a
            href={documentUrl(GetTranslation("norms.filename"))}
            target="_blank"
            rel="noreferrer noopener"
            className="uppercase mt-2 inline-block w-fit text-center rounded-full bg-primary lg:px-8 px-4 py-2 font-sans text-[18px] lg:text-[20px] font-semibold text-white transition-opacity hover:bg-[#FFD41F] hover:text-black hover:opacity-90"
          >
            {GetTranslation("norms.cta_label")}
          </a>
        </div>
      </div>
    </section>
  );
}