/* global React, Icon, Button, Kicker, CtaBanner, ProductImg */
// HistoryPage — /notre-histoire

function HistoryPage({ onNav }) {
  return (
    <>
      {/* HERO */}
      <section className="relative bg-primary-dark overflow-hidden">
        <div className="absolute inset-0">
          <img src={"assets/photos/marais-vue-aerienne.webp"} alt="" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-primary-dark/65" />
          <div className="absolute inset-0 bg-gradient-to-t from-primary-dark via-primary-dark/40 to-transparent" />
        </div>
        <div className="relative container-x py-24 md:py-36 text-white">
          <div className="max-w-[760px]">
            <Kicker className="!text-sand/90 mb-3">Depuis 1989</Kicker>
            <h1 className="font-serif text-white text-[42px] md:text-[78px] leading-[1.02] tracking-[-0.015em]">
              Notre histoire,<br /><span className="italic text-sand">forgée dans les marais</span>
            </h1>
            <p className="mt-7 text-[19px] md:text-[22px] text-white/85 leading-[1.5] max-w-[640px]">
              Sur 17&nbsp;hectares gagnés sur l'estuaire de la Gironde, nous perpétuons un savoir-faire longtemps oublié&nbsp;: l'affinage des huîtres en marais médocain.
            </p>
          </div>
        </div>
      </section>

      {/* TIMELINE / LARGE BIO */}
      <section className="py-20 md:py-28 bg-white">
        <div className="container-x grid md:grid-cols-12 gap-10 md:gap-16 items-start">
          <div className="md:col-span-5 md:sticky md:top-28">
            <img src={"assets/photos/bertrand-iung-visite.webp"} alt="Bertrand Iung, fondateur" className="w-full rounded-hero shadow-marine aspect-[4/5] object-cover" />
            <figcaption className="mt-4 text-mute text-[14px]">Bertrand Iung, fondateur de la Ferme Eau Médoc, sur les digues.</figcaption>
          </div>
          <div className="md:col-span-7 space-y-12">
            <div>
              <div className="flex items-baseline gap-4 mb-3">
                <span className="font-serif text-primary-light text-[40px] md:text-[56px] leading-none">1989</span>
                <span className="h-px flex-1 bg-line" />
              </div>
              <h2 className="h-section">Les origines, dans les marais salés de Gironde</h2>
              <p className="body mt-4">
                La Ferme Eau Médoc voit le jour dans les marais salés du Médoc. <strong>Bertrand Iung</strong>, son fondateur, choisit de relancer une tradition oubliée&nbsp;: la production d'huîtres dans le secteur. À l'époque, il vise également l'élevage extensif de gambas.
              </p>
              <p className="body mt-3">
                L'entreprise s'inscrit immédiatement dans la durée et dans la qualité, en privilégiant l'indépendance et les circuits courts.
              </p>
            </div>

            <div>
              <div className="flex items-baseline gap-4 mb-3">
                <span className="font-serif text-primary-light text-[40px] md:text-[56px] leading-none italic">17&nbsp;ha</span>
                <span className="h-px flex-1 bg-line" />
              </div>
              <h2 className="h-section">Un havre aquatique gagné sur l'estuaire</h2>
              <p className="body mt-4">Sur 17 hectares de terres gagnées sur l'estuaire, Bertrand Iung façonne progressivement un écosystème unique : bassins d'affinage, digues, prairies attenantes. Passionné par les huîtres, il réintroduit l'affinage en Médoc et de sa commercialisation interrompue depuis des décennies.

              </p>
              <img src={"assets/photos/bassins-vue-aerienne.webp"} alt="Bassins d'affinage vus du ciel" className="mt-6 rounded-hero w-full aspect-cinema object-cover" />
            </div>

            <div>
              <div className="flex items-baseline gap-4 mb-3">
                <span className="font-serif text-primary-light text-[40px] md:text-[44px] leading-none italic">Indépendance</span>
                <span className="h-px flex-1 bg-line" />
              </div>
              <h2 className="h-section">Qualité avant volume</h2>
              <p className="body mt-4">Plutôt que de chercher à grossir, la Ferme Eau Médoc fait le choix de l'indépendance. Production limitée mais soignée, vente en direct au public sur l'exploitation et sur les marchés, partenariats avec quelques restaurants et revendeurs triés sur le volet.

              </p>
            </div>

            <div>
              <div className="flex items-baseline gap-4 mb-3">
                <span className="font-serif text-primary-light text-[40px] md:text-[44px] leading-none italic">Gigas Meduli</span>
                <span className="h-px flex-1 bg-line" />
              </div>
              <h2 className="h-section">L'huître qui porte un nom</h2>
              <p className="body mt-4">
                Aujourd'hui, la ferme se consacre essentiellement à l'affinage d'huîtres <strong>Gigas Meduli</strong>. La production de gambas a été limitée par l'apparition d'une plante envahissante locale protégée, la <em>ruppia maritima</em>.
              </p>
              <p className="body mt-3">
                Le nom est une contraction. <em>Gigas</em> pour <em>Crassostrea gigas</em>, le nom latin de l'huître creuse. <em>Meduli</em> pour les Médulli, peuple gaulois qui occupait le Médoc avant la conquête romaine.
              </p>
              <blockquote className="mt-6 border-l-4 border-primary-light pl-5 italic font-serif text-primary text-[20px] md:text-[24px] leading-snug">
                « L'écrivain romain Ausone, originaire de Bordeaux au IV<sup>e</sup>&nbsp;siècle, vantait déjà la qualité des huîtres du Médoc. Nous nous inscrivons modestement dans cette continuité. »
              </blockquote>
            </div>
          </div>
        </div>
      </section>

      {/* PRATIQUES DURABLES */}
      <section className="py-20 md:py-28 bg-foam">
        <div className="container-x">
          <div className="text-center max-w-[720px] mx-auto mb-12">
            <Kicker>Au-delà du produit</Kicker>
            <h2 className="h-section mt-3">Nos pratiques durables</h2>
            <p className="body mt-4">Quatre axes structurent notre démarche.</p>
          </div>

          <div className="grid md:grid-cols-2 gap-6 md:gap-8">
            {[
            {
              icon: "sprout", iconImg: "sheep", tag: "Ovins",
              title: "Entretien du site par un troupeau d'ovins",
              body: "Une centaine d'ovins en semi-liberté entretiennent les digues et prairies attenantes. Leur pâturage préserve la biodiversité, favorise une végétation saine et nous évite l'usage de machines qui perturberaient l'écosystème.",
              img: "assets/photos/ovins-paturage.webp"
            },
            {
              icon: "droplets", tag: "Eau",
              title: "Gestion responsable de l'eau",
              body: "L'eau est au cœur de notre activité. Inspirés par les techniques du lagunage, nous optimisons son utilisation tout en préservant sa qualité tout au long du cycle de production.",
              img: "assets/photos/bassin-reflet-ciel.webp"
            },
            {
              icon: "leaf", tag: "Biodiversité",
              title: "Stockage du carbone et biodiversité",
              body: "La gestion du marais et la production d'huîtres permettent un stockage important de carbone. Les prairies bordées d'eau salée abritent une flore très diversifiée, oiseaux maritimes, tortues cistudes, lézards de marais et ragondins.",
              img: "assets/photos/marais-ciel-bleu.webp"
            },
            {
              icon: "waves", tag: "Lagunage",
              title: "Épurateur naturel et protection contre les inondations",
              body: "Les eaux venues de l'estuaire, parfois riches en nitrates et phosphates, sont rapidement transformées en matière biologique par le milieu (phytoplancton). Le marais épure naturellement et absorbe les excédents d'eau en période de submersion.",
              img: "assets/photos/chenal-panorama.webp"
            }].
            map((p) =>
            <article key={p.tag} className="bg-white rounded-hero overflow-hidden shadow-soft hover:shadow-marine transition-shadow group">
                <div className="aspect-photo bg-foam overflow-hidden">
                  <img src={p.img} alt="" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.04]" />
                </div>
                <div className="p-6 md:p-7">
                  <div className="flex items-center gap-3 mb-3">
                    <span className="w-10 h-10 rounded-card bg-foam text-primary grid place-items-center">
                      {p.iconImg ? <ProductImg name={p.iconImg} size={26} /> : <Icon name={p.icon} size={20} />}
                    </span>
                    <Kicker>{p.tag}</Kicker>
                  </div>
                  <h3 className="font-serif text-primary text-[22px] md:text-[26px] leading-tight">{p.title}</h3>
                  <p className="body mt-3">{p.body}</p>
                </div>
              </article>
            )}
          </div>
        </div>
      </section>

      <CtaBanner
        image={"assets/photos/aube-marais-3.webp"}
        title="Envie de goûter le fruit de ce savoir-faire ?"
        subtitle="Découvrez nos quatre calibres, ou venez nous rencontrer en boutique ou sur l'un de nos marchés."
        primary="Découvrir nos huîtres"
        secondary="Venir nous rencontrer"
        onPrimary={() => onNav("nos-huitres")}
        onSecondary={() => onNav("ou-trouver")} />
      
    </>);

}

window.HistoryPage = HistoryPage;