/* global React, Icon, Button, Kicker, OysterCard, CtaBanner, PressStrip, MapMock, InfoBox, ProductImg, PlaceIcon */
// HomePage — /

function HomePage({ onNav }) {
  return (
    <>
      {/* ───────────── HERO ───────────── */}
      <section className="relative bg-primary-dark overflow-hidden">
        <div className="absolute inset-0">
          <img src={"assets/photos/aube-marais-1.webp"} alt="" className="w-full h-full object-cover" style={{ objectPosition: "center 30%" }} />
          <div className="absolute inset-0 bg-gradient-to-t from-primary-dark/85 via-primary-dark/35 to-primary-dark/10" />
          <div className="absolute inset-0 bg-gradient-to-r from-primary-dark/55 via-primary-dark/15 to-transparent" />
        </div>
        <div className="relative container-x py-24 md:py-40 text-white">
          <div className="max-w-[820px]">
            <div className="eyebrow !text-white/80 mb-5 flex items-center gap-3">
              <span className="h-px w-10 bg-white/40" />
              Ferme Eau Médoc · Depuis 1989
            </div>
            <h1 className="font-serif text-white text-[44px] md:text-[78px] leading-[1.02] tracking-[-0.015em]">
              Huîtres affinées<br />
              <span className="italic font-normal text-sand">dans les marais</span><br />
              du Médoc
            </h1>
            <p className="mt-7 text-[19px] md:text-[22px] text-white/85 max-w-[640px] leading-[1.5]">
              Une exploitation familiale depuis 1989, sur 17&nbsp;hectares de marais salés gagnés sur l'estuaire de la Gironde à Saint-Vivien-de-Médoc.
            </p>
            <div className="mt-9 flex flex-wrap gap-3">
              <Button variant="primary-light" size="lg" iconRight="arrow-right" onClick={() => onNav("commander")}>Commander en ligne</Button>
              <Button variant="outline-light" size="lg" onClick={() => onNav("notre-histoire")}>Notre histoire</Button>
            </div>
          </div>

          {/* Floating stat strip */}
          <div className="mt-16 md:mt-24 grid grid-cols-3 gap-4 md:gap-8 max-w-[820px] pt-8">
            <div>
              <div className="font-serif text-white text-[36px] md:text-[48px] leading-none">17<span className="text-sand">ha</span></div>
              <div className="text-white/70 text-[13px] md:text-[14px] mt-1.5">de marais salés</div>
            </div>
            <div>
              <div className="font-serif text-white text-[24px] md:text-[32px] leading-tight">Huîtres affinées</div>
              <div className="text-white/70 text-[13px] md:text-[14px] mt-1.5">à la texture charnue</div>
            </div>
            <div>
              <div className="font-serif text-white text-[36px] md:text-[48px] leading-none">1989</div>
              <div className="text-white/70 text-[13px] md:text-[14px] mt-1.5">année de fondation</div>
            </div>
          </div>
        </div>
        {/* Scroll indicator */}
        <div className="hidden md:flex absolute bottom-6 left-1/2 -translate-x-1/2 flex-col items-center gap-2 text-white/60">
          <span className="text-[11px] tracking-eyebrow uppercase">Découvrir</span>
          <Icon name="arrow-down" size={18} />
        </div>
      </section>

      {/* ───────────── PRESENTATION ───────────── */}
      <section className="py-20 md:py-28 bg-white">
        <div className="container-x">
          <div className="grid md:grid-cols-12 gap-10 md:gap-16 items-center">
            <div className="md:col-span-7 md:order-2">
              <img
                src={"assets/photos/bertrand-iung-visite.webp"}
                alt="Bertrand Iung sur les bassins d'affinage"
                className="w-full aspect-[4/3] object-cover rounded-hero shadow-marine" />
              
            </div>
            <div className="md:col-span-5 md:order-1">
              <Kicker>Bienvenue chez La Ferme Eau Médoc</Kicker>
              <h2 className="h-section mt-3">Au cœur des polders du Médoc</h2>
              <p className="body mt-5">
                Sur 17&nbsp;hectares de marais salés gagnés sur l'estuaire de la Gironde, nous prolongeons une tradition longtemps oubliée&nbsp;: l'affinage médocain.
              </p>
              <p className="body mt-3">
                Pendant 6 semaines à 6 mois, nos huîtres séjournent dans nos bassins où elles se nourrissent en continu de phytoplancton présent dans nos marais maritimes. Parfois, est présente la <a className="link-u" onClick={() => onNav("notre-histoire")}>navicule verte</a> qui peut conférer aux branchies de l'huître une couleur verte très particulière au marais.
              </p>
              <div className="mt-7">
                <Button variant="tertiary" iconRight="arrow-right" onClick={() => onNav("notre-histoire")}>Lire notre histoire</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ───────────── ÉTYMOLOGIE ───────────── */}
      <section className="py-16 md:py-20 bg-sand">
        <div className="container-x">
          <div className="grid md:grid-cols-12 gap-10 items-start">
            <div className="md:col-span-5">
              <Kicker>Étymologie</Kicker>
              <h2 className="h-section mt-3"><span className="italic">Gigas Meduli</span>,<br />un nom enraciné</h2>
            </div>
            <div className="md:col-span-7 md:pt-6">
              <p className="body">
                <span className="font-serif text-primary text-[24px] italic">Gigas</span> vient du nom latin de l'huître creuse, <em>Crassostrea gigas</em>. <span className="font-serif text-primary text-[24px] italic">Meduli</span> est une référence aux Médulli, peuple gaulois qui occupait notre presqu'île avant la conquête romaine.
              </p>
              <p className="body mt-3">
                L'écrivain romain Ausone vantait déjà la qualité des huîtres du Médoc au IV<sup>e</sup>&nbsp;siècle. Nous nous inscrivons modestement dans cette continuité, 2000&nbsp;ans plus tard.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ───────────── 4 CALIBRES ───────────── */}
      <section className="py-20 md:py-28 bg-foam">
        <div className="container-x">
          <div className="flex flex-wrap items-end justify-between gap-6 mb-10">
            <div className="max-w-[560px]">
              <Kicker>4 calibres</Kicker>
              <h2 className="h-section mt-3">Nos huîtres Gigas Meduli</h2>
              <p className="body mt-3">
                Plus le numéro est élevé, plus l'huître est petite. Toutes issues du même affinage en marais médocain.
              </p>
            </div>
            <Button variant="secondary" iconRight="arrow-right" onClick={() => onNav("nos-huitres")}>Voir le détail</Button>
          </div>

          <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 md:gap-6">
            <OysterCard calibre="2" name="La Méga" weight="85 à 120 g" count="≈ 10 au kg" onClick={() => onNav("nos-huitres")} />
            <OysterCard calibre="3" name="Résistance" weight="75 à 85 g" count="≈ 12 au kg" onClick={() => onNav("nos-huitres")} />
            <OysterCard calibre="4" name="L'entrée des artistes" weight="45 à 75 g" count="≈ 16-18 au kg" onClick={() => onNav("nos-huitres")} />
            <OysterCard calibre="5" name="Miss Cocktail" weight="30 à 45 g" count="≈ 22-24 au kg" onClick={() => onNav("nos-huitres")} />
          </div>
        </div>
      </section>

      {/* ───────────── 3 PILIERS ───────────── */}
      <section className="py-20 md:py-28 bg-white">
        <div className="container-x">
          <div className="text-center max-w-[680px] mx-auto mb-12">
            <Kicker className="!text-primary-light">Notre métier</Kicker>
            <h2 className="h-section mt-3">Une aquaculture ancrée dans son territoire</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-8 md:gap-12">
            {[
            { icon: "waves", title: "Affinage en marais médocain", body: "Nos huîtres séjournent 6 semaines à 6 mois dans nos bassins, où elles s'engraissent au phytoplancton présent dans nos marais maritimes." },
            { iconImg: "gambas", title: "Au-delà de l'huître", body: "Coquillages purifiés (palourdes, praires, tellines, lavagnons) et crustacés cuits maison dans notre court-bouillon parfumé." },
            { icon: "sprout", title: "Pratiques durables", body: "Entretien des digues par un troupeau d'ovins en semi-liberté, gestion responsable de l'eau, biodiversité du marais." }].
            map((p) =>
            <div key={p.title} className="flex flex-col gap-4">
                <div className="w-14 h-14 rounded-card bg-foam text-primary grid place-items-center">
                  {p.iconImg ? <ProductImg name={p.iconImg} size={36} /> : <Icon name={p.icon} size={28} />}
                </div>
                <h3 className="font-serif text-primary text-[24px] leading-tight">{p.title}</h3>
                <p className="body">{p.body}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ───────────── WHERE TO FIND ───────────── */}
      <section className="py-20 md:py-28 bg-foam">
        <div className="container-x">
          <div className="grid md:grid-cols-12 gap-10 md:gap-16 items-center">
            <div className="md:col-span-5">
              <Kicker>Vente directe</Kicker>
              <h2 className="h-section mt-3">Où nous rencontrer</h2>
              <p className="body mt-4">
                Sur l'exploitation à Saint-Vivien-de-Médoc, au <strong>marché de Saint-Vivien</strong> le mercredi, au <strong>marché de Migron à Eysines</strong> le dimanche, ou chez nos restaurants et revendeurs partenaires.
              </p>
              <ul className="mt-6 space-y-3">
                <li className="flex items-start gap-3"><PlaceIcon kind="store" size={22} className="mt-0.5" /><div><span className="font-semibold text-ink">Boutique de l'exploitation</span> · Ven. 9h-12h · Sam. 9h-12h / 15h-18h</div></li>
                <li className="flex items-start gap-3"><PlaceIcon kind="market" size={22} className="mt-0.5" /><div><span className="font-semibold text-ink">Marché de Saint-Vivien</span> · Mercredis 8h-12h30</div></li>
                <li className="flex items-start gap-3"><PlaceIcon kind="market" size={22} className="mt-0.5" /><div><span className="font-semibold text-ink">Marché de Migron, Eysines</span> · Dimanches 8h-12h30</div></li>
              </ul>
              <div className="mt-7">
                <Button variant="secondary" iconRight="arrow-right" onClick={() => onNav("ou-trouver")}>Voir tous les lieux de vente</Button>
              </div>
            </div>
            <div className="md:col-span-7">
              <MapMock height={460} />
            </div>
          </div>
        </div>
      </section>

      <PressStrip onMore={() => onNav("parutions")} />

      {/* ───────────── FINAL CTA ───────────── */}
      <CtaBanner
        image={"assets/photos/marais-coucher-soleil.webp"}
        title="Envie de goûter nos huîtres affinées en Médoc ?"
        subtitle="Réservez votre commande pour un retrait à Saint-Vivien ou Eysines. Aucun paiement en ligne, règlement au retrait."
        primary="Commander en ligne"
        secondary="Trouver un point de vente"
        onPrimary={() => onNav("commander")}
        onSecondary={() => onNav("ou-trouver")} />
      
    </>);

}

window.HomePage = HomePage;