/* global React, Icon, Button, Kicker, CtaBanner */
// PrestationsPage — /prestations

const FORMULAS = [
{
  icon: "handshake",
  tag: "Évènementiel chez vous",
  title: "Écaillage et fourniture pour évènements",
  body: "Nous accompagnons mariages, séminaires d'entreprise, évènements associatifs, fêtes de collectivités, maisons de retraite, ou réceptions sur bateaux dans l'estuaire de la Gironde.",
  detail: "Notre prestation : livraison, fourniture et écaillage sur place.",
  price: "Forfait écaillage sur devis",
  priceDetail: "Selon nombre de convives, lieu, date.",
  cta: "Demander un devis",
  href: "devis-pro",
  img: "assets/photos/bateau-ecaillage.webp"
},
{
  icon: "store",
  tag: "Sur l'exploitation",
  title: "Recevoir sur notre site",
  body: "Pour des demandes particulières, il est possible d'organiser un évènement directement sur notre site de Saint-Vivien-de-Médoc, en fonction de nos disponibilités.",
  detail: "Site privé, ambiance maritime, jusqu'à plusieurs dizaines de convives selon le format.",
  price: "Sur devis",
  priceDetail: "À discuter selon votre projet.",
  cta: "Nous contacter",
  href: "contact",
  img: "assets/photos/boutique-facade.webp"
},
{
  icon: "user",
  tag: "Visites groupes",
  title: "Visites dégustation pour groupes",
  body: "Pour les groupes de 10 personnes minimum, nous organisons des visites toute l'année.",
  detail: "1h de visite guidée de l'exploitation, suivie de 30 minutes de dégustation découverte debout.",
  price: "7 €/pers.",
  priceDetail: "Gratuit pour les moins de 10 ans.",
  cta: "Réserver une visite",
  href: "contact",
  img: "assets/photos/bertrand-iung-visite.webp"
}];


function PrestationsPage({ onNav }) {
  return (
    <>
      {/* HERO */}
      <section className="relative bg-primary-dark overflow-hidden">
        <div className="absolute inset-0">
          <img src={"assets/photos/bateau-plateau-huitres-extra.webp"} alt="" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-primary-dark/65" />
        </div>
        <div className="relative container-x py-24 md:py-36 text-white">
          <div className="max-w-[820px]">
            <Kicker className="!text-sand">Sur mesure</Kicker>
            <h1 className="font-serif text-white text-[42px] md:text-[78px] leading-[1.02] tracking-[-0.015em] mt-3">
              Évènementiel<br /><span className="italic text-sand">et visites</span>
            </h1>
            <p className="mt-7 text-[19px] md:text-[22px] text-white/85 leading-[1.5] max-w-[640px]">
              Selon nos disponibilités, nous proposons plusieurs prestations autour de nos produits&nbsp;: écaillage sur évènements, visites de l'exploitation, dégustations.
            </p>
          </div>
        </div>
      </section>

      {/* FORMULES */}
      <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>Trois formules</Kicker>
            <h2 className="h-section mt-3">Choisissez la prestation qui vous correspond</h2>
          </div>

          {/* Top grid — Évènementiel & Visites */}
          <div className="grid lg:grid-cols-2 gap-6 md:gap-8">
            {FORMULAS.filter((f) => f.tag !== "Sur l'exploitation").map((f) =>
            <article key={f.title} className="panel overflow-hidden flex flex-col hover:shadow-marine transition-shadow">
                <div className="aspect-photo bg-foam overflow-hidden">
                  <img src={f.img} alt="" className="w-full h-full object-cover" loading="lazy" />
                </div>
                <div className="p-6 md:p-7 flex-1 flex flex-col">
                  <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"><Icon name={f.icon} size={20} /></span>
                    <Kicker>{f.tag}</Kicker>
                  </div>
                  <h3 className="font-serif text-primary text-[24px] md:text-[28px] leading-tight">{f.title}</h3>
                  <p className="body mt-3">{f.body}</p>
                  <p className="body-sm mt-3 text-mute italic">{f.detail}</p>
                  <div className="mt-5 pt-5">
                    <div className="font-serif text-primary text-[22px]">{f.price}</div>
                    <div className="text-mute text-[13px] mt-0.5">{f.priceDetail}</div>
                  </div>
                  <div className="mt-5 mt-auto pt-3">
                    <Button variant="secondary" iconRight="arrow-right" onClick={() => onNav(f.href)}>{f.cta}</Button>
                  </div>
                </div>
              </article>
            )}
          </div>

          {/* Sur l'exploitation — landscape block, image left, text right */}
          {FORMULAS.filter((f) => f.tag === "Sur l'exploitation").map((f) =>
          <article key={f.title} className="panel overflow-hidden grid md:grid-cols-12 gap-0 mt-8 md:mt-10 md:items-stretch hover:shadow-marine transition-shadow">
              <div className="md:col-span-6 bg-foam overflow-hidden aspect-photo md:aspect-auto md:min-h-[420px]">
                <img src={f.img} alt="" className="w-full h-full object-cover" loading="lazy" />
              </div>
              <div className="md:col-span-6 p-7 md:p-10 flex flex-col justify-center">
                <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"><Icon name={f.icon} size={20} /></span>
                  <Kicker>{f.tag}</Kicker>
                </div>
                <h3 className="font-serif text-primary text-[26px] md:text-[32px] leading-tight">{f.title}</h3>
                <p className="body mt-3">{f.body}</p>
                <p className="body-sm mt-3 text-mute italic">{f.detail}</p>
                <div className="mt-5 pt-5">
                  <div className="font-serif text-primary text-[22px]">{f.price}</div>
                  <div className="text-mute text-[13px] mt-0.5">{f.priceDetail}</div>
                </div>
                <div className="mt-6">
                  <Button variant="secondary" iconRight="arrow-right" onClick={() => onNav(f.href)}>{f.cta}</Button>
                </div>
              </div>
            </article>
          )}
        </div>
      </section>

      {/* WHAT TO EXPECT */}
      <section className="py-20 md:py-24 bg-foam">
        <div className="container-x">
          <div className="grid md:grid-cols-12 gap-10 items-center">
            <div className="md:col-span-6">
              <Kicker>À quoi ressemble une prestation</Kicker>
              <h2 className="h-section mt-3">Une équipe qui écaille devant vos invités</h2>
              <p className="body mt-4">
                Nous nous déplaçons avec le matériel d'écaillage et nos produits. L'écaillage en direct devient un moment de convivialité : vos invités voient les huîtres ouvertes sous leurs yeux, fraîches, prêtes à consommer.
              </p>
              <ul className="mt-6 space-y-3">
                {[
                "Livraison et installation sur place",
                "Écaillage assuré par notre équipe",
                "Plateaux et présentation soignés",
                "Adaptable à 20 comme à 200 convives"].
                map((t) =>
                <li key={t} className="flex items-start gap-3 text-ink">
                    <span className="w-6 h-6 rounded-full bg-primary text-white grid place-items-center shrink-0 mt-0.5"><Icon name="check" size={13} /></span>
                    <span>{t}</span>
                  </li>
                )}
              </ul>
            </div>
            <div className="md:col-span-6">
              <div className="grid grid-cols-2 gap-3">
                <img src={"assets/photos/bateau-plateau-huitres-extra.webp"} alt="" className="aspect-square object-cover rounded-card" />
                <img src={"assets/photos/bateau-ecaillage-2.webp"} alt="" className="aspect-square object-cover rounded-card mt-10" />
                <img src={"assets/photos/bateau-plateau-huitres-2.webp"} alt="" className="aspect-square object-cover rounded-card -mt-10" />
                <img src={"assets/photos/bateau-bordeaux-vue.webp"} alt="" className="aspect-square object-cover rounded-card" />
              </div>
            </div>
          </div>
        </div>
      </section>

      <CtaBanner
        image={"assets/photos/marais-coucher-soleil.webp"}
        title="Une question, un projet spécifique ?"
        subtitle="Décrivez-nous votre évènement, nous reviendrons vers vous rapidement avec une proposition adaptée."
        primary="Nous contacter"
        secondary="Demander un devis pro"
        onPrimary={() => onNav("contact")}
        onSecondary={() => onNav("devis-pro")} />
      
    </>);

}

window.PrestationsPage = PrestationsPage;