import certipaqPng from "&/images/certifications/certipaq_controle.svg";
import certipaqWebp from "&/images/certifications/certipaq_controle.webp";
import euFlagPng from "&/images/certifications/logo-eu.svg";
import euFlagWebp from "&/images/certifications/logo-eu.webp";
import useTrans from "@/hooks/use-translations";

export default function ControlsSection() {
  const text1_1 = useTrans("front.controls.independentControls.text1_1");
  const hasText1_1 = text1_1 !== "front.controls.independentControls.text1_1";
  return (
    <section className="relative w-full overflow-hidden  px-8 pt-2 pb-4 lg:py-14 md:px-12 lg:px-[60px]">
      <div className="mx-auto flex max-w-[1320px] flex-col gap-12">
        <div className="flex flex-col items-center gap-3 lg:gap-8 md:flex-row items-start">
          <picture className="flex-none">
            <source srcSet={certipaqWebp} type="image/webp" />
            <img
              src={certipaqPng}
              alt={useTrans("front.controls.certipaq.alt")}
              title={useTrans("front.controls.certipaq.title")}
              className="h-[165px] w-[270px] rounded-2xl object-contain"
            />
          </picture>

          <div className="flex flex-col gap-3 text-start md:text-left">
            <h3 className="font-sans text-2xl lg:text-[26px] font-extrabold text-neutral-800">
              {useTrans("front.controls.independentControls.title")}
            </h3>
            <p className="font-sans text-[18px] leading-normal text-neutral-700">
              {useTrans("front.controls.independentControls.text1")}{" "}
              <a
                href={useTrans("front.controls.independentControls.chargesUrl")}
                className="font-bold underline"
              >
                {useTrans("front.controls.independentControls.chargesLabel")}
              </a>
              {hasText1_1 ? ` ${text1_1}` : "."}
            </p>
            <p className="font-sans text-[18px] leading-normal text-neutral-700">
              {useTrans("front.controls.independentControls.text2")}
            </p>
            <p className="font-sans text-[18px] leading-normal text-neutral-700">
              {useTrans("front.controls.independentControls.text3")}{" "}
              <a
                href="https://certipaq.com"
                target="_blank"
                rel="noreferrer noopener"
                className="font-bold underline"
              >
                www.certipaq.com
              </a>
              .
            </p>
          </div>
        </div>

        {/* Bloc 2 */}
        <div className="flex flex-col items-center gap-3 lg:gap-8 md:flex-row items-start">
          <div className="order-2 flex flex-col gap-3 text-start md:order-1 md:text-left">
            <h3 className="font-sans text-2xl lg:text-[26px] font-extrabold text-neutral-800">
              {useTrans("front.controls.loyalty.title")}
            </h3>
            <p className="font-sans text-[18px] leading-normal text-neutral-700">
              {useTrans("front.controls.loyalty.text1")}
            </p>
            <p className="font-sans text-[18px] leading-normal text-neutral-700">
              {useTrans("front.controls.loyalty.text2")}
            </p>
            <p className="font-sans text-[18px] leading-normal text-neutral-700">
              {useTrans("front.controls.loyalty.text3")}{" "}
              <a
                href={useTrans("front.controls.loyalty.directiveUrl")}
                target="_blank"
                rel="noreferrer noopener"
                className="font-bold underline"
              >
                {useTrans("front.controls.loyalty.directiveLabel")}
              </a>
              .
            </p>
          </div>

          <picture className="order-1 flex-none md:order-2">
            <source srcSet={euFlagWebp} type="image/webp" />
            <img
              src={euFlagPng}
              alt={useTrans("front.controls.euFlag.alt")}
              title={useTrans("front.controls.euFlag.title")}
              className="h-[165px] w-[270px] rounded-2xl object-cover"
            />
          </picture>
        </div>
      </div>
    </section>
  );
}