/* global React, Icon, Button, Kicker, ProductCard, CtaBanner, InfoBox */
// ProductsPage — /nos-produits
//
// Origines :
//   · ANE = Atlantique Nord-Est (zone FAO 27 : Manche, Mer du Nord, Golfe de Gascogne…)
//     → couvre tous nos coquillages vivants et la grande majorité de nos crustacés
//       cuits (tourteaux, araignées, étrilles, crabes verts, bigorneaux, bulots, homards).
//   · ANO = Atlantique Nord-Ouest (zone FAO 21 : côtes nord-américaines)
//     → uniquement nos gambas Black Tiger.
//   · Pauillac → crevettes blanches de l'estuaire de la Gironde, mention locale conservée.

const LIVE_SHELLS = [
{ name: "Palourdes", price: "27 €/kg", hint: "Chair tendre et juteuse, saveur douce et légèrement sucrée.", origin: "ANE*", img: "assets/photos/palourdes.jpg" },
{ name: "Praires", price: "18 €/kg", hint: "Chair ferme et légèrement croquante, goût iodé prononcé. ≈ 40 g/pièce.", origin: "ANE*", img: "assets/photos/marche-etal-tourteaux.webp" },
{ name: "Tellines", price: "25 €/kg", hint: "Texture fine et tendre, goût iodé subtil. Idéales en persillade.", origin: "ANE*", img: "assets/photos/marche-etal-tourteaux.webp" },
{ name: "Lavagnons", price: "17 €/kg", hint: "Chair fine et tendre, saveur douce et iodée.", origin: "ANE*", img: "assets/photos/lavagnons.jpg" },
{ name: "Bigorneaux vivants", price: "15 €/kg", hint: "Chair ferme, goût iodé prononcé. Produit brut à cuire soi-même.", origin: "ANE*", img: "assets/photos/bigorneaux-cuits.webp" }];


const COOKED = [
{ name: "Bigorneaux cuisson maison", price: "25 €/kg", hint: "Aux herbes de Provence, laurier et épices. Chair ferme, goût iodé marqué.", origin: "ANE*", img: "assets/photos/bigorneaux-cuits.webp", tag: "Cuisson maison" },
{ name: "Bulots cuisson maison", price: "21 €/kg", hint: "Chair dense, non caoutchouteuse, saveur iodée délicate. Court-bouillon parfumé.", origin: "ANE*", img: "assets/photos/bulots-cuits.webp", tag: "Cuisson maison" },
{ name: "Tourteaux cuisson maison", price: "22 €/kg", hint: "Chair généreuse, ferme et fondante. 400-500 g/pièce.", origin: "ANE*", img: "assets/photos/tourteaux-cuits.webp", tag: "Cuisson maison" },
{ name: "Araignées cuisson maison", price: "17 €/kg", hint: "Chair fine, légèrement filandreuse, très parfumée. 1 à 1,5 kg/pièce.", origin: "ANE*", img: "assets/photos/marche-etal-tourteaux.webp", tag: "Cuisson maison" },
{ name: "Étrilles cuisson maison", price: "28 €/kg", hint: "Chair fine et délicate, goût intense légèrement sucré. 70-200 g/pièce.", origin: "ANE*", img: "assets/photos/etrilles.jpg", tag: "Cuisson maison" },
{ name: "Crabes verts cuisson maison", price: "12 €/kg", hint: "Petite taille (≈ 30 g), goût concentré. Idéaux pour bisques et court-bouillons.", origin: "ANE*", img: "assets/photos/marche-etal-tourteaux.webp", tag: "Cuisson maison" },
{ name: "Crevettes blanches", price: "35 €/kg", hint: "Chair tendre, saveur douce. Décongelées.", origin: "Pauillac", img: "assets/photos/crevettes-blanches.webp" },
{ name: "Gambas White Tiger cuisson maison", price: "29 €/kg", hint: "Chair ferme et charnue, goût délicat légèrement sucré. ≈ 4 pièces/100 g.", origin: "ANE*", img: "assets/photos/gambas-white-tiger.webp", tag: "Cuisson maison" },
{ name: "Gambas Black Tiger cuisson maison", price: "42 €/kg", hint: "Chair très généreuse, ferme et croquante, goût intense. ≈ 2-3 pièces/100 g.", origin: "ANO**", img: "assets/photos/gambas-black-tiger.webp", tag: "Cuisson maison" },
{ name: "Homards cuisson maison", price: "42 €/kg", hint: "Chair ferme et fondante, goût fin légèrement sucré. 400-500 g/pièce.", origin: "ANE*", img: "assets/photos/marche-etal-tourteaux.webp", tag: "Cuisson maison" },
{ name: "Homards épatés cuisson maison", price: "47 €/kg", hint: "Préparés et cuits dans notre court-bouillon. Pinces possiblement en moins.", origin: "ANE*", img: "assets/photos/marche-etal-tourteaux.webp", tag: "Cuisson maison" }];


function ProductsPage({ onNav }) {
  return (
    <>
      {/* HERO */}
      <section className="bg-foam pt-16 md:pt-24 pb-12 md:pb-16">
        <div className="container-x grid md:grid-cols-12 gap-10 items-end">
          <div className="md:col-span-7">
            <Kicker>Au-delà de l'huître</Kicker>
            <h1 className="h-display mt-3">Nos coquillages<br /><span className="italic text-primary-light">et crustacés</span></h1>
            <p className="lead mt-5 max-w-[640px]">
              Au-delà de nos huîtres Gigas Meduli, nous proposons une sélection de coquillages purifiés et de crustacés cuits maison. Produits sélectionnés essentiellement en zone ANE (Atlantique Nord-Est), préparés sur notre exploitation.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <Button variant="primary" iconRight="arrow-right" onClick={() => onNav("commander")}>Composer ma commande</Button>
              <Button variant="tertiary" iconRight="arrow-right" onClick={() => onNav("nos-huitres")}>Voir aussi nos huîtres</Button>
            </div>
            <p className="text-mute text-[14px] mt-5 max-w-[560px] leading-snug italic">
              Les tarifs au kilo s'affichent au moment de passer commande. Le total est une <strong className="not-italic text-ink/80">estimation</strong> : les prix peuvent varier selon la saison et l'arrivage.
            </p>
          </div>
          <div className="md:col-span-5">
            <div className="grid grid-cols-2 gap-3">
              <img src={"assets/photos/etrilles.jpg"} alt="" className="rounded-card aspect-square object-cover w-full" />
              <img src={"assets/photos/palourdes.jpg"} alt="" className="rounded-card aspect-square object-cover w-full mt-8" />
            </div>
          </div>
        </div>
      </section>

      {/* COQUILLAGES VIVANTS */}
      <section className="py-20 md:py-24 bg-white">
        <div className="container-x">
          <div className="flex flex-wrap items-end justify-between gap-6 mb-10">
            <div className="max-w-[600px]">
              <Kicker>Vivants & purifiés</Kicker>
              <h2 className="h-section mt-3">Coquillages vivants</h2>
              <p className="body mt-3">
                Tous nos coquillages vivants sont purifiés et dégorgés sur l'exploitation. Une étape essentielle qui leur permet de se débarrasser du sable et des éventuelles impuretés. Vous pouvez ainsi les déguster crus directement, ou les cuisiner sans tracas.
              </p>
            </div>
            <div className="text-mute text-[14px] flex items-center gap-2">
              <Icon name="shield-check" size={16} className="text-success" />
              Purification UV 36h
            </div>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {LIVE_SHELLS.map((p) => <ProductCard key={p.name} {...p} />)}
          </div>
          <p className="text-mute text-[13px] mt-6 italic">* ANE : Atlantique Nord-Est (zone FAO 27 : Manche, Mer du Nord, Golfe de Gascogne…).</p>
        </div>
      </section>

      {/* BOUILLON */}
      <section className="py-16 md:py-20 bg-primary text-white relative overflow-hidden">
        <div className="absolute inset-y-0 right-0 w-1/2 opacity-30">
          <img src={"assets/photos/bulots-cuits.webp"} alt="" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-gradient-to-r from-primary via-primary/70 to-transparent" />
        </div>
        <div className="relative container-x grid md:grid-cols-2 gap-10 items-center">
          <div>
            <Kicker className="!text-sand">Cuisson maison</Kicker>
            <h2 className="font-serif text-white text-[32px] md:text-[44px] leading-tight mt-3 tracking-[-0.005em]">
              Notre court-bouillon parfumé
            </h2>
            <p className="text-white/85 text-[17px] md:text-[18px] leading-[1.65] mt-5">
              Nous cuisons nos crustacés et certains coquillages dans un court-bouillon maison préparé avec des herbes (laurier, herbes de Provence) et des épices choisies pour révéler les saveurs marines sans les masquer.
            </p>
            <p className="text-white/70 text-[14px] mt-5 italic max-w-[480px] leading-snug">
              Nos produits cuisinés sont destinés exclusivement aux particuliers. Pour une commande professionnelle, seules nos huîtres Gigas Meduli sont proposées en gros&nbsp;: <a onClick={(e) => {e.preventDefault();onNav("devis-pro");}} href="#" className="underline text-sand hover:text-white">demandez un devis</a>.
            </p>
          </div>
          <div className="flex flex-wrap gap-2">
            {["Laurier", "Herbes de Provence", "Piment en poudre", "Piments oiseaux", "Sel"].map((s) =>
            <span key={s} className="px-4 py-2 rounded-full bg-white/15 text-white/95 text-[14px] font-medium backdrop-blur-sm">{s}</span>
            )}
          </div>
        </div>
      </section>

      {/* CRUSTACÉS */}
      <section className="py-20 md:py-24 bg-foam">
        <div className="container-x">
          <div className="mb-10 max-w-[680px]">
            <Kicker>Cuisson maison & crustacés</Kicker>
            <h2 className="h-section mt-3">Crustacés et coquillages cuits</h2>
            <p className="body mt-3">
              Tous préparés et cuits sur l'exploitation, réservés à la <strong>vente aux particuliers</strong>.
            </p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
            {COOKED.map((p) => <ProductCard key={p.name} {...p} />)}
          </div>
          <div className="mt-8 max-w-[760px]">
            <InfoBox icon="info" title="Congélation : demandez-nous avant">
              Selon les arrivages et pour anticiper la demande, <strong>certains produits proposés à l'étal peuvent avoir été congelés puis décongelés</strong>. Si vous souhaitez congeler vous-même un produit, demandez-nous conseil au marché ou en boutique avant de le faire&nbsp;: nous vous indiquerons s'il a déjà été congelé.
            </InfoBox>
          </div>
          <p className="text-mute text-[13px] mt-6 italic">* ANE : Atlantique Nord-Est  
** ANO : Atlantique Nord-Ouest</p>
        </div>
      </section>

      {/* DISPONIBILITÉ */}
      <section className="py-16 md:py-20 bg-white">
        <div className="container-x">
          <div className="grid md:grid-cols-12 gap-10 items-center">
            <div className="md:col-span-7">
              <Kicker>Saisons & arrivages</Kicker>
              <h2 className="h-section mt-3">Disponibilité variable</h2>
              <p className="body mt-4">
                Tous nos produits ne sont pas disponibles en permanence. Certains arrivages dépendent de la saison ou des conditions de pêche. <strong>La liste des produits disponibles cette semaine</strong> est mise à jour en temps réel dans notre formulaire de commande.
              </p>
              <div className="mt-6 flex flex-wrap gap-3">
                <Button variant="primary" iconRight="arrow-right" onClick={() => onNav("commander")}>Voir les dispos cette semaine</Button>
              </div>
            </div>
            <div className="md:col-span-5">
              <InfoBox icon="calendar" title="Bon à savoir">
                Vous pouvez commander jusqu'<strong>au matin même du retrait, avant 8&nbsp;h</strong>. Aucun paiement en ligne&nbsp;: vous réglez sur place au retrait (espèces, chèque ou CB selon le lieu).
              </InfoBox>
            </div>
          </div>
        </div>
      </section>

      <CtaBanner image={"assets/photos/marche-banderole-eau-medoc.webp"}
      title="Prêt·e à composer votre commande ?"
      subtitle="Sélectionnez vos huîtres, coquillages et crustacés disponibles cette semaine."
      primary="Commander en ligne"
      secondary="Où nous trouver"
      onPrimary={() => onNav("commander")}
      onSecondary={() => onNav("ou-trouver")} />
      
    </>);

}

window.ProductsPage = ProductsPage;