/* global React, Icon, Button, Kicker, CtaBanner, InfoBox */
// OystersPage — /nos-huitres

const OYSTERS = [
  {
    n: "2",
    name: "La Méga",
    weight: "85 à 120 g par pièce",
    count: "≈ 10 huîtres au kg",
    price: "11 €/kg",
    note: "Pour les amateurs de très grosses huîtres, à savourer seules ou pour épater à table.",
    img: "assets/photos/huitres-coquilles.webp",
  },
  {
    n: "3",
    name: "Résistance",
    weight: "75 à 85 g par pièce",
    count: "≈ 12 huîtres au kg (la classique douzaine)",
    price: "11 €/kg",
    note: "Le format de référence, équilibre parfait entre chair et taille de bouchée.",
    img: "assets/photos/huitre-ouverte-main.webp",
  },
  {
    n: "4",
    name: "L'entrée des artistes",
    weight: "45 à 75 g par pièce",
    count: "≈ 16 à 18 huîtres au kg",
    price: "11 €/kg",
    note: "Format souple, idéal en plateau de fruits de mer ou pour un usage culinaire varié.",
    img: "assets/photos/huitre-charnue.webp",
  },
  {
    n: "5",
    name: "Miss Cocktail",
    weight: "30 à 45 g par pièce",
    count: "≈ 22 à 24 huîtres au kg",
    price: "11 €/kg",
    note: "L'apéritif, les amuse-bouches, ou pour s'initier en douceur.",
    img: "assets/photos/huitres-en-tas-ouverte.webp",
  },
];

function OystersPage({ 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>Nos calibres</Kicker>
            <h1 className="h-display mt-3">Nos huîtres <span className="italic text-primary-light">Gigas Meduli</span></h1>
            <p className="lead mt-5 max-w-[640px]">
              Toutes nos huîtres sont issues de la même exploitation à Saint-Vivien-de-Médoc et passent par le même processus d'affinage en marais. Elles ne diffèrent que par leur calibre.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <Button variant="primary" iconRight="arrow-right" onClick={() => onNav("commander")}>Commander mes huîtres</Button>
              <Button variant="tertiary" iconRight="arrow-right" onClick={() => onNav("notre-histoire")}>Découvrir l'affinage</Button>
            </div>
          </div>
          <div className="md:col-span-5">
            <div className="grid grid-cols-2 gap-3">
              <img src={"assets/photos/huitres-en-tas-ouverte.webp"} alt="" className="rounded-card aspect-square object-cover w-full"/>
              <img src={"assets/photos/bourriche-huitres.webp"} alt="" className="rounded-card aspect-square object-cover w-full mt-6"/>
            </div>
          </div>
        </div>
      </section>

      {/* SIGNATURE GUSTATIVE */}
      <section className="py-20 md:py-28 bg-white">
        <div className="container-x grid md:grid-cols-12 gap-10 md:gap-16 items-center">
          <div className="md:col-span-5">
            <Kicker>Signature commune</Kicker>
            <h2 className="h-section mt-3">Chair charnue,<br/><span className="italic">goût équilibré</span></h2>
            <p className="body mt-5">
              Texture généreuse et croquante. Un goût équilibré terre-mer, salé mais non iodé, relevé de notes légèrement noisettées, fruit de leur engraissement sur le phytoplancton présent dans nos marais maritimes. À noter, l'absence d'iode dans nos huîtres, due au côté volatile de ce composé chimique qui n'est jamais présent dans des huîtres affinées en marais. À déguster crues de préférence, pour profiter pleinement de leur affinage.
            </p>
            <ul className="mt-6 space-y-3">
              {[
                { ic: "waves",   t: "Affinage 6 semaines à 6 mois", d: "Dans nos marais salés du Médoc" },
                { ic: "droplets",t: "Purification UV 36h",       d: "Avant chaque vente" },
                { ic: "leaf",    t: "Engraissement naturel",     d: "Au phytoplancton de nos marais maritimes" },
              ].map((r) => (
                <li key={r.t} className="flex items-start gap-3">
                  <span className="w-10 h-10 rounded-card bg-foam text-primary grid place-items-center shrink-0"><Icon name={r.ic} size={20}/></span>
                  <div>
                    <div className="font-semibold text-ink text-[16px]">{r.t}</div>
                    <div className="text-mute text-[14px]">{r.d}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
          <div className="md:col-span-7">
            <img src={"assets/photos/huitre-charnue.webp"} alt="Huître Gigas Meduli ouverte" className="w-full aspect-photo object-cover rounded-hero shadow-marine"/>
          </div>
        </div>
      </section>

      {/* COMPRENDRE LES CALIBRES — visual size comparison */}
      <section className="py-20 md:py-28 bg-sand">
        <div className="container-x">
          <div className="text-center max-w-[660px] mx-auto mb-12">
            <Kicker>4 calibres en détail</Kicker>
            <h2 className="h-section mt-3">Comprendre les calibres</h2>
            <p className="body mt-3">Plus le numéro est grand, plus l'huître est petite. Le choix dépend de votre usage : grosses pièces pour gratiner, petits calibres pour l'apéritif.</p>
          </div>

          {/* Size comparison */}
          <div
            className="flex justify-center items-end gap-3 sm:gap-6 md:gap-10 mb-16 px-2"
            style={{ "--cu": "clamp(17px, 5.4vw, 30px)" }}
          >
            {OYSTERS.map((o, i) => {
              const k = [4, 3.34, 2.67, 2][i];
              return (
                <div key={o.n} className="flex flex-col items-center gap-2 md:gap-3 min-w-0">
                  <div
                    className="rounded-full bg-white shadow-marine grid place-items-center text-primary font-serif whitespace-nowrap leading-none shrink-0"
                    style={{ width: `calc(var(--cu) * ${k})`, height: `calc(var(--cu) * ${k})`, fontSize: `calc(var(--cu) * ${k} * 0.24)`, letterSpacing: "-0.01em" }}
                  >
                    <span style={{ whiteSpace: "nowrap", display: "inline-block" }}>n&deg;{o.n}</span>
                  </div>
                  <div className="text-center">
                    <div className="font-serif text-primary text-[13px] sm:text-[14px] md:text-[16px] leading-tight italic">{o.name}</div>
                    <div className="text-mute text-[10px] sm:text-[11px] md:text-[12px] mt-1">{o.weight.replace(' par pièce', '')}</div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Detail blocks */}
          <div className="space-y-6">
            {OYSTERS.map((o, i) => (
              <article key={o.n} className="bg-white rounded-hero overflow-hidden grid md:grid-cols-2 shadow-soft">
                <div className={"aspect-photo md:aspect-auto bg-foam " + (i % 2 ? "md:order-2" : "")}>
                  <img src={o.img} alt="" className="w-full h-full object-cover"/>
                </div>
                <div className={"p-7 md:p-10 flex flex-col justify-center " + (i % 2 ? "md:order-1" : "")}>
                  <div className="flex items-baseline gap-4 mb-2">
                    <span className="font-serif text-primary-light text-[64px] md:text-[88px] leading-none">{o.n}</span>
                    <div>
                      <Kicker>Gigas Meduli n°{o.n}</Kicker>
                      <h3 className="font-serif text-primary text-[28px] md:text-[36px] leading-tight italic">{o.name}</h3>
                    </div>
                  </div>
                  <dl className="grid grid-cols-2 gap-y-3 gap-x-6 mt-4 mb-4 bg-foam/50 rounded-btn px-4 py-4">
                    <div><dt className="text-mute text-[12px] tracking-eyebrow uppercase">Poids</dt><dd className="text-ink font-medium">{o.weight}</dd></div>
                    <div><dt className="text-mute text-[12px] tracking-eyebrow uppercase">Quantité</dt><dd className="text-ink font-medium">{o.count}</dd></div>
                  </dl>
                  <p className="body">{o.note}</p>
                  <div className="mt-5 flex items-center justify-end">
                    <Button variant="tertiary" iconRight="arrow-right" onClick={() => onNav("commander")}>Commander</Button>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* DÉCLASSÉES */}
      <section className="py-20 md:py-24 bg-white">
        <div className="container-x">
          <div className="bg-foam rounded-hero p-8 md:p-12 grid md:grid-cols-12 gap-8 items-center">
            <div className="md:col-span-7">
              <Kicker>Option économique</Kicker>
              <h2 className="font-serif text-primary text-[28px] md:text-[36px] leading-tight mt-3">Les huîtres déclassées<br/><span className="italic text-primary-light text-[22px] md:text-[28px]">même goût, petit défaut</span></h2>
              <p className="body mt-4">
                Mêmes huîtres, même affinage, même goût (charnu, salé, légèrement noisetté). Leur seule différence&nbsp;: une possible « chambre&nbsp;<sup className="text-primary-light">*</sup> » dans la coquille qui demande un peu plus d'attention à l'ouverture.
              </p>
              <p className="body mt-3">Une option économique sans compromis sur la qualité gustative.</p>
              <p className="text-mute text-[13px] mt-5 leading-snug italic">
                <sup className="text-primary-light not-italic">*</sup> La chambre est un petit dépôt à l'intérieur de l'huître, recouvert de nacre par le coquillage pour s'en protéger. C'est naturel et inoffensif, mais si la nacre est percée à l'ouverture, une légère odeur peut s'en dégager.
              </p>
            </div>
            <div className="md:col-span-5 text-center md:text-right">
              <div className="font-serif text-primary text-[64px] md:text-[80px] leading-none">9&nbsp;€<span className="text-[28px] md:text-[36px] text-primary-light">/kg</span></div>
              <div className="text-mute text-[13px] tracking-eyebrow uppercase mt-2">Au lieu de 11 €/kg</div>
            </div>
          </div>
        </div>
      </section>

      {/* AFFINAGE PROCESS */}
      <section className="py-20 md:py-28 bg-primary text-white">
        <div className="container-x grid md:grid-cols-12 gap-10 items-center">
          <div className="md:col-span-5">
            <Kicker className="!text-sand">Notre méthode</Kicker>
            <h2 className="font-serif text-white text-[32px] md:text-[44px] leading-tight mt-3">Comment nos huîtres sont affinées</h2>
            <p className="text-white/85 text-[17px] md:text-[18px] leading-[1.65] mt-5">
              Nous recevons nos huîtres adultes en provenance d'autres bassins ostréicoles, puis nous les plaçons dans nos marais médocains pour 6 semaines à 6 mois. Pendant ce temps, elles se nourrissent en continu du phytoplancton présent dans nos marais maritimes, et notamment d'une <em>navicule</em> qui peut leur conférer une légère teinte verte caractéristique.
            </p>
            <p className="text-white/85 text-[17px] md:text-[18px] leading-[1.65] mt-3">
              Avant la vente, chaque huître passe par une étape de purification de 36&nbsp;heures sous ultraviolets, qui stérilise les éventuelles bactéries.
            </p>
            <div className="mt-7">
              <Button variant="primary-light" iconRight="arrow-right" onClick={() => onNav("notre-histoire")}>Lire l'histoire de la ferme</Button>
            </div>
          </div>
          <div className="md:col-span-7">
            <div className="grid grid-cols-2 gap-3">
              <img src={"assets/photos/bassins-vue-aerienne.webp"} alt="" className="aspect-square object-cover rounded-card"/>
              <img src={"assets/photos/marais-poches-detail.webp"} alt="" className="aspect-square object-cover rounded-card mt-10"/>
              <img src={"assets/photos/poches-au-bord.webp"} alt="" className="aspect-square object-cover rounded-card -mt-10"/>
              <img src={"assets/photos/recolte-bassin-1.webp"} alt="" className="aspect-square object-cover rounded-card"/>
            </div>
          </div>
        </div>
      </section>

      <CtaBanner
        image={"assets/photos/marais-vue-aerienne.webp"}
        title="Envie de goûter par vous-même ?"
        subtitle="Réservez vos huîtres pour un retrait à Saint-Vivien ou Eysines."
        primary="Commander mes huîtres"
        secondary="Trouver un point de vente"
        onPrimary={() => onNav("commander")}
        onSecondary={() => onNav("ou-trouver")}
      />
    </>
  );
}

window.OystersPage = OystersPage;