/* global React, Icon, Button, Kicker */
// NotFoundPage — fallback for unknown routes

function NotFoundPage({ onNav }) {
  return (
    <section className="relative bg-primary-dark overflow-hidden min-h-[70vh] flex">
      <div className="absolute inset-0">
        <img src={"assets/photos/marais-coucher-soleil.webp"} alt="" className="w-full h-full object-cover"/>
        <div className="absolute inset-0 bg-primary-dark/70"/>
        <div className="absolute inset-0 bg-gradient-to-t from-primary-dark via-primary-dark/30 to-transparent"/>
      </div>
      <div className="relative container-x py-24 md:py-32 text-white flex flex-col justify-center w-full">
        <div className="max-w-[720px]">
          <div className="eyebrow !text-sand/90 mb-5 flex items-center gap-3">
            <span className="h-px w-10 bg-white/40"/>
            Erreur 404
          </div>
          <h1 className="font-serif text-white text-[44px] md:text-[80px] leading-[1.02] tracking-[-0.015em]">
            Vous êtes peut‑être<br/><span className="italic text-sand">perdu dans les marais</span>
          </h1>
          <p className="mt-7 text-[18px] md:text-[22px] text-white/85 leading-[1.5] max-w-[560px]">
            La page que vous cherchez n'existe plus, ou n'a peut‑être jamais existé. Aucune inquiétude, la marée n'est pas loin.
          </p>
          <div className="mt-9 flex flex-wrap gap-3">
            <Button variant="primary-light" size="lg" iconRight="arrow-right" onClick={() => onNav("home")}>Retour à l'accueil</Button>
            <Button variant="outline-light" size="lg" onClick={() => onNav("commander")}>Passer commande</Button>
          </div>
          <div className="mt-10 text-white/70 text-[14px]">
            <span className="opacity-75">Ou explorez&nbsp;:</span>
            <span className="ml-2 inline-flex gap-x-4 gap-y-2 flex-wrap">
              <a onClick={() => onNav("nos-huitres")}     className="text-white/90 hover:text-sand cursor-pointer underline underline-offset-4 decoration-white/30 hover:decoration-sand">Nos huîtres</a>
              <a onClick={() => onNav("ou-trouver")}      className="text-white/90 hover:text-sand cursor-pointer underline underline-offset-4 decoration-white/30 hover:decoration-sand">Où nous trouver</a>
              <a onClick={() => onNav("nos-partenaires")} className="text-white/90 hover:text-sand cursor-pointer underline underline-offset-4 decoration-white/30 hover:decoration-sand">Restaurants & revendeurs</a>
              <a onClick={() => onNav("contact")}         className="text-white/90 hover:text-sand cursor-pointer underline underline-offset-4 decoration-white/30 hover:decoration-sand">Contact</a>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.NotFoundPage = NotFoundPage;