import { type ReactNode } from "react";

import heroImg from "&/images/global/header.png";
import heroImgMobile from "&/images/global/header_mobile.png";
import logoImg from "&/images/global/logo.svg";
import titleImg from "&/images/global/title_header.svg";

export interface HeroNavItem {
  label: string;
  href: string;
  icon?: ReactNode;
}

interface HeroHeaderProps {
  backgroundImage?: string;
  titleImage?: string;
}

export default function HeroHeader({}: Readonly<HeroHeaderProps>) {
  return (
    <header
      className="relative w-full overflow-hidden font-baloo [clip-path:polygon(0_0,100%_0,100%_93%,0_100%)] max-sm:[clip-path:none]"
      style={{ height: "min(94vh, 900px)", minHeight: "560px" }}
    >
      {/* mobile */}
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat sm:hidden"
        style={{
          backgroundImage: `url(${heroImgMobile})`,
          backgroundPosition: "bottom",
          backgroundSize: "contain",
        }}
      />
      {/* desktop */}
      <div
        className="absolute inset-0 hidden bg-cover bg-center bg-no-repeat sm:block"
        style={{ backgroundImage: `url(${heroImg})` }}
      />

      <div className="absolute left-6 top-6 z-20 sm:left-10 sm:top-8">
        <img
          src={logoImg}
          alt="Logo Ker Chant, spécialiste des volailles de Bretagne"
          title="Ker Chant"
          className="h-58 w-auto max-w-none object-contain"
          loading="eager"
          fetchPriority="high"
        />
      </div>

      <div className="absolute inset-0 z-10 flex items-center justify-center px-6">
        <h1
          className="absolute inset-0 z-10 flex items-center justify-center bg-center bg-no-repeat px-6"
          style={{
            backgroundImage: `url(${titleImg})`,
            backgroundSize: "min(320px, 100%) auto",
            marginTop: "-50px",
          }}
        >
          <span className="sr-only">
            Chapeau <br /> la volaille <br /> de l&#39;ouest !
          </span>
        </h1>
      </div>
    </header>
  );
}