/* global React, Icon, Button, Kicker, PlaceCard, MapMock, InfoBox, PlaceIcon */
// LocationsPage — /ou-trouver

const PLACES_DATA = [
  {
    id: "boutique",
    kind: "Boutique",
    icon: "store",
    name: "Boutique de l'exploitation",
    address: "1 La Petite Canau, 33590 Saint-Vivien-de-Médoc",
    phone: "05 56 09 58 32",
    hours: [
      ["Vendredi", "9h-12h"],
      ["Samedi", "9h-12h et 15h-18h"],
    ],
    access: "Entrez dans le port, passez sur l'écluse du chenal de Saint-Vivien. Notre magasin d'accueil se trouve à 300 mètres sur votre droite.",
    img: "assets/photos/boutique-facade.webp",
    marker: { x: 22, y: 28, label: "Boutique Saint-Vivien" },
  },
  {
    id: "saintvivien",
    kind: "Marché hebdomadaire",
    icon: "market",
    name: "Marché de Saint-Vivien-de-Médoc",
    address: "Place de la Brigade Carnot, 33590 Saint-Vivien-de-Médoc",
    hours: [["Mercredi", "8h-12h30"]],
    note: "(sauf en janvier)",
    img: "assets/photos/marche-banderole-eau-medoc.webp",
    marker: { x: 30, y: 36, label: "Marché Saint-Vivien" },
  },
  {
    id: "eysines",
    kind: "Marché dominical",
    icon: "market",
    name: "Marché de Migron à Eysines",
    address: "Place Florale, 33320 Eysines",
    hours: [["Dimanche", "8h-12h30"]],
    img: "assets/photos/stand-marche.webp",
    marker: { x: 64, y: 72, label: "Marché Eysines" },
  },
];

function LocationsPage({ onNav }) {
  const allMarkers = PLACES_DATA.map((p) => ({
    ...p.marker,
    tone: "primary",
    name: p.name,
    kind: p.kind,
    address: p.address,
    phone: p.phone,
    hours: p.hours.map(([d, h]) => d + " " + h).join(" · "),
    photo: p.img,
  }));

  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>Vente directe</Kicker>
            <h1 className="h-display mt-3">Où nous <span className="italic text-primary-light">trouver</span></h1>
            <p className="lead mt-5">Trois rendez-vous chaque semaine pour découvrir nos produits en vente directe&nbsp;: la boutique de l'exploitation et deux marchés en Gironde.</p>
          </div>

          {/* Quick summary chips */}
          <div className="mt-10 grid sm:grid-cols-3 gap-4">
            {PLACES_DATA.map((p) => (
              <button
                key={p.id}
                type="button"
                onClick={() => {
                  const el = document.getElementById(p.id);
                  if (!el) return;
                  const top = el.getBoundingClientRect().top + window.scrollY - 80;
                  window.scrollTo({ top, behavior: "smooth" });
                }}
                className="panel p-5 flex items-center gap-3 hover:shadow-marine transition-shadow text-left cursor-pointer">
                <span className="w-11 h-11 rounded-card bg-foam grid place-items-center shrink-0"><PlaceIcon kind={p.icon} size={24}/></span>
                <div className="min-w-0">
                  <div className="eyebrow text-[11px]">{p.kind}</div>
                  <div className="font-serif text-primary text-[18px] leading-tight truncate">{p.name.replace("Marché de ", "").replace("Boutique de l'exploitation", "Boutique")}</div>
                </div>
                <Icon name="chevron-right" size={16} className="text-mute ml-auto"/>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* PLACES */}
      <section className="py-20 md:py-24 bg-white">
        <div className="container-x space-y-16 md:space-y-24">
          {PLACES_DATA.map((p, i) => (
            <article key={p.id} id={p.id} className="grid md:grid-cols-12 gap-8 md:gap-12 items-start scroll-mt-24">
              <div className={"md:col-span-6 " + (i % 2 ? "md:order-2" : "")}>
                <img src={p.img} alt="" className="w-full aspect-photo rounded-hero object-cover shadow-marine"/>
              </div>
              <div className={"md:col-span-6 " + (i % 2 ? "md:order-1" : "")}>
                <div className="flex items-center gap-2 eyebrow mb-3">
                  <PlaceIcon kind={p.icon} size={18}/> {p.kind}
                </div>
                <h2 className="font-serif text-primary text-[28px] md:text-[40px] leading-tight">{p.name}</h2>

                <ul className="mt-6 space-y-3">
                  <li className="flex items-start gap-3"><Icon name="map-pin" size={18} className="text-primary-light mt-1"/><span className="text-ink">{p.address}</span></li>
                  {p.phone && <li className="flex items-start gap-3"><Icon name="phone" size={18} className="text-primary-light mt-1"/><a href={"tel:" + p.phone.replace(/\s+/g, '')} className="text-primary">{p.phone}</a></li>}
                </ul>

                {/* Hours table */}
                <div className="mt-6 panel overflow-hidden">
                  <div className="px-5 py-3 bg-foam flex items-center gap-2">
                    <Icon name="clock" size={16} className="text-primary"/>
                    <span className="font-semibold text-ink text-[14px] tracking-eyebrow uppercase">Horaires</span>
                    {p.note && <span className="ml-auto text-mute text-[13px]">{p.note}</span>}
                  </div>
                  <table className="w-full text-[15px]">
                    <tbody>
                      {p.hours.map(([day, h], j) => (
                        <tr key={day} className={j % 2 ? "bg-paper" : ""}>
                          <td className="px-5 py-2.5 text-mute w-[140px]">{day}</td>
                          <td className={"px-5 py-2.5 font-medium " + (h === "Fermé" ? "text-mute" : "text-ink")}>{h}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                {p.access && (
                  <div className="mt-6 panel p-5 bg-foam/60">
                    <div className="eyebrow flex items-center gap-2 mb-2"><Icon name="navigation" size={14}/> Itinéraire</div>
                    <p className="body-sm">{p.access}</p>
                  </div>
                )}

                <div className="mt-6 flex flex-wrap gap-3">
                  <Button
                    as="a"
                    href={"https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(p.address)}
                    variant="secondary"
                    iconRight="external-link"
                  >
                    Itinéraire Google Maps
                  </Button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* CARTE D'ENSEMBLE */}
      <section className="py-20 md:py-24 bg-foam">
        <div className="container-x">
          <div className="max-w-[680px] mb-8">
            <Kicker>Tous nos lieux</Kicker>
            <h2 className="h-section mt-3">Une carte d'ensemble</h2>
          </div>
          <MapMock height={520} markers={allMarkers}/>
          <div className="mt-5">
            <InfoBox icon="alert-triangle" variant="warning">
              <strong>Emplacements indicatifs.</strong> Pour un itinéraire précis, nous vous conseillons de saisir l'adresse complète dans votre application GPS (Google Maps, Apple Plans, Waze…).
            </InfoBox>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 md:py-24 bg-white">
        <div className="container-x">
          <div className="bg-primary rounded-hero p-8 md:p-14 grid md:grid-cols-2 gap-8 items-center text-white">
            <div>
              <Kicker className="!text-sand">Astuce</Kicker>
              <h3 className="font-serif text-white text-[28px] md:text-[36px] leading-tight mt-3">Vous préférez réserver à l'avance&nbsp;?</h3>
              <p className="text-white/85 text-[17px] mt-4 leading-[1.6]">Composez votre commande en ligne, choisissez votre point de retrait et la date. Vous payez sur place au retrait.</p>
            </div>
            <div className="flex md:justify-end">
              <Button variant="primary-light" size="lg" iconRight="arrow-right" onClick={() => onNav("commander")}>Passer commande</Button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.LocationsPage = LocationsPage;