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

import heroJpg from "&/images/header/header.jpg";
import heroWebp from "&/images/header/header.webp";
import useTrans from "@/hooks/use-translations";

import Navbar from "./Layout/Navbar";

export default function Header() {
  const { props } = usePage() as unknown as {
    props: {
      appEnv: { locale: string; fallbackLocale: string; locales: string[] };
    };
  };
  return (
    <section className="relative w-full overflow-hidden px-0 bg-band/10 md:px-0 lg:px-[60px]">
      <div className="relative z-10 mx-auto max-w-[1320px] pb-8">
        <div className="relative h-[770px] w-full overflow-hidden rounded-b-3xl">
          <picture>
            <source srcSet={heroWebp} type="image/webp" />
            <img
              src={heroJpg}
              alt={useTrans("front.header.heroImg.alt")}
              title={useTrans("front.header.heroImg.title")}
              className="h-full w-full object-cover object-center"
            />
          </picture>

          {/* Navbar */}
          <div className="absolute inset-x-0 top-0 z-20">
            <Navbar />
          </div>

          {/* Bandeau */}
          <div className="absolute inset-x-0 bottom-0 flex min-h-[150px] flex-col justify-center bg-band/70 px-8 mb-10 py-5 md:px-[60px]">
            <h1 className="whitespace-pre-line font-sans text-[36px] lg:text-[42px] font-extrabold leading-[1.35] text-neutral-600">
              {useTrans("front.header.title")}
            </h1>
          </div>
        </div>

        {/* Texte + CTA */}
        <div className="mx-auto max-w-[820px] pt-14 text-center">
          <p className="lg:whitespace-pre-line font-sans text-[22px] lg:leading-relaxed leading-normal text-neutral-700 lg:mx-2 mx-6">
            {useTrans("front.header.subtitle")}
          </p>

          <a
            href={
              (props.appEnv.locale === props.appEnv.fallbackLocale
                ? ""
                : "/" + props.appEnv.locale) +
              "#" +
              useTrans("front.engagements.slug")
            }
            className="mt-7 inline-block rounded-full bg-primary lg:px-8 px-4 py-2 font-sans text-lg lg:text-[20px] font-semibold text-white transition-opacity hover:bg-[#FFD41F] hover:text-black hover:opacity-90"
          >
            {useTrans("front.header.cta_label")}
          </a>
        </div>
      </div>
      <div className="mx-auto h-1 my-5 w-60 rounded-full bg-neutral-300 lg:w-6xl" />
    </section>
  );
}