/* global React, Icon, Button, Kicker, CtaBanner */
// ParutionsPage — /parutions

const PRESS = [
{
  type: "Vidéo",
  icon: "video",
  media: "France 3",
  logo: "assets/press/france-3.png",
  title: "« Tous les chemins mènent à vous »",
  body: "Retrouvez nos huîtres Gigas Meduli à partir de 2:58 dans ce reportage diffusé sur France 3.",
  cta: "Voir la vidéo",
  href: "#",
  accent: "bg-[#E91E63]/10"
},
{
  type: "Article",
  icon: "newspaper",
  media: "Agence Nouvelle-Aquitaine",
  logo: "assets/press/aana.png",
  title: "Portrait d'exploitation",
  body: "Article complet présentant notre exploitation et notre produit phare, l'huître Gigas Meduli.",
  cta: "Lire l'article",
  href: "#",
  accent: "bg-primary/10"
},
{
  type: "Article",
  icon: "newspaper",
  media: "Mes Escapades · Julien Audigier",
  byline: "Julien Audigier",
  logo: "assets/press/mes-escapades.png",
  title: "Que faire en Médoc Atlantique",
  body: "Article du journaliste Julien Audigier sur Mes Escapades, qui mentionne notre exploitation parmi les choses à faire et à visiter en Médoc Atlantique.",
  cta: "Lire l'article",
  href: "#",
  accent: "bg-success/10"
},
{
  type: "Réseau social",
  icon: "image",
  media: "Bordeauxfood",
  logo: "assets/press/bordeauxfood.png",
  title: "Histoire de la Ferme Eau Médoc",
  body: "Post Facebook de Bordeauxfood présentant l'histoire de notre ferme et de nos huîtres.",
  cta: "Voir la publication",
  href: "#",
  accent: "bg-primary-light/10"
},
{
  type: "Évènement",
  icon: "anchor",
  media: "Soirée écaillage sur bateau-restaurant",
  date: "8 avril 2025",
  title: "Balade gastronomique sur la Gironde",
  body: "Nous avons écaillé nos huîtres Gigas Meduli lors d'une soirée à bord d'un bateau-restaurant des Bateaux Bordelais sur l'estuaire.",
  logo: "assets/press/les-bateaux-bordelais.png",
  gallery: [
  "assets/photos/bateau-plateau-huitres-extra.webp",
  "assets/photos/bateau-plateau-huitres-2.webp",
  "assets/photos/bateau-ecaillage-2.webp",
  "assets/photos/bateau-bordeaux-vue.webp"],

  accent: "bg-sand",
  wide: true
}];


function ParutionsPage({ onNav }) {
  return (
    <>
      {/* HERO */}
      <section className="bg-foam pt-16 md:pt-24 pb-12 md:pb-16">
        <div className="container-x">
          <div className="max-w-[820px]">
            <Kicker>Presse & reportages</Kicker>
            <h1 className="h-display mt-3">Ils <span className="italic text-primary-light">parlent</span> de nous</h1>
            <p className="lead mt-5">Reportages, articles et publications consacrés à notre exploitation et à nos huîtres Gigas Meduli.</p>
          </div>

          {/* Logos band — centered & equalized height */}
          <div className="mt-14 flex flex-wrap items-center justify-center gap-x-10 md:gap-x-14 gap-y-6">
            {["france-3", "aana", "mes-escapades", "bordeauxfood", "la-deguste"].map((k) =>
            <div key={k} className="h-16 md:h-20 grid place-items-center">
                <img src={"assets/press/" + k + ".png"} alt="" className="max-h-full max-w-[140px] object-contain opacity-80" />
              </div>
            )}
          </div>
        </div>
      </section>

      {/* LIST */}
      <section className="py-20 md:py-24 bg-white">
        <div className="container-x grid lg:grid-cols-2 gap-6 md:gap-8">
          {PRESS.map((p, i) =>
          <article
            key={i}
            className={"panel overflow-hidden flex flex-col " + (p.wide ? "lg:col-span-2" : "")}>
            
              {p.wide && p.gallery ? (
            /* WIDE LAYOUT — gallery left, content right */
            <div className="grid md:grid-cols-2 gap-0 md:items-stretch">
                  <div className="grid grid-cols-2 grid-rows-2 gap-1 aspect-square md:aspect-auto bg-foam overflow-hidden">
                    {p.gallery.map((g, k) => <img key={k} src={g} alt="" className="w-full h-full object-cover min-h-0" loading="lazy" />)}
                  </div>
                  <div className="p-7 md:p-10 flex flex-col justify-center">
                    <div className="flex items-center justify-between gap-4 mb-4">
                      <div>
                        <Kicker>{p.type} · {p.date}</Kicker>
                        <div className="font-serif text-primary text-[19px] leading-tight mt-1">{p.media}</div>
                      </div>
                      {p.logo && <img src={p.logo} alt="" className="max-h-12 max-w-[120px] object-contain shrink-0" />}
                    </div>
                    <h3 className="font-serif text-primary text-[24px] md:text-[30px] leading-tight">{p.title}</h3>
                    <p className="body mt-3 flex-1">{p.body}</p>
                  </div>
                </div>) :

            <>
                  {/* Header — show logo if present, else icon */}
                  <div className={"p-7 flex items-center justify-between gap-6 " + p.accent}>
                    {p.logo ?
                <img src={p.logo} alt={p.media} className="max-h-14 max-w-[180px] object-contain" /> :

                <span className="w-11 h-11 rounded-card bg-white text-primary grid place-items-center shadow-soft"><Icon name={p.icon} size={20} /></span>
                }
                    <div className="text-right">
                      <Kicker>{p.type}</Kicker>
                      {(p.byline || !p.logo) && (
                        <div className="font-serif text-primary text-[16px] leading-tight mt-0.5">{p.byline || p.media}</div>
                      )}
                    </div>
                  </div>

                  <div className="p-6 md:p-7 flex-1 flex flex-col">
                    <h3 className="font-serif text-primary text-[22px] md:text-[26px] leading-tight">{p.title}</h3>
                    <p className="body mt-3 flex-1">{p.body}</p>
                    {p.cta &&
                <div className="mt-5">
                        <Button as="a" href={p.href} variant="tertiary" iconRight="external-link">{p.cta}</Button>
                      </div>
                }
                  </div>
                </>
            }
            </article>
          )}
        </div>
      </section>

      <CtaBanner
        image={"assets/photos/marais-bassins.webp"}
        title="Convaincu·e ?"
        subtitle="Goûtez par vous-même. Découvrez nos huîtres ou passez commande directement."
        primary="Découvrir nos huîtres"
        secondary="Commander en ligne"
        onPrimary={() => onNav("nos-huitres")}
        onSecondary={() => onNav("commander")} />
      
    </>);

}

window.ParutionsPage = ParutionsPage;