/* global React, Icon, Button, Kicker, MapMock */
// PartnersPage — /nos-partenaires

const RESTAURANTS = [
{ name: "Bar Cave des Amis", address: "35 Rue Trouche, 33780 Soulac-sur-Mer", phone: "05 56 41 45 60", img: "assets/partners/bar-cave-des-amis.webp" },
{ name: "Arroma", address: "31 Av. de Chambrelant, 33930 Vendays-Montalivet", phone: "05 56 09 98 53", img: "assets/partners/arroma.jpg" },
{ name: "Le Pi", address: "14 Bd du Front de Mer, 33930 Vendays-Montalivet", phone: "06 67 04 94 49", logo: "assets/partners/le-pi.png", logoBg: "#157478" },
{ name: "La Boîte à Sardines", address: "Euronat, lieu-dit Dépée, 33590 Grayan-et-l'Hôpital", phone: "05 56 09 39 10", img: "assets/partners/la-boite-a-sardines.webp" },
{ name: "Le Bontemps", address: "5 Pl. des Commerces, 33460 Cussac-Fort-Médoc", phone: "09 83 02 14 16", img: "assets/partners/le-bontemps.webp" },
{ name: "Le Jardin Pêcheur", address: "11 Rue Lucien Faure, 33300 Bordeaux", phone: "05 56 10 88 68", logo: "assets/partners/le-jardin-pecheur.webp" },
{ name: "Le Pont Bernet", address: "1160 Rte de Soulac, 33290 Le Pian-Médoc", phone: "05 56 70 20 19", img: "assets/partners/le-pont-bernet.webp" },
{ name: "Le Cabanon du Pêcheur", address: "13 Pass. des Civelles, 33590 Saint-Vivien-de-Médoc", phone: "06 71 91 86 06", img: "assets/partners/le-cabanon-du-pecheur.webp" }];


const REVENDEURS = [
{ name: "Les Fermiers Toqués", address: "Chemin de Beauchêne, 33250 Cissac-Médoc", phone: "09 87 30 30 67", logo: "assets/press/les-fermiers-toques.png" },
{ name: "Cabane n°1", address: "Prom. de Pech Lèbre, 33680 Lacanau", phone: "06 74 42 24 28", logo: "assets/partners/cabane-n1-lacanau.webp" },
{ name: "Intermarché Avensan", address: "Le Pass. du Soc, 33480 Avensan", phone: "05 56 58 38 99", logo: "assets/press/intermarche.png" },
{ name: "Saumon Fumé Bordelais", address: "78 Bd George V, 33000 Bordeaux", phone: "05 57 21 61 53", logo: "assets/partners/saumon-fume-bordelais-logo.png" }];


function PartnerCard({ name, address, phone, img, logo, logoBg }) {
  return (
    <article className="panel overflow-hidden hover:shadow-marine transition-shadow flex flex-col">
      {(img || logo) &&
      <div
        className={"aspect-[16/10] grid place-items-center overflow-hidden " + (logo ? "p-5 md:p-6" : "bg-foam")}
        style={logo ? { background: logoBg || "#ffffff" } : undefined}>
          {img ?
        <img src={img} alt="" className="w-full h-full object-cover" loading="lazy" /> :
        <img src={logo} alt={name} className="max-h-full max-w-full object-contain" loading="lazy" />
        }
        </div>
      }
      <div className="p-5 flex-1 flex flex-col">
        <h3 className="font-serif text-primary text-[20px] leading-tight">{name}</h3>
        <p className="text-mute text-[14px] leading-snug mt-2 flex items-start gap-2"><Icon name="map-pin" size={15} className="mt-0.5 text-primary-light" />{address}</p>
        <a href={"tel:" + phone.replace(/\s+/g, '')} className="text-primary text-[14px] mt-3 flex items-center gap-2 no-underline hover:text-primary-dark"><Icon name="phone" size={14} />{phone}</a>
        <a href={"https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(address)} target="_blank" rel="noreferrer" className="mt-3 text-primary-light text-[13px] flex items-center gap-1.5 no-underline hover:text-primary">
          <Icon name="external-link" size={13} /> Itinéraire Google Maps
        </a>
      </div>
    </article>);

}

function PartnersPage({ 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>Notre réseau</Kicker>
            <h1 className="h-display mt-3">Restaurants et <span className="italic text-primary-light">revendeurs</span></h1>
            <p className="lead mt-5">
              Si vous ne pouvez pas vous procurer nos produits sur l'exploitation ou sur les marchés, voici la liste de nos partenaires en Médoc et à Bordeaux où vous trouverez nos huîtres Gigas Meduli.
            </p>
          </div>
        </div>
      </section>

      {/* PARTENAIRE PRIVILÉGIÉ */}
      <section className="py-12 md:py-16 bg-white">
        <div className="container-x">
          <div className="bg-primary rounded-hero p-7 md:p-12 grid md:grid-cols-12 gap-8 items-center text-white overflow-hidden relative">
            <div className="absolute -right-12 -bottom-12 opacity-10 hidden md:block">
              <Icon name="handshake" size={300} />
            </div>
            <div className="md:col-span-7 relative">
              <Kicker className="!text-sand">Partenaire privilégié</Kicker>
              <h2 className="font-serif text-white text-[32px] md:text-[44px] leading-tight mt-3 tracking-[-0.005em]">La Déguste, Bordeaux</h2>
              <p className="text-white/85 text-[17px] mt-4 leading-[1.6] max-w-[480px]">
                Notre partenaire privilégié pour la fourniture des restaurants et l'évènementiel sur la région bordelaise.
              </p>
              <div className="mt-6 flex flex-wrap gap-4 items-center text-white">
                <a href="tel:0687046365" className="flex items-center gap-2 no-underline text-white hover:text-sand"><Icon name="phone" size={16} />06 87 04 63 65</a>
                <a href="https://www.google.com/maps/search/?api=1&query=La+D%C3%A9guste+Bordeaux" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 no-underline text-white hover:text-sand"><Icon name="map-pin" size={16} />Bordeaux 33000</a>
              </div>
            </div>
            <div className="md:col-span-5 relative">
              <div className="bg-white rounded-card p-8 grid place-items-center">
                <img src={"assets/press/la-deguste.png"} alt="La Déguste" className="max-h-[120px] w-auto" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* RESTAURANTS */}
      <section className="py-16 md:py-20 bg-white">
        <div className="container-x">
          <div className="flex items-end justify-between gap-4 mb-8">
            <div>
              <Kicker>8 adresses en Médoc & Bordeaux</Kicker>
              <h2 className="h-section mt-3">Restaurants partenaires</h2>
            </div>
          </div>
          <div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 md:gap-6">
            {RESTAURANTS.map((r) => <PartnerCard key={r.name} {...r} />)}
          </div>
        </div>
      </section>

      {/* REVENDEURS */}
      <section className="py-16 md:py-20 bg-foam">
        <div className="container-x">
          <div className="mb-8">
            <Kicker>Où acheter en boutique</Kicker>
            <h2 className="h-section mt-3">Revendeurs</h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5 md:gap-6">
            {REVENDEURS.map((r) => <PartnerCard key={r.name} {...r} />)}
          </div>
        </div>
      </section>

      {/* MAP */}
      <section className="py-16 md:py-20 bg-white">
        <div className="container-x">
          <h3 className="font-serif text-primary text-[24px] md:text-[28px] mb-6">Sur la carte</h3>
          <MapMock height={460} markers={[
          { x: 14, y: 18, label: "Soulac" },
          { x: 18, y: 22, label: "Le Verdon" },
          { x: 20, y: 28, label: "Saint-Vivien" },
          { x: 32, y: 34, label: "Lacanau" },
          { x: 38, y: 50, label: "Médoc" },
          { x: 60, y: 70, label: "Bordeaux" }]
          } />
        </div>
      </section>

      {/* CTA PROS */}
      <section className="py-20 md:py-24 bg-primary text-white">
        <div className="container-x grid md:grid-cols-12 gap-8 items-center">
          <div className="md:col-span-7">
            <Kicker className="!text-sand">Vous êtes professionnel&nbsp;?</Kicker>
            <h2 className="font-serif text-white text-[28px] md:text-[40px] leading-tight mt-3 tracking-[-0.005em]">Référencer nos produits dans votre établissement</h2>
            <p className="text-white/85 mt-4 text-[17px] leading-[1.6] max-w-[560px]">
              Restaurant, revendeur, traiteur, organisateur d'évènements&nbsp;: demandez un devis adapté à votre activité.
            </p>
          </div>
          <div className="md:col-span-5 md:text-right">
            <Button variant="primary-light" size="lg" iconRight="arrow-right" onClick={() => onNav("devis-pro")}>Demander un devis</Button>
          </div>
        </div>
      </section>
    </>);

}

window.PartnersPage = PartnersPage;