// Pages : Funérariums, Guide, Contact, À propos, Commune, Service

const { useState: useStateNP } = React;

// ---- Page Funérariums ----
function FunerariumsPage({ setRoute }) {
  const homes = window.FDL_DATA.FUNERAL_HOMES;
  const crematoriums = homes.filter(h => h.crematorium);
  const chambers = homes.filter(h => !h.crematorium);

  return (
    <main>
      <section className="px-5 sm:px-8 pt-14 sm:pt-20 md:pt-28 pb-12 sm:pb-16 md:pb-20 page-hero-banner" style={{ '--banner-bg-img': 'url(assets/funerarium-foceo.jpg)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10 items-end">
          <div className="lg:col-span-8">
            <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
              <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
              <Icon name="chevron_right" className="text-[10px]" />
              <span>Funérariums</span>
            </nav>
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Réseau partenaire</p>
            <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-7xl tracking-tight leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
              Funérariums<br /><span className="italic">de Marseille</span>
            </h1>
          </div>
          <div className="lg:col-span-4">
            <p className="leading-relaxed text-base md:text-[17px] max-w-md" style={{ color: 'var(--on-surface-variant)' }}>
              Les principaux funérariums de Marseille avec lesquels nous coordonnons la livraison de fleurs deuil et de fleurs pour enterrement — le jour même, 7j/7.
            </p>
          </div>
        </div>
      </section>

      <section className="px-8 border-t border-b" style={{ borderColor: 'color-mix(in srgb, var(--on-surface) 12%, transparent)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4">
          {[
            { n: '9', l: 'Établissements' },
            { n: '60+', l: 'Salons de recueillement' },
            { n: '7j/7', l: 'Livraison coordonnée' },
            { n: '< 3h', l: 'Délai express Marseille' },
          ].map((s, i) => (
            <div key={i} className="py-10 md:py-12 px-2 md:px-6" style={{ borderRight: i < 3 ? '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' : 'none' }}>
              <p className="font-serif text-4xl md:text-5xl mb-2" style={{ color: 'var(--primary)' }}>{s.n}</p>
              <p className="text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>{s.l}</p>
            </div>
          ))}
        </div>
      </section>

      <FunerariumsMap homes={homes} setRoute={setRoute} />

      <section className="px-8 py-24 md:py-32">
        <div className="max-w-7xl mx-auto">
          <div className="flex items-end justify-between mb-16 flex-wrap gap-8">
            <div>
              <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Annuaire</p>
              <h2 className="font-serif text-4xl md:text-5xl" style={{ color: 'var(--on-surface)' }}>
                Livraison fleurs pour enterrement —<br /><span className="italic">chambres funéraires &amp; funérariums</span>
              </h2>
            </div>
            <p className="text-sm max-w-sm" style={{ color: 'var(--on-surface-variant)' }}>
              Envoyez des fleurs directement à l'établissement — nous coordonnons la livraison avec les équipes sur place.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
            {chambers.map((h, i) => <FuneralHomeCard key={h.id} h={h} i={i} setRoute={setRoute} />)}
          </div>
        </div>
      </section>

      <section className="px-8 pb-24 md:pb-32">
        <div className="max-w-7xl mx-auto">
          <div className="mb-12">
            <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Crémation à Marseille</p>
            <h2 className="font-serif text-4xl md:text-5xl" style={{ color: 'var(--on-surface)' }}>
              <span className="italic">Crématorium</span> Saint-Pierre
            </h2>
            <p className="mt-4 text-sm max-w-xl" style={{ color: 'var(--on-surface-variant)' }}>
              Nous livrons des compositions florales funéraires adaptées aux cérémonies de crémation à Marseille — bouquets, gerbes de fleurs deuil et urnes florales.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
            {crematoriums.map((h, i) => <FuneralHomeCard key={h.id} h={h} i={i} setRoute={setRoute} />)}
          </div>
        </div>
      </section>

      {/* Comment nous livrons vos compositions */}
      <section className="px-8 py-24 md:py-32" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-7xl mx-auto">
          <div className="max-w-3xl mb-16 md:mb-20">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Notre processus</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.05]" style={{ color: 'var(--on-surface)' }}>
              Livraison de fleurs deuil —<br /><span className="italic">notre processus</span>
            </h2>
            <p className="leading-relaxed mt-6 text-base md:text-lg max-w-2xl" style={{ color: 'var(--on-surface-variant)' }}>
              De la réception de votre commande jusqu'à la livraison au funérarium, chaque étape est soigneusement coordonnée pour que vos fleurs arrivent à temps et en parfait état.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-0">
            {[
              { num: '01', icon: 'shopping_basket', title: 'Réception de la commande', desc: 'Nous recevons votre commande en ligne, par téléphone ou par email. Notre équipe confirme les détails : composition, ruban personnalisé, funérarium de destination et heure de la cérémonie.' },
              { num: '02', icon: 'cut', title: 'Préparation en atelier', desc: 'Nos fleuristes préparent votre composition à la main avec des fleurs fraîches de saison. Chaque pièce est vérifiée avant de quitter l\'atelier pour garantir sa qualité et sa fraîcheur.' },
              { num: '03', icon: 'local_shipping', title: 'Coordination avec le funérarium', desc: 'Nous contactons directement l\'établissement funéraire pour confirmer le créneau de livraison et les consignes de placement. Rien n\'est laissé au hasard.' },
              { num: '04', icon: 'check_circle', title: 'Livraison et confirmation', desc: 'Notre équipe livre la composition à l\'endroit indiqué et vous envoie une confirmation. Disponible 7j/7, avec service d\'urgence 24h/24 pour les décès imprévus.' },
            ].map((step, i) => (
              <div key={i} className="p-8 md:p-10 flex flex-col gap-6" style={{ borderLeft: i > 0 ? '1px solid color-mix(in srgb, var(--on-surface) 10%, transparent)' : 'none' }}>
                <div className="flex items-center gap-4">
                  <span className="font-serif text-4xl italic" style={{ color: 'color-mix(in srgb, var(--primary) 30%, transparent)' }}>{step.num}</span>
                  <Icon name={step.icon} className="text-2xl" style={{ color: 'var(--primary)' }} />
                </div>
                <h3 className="font-serif text-xl md:text-2xl leading-tight" style={{ color: 'var(--on-surface)' }}>{step.title}</h3>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{step.desc}</p>
              </div>
            ))}
          </div>
          <div className="mt-14 flex flex-wrap gap-4">
            <button onClick={() => setRoute('boutique')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
              Voir nos compositions <Icon name="arrow_forward" className="text-sm" />
            </button>
            <button onClick={() => setRoute('contact')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}>
              Nous contacter
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Carte interactive Funérariums ----
function FunerariumsMap({ homes, setRoute }) {
  const mapContainerRef = React.useRef(null);
  const mapInstanceRef = React.useRef(null);
  const markersRef = React.useRef({});
  const [selected, setSelected] = React.useState(null);

  function buildIcon(num, active) {
    const bg = active ? '#0e2530' : '#39a3d5';
    const shadow = active ? '0.40' : '0.22';
    return window.L.divIcon({
      className: '',
      html: `<div style="width:34px;height:42px;cursor:pointer">
        <svg viewBox="0 0 34 42" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:34px;height:42px;filter:drop-shadow(0 2px 8px rgba(14,37,48,${shadow}))">
          <path d="M17 0C7.611 0 0 7.611 0 17c0 12.75 17 25 17 25S34 29.75 34 17C34 7.611 26.389 0 17 0z" fill="${bg}"/>
          <circle cx="17" cy="17" r="8.5" fill="white" fill-opacity="0.95"/>
          <text x="17" y="17" text-anchor="middle" dominant-baseline="central" font-size="9" font-weight="800" font-family="Manrope,sans-serif" fill="${bg}">${num}</text>
        </svg>
      </div>`,
      iconSize: [34, 42],
      iconAnchor: [17, 42],
    });
  }

  function resetMarkers() {
    homes.forEach((h, i) => {
      if (markersRef.current[h.id]) markersRef.current[h.id].setIcon(buildIcon(i + 1, false));
    });
  }

  function activateMarker(h) {
    resetMarkers();
    const i = homes.findIndex(hh => hh.id === h.id);
    if (markersRef.current[h.id]) markersRef.current[h.id].setIcon(buildIcon(i + 1, true));
    setSelected(h);
    if (mapInstanceRef.current && h.coords) {
      mapInstanceRef.current.flyTo(h.coords, 14, { animate: true, duration: 0.6 });
    }
  }

  React.useEffect(() => {
    if (!window.L || !mapContainerRef.current || mapInstanceRef.current) return;

    const map = window.L.map(mapContainerRef.current, {
      center: [43.275, 5.406],
      zoom: 11,
      zoomControl: false,
      scrollWheelZoom: false,
      attributionControl: false,
    });

    window.L.control.zoom({ position: 'bottomright' }).addTo(map);

    window.L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
      attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a> © <a href="https://carto.com">CARTO</a>',
      maxZoom: 19,
    }).addTo(map);

    const validHomes = homes.filter(h => h.coords);
    if (validHomes.length > 0) {
      const bounds = window.L.latLngBounds(validHomes.map(h => h.coords));
      map.fitBounds(bounds, { padding: [50, 50] });
    }

    homes.forEach((h, i) => {
      if (!h.coords) return;
      const marker = window.L.marker(h.coords, { icon: buildIcon(i + 1, false) });
      marker.addTo(map);
      marker.on('click', (e) => {
        window.L.DomEvent.stopPropagation(e);
        resetMarkers();
        marker.setIcon(buildIcon(i + 1, true));
        setSelected(h);
        map.flyTo(h.coords, 14, { animate: true, duration: 0.6 });
      });
      markersRef.current[h.id] = marker;
    });

    map.on('click', () => { resetMarkers(); setSelected(null); });

    mapInstanceRef.current = map;

    return () => {
      map.remove();
      mapInstanceRef.current = null;
      markersRef.current = {};
    };
  }, []);

  return (
    <section className="px-8 py-20 md:py-28">
      <div className="max-w-7xl mx-auto">

        {/* En-tête */}
        <div className="flex items-end justify-between mb-12 flex-wrap gap-8">
          <div>
            <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Carte interactive</p>
            <h2 className="font-serif text-4xl md:text-5xl" style={{ color: 'var(--on-surface)' }}>
              Localiser un <span className="italic">funérarium</span>
            </h2>
          </div>
          <p className="text-sm max-w-xs" style={{ color: 'var(--on-surface-variant)' }}>
            Cliquez sur un marqueur ou sur un arrondissement pour afficher les informations de l'établissement.
          </p>
        </div>

        {/* Conteneur carte */}
        <div className="relative overflow-hidden" style={{ height: 'clamp(280px, 50vw, 560px)', boxShadow: '0 4px 40px rgba(14,37,48,0.10)' }}>
          <div ref={mapContainerRef} style={{ width: '100%', height: '100%' }} />

          {/* Panneau info flottant */}
          {selected && (
            <div
              className="absolute top-4 right-4 bottom-4 z-[800] overflow-y-auto animate-slideDown"
              style={{ width: 'min(280px, calc(100% - 1rem))', background: 'var(--surface-container-lowest)', boxShadow: '0 8px 40px rgba(14,37,48,0.18)' }}
            >
              {/* Image */}
              <div className="relative h-36 overflow-hidden flex-shrink-0" style={{ background: 'var(--surface-container-low)' }}>
                <img
                  src={selected.img}
                  alt={selected.name}
                  className="w-full h-full object-cover"
                  onError={e => { e.target.style.display = 'none'; }}
                />
                {selected.crematorium && (
                  <span className="absolute top-2 left-2 px-2 py-0.5 text-[9px] uppercase tracking-widest font-semibold" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>Crématorium</span>
                )}
                <button
                  onClick={() => { resetMarkers(); setSelected(null); }}
                  className="absolute top-2 right-2 w-7 h-7 flex items-center justify-center hover:opacity-80 transition-opacity"
                  style={{ background: 'rgba(14,37,48,0.55)', color: 'white', backdropFilter: 'blur(4px)' }}
                >
                  <Icon name="close" className="text-sm" />
                </button>
              </div>

              {/* Contenu */}
              <div className="p-5 flex flex-col gap-4">
                <div>
                  <p className="text-[10px] uppercase tracking-widest mb-1" style={{ color: 'var(--primary)' }}>{selected.operator}</p>
                  <h3 className="font-serif text-base leading-snug" style={{ color: 'var(--on-surface)' }}>{selected.name}</h3>
                </div>

                <div className="space-y-2">
                  <div className="flex items-start gap-2 text-xs">
                    <Icon name="location_on" className="text-sm flex-shrink-0 mt-0.5" style={{ color: 'var(--primary)' }} />
                    <span style={{ color: 'var(--on-surface-variant)' }}>{selected.address}</span>
                  </div>
                  {selected.phone && (
                    <div className="flex items-center gap-2 text-xs">
                      <Icon name="phone" className="text-sm flex-shrink-0" style={{ color: 'var(--primary)' }} />
                      <a href={`tel:${selected.phone.replace(/[\s.]/g, '')}`} className="transition-opacity hover:opacity-70" style={{ color: 'var(--primary)' }}>{selected.phone}</a>
                    </div>
                  )}
                  <div className="flex items-start gap-2 text-xs">
                    <Icon name="schedule" className="text-sm flex-shrink-0 mt-0.5" style={{ color: 'var(--primary)' }} />
                    <span style={{ color: 'var(--on-surface-variant)' }}>{selected.hours}</span>
                  </div>
                </div>

                <div className="flex flex-wrap gap-x-3 gap-y-1.5 py-3" style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)', borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)' }}>
                  {selected.rooms && (
                    <span className="inline-flex items-center gap-1 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface)' }}>
                      <Icon name="meeting_room" style={{ color: 'var(--primary)', fontSize: '13px' }} />{selected.rooms} salons
                    </span>
                  )}
                  {selected.parking && (
                    <span className="inline-flex items-center gap-1 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface)' }}>
                      <Icon name="local_parking" style={{ color: 'var(--primary)', fontSize: '13px' }} />Parking
                    </span>
                  )}
                </div>

                <div className="flex flex-col gap-2">
                  <button
                    onClick={() => setRoute(`funerarium-${selected.id}`)}
                    className="w-full py-2.5 text-[10px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70"
                    style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}
                  >
                    Voir la fiche complète
                  </button>
                  <button
                    onClick={() => setRoute('boutique')}
                    className="w-full py-2.5 text-[10px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90"
                    style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}
                  >
                    Envoyer des fleurs ici
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* Hint inicial */}
          {!selected && (
            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-[700] px-5 py-2.5 flex items-center gap-2 pointer-events-none" style={{ background: 'rgba(14,37,48,0.72)', backdropFilter: 'blur(8px)' }}>
              <Icon name="touch_app" className="text-sm" style={{ color: 'white', opacity: 0.8 }} />
              <p className="text-[10px] uppercase tracking-widest font-medium" style={{ color: 'white', opacity: 0.9 }}>Cliquez sur un marqueur</p>
            </div>
          )}
        </div>

        {/* Chips par arrondissement */}
        <div className="mt-5 flex flex-wrap gap-2">
          {homes.map((h, i) => (
            <button
              key={h.id}
              onClick={() => activateMarker(h)}
              className="inline-flex items-center gap-2 px-4 py-2 text-[11px] transition-all duration-200 hover:opacity-80"
              style={{
                background: selected?.id === h.id ? 'var(--primary)' : 'var(--surface-container-low)',
                color: selected?.id === h.id ? 'var(--on-primary)' : 'var(--on-surface-variant)',
              }}
            >
              <span className="font-serif italic text-[10px] opacity-70">{String(i + 1).padStart(2, '0')}</span>
              {h.district}
              {h.crematorium && <Icon name="whatshot" className="text-xs" style={{ color: selected?.id === h.id ? 'var(--on-primary)' : 'var(--primary)', opacity: 0.9 }} />}
            </button>
          ))}
        </div>

      </div>
    </section>
  );
}

function FuneralHomeCard({ h, i, setRoute, highlight }) {
  const IMAGES = [
    'https://images.prismic.io/obseques-infos/e14418c6-ba74-4bf1-b494-b733fa8ac57c_ROC-min.png?auto=compress,format',
    'https://lh3.googleusercontent.com/p/AF1QipPvOuIDbtjvkrIAa17_mKj68SVbMruZPLH59wHE=s680-w680-h510-rw',
    'https://lh3.googleusercontent.com/gps-cs-s/APNQkAEijskbvYV3XMxPpn7pYBD49-o9dZiKwPkz7h0SjhPDBns3XZWT3ax_pQJmSFL0lLrSCgxvL2EXHO15QQaeQxn2cEoYBso_RvE_vGooH0wj3DhQ410iLQJJVFkSSwjA1gOGvCwy=s680-w680-h510-rw',
    'assets/funerarium-foceo.jpg',
    'assets/crematorio-saint-pierre.jpg',
    'https://pompesfunebres.marseille.fr/wp-content/uploads/2019/10/ALO_4406-1-1024x733.jpg',
    'assets/funerarium-foceo2.jpg',
    'assets/funerarium-saint-pierre-rosa.jpg',
    'assets/funeraria-pfg-pincede.jpg',
  ];
  const img = h.img || IMAGES[i % IMAGES.length];

  return (
    <article id={`funerarium-${h.id}`} className="flex flex-col p-8 md:p-10 transition-all duration-500 hover:-translate-y-0.5" style={{ background: 'var(--surface-container-lowest)', boxShadow: highlight ? '0 0 0 2px var(--primary), 0 8px 32px rgba(20,20,30,0.12)' : '0 2px 20px rgba(20,20,30,0.04)' }}>
      <div className="aspect-[16/10] overflow-hidden mb-8" style={{ background: 'var(--surface-container-low)' }}>
        <img src={img} alt={h.name} className="w-full h-full object-cover" />
      </div>
      <div className="flex items-baseline gap-4 mb-4">
        <span className="font-serif italic text-sm" style={{ color: 'color-mix(in srgb, var(--primary) 60%, transparent)' }}>{String(i + 1).padStart(2, '0')}</span>
        <span className="uppercase tracking-widest text-[10px]" style={{ color: 'var(--primary)' }}>{h.operator}</span>
        {h.crematorium && (
          <span className="ml-auto px-2 py-0.5 text-[9px] uppercase tracking-widest font-semibold" style={{ background: 'color-mix(in srgb, var(--primary) 12%, transparent)', color: 'var(--primary)' }}>Crématorium</span>
        )}
      </div>
      <h3 className="font-serif text-2xl md:text-3xl leading-tight mb-3" style={{ color: 'var(--on-surface)' }}>{h.name}</h3>
      <p className="text-sm leading-relaxed mb-6" style={{ color: 'var(--on-surface-variant)' }}>{h.description}</p>
      <div className="flex flex-wrap gap-x-5 gap-y-2 mb-6">
        {h.rooms && <span className="inline-flex items-center gap-2 text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface)' }}><Icon name="meeting_room" className="text-[14px]" style={{ color: 'var(--primary)' }} />{h.rooms} salons</span>}
        {h.parking && <span className="inline-flex items-center gap-2 text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface)' }}><Icon name="local_parking" className="text-[14px]" style={{ color: 'var(--primary)' }} />Parking</span>}
        {h.crematorium && <span className="inline-flex items-center gap-2 text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface)' }}><Icon name="whatshot" className="text-[14px]" style={{ color: 'var(--primary)' }} />Crématorium</span>}
      </div>
      <div className="grid grid-cols-2 gap-6 pt-6 mb-6 mt-auto" style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' }}>
        <div>
          <p className="text-[10px] uppercase tracking-widest mb-1" style={{ color: 'var(--on-surface-variant)' }}>Adresse</p>
          <p className="text-sm leading-snug" style={{ color: 'var(--on-surface)' }}>{h.address}</p>
          {h.phone && <p className="text-sm mt-1" style={{ color: 'var(--on-surface-variant)' }}>{h.phone}</p>}
        </div>
        <div>
          <p className="text-[10px] uppercase tracking-widest mb-1" style={{ color: 'var(--on-surface-variant)' }}>Horaires</p>
          <p className="text-sm" style={{ color: 'var(--on-surface)' }}>{h.hours}</p>
          {h.website && (<>
            <p className="text-[10px] uppercase tracking-widest mt-3 mb-1" style={{ color: 'var(--on-surface-variant)' }}>Site web</p>
            <a href={`https://${h.website}`} target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()} className="text-xs underline underline-offset-4 hover:opacity-70 break-all" style={{ color: 'var(--primary)' }}>{h.website}</a>
          </>)}
        </div>
      </div>
      <div className="flex flex-col gap-3 mt-auto">
        <button onClick={() => setRoute(`funerarium-${h.id}`)} className="inline-flex items-center justify-between gap-3 px-6 py-4 text-[11px] uppercase tracking-widest font-medium transition-all hover:opacity-70" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}>
          Voir la fiche complète
          <Icon name="arrow_forward" className="text-base" />
        </button>
        <button onClick={() => setRoute('boutique')} className="inline-flex items-center justify-between gap-3 px-6 py-4 text-[11px] uppercase tracking-widest font-medium transition-all hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
          Envoyer des fleurs ici
          <Icon name="local_florist" className="text-base" />
        </button>
      </div>
    </article>
  );
}

// ---- Page détail Funérarium ----
function FunerariumDetailPage({ funerariumId, setRoute }) {
  const homes = window.FDL_DATA.FUNERAL_HOMES;
  const h = homes.find(x => x.id === funerariumId);

  if (!h) return (
    <main className="flex flex-col items-center justify-center min-h-[60vh] gap-6">
      <p className="font-serif text-3xl" style={{ color: 'var(--on-surface)' }}>Établissement introuvable</p>
      <button onClick={() => setRoute('funerariums')} className="text-sm underline underline-offset-4 transition-opacity hover:opacity-70" style={{ color: 'var(--primary)' }}>← Retour aux funérariums</button>
    </main>
  );

  const IMAGES = [
    'https://images.prismic.io/obseques-infos/e14418c6-ba74-4bf1-b494-b733fa8ac57c_ROC-min.png?auto=compress,format',
    'https://lh3.googleusercontent.com/p/AF1QipPvOuIDbtjvkrIAa17_mKj68SVbMruZPLH59wHE=s680-w680-h510-rw',
    'https://lh3.googleusercontent.com/gps-cs-s/APNQkAEijskbvYV3XMxPpn7pYBD49-o9dZiKwPkz7h0SjhPDBns3XZWT3ax_pQJmSFL0lLrSCgxvL2EXHO15QQaeQxn2cEoYBso_RvE_vGooH0wj3DhQ410iLQJJVFkSSwjA1gOGvCwy=s680-w680-h510-rw',
    'assets/funerarium-foceo.jpg',
    'assets/crematorio-saint-pierre.jpg',
    'https://pompesfunebres.marseille.fr/wp-content/uploads/2019/10/ALO_4406-1-1024x733.jpg',
    'assets/funerarium-foceo2.jpg',
    'assets/funerarium-saint-pierre-rosa.jpg',
    'assets/funeraria-pfg-pincede.jpg',
  ];
  const idx = homes.findIndex(x => x.id === funerariumId);
  const img = h.img || IMAGES[idx % IMAGES.length];

  return (
    <main>
      {/* Banner */}
      <section className="px-5 sm:px-8 pt-14 sm:pt-20 md:pt-28 pb-12 sm:pb-16 md:pb-20 page-hero-banner" style={{ '--banner-bg-img': `url(${img})` }}>
        <div className="max-w-7xl mx-auto">
          <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
            <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
            <Icon name="chevron_right" className="text-[10px]" />
            <button onClick={() => setRoute('funerariums')} className="hover:opacity-70">Funérariums</button>
            <Icon name="chevron_right" className="text-[10px]" />
            <span style={{ color: 'var(--on-surface)' }}>{h.district}</span>
          </nav>
          <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>{h.operator}</p>
          <h1 className="font-serif text-4xl md:text-6xl lg:text-7xl tracking-tight leading-[1.02] max-w-4xl" style={{ color: 'var(--on-surface)' }}>
            {h.name}
          </h1>
          <div className="flex flex-wrap items-center gap-4 mt-6">
            <span className="inline-flex items-center gap-2 text-sm" style={{ color: 'var(--on-surface-variant)' }}>
              <Icon name="location_on" className="text-base" style={{ color: 'var(--primary)' }} />{h.district}
            </span>
            {h.crematorium && (
              <span className="px-3 py-1 text-[10px] uppercase tracking-widest font-semibold" style={{ background: 'color-mix(in srgb, var(--primary) 12%, transparent)', color: 'var(--primary)' }}>Crématorium</span>
            )}
          </div>
        </div>
      </section>

      {/* Contenu principal */}
      <section className="px-8 py-20 md:py-28">
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16">

          {/* Colonne gauche — image + infos clés */}
          <div className="lg:col-span-5 lg:sticky lg:top-28 self-start flex flex-col gap-8">
            <div className="aspect-[4/3] overflow-hidden" style={{ background: 'var(--surface-container-low)' }}>
              <img src={img} alt={h.name} className="w-full h-full object-cover" />
            </div>

            <div className="p-8 flex flex-col gap-6" style={{ background: 'var(--surface-container-lowest)', boxShadow: '0 2px 20px rgba(20,20,30,0.05)' }}>
              <div>
                <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--on-surface-variant)' }}>Adresse</p>
                <p className="text-sm leading-snug" style={{ color: 'var(--on-surface)' }}>{h.address}</p>
              </div>
              {h.phone && (
                <div>
                  <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--on-surface-variant)' }}>Téléphone</p>
                  <a href={`tel:${h.phone.replace(/\s/g, '')}`} className="text-sm transition-opacity hover:opacity-70" style={{ color: 'var(--primary)' }}>{h.phone}</a>
                </div>
              )}
              {h.email && (
                <div>
                  <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--on-surface-variant)' }}>Email</p>
                  <a href={`mailto:${h.email}`} className="text-sm transition-opacity hover:opacity-70" style={{ color: 'var(--primary)' }}>{h.email}</a>
                </div>
              )}
              <div>
                <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--on-surface-variant)' }}>Horaires</p>
                <p className="text-sm" style={{ color: 'var(--on-surface)' }}>{h.hours}</p>
              </div>
              {h.website && (
                <div>
                  <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--on-surface-variant)' }}>Site web</p>
                  <a href={`https://${h.website}`} target="_blank" rel="noopener noreferrer" className="text-xs underline underline-offset-4 hover:opacity-70 break-all" style={{ color: 'var(--primary)' }}>{h.website}</a>
                </div>
              )}
              <div style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)', paddingTop: '1.25rem' }}>
                <div className="flex flex-wrap gap-4">
                  {h.rooms && <span className="inline-flex items-center gap-2 text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface)' }}><Icon name="meeting_room" className="text-sm" style={{ color: 'var(--primary)' }} />{h.rooms} salons</span>}
                  {h.parking && <span className="inline-flex items-center gap-2 text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface)' }}><Icon name="local_parking" className="text-sm" style={{ color: 'var(--primary)' }} />Parking</span>}
                  {h.crematorium && <span className="inline-flex items-center gap-2 text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface)' }}><Icon name="whatshot" className="text-sm" style={{ color: 'var(--primary)' }} />Crématorium</span>}
                </div>
              </div>
            </div>
          </div>

          {/* Colonne droite — description + CTA */}
          <div className="lg:col-span-7 flex flex-col gap-10">
            <div>
              <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>À propos de l'établissement</p>
              <h2 className="font-serif text-3xl md:text-4xl mb-6 leading-tight" style={{ color: 'var(--on-surface)' }}>
                {h.name}
              </h2>
              <p className="text-base md:text-lg leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{h.description}</p>
            </div>

            {/* CTA livraison */}
            <div className="p-8 md:p-10" style={{ background: 'var(--surface-container-low)' }}>
              <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Livraison de fleurs</p>
              <h3 className="font-serif text-2xl md:text-3xl mb-4 leading-tight" style={{ color: 'var(--on-surface)' }}>
                Livraison de fleurs funéraires à {h.name.split('—')[0].trim()}
              </h3>
              <p className="text-sm leading-relaxed mb-8" style={{ color: 'var(--on-surface-variant)' }}>
                Nous coordonnons directement la livraison de fleurs deuil avec les équipes de cet établissement. Couronnes de fleurs funéraires, gerbes de fleurs deuil, coussins et compositions florales funéraires — livrés à l'heure et en parfait état à Marseille.
              </p>
              <div className="flex flex-wrap gap-4">
                <button onClick={() => setRoute('boutique')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
                  Commander des fleurs <Icon name="local_florist" className="text-sm" />
                </button>
                <button onClick={() => setRoute('contact')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}>
                  Nous contacter
                </button>
              </div>
            </div>

            {/* Lien retour */}
            <button onClick={() => setRoute('funerariums')} className="self-start inline-flex items-center gap-2 text-sm transition-opacity hover:opacity-70" style={{ color: 'var(--on-surface-variant)' }}>
              <Icon name="arrow_back" className="text-base" />
              Voir tous les funérariums
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Page Guide et protocole ----
function GuidePage({ setRoute }) {
  const articles = window.FDL_DATA.GUIDE_ARTICLES;
  return (
    <main>
      <section className="px-5 sm:px-8 pt-14 sm:pt-20 md:pt-28 pb-12 sm:pb-16 page-hero-banner" style={{ '--banner-bg-img': 'url(assets/protocolo-ceremonia.jpg)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10 items-end">
          <div className="lg:col-span-8">
            <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
              <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
              <Icon name="chevron_right" className="text-[10px]" />
              <span>Guide et protocole</span>
            </nav>
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Ressource pratique</p>
            <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-7xl tracking-tight leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
              Guide funéraire<br /><span className="italic">Marseille</span>
            </h1>
          </div>
          <div className="lg:col-span-4">
            <p className="leading-relaxed text-base md:text-[17px] max-w-md" style={{ color: 'var(--on-surface-variant)' }}>
              Quelle fleur pour un enterrement à Marseille, protocole de cérémonie, démarches après un décès : tout ce que vous devez savoir pour organiser vos obsèques avec sérénité.
            </p>
          </div>
        </div>
      </section>

      <section className="px-8 py-24 md:py-32">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col">
            {articles.map(art => (
              <article key={art.id} className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-16 py-14 md:py-16" style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' }}>
                <div className="md:col-span-3">
                  <div className="flex items-baseline gap-4">
                    <span className="font-serif text-5xl italic" style={{ color: 'color-mix(in srgb, var(--primary) 30%, transparent)' }}>{art.num}</span>
                    <span className="uppercase tracking-widest text-[10px]" style={{ color: 'var(--primary)' }}>{art.kicker}</span>
                  </div>
                </div>
                <div className="md:col-span-6">
                  <h2 className="font-serif text-3xl md:text-4xl mb-4" style={{ color: 'var(--on-surface)' }}>{art.title}</h2>
                  <p className="text-base leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{art.summary}</p>
                  <div className="flex flex-wrap gap-2 mt-5">
                    {art.keywords.slice(0, 2).map(kw => (
                      <span key={kw} className="px-3 py-1 text-[10px] uppercase tracking-widest" style={{ background: 'var(--surface-container-low)', color: 'var(--on-surface-variant)' }}>{kw}</span>
                    ))}
                  </div>
                </div>
                <div className="md:col-span-3 flex flex-col justify-end">
                  <button className="self-start inline-flex items-center gap-3 px-6 py-3 text-[11px] uppercase tracking-widest font-medium transition-all hover:opacity-90" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }} onClick={() => setRoute('article-' + art.id)}>
                    Lire l'article
                    <Icon name="arrow_forward" className="text-[14px]" />
                  </button>
                </div>
              </article>
            ))}
            <div style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' }} />
          </div>
        </div>
      </section>

      <section className="px-8 py-20" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-3xl mx-auto text-center">
          <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Besoin d'aide ?</p>
          <h2 className="font-serif text-3xl md:text-4xl mb-6" style={{ color: 'var(--on-surface)' }}>
            Livraison fleurs obsèques express —<br /><span className="italic">disponibles 24h/24</span>
          </h2>
          <p className="text-sm leading-relaxed mb-8 max-w-lg mx-auto" style={{ color: 'var(--on-surface-variant)' }}>
            Notre équipe répond à vos questions sur les fleurs pour obsèques à Marseille, la livraison de fleurs pour enterrement et les délais en urgence. Livraison de fleurs deuil express disponible 24h/24.
          </p>
          <div className="flex flex-wrap gap-4 justify-center">
            <button onClick={() => setRoute('contact')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
              Nous contacter <Icon name="arrow_forward" className="text-sm" />
            </button>
            <button onClick={() => setRoute('boutique')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}>
              Voir nos créations
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Page Contact ----
function ContactPage({ setRoute }) {
  const [sent, setSent] = useStateNP(false);
  const [form, setForm] = useStateNP({ name: '', email: '', phone: '', message: '', urgency: false });
  const [faqOpen, setFaqOpen] = useStateNP(null);

  function handleSubmit(e) { e.preventDefault(); setSent(true); }

  return (
    <main>
      <section className="px-5 sm:px-8 pt-14 sm:pt-20 md:pt-28 pb-12 sm:pb-16 page-hero-banner" style={{ '--banner-bg-img': 'url(assets/cimetiere-flores.jpg)' }}>
        <div className="max-w-7xl mx-auto">
          <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
            <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
            <Icon name="chevron_right" className="text-[10px]" />
            <span>Contact</span>
          </nav>
          <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Nous joindre</p>
          <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-7xl tracking-tight leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
            Contact &amp; <span className="italic">urgences</span>
          </h1>
        </div>
      </section>

      <section className="px-5 sm:px-8 py-16 sm:py-24 md:py-32">
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-24">
          <div className="order-2 lg:order-1 lg:col-span-4 lg:sticky lg:top-28 self-start space-y-4 sm:space-y-6">
            {[
              { icon: 'schedule', title: 'Urgence décès', desc: 'Livraison fleurs obsèques express à Marseille — Commandez vos fleurs funéraires en urgence, disponible 24h/24, 7j/7.', value: '+33 4 91 00 00 00' },
              { icon: 'mail', title: 'Email', desc: 'Pour les demandes de devis, commandes et informations générales.', value: 'contact@fleursdeuilmarseille.fr' },
              { icon: 'location_on', title: 'Atelier', desc: 'Notre atelier est situé dans le quartier du Panier, au cœur du vieux Marseille.', value: 'Quartier du Panier, 13002 Marseille' },
              { icon: 'local_shipping', title: 'Livraison', desc: 'Livraison de gerbes de fleurs deuil 24h à Marseille — Aix, Aubagne, La Ciotat et toute la PACA.', value: '7j/7 · Jour même' },
            ].map(item => (
              <div key={item.title} className="p-6" style={{ background: 'var(--surface-container-low)' }}>
                <div className="flex items-center gap-3 mb-3">
                  <Icon name={item.icon} className="text-xl" style={{ color: 'var(--primary)' }} />
                  <h3 className="font-medium text-sm uppercase tracking-widest" style={{ color: 'var(--primary)' }}>{item.title}</h3>
                </div>
                <p className="text-sm leading-relaxed mb-2" style={{ color: 'var(--on-surface-variant)' }}>{item.desc}</p>
                <p className="text-sm font-medium" style={{ color: 'var(--on-surface)' }}>{item.value}</p>
              </div>
            ))}
          </div>

          <div className="order-1 lg:order-2 lg:col-span-8">
            {sent ? (
              <div className="flex flex-col items-center justify-center py-24 text-center">
                <Icon name="check_circle" className="text-6xl mb-6" style={{ color: 'var(--primary)' }} />
                <h2 className="font-serif text-3xl mb-4" style={{ color: 'var(--on-surface)' }}>Message envoyé</h2>
                <p className="text-sm max-w-md" style={{ color: 'var(--on-surface-variant)' }}>Nous vous répondrons dans les meilleurs délais. Pour une urgence, appelez-nous directement.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {[
                    { name: 'name', label: 'Votre nom', placeholder: 'Marie Dupont', required: true },
                    { name: 'email', label: 'Email', placeholder: 'marie@exemple.fr', required: true, type: 'email' },
                    { name: 'phone', label: 'Téléphone', placeholder: '+33 6 00 00 00 00', type: 'tel' },
                  ].map(field => (
                    <div key={field.name}>
                      <label className="block text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--primary)' }}>{field.label}</label>
                      <input type={field.type || 'text'} placeholder={field.placeholder} required={field.required} value={form[field.name]} onChange={e => setForm(f => ({ ...f, [field.name]: e.target.value }))} className="w-full px-4 py-3 text-sm focus:outline-none" style={{ background: '#ffffff', color: 'var(--on-surface)', borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 15%, transparent)' }} />
                    </div>
                  ))}
                </div>
                <div>
                  <label className="block text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--primary)' }}>Message</label>
                  <textarea rows={5} placeholder="Décrivez vos besoins : type de fleurs, funérarium de livraison, date et heure de la cérémonie..." required value={form.message} onChange={e => setForm(f => ({ ...f, message: e.target.value }))} className="w-full px-4 py-3 text-sm focus:outline-none resize-none" style={{ background: '#ffffff', color: 'var(--on-surface)', borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 15%, transparent)' }} />
                </div>
                <label className="flex items-center gap-3 cursor-pointer">
                  <input type="checkbox" checked={form.urgency} onChange={e => setForm(f => ({ ...f, urgency: e.target.checked }))} className="w-4 h-4 focus:ring-0 focus:ring-offset-0" style={{ accentColor: 'var(--primary)' }} />
                  <span className="text-sm" style={{ color: 'var(--on-surface-variant)' }}>Il s'agit d'une urgence décès — réponse souhaitée dans l'heure</span>
                </label>
                <button type="submit" className="inline-flex items-center gap-3 px-10 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
                  Envoyer le message <Icon name="send" className="text-sm" />
                </button>
              </form>
            )}
          </div>
        </div>
      </section>

      {/* FAQ Contact */}
      <section className="px-8 py-24 md:py-32" style={{ background: 'var(--surface-container-lowest)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-14 lg:gap-20">
          <div className="lg:col-span-4 lg:sticky lg:top-28 self-start">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Avant de nous écrire</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.06]" style={{ color: 'var(--on-surface)' }}>
              Questions fréquentes<br /><span className="italic">sur nos fleurs funéraires</span>
            </h2>
            <p className="mt-6 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
              Les réponses aux demandes les plus courantes. Si votre question n'y figure pas, le formulaire ci-dessus est là pour ça.
            </p>
          </div>
          <div className="lg:col-span-8">
            {[
              { q: 'Quel est le délai pour passer une commande en urgence ?', a: "Notre service d'urgence fonctionne 24h/24. Pour une cérémonie le jour même ou le lendemain matin, appelez-nous directement par téléphone — nous pouvons préparer et livrer une composition en 2 à 4 heures selon le secteur." },
              { q: 'Puis-je commander par téléphone plutôt que par le formulaire ?', a: "Oui, absolument. Le formulaire est pratique pour les commandes anticipées, mais pour les urgences ou si vous préférez parler à quelqu'un, notre équipe est joignable par téléphone et par email tous les jours de 8h à 20h." },
              { q: 'Comment préciser le funérarium ou le lieu de livraison ?', a: "Indiquez le nom complet de l'établissement et l'adresse dans le champ message, ainsi que la date et l'heure de la cérémonie. Nous prendrons contact directement avec l'établissement pour confirmer la remise." },
              { q: 'Puis-je demander un devis avant de commander ?', a: "Oui. Décrivez votre besoin dans le formulaire (type de composition, coloris souhaités, budget indicatif) et nous vous répondrons avec une proposition tarifée dans les meilleurs délais, généralement sous 1 à 2 heures en journée." },
              { q: 'Livrez-vous en dehors de Marseille ?', a: "Nous livrons dans toute la zone Provence : Aix-en-Provence, Aubagne, La Ciotat, Cassis, Martigues, Salon-de-Provence, Les Baux-de-Provence, Arles et l'ensemble des communes des Bouches-du-Rhône. Précisez votre commune dans le message et nous confirmons la disponibilité." },
              { q: 'Acceptez-vous les commandes de dernière minute le week-end ou les jours fériés ?', a: "Oui. Notre atelier fonctionne 7 jours sur 7, y compris les jours fériés. Les commandes de dernière minute sont acceptées sous réserve de disponibilité des fleurs — n'hésitez pas à nous appeler directement pour les délais très courts." },
            ].map((f, i) => (
              <div key={i} style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 10%, transparent)' }}>
                <button className="w-full flex items-center justify-between gap-6 py-6 text-left hover:opacity-70 transition-opacity" onClick={() => setFaqOpen(faqOpen === i ? null : i)}>
                  <div className="flex items-center gap-5 min-w-0">
                    <span className="font-serif italic text-[10px] flex-shrink-0" style={{ color: 'color-mix(in srgb, var(--primary) 50%, transparent)' }}>{String(i + 1).padStart(2, '0')}</span>
                    <span className="text-sm font-medium leading-snug" style={{ color: 'var(--on-surface)' }}>{f.q}</span>
                  </div>
                  <Icon name="expand_more" className="flex-shrink-0 transition-transform duration-300" style={{ color: 'var(--primary)', transform: faqOpen === i ? 'rotate(180deg)' : 'rotate(0deg)' }} />
                </button>
                {faqOpen === i && (
                  <div className="pb-6 pl-10 pr-6">
                    <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{f.a}</p>
                  </div>
                )}
              </div>
            ))}
            <div style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 10%, transparent)' }} />
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Page À propos ----
function AProposPage({ setRoute }) {
  return (
    <main>
      <section className="px-5 sm:px-8 pt-14 sm:pt-20 md:pt-28 pb-12 sm:pb-16 page-hero-banner" style={{ '--banner-bg-img': 'url(assets/sobre-nosotros.jpg)' }}>
        <div className="max-w-7xl mx-auto">
          <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
            <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
            <Icon name="chevron_right" className="text-[10px]" />
            <span>À propos</span>
          </nav>
          <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Notre parcours</p>
          <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-7xl tracking-tight leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
            Artisans du<br /><span className="italic">recueillement</span>
          </h1>
        </div>
      </section>

      <section className="px-8 py-24 md:py-32">
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-start">
          <div className="lg:col-span-7 space-y-8">
            <div>
              <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Notre atelier</p>
              <h2 className="font-serif text-4xl md:text-5xl mb-6 leading-tight" style={{ color: 'var(--on-surface)' }}>
                Fleurs de Deuil Marseille —<br /><span className="italic">votre fleuriste deuil</span>
              </h2>
              <div className="space-y-5 text-base leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
                <p>Fondé dans le quartier du Panier, au cœur du vieux Marseille, notre atelier floral est l'adresse de référence comme fleuriste deuil à Marseille depuis plus de dix ans. Nous avons développé une expertise unique dans la création de compositions florales funéraires destinées aux cérémonies d'obsèques, aux funérariums et aux cimetières de Marseille et de toute la région Provence-Alpes-Côte d'Azur.</p>
                <p>Notre engagement est simple : apporter la beauté et la dignité des fleurs à chaque hommage, avec la discrétion et la sensibilité que ces moments exigent. Nous travaillons avec des fleurs fraîches de saison, sourcées auprès de producteurs locaux des Bouches-du-Rhône et de la région PACA.</p>
                <p>Nous coordonnons quotidiennement nos livraisons avec les principaux funérariums de Marseille — du Funérarium Municipal Saint-Pierre aux établissements Roc Eclerc, JDS, Phénix et La Rosa — pour garantir que vos compositions arrivent en temps voulu, avec soin et respect.</p>
              </div>
            </div>
            <div>
              <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Notre philosophie</p>
              <div className="space-y-5 text-base leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
                <p>Une composition funéraire n'est pas un simple geste de convenance : c'est la traduction florale de ce que les mots ne parviennent pas à exprimer. Chaque pièce que nous créons porte une intention, incarne une affection, et accompagne une famille dans l'un des moments les plus marquants de son existence.</p>
                <p>C'est pourquoi chaque commande repart de zéro. Chaque couronne, chaque gerbe, chaque bouquet est façonné à la main, pièce par pièce, avec la conscience de ce que représente l'instant où il sera déposé.</p>
              </div>
            </div>
          </div>
          <div className="lg:col-span-5 space-y-6">
            <div className="aspect-[4/5] overflow-hidden" style={{ background: 'var(--surface-container)' }}>
              <img src="assets/sobre-nosotros.jpg" alt="Atelier Fleurs de Deuil Marseille" className="w-full h-full object-cover" />
            </div>
            <div className="grid grid-cols-2 gap-4">
              {[
                { n: '10+', l: "Années d'expérience à Marseille" },
                { n: '7j/7', l: 'Service disponible' },
                { n: '9', l: 'Funérariums partenaires' },
                { n: '< 4h', l: 'Délai de livraison' },
              ].map(s => (
                <div key={s.l} className="p-5" style={{ background: 'var(--surface-container-low)' }}>
                  <p className="font-serif text-3xl mb-1" style={{ color: 'var(--primary)' }}>{s.n}</p>
                  <p className="text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>{s.l}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Notre processus */}
      <section className="px-8 py-24 md:py-32">
        <div className="max-w-7xl mx-auto">
          <div className="max-w-2xl mb-16">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>De la commande à la livraison</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-tight" style={{ color: 'var(--on-surface)' }}>
              Comment nous <span className="italic">travaillons</span>
            </h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-0">
            {[
              {
                n: '01',
                titre: 'Votre commande',
                texte: 'Commander vos fleurs funéraires en ligne, par téléphone ou par e-mail. Précisez vos souhaits : type de composition (couronne, gerbe de fleurs deuil, coussin de fleurs deuil), coloris, message de ruban, date et lieu de livraison. Notre équipe vous répond dans l\'heure.',
              },
              {
                n: '02',
                titre: 'Création artisanale',
                texte: 'Nos fleuristes confectionnent votre composition à la main, avec des fleurs approvisionnées chaque matin auprès de nos producteurs partenaires. Chaque pièce est façonnée selon les codes du deuil et vos souhaits personnels.',
              },
              {
                n: '03',
                titre: 'Coordination',
                texte: 'Nous contactons directement le funérarium ou la famille pour confirmer l\'horaire et le lieu précis de la cérémonie. Votre composition ne souffre d\'aucun retard ni malentendu.',
              },
              {
                n: '04',
                titre: 'Livraison sur place',
                texte: 'Nos livreurs déposent la composition directement au funérarium, à l\'église ou au cimetière, avec discrétion et ponctualité. Vous recevez une confirmation dès la remise effectuée.',
              },
            ].map((step, i, arr) => (
              <div key={step.n} className="relative p-8 md:p-10" style={{ background: i % 2 === 0 ? 'var(--surface-container-lowest)' : 'var(--surface-container-low)', borderLeft: i > 0 ? '1px solid var(--surface-container)' : 'none' }}>
                <p className="font-serif text-6xl mb-6 leading-none" style={{ color: 'var(--primary)', opacity: 0.25 }}>{step.n}</p>
                <h3 className="font-serif text-xl mb-4" style={{ color: 'var(--on-surface)' }}>{step.titre}</h3>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{step.texte}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Nos engagements */}
      <section className="px-8 py-24 md:py-32" style={{ background: 'var(--surface-container-lowest)' }}>
        <div className="max-w-7xl mx-auto">
          <div className="max-w-2xl mb-16">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Ce qui nous définit</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-tight" style={{ color: 'var(--on-surface)' }}>
              Nos <span className="italic">engagements</span>
            </h2>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-px" style={{ background: 'var(--surface-container)' }}>
            {[
              {
                icon: 'local_florist',
                titre: 'Fleurs fraîches garanties',
                texte: 'Nous travaillons exclusivement avec des fleurs livrées chaque matin depuis le marché aux fleurs de Marseille et les producteurs de la région PACA. Aucune composition n\'est confectionnée à l\'avance.',
              },
              {
                icon: 'location_on',
                titre: 'Sourcing local et de saison',
                texte: 'Nous privilégions les variétés cultivées dans les Bouches-du-Rhône et la Provence. Moins de transport, des fleurs plus fraîches, et un soutien direct aux producteurs locaux.',
              },
              {
                icon: 'handshake',
                titre: 'Coordination funérariums',
                texte: 'Nous connaissons les protocoles et les équipes de chaque funérarium partenaire à Marseille. Cette relation de confiance garantit une remise sans accroc, même dans les délais les plus courts.',
              },
              {
                icon: 'schedule',
                titre: 'Disponibilité 7 jours sur 7',
                texte: 'Le deuil n\'attend pas. Notre atelier est joignable tous les jours de 8h à 20h, y compris les week-ends et jours fériés. Un service d\'astreinte est disponible pour les urgences.',
              },
              {
                icon: 'verified',
                titre: 'Discrétion et respect',
                texte: 'Tous nos échanges, commandes et livraisons sont traités avec la plus grande confidentialité. Nos équipes sont formées à l\'accompagnement en situation de deuil.',
              },
              {
                icon: 'tune',
                titre: 'Personnalisation sans limite',
                texte: 'Couleurs, espèces florales, message de ruban, format de composition : chaque détail peut être ajusté selon vos souhaits et le profil du défunt. Aucune demande n\'est trop spécifique.',
              },
            ].map(eng => (
              <div key={eng.titre} className="p-8 md:p-10 flex flex-col gap-5" style={{ background: 'var(--surface-container-lowest)' }}>
                <span className="material-symbols-outlined text-2xl" style={{ color: 'var(--primary)' }}>{eng.icon}</span>
                <div>
                  <h3 className="font-serif text-lg mb-3" style={{ color: 'var(--on-surface)' }}>{eng.titre}</h3>
                  <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{eng.texte}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="px-8 py-20" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="font-serif text-3xl md:text-4xl mb-6" style={{ color: 'var(--on-surface)' }}>
            Un hommage <span className="italic">qui vous ressemble</span>
          </h2>
          <p className="text-sm leading-relaxed mb-8" style={{ color: 'var(--on-surface-variant)' }}>
            Contactez-nous pour discuter de vos besoins. Nous vous conseillerons sur le choix des fleurs, le format, le message du ruban et la logistique de livraison.
          </p>
          <div className="flex flex-wrap gap-4 justify-center">
            <button onClick={() => setRoute('boutique')} className="px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>Voir nos créations</button>
            <button onClick={() => setRoute('contact')} className="px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}>Nous contacter</button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Page Commune ----
function CommunePage({ communeKey, setRoute }) {
  const communes = window.FDL_DATA.COMMUNES;
  const commune = communes.find(c => `commune-${c.key}` === communeKey) || communes[0];

  return (
    <main>
      <section className="px-5 sm:px-8 pt-14 sm:pt-20 md:pt-28 pb-12 sm:pb-16 page-hero-banner" style={{ '--banner-bg-img': `url(${commune.img})` }}>
        <div className="max-w-7xl mx-auto">
          <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
            <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
            <Icon name="chevron_right" className="text-[10px]" />
            <span>Marseille &amp; communes</span>
            <Icon name="chevron_right" className="text-[10px]" />
            <span>{commune.name}</span>
          </nav>
          <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Livraison locale</p>
          <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-7xl tracking-tight leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
            Fleurs funéraires<br /><span className="italic">{commune.name}</span>
          </h1>
        </div>
      </section>

      <section className="px-8 py-24 md:py-32">
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16">
          <div className="lg:col-span-7 space-y-8">
            <div>
              <h2 className="font-serif text-3xl mb-4" style={{ color: 'var(--on-surface)' }}>
                Fleuriste funéraire à <span className="italic">{commune.name}</span>
              </h2>
              <p className="text-base leading-relaxed mb-5" style={{ color: 'var(--on-surface-variant)' }}>{commune.intro}</p>
              <div className="grid grid-cols-2 gap-4 mt-6">
                <div className="p-4" style={{ background: 'var(--surface-container-low)' }}>
                  <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--primary)' }}>Distance</p>
                  <p className="text-sm font-medium" style={{ color: 'var(--on-surface)' }}>{commune.distance}</p>
                </div>
                <div className="p-4" style={{ background: 'var(--surface-container-low)' }}>
                  <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--primary)' }}>Délai livraison</p>
                  <p className="text-sm font-medium" style={{ color: 'var(--on-surface)' }}>{commune.delai}</p>
                </div>
                <div className="p-4 col-span-2" style={{ background: 'var(--surface-container-low)' }}>
                  <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--primary)' }}>Quartiers desservis</p>
                  <p className="text-sm" style={{ color: 'var(--on-surface)' }}>{commune.quartiers}</p>
                </div>
              </div>
            </div>
            <div>
              <h3 className="font-serif text-2xl mb-5" style={{ color: 'var(--on-surface)' }}>
                Établissements funéraires à <span className="italic">{commune.name}</span>
              </h3>
              <div className="space-y-4">
                {commune.sites.map(([name, addr]) => (
                  <div key={name} className="flex items-start gap-4 p-4" style={{ background: 'var(--surface-container-low)' }}>
                    <Icon name="location_on" className="text-xl flex-shrink-0 mt-0.5" style={{ color: 'var(--primary)' }} />
                    <div>
                      <p className="text-sm font-medium" style={{ color: 'var(--on-surface)' }}>{name}</p>
                      <p className="text-xs mt-1" style={{ color: 'var(--on-surface-variant)' }}>{addr}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <h3 className="font-serif text-2xl mb-4" style={{ color: 'var(--on-surface)' }}>
                Livraison de fleurs funéraires à <span className="italic">{commune.name}</span>
              </h3>
              <p className="text-base leading-relaxed mb-6" style={{ color: 'var(--on-surface-variant)' }}>
                Notre atelier marseillais livre des couronnes, compositions et bouquets funéraires à {commune.name} (Code postal : {commune.postal}). Avec un délai de livraison de {commune.delai}, nous vous garantissons que vos fleurs arrivent à temps pour la cérémonie.
              </p>
              <button onClick={() => setRoute('boutique')} className="inline-flex items-center gap-3 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
                <span className="hidden sm:inline">Commander des fleurs pour {commune.name}</span>
              <span className="sm:hidden">Commander</span>
              <Icon name="arrow_forward" className="text-sm" />
              </button>
            </div>
          </div>
          <div className="lg:col-span-5">
            <div className="aspect-[4/5] overflow-hidden mb-6" style={{ background: 'var(--surface-container)' }}>
              <img src={commune.img} alt={`Fleurs funéraires ${commune.name}`} className="w-full h-full object-cover" />
            </div>
            <div className="p-6" style={{ background: 'var(--surface-container-low)' }}>
              <p className="text-[10px] uppercase tracking-widest mb-3" style={{ color: 'var(--primary)' }}>Nos communes</p>
              <div className="flex flex-wrap gap-2">
                {window.FDL_DATA.COMMUNES.map(c => (
                  <button key={c.key} onClick={() => setRoute(`commune-${c.key}`)} className="px-3 py-1.5 text-[11px] transition-all hover:opacity-70"
                    style={{ background: c.key === commune.key ? 'var(--primary)' : 'var(--surface-container)', color: c.key === commune.key ? 'var(--on-primary)' : 'var(--on-surface-variant)' }}>
                    {c.name}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>


      {/* Nos compositions funéraires */}
      <section className="py-28 md:py-32 px-8" style={{ background: 'var(--surface-container-lowest)' }}>
        <div className="max-w-7xl mx-auto">
          <div className="mb-14">
            <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Notre offre</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.05]" style={{ color: 'var(--on-surface)' }}>
              Nos compositions funéraires <span className="italic">à {commune.name}</span>
            </h2>
            <p className="max-w-2xl leading-relaxed mt-5 text-base" style={{ color: 'var(--on-surface-variant)' }}>
              Depuis notre atelier marseillais, nous créons des compositions florales pour chaque type de cérémonie funèbre à {commune.name} — livrées en {commune.delai} dans toute la ville.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { icon: 'local_florist', title: 'Couronnes funéraires', desc: 'Symbole traditionnel du recueillement, avec ruban personnalisé au prénom du défunt. Disponibles en blanc, ivoire ou tons naturels de Provence.' },
              { icon: 'spa', title: 'Gerbes et bouquets', desc: 'Gerbes imposantes pour les cérémonies en chapelle ou en plein air. Réalisées en fleurs fraîches de saison sourcées auprès de producteurs locaux.' },
              { icon: 'grid_view', title: 'Coussins floraux', desc: "Compositions posées sur le cercueil, symbole d'accompagnement intime. Format standard ou sur mesure selon vos besoins et le protocole du funérarium." },
              { icon: 'eco', title: "Compositions d'entrée", desc: "Arrangements floraux pour l'entrée du funérarium ou de la chapelle. Discrets et élégants, dans le respect du deuil et des familles endeuillées." },
            ].map(item => (
              <div key={item.title} className="p-7" style={{ background: 'var(--surface-container-low)' }}>
                <Icon name={item.icon} className="text-2xl mb-4" style={{ color: 'var(--primary)' }} />
                <h3 className="font-serif text-lg mb-3" style={{ color: 'var(--on-surface)' }}>{item.title}</h3>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{item.desc}</p>
              </div>
            ))}
          </div>
          <div className="mt-10">
            <button onClick={() => setRoute('boutique')} className="inline-flex items-center gap-3 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
              Voir toutes nos créations <Icon name="arrow_forward" className="text-sm" />
            </button>
          </div>
        </div>
      </section>

      {/* Notre engagement */}
      <section className="py-28 md:py-32 px-8">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
            <div className="lg:col-span-5">
              <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Ce qui nous définit</p>
              <h2 className="font-serif text-4xl md:text-5xl leading-[1.05]" style={{ color: 'var(--on-surface)' }}>
                Notre engagement <span className="italic">pour {commune.name}</span>
              </h2>
              <p className="leading-relaxed mt-6 text-base" style={{ color: 'var(--on-surface-variant)' }}>
                Livrer des fleurs funéraires à {commune.name} ({commune.distance}) est un engagement que nous prenons avec la même rigueur que pour chaque livraison en centre-ville de Marseille.
              </p>
            </div>
            <div className="lg:col-span-7 grid grid-cols-1 md:grid-cols-2 gap-6">
              {[
                { icon: 'schedule', title: `Livraison en ${commune.delai}`, desc: `Délai garanti depuis notre atelier jusqu'aux funérariums et cimetières de ${commune.name}, 7 jours sur 7, dimanches et jours fériés inclus.` },
                { icon: 'verified', title: 'Fleurs fraîches de Provence', desc: 'Toutes nos compositions sont réalisées avec des fleurs fraîches de saison, sourcées auprès de producteurs locaux de la région provençale.' },
                { icon: 'handshake', title: 'Coordination avec les pompes funèbres', desc: `Nous travaillons en lien direct avec les pompes funèbres de ${commune.name} pour garantir l'arrivée des fleurs avant chaque cérémonie.` },
                { icon: 'tune', title: 'Personnalisation sur mesure', desc: "Ruban personnalisé, choix des fleurs, message funèbre — chaque détail est traité avec soin, discrétion et respect des familles." },
              ].map(item => (
                <div key={item.title} className="flex gap-5 p-6" style={{ background: 'var(--surface-container-low)' }}>
                  <Icon name={item.icon} className="text-2xl flex-shrink-0 mt-1" style={{ color: 'var(--primary)' }} />
                  <div>
                    <h3 className="text-sm font-semibold mb-2" style={{ color: 'var(--on-surface)' }}>{item.title}</h3>
                    <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ commune */}
      <section className="py-28 md:py-36 px-8" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-14 lg:gap-20">
          <div className="lg:col-span-4 lg:sticky lg:top-28 self-start">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Questions fréquentes</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.06]" style={{ color: 'var(--on-surface)' }}>
              Tout sur <span className="italic">notre service à {commune.name}</span>
            </h2>
            <p className="mt-6 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
              Réponses claires sur notre service de livraison de fleurs funéraires à {commune.name}.
            </p>
          </div>
          <div className="lg:col-span-8">
            {[
              { q: `Quel est le délai de livraison à ${commune.name} ?`, a: `Nous livrons à ${commune.name} en ${commune.delai} depuis notre atelier marseillais. Pour les cérémonies du matin, nous recommandons de passer commande avant 9h afin de garantir la livraison à temps.` },
              { q: `Livrez-vous dans tous les quartiers de ${commune.name} ?`, a: `Oui, nous desservons l'ensemble des quartiers de ${commune.name} : ${commune.quartiers}.` },
              { q: `Pouvez-vous livrer directement au funérarium ou au cimetière de ${commune.name} ?`, a: `Absolument. Nous livrons directement à ${commune.sites.map(s => s[0]).join(' et ')}. Précisez simplement le lieu de cérémonie lors de votre commande.` },
              { q: `Proposez-vous un service d'urgence pour ${commune.name} ?`, a: `Oui, pour les situations d'urgence, contactez-nous directement par téléphone. Nous faisons tout notre possible pour répondre dans les meilleurs délais, y compris en dehors des horaires habituels.` },
              { q: `Y a-t-il un supplément de livraison pour ${commune.name} ?`, a: `Nos tarifs incluent les frais de livraison à ${commune.name} sans supplément caché. Nos compositions funéraires débutent à partir de 45 €. Le prix final vous est communiqué lors de la confirmation de commande.` },
            ].map((f, i) => {
              const [open, setOpen] = React.useState(false);
              return (
                <div key={i} style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 10%, transparent)' }}>
                  <button className="w-full flex items-center justify-between gap-6 py-6 text-left hover:opacity-70 transition-opacity" onClick={() => setOpen(v => !v)}>
                    <div className="flex items-center gap-5 min-w-0">
                      <span className="font-serif italic text-[10px] flex-shrink-0" style={{ color: 'color-mix(in srgb, var(--primary) 50%, transparent)' }}>{String(i + 1).padStart(2, '0')}</span>
                      <span className="text-sm font-medium leading-snug" style={{ color: 'var(--on-surface)' }}>{f.q}</span>
                    </div>
                    <Icon name="expand_more" className="flex-shrink-0 transition-transform duration-300" style={{ color: 'var(--primary)', transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }} />
                  </button>
                  {open && <div className="pb-6 pl-10 pr-6"><p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{f.a}</p></div>}
                </div>
              );
            })}
            <div style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 10%, transparent)' }} />
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Pages de service ----
function FleuristeMarseillePage({ setRoute }) {
  return (
    <main>
      <section className="px-5 sm:px-8 pt-14 sm:pt-20 md:pt-28 pb-12 sm:pb-16 page-hero-banner" style={{ '--banner-bg-img': 'url(assets/florista-marseille.jpg)' }}>
        <div className="max-w-7xl mx-auto">
          <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
            <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
            <Icon name="chevron_right" className="text-[10px]" />
            <span>Fleuriste funéraire Marseille</span>
          </nav>
          <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Service</p>
          <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-7xl tracking-tight leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
            Fleuriste funéraire<br /><span className="italic">Marseille</span>
          </h1>
        </div>
      </section>

      <section className="px-8 py-24 md:py-32">
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16">
          <div className="lg:col-span-7 space-y-10">
            <div>
              <h2 className="font-serif text-4xl mb-5" style={{ color: 'var(--on-surface)' }}>
                Votre fleuriste funéraire <span className="italic">à Marseille</span>
              </h2>
              <div className="space-y-5 text-base leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
                <p>Artisan fleuriste spécialisé dans les <strong style={{ color: 'var(--on-surface)' }}>fleurs funéraires à Marseille</strong>, notre atelier crée des couronnes, compositions et bouquets funéraires pour accompagner vos cérémonies d'obsèques avec dignité et élégance.</p>
                <p>Nous travaillons exclusivement avec des fleurs fraîches de saison, sourcées auprès de producteurs locaux de Provence. Chaque composition est réalisée à la main, dans le respect des traditions et des souhaits de chaque famille.</p>
                <p>Notre service de <strong style={{ color: 'var(--on-surface)' }}>fleuriste funéraire Marseille</strong> couvre tous les arrondissements (1er au 16ème) et s'étend aux communes environnantes : Aix-en-Provence, Aubagne, La Ciotat, Cassis, Martigues, Salon-de-Provence et Arles.</p>
              </div>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {[
                { icon: 'local_florist', title: 'Couronnes funéraires', desc: 'Symbole universel du recueillement, livrées avec ruban personnalisé.' },
                { icon: 'spa', title: 'Compositions florales', desc: 'Centres, gerbes et coussins pour la cérémonie et le cercueil.' },
                { icon: 'eco', title: 'Bouquets funéraires', desc: 'Gestes personnels liés à la main, offerts à la famille.' },
                { icon: 'local_shipping', title: 'Livraison même jour', desc: 'Express dans tout Marseille — service 24h/24 pour urgences.' },
              ].map(item => (
                <div key={item.title} className="p-6" style={{ background: 'var(--surface-container-low)' }}>
                  <Icon name={item.icon} className="text-2xl mb-3" style={{ color: 'var(--primary)' }} />
                  <h3 className="text-sm font-semibold mb-2" style={{ color: 'var(--on-surface)' }}>{item.title}</h3>
                  <p className="text-sm" style={{ color: 'var(--on-surface-variant)' }}>{item.desc}</p>
                </div>
              ))}
            </div>
            <div className="flex flex-wrap gap-4">
              <button onClick={() => setRoute('boutique')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
                Voir les créations <Icon name="arrow_forward" className="text-sm" />
              </button>
              <button onClick={() => setRoute('contact')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}>
                Nous contacter
              </button>
            </div>
          </div>
          <div className="lg:col-span-5">
            <div className="aspect-[4/5] overflow-hidden" style={{ background: 'var(--surface-container)' }}>
              <img src="assets/florista-marseille-service.jpg" alt="Fleuriste funéraire Marseille" className="w-full h-full object-cover" />
            </div>
          </div>
        </div>
      </section>

      {/* Nos Créations */}
      <section className="py-28 md:py-32 px-8" style={{ background: 'var(--surface-container-lowest)' }}>
        <div className="max-w-7xl mx-auto">
          <div className="flex justify-between items-end mb-16 md:mb-20">
            <div>
              <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Collection signature</p>
              <h2 className="font-serif text-4xl md:text-5xl italic leading-tight" style={{ color: 'var(--on-surface)' }}>Nos Créations</h2>
              <p className="max-w-md leading-relaxed mt-4 text-sm md:text-base" style={{ color: 'var(--on-surface-variant)' }}>Compositions florales délicates réalisées à la main pour honorer la mémoire de vos proches à Marseille.</p>
            </div>
            <button onClick={() => setRoute('boutique')} className="hidden md:block uppercase tracking-widest text-[11px] underline underline-offset-8 hover:opacity-70 transition-opacity" style={{ color: 'var(--primary)' }}>
              Toute la collection →
            </button>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12">
            {window.FDL_DATA.PRODUCTS.slice(0, 3).map(p => (
              <article key={p.id} className="group cursor-pointer" onClick={() => setRoute('boutique')}>
                <div className="aspect-[4/5] mb-8 overflow-hidden" style={{ background: 'var(--surface-container-low)' }}>
                  <img src={p.img} alt={p.name} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" />
                </div>
                <p className="uppercase tracking-widest text-[10px] mb-2" style={{ color: 'var(--primary)' }}>{p.category}</p>
                <h3 className="font-serif text-xl md:text-2xl mb-2" style={{ color: 'var(--on-surface)' }}>{p.name}</h3>
                <p className="text-sm mb-8" style={{ color: 'var(--on-surface-variant)' }}>{p.tagline}</p>
                <div className="flex justify-between items-center">
                  <span className="font-serif text-lg" style={{ color: 'var(--on-surface)' }}>{p.price.toFixed(2).replace('.', ',')} €</span>
                  <span className="uppercase tracking-widest text-[10px] font-medium group-hover:opacity-70" style={{ color: 'var(--primary)', borderBottom: '1px solid color-mix(in srgb, var(--primary) 40%, transparent)', paddingBottom: '2px' }}>Envoyer cet hommage</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Nos engagements */}
      <section className="py-28 md:py-36 px-8" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-7xl mx-auto">
          <div className="max-w-3xl mb-16 md:mb-20">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Ce qui nous définit</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.05]" style={{ color: 'var(--on-surface)' }}>
              Nos <span className="italic">engagements</span>
            </h2>
            <p className="leading-relaxed mt-6 text-base max-w-2xl" style={{ color: 'var(--on-surface-variant)' }}>
              Chaque détail compte lorsqu'il s'agit d'accompagner une famille dans un moment aussi délicat. Voici les valeurs qui guident notre travail au quotidien.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              { icon: 'eco', title: 'Fleurs fraîches de saison', desc: 'Nous travaillons exclusivement avec des fleurs fraîches issues de producteurs locaux de Provence. Sans fleurs artificielles, sans intermédiaires.' },
              { icon: 'handshake', title: 'Discrétion et respect', desc: 'Nous comprenons la sensibilité de ces moments. Chaque livraison est effectuée avec la plus grande discrétion et délicatesse envers les familles.' },
              { icon: 'schedule', title: 'Ponctualité garantie', desc: 'Nous coordonnons directement avec le funérarium pour garantir que vos fleurs arrivent avant la cérémonie, sans exception.' },
              { icon: 'brush', title: 'Composition artisanale', desc: 'Chaque pièce est travaillée à la main dans notre atelier marseillais. Il n\'existe pas deux compositions identiques — chacune est unique.' },
              { icon: 'support_agent', title: 'Conseil personnalisé', desc: 'Notre équipe est disponible pour vous orienter dans le choix de la composition la plus adaptée selon le type de cérémonie.' },
              { icon: 'local_shipping', title: 'Livraison le jour même', desc: 'Pour les commandes passées avant 11h, nous garantissons la livraison dans tout Marseille et les communes de Provence le jour même.' },
            ].map(item => (
              <div key={item.title} className="p-8" style={{ background: 'var(--surface-container-lowest)' }}>
                <Icon name={item.icon} className="text-2xl mb-5" style={{ color: 'var(--primary)' }} />
                <h3 className="font-serif text-xl mb-3" style={{ color: 'var(--on-surface)' }}>{item.title}</h3>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Zones de couverture */}
      <section className="py-28 md:py-36 px-8" style={{ background: 'var(--surface-container-lowest)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 items-start">
          <div className="lg:col-span-5 lg:sticky lg:top-28 self-start">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Couverture géographique</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.05] mb-8" style={{ color: 'var(--on-surface)' }}>
              Marseille et <span className="italic">toute la Provence</span>
            </h2>
            <p className="text-base leading-relaxed mb-8" style={{ color: 'var(--on-surface-variant)' }}>
              Notre service de fleuriste funéraire couvre Marseille dans sa totalité et s'étend à toutes les communes de la région PACA. Que la cérémonie ait lieu au centre de Marseille ou dans un village des Alpilles, nous sommes à vos côtés.
            </p>
            <button onClick={() => setRoute('contact')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
              Vérifier la disponibilité <Icon name="arrow_forward" className="text-sm" />
            </button>
          </div>
          <div className="lg:col-span-7">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {[
                { zone: 'Marseille (1er–16ème)', delai: 'Livraison le jour même', detail: 'Commande avant 11h · Urgences 24h/24' },
                { zone: 'Aubagne · La Ciotat · Cassis', delai: '1 à 2 heures', detail: 'Service 7j/7' },
                { zone: 'Aix-en-Provence', delai: '2 à 3 heures', detail: 'Service 7j/7' },
                { zone: 'Salon-de-Provence', delai: '2 à 3 heures', detail: 'Service 7j/7' },
                { zone: 'Martigues', delai: '2 à 3 heures', detail: 'Service 7j/7' },
                { zone: 'Arles · Les Baux-de-Provence', delai: '3 à 4 heures', detail: 'Sur commande préalable' },
              ].map(z => (
                <div key={z.zone} className="p-6" style={{ background: 'var(--surface-container-low)' }}>
                  <p className="text-sm font-semibold mb-1" style={{ color: 'var(--on-surface)' }}>{z.zone}</p>
                  <p className="text-xs font-medium mb-1" style={{ color: 'var(--primary)' }}>{z.delai}</p>
                  <p className="text-xs" style={{ color: 'var(--on-surface-variant)' }}>{z.detail}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-28 md:py-36 px-8" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-14 lg:gap-20">
          <div className="lg:col-span-4 lg:sticky lg:top-28 self-start">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Questions fréquentes</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.06]" style={{ color: 'var(--on-surface)' }}>
              Tout ce que vous <span className="italic">devez savoir</span>
            </h2>
            <p className="mt-6 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
              Réponses claires sur notre service de fleuriste funéraire à Marseille.
            </p>
          </div>
          <div className="lg:col-span-8">
            {[
              { q: 'Combien de temps faut-il pour préparer une composition funéraire ?', a: 'Pour les commandes passées avant 11h, nous préparons et livrons le jour même. Pour les urgences nocturnes, contactez-nous directement par téléphone — notre équipe est disponible 24h/24.' },
              { q: 'Puis-je commander une composition personnalisée ?', a: 'Oui, toutes nos compositions sont personnalisables. Vous pouvez nous indiquer les couleurs préférées, le type de fleurs, le format et le message du ruban. Contactez-nous pour un devis sur mesure.' },
              { q: 'Travaillez-vous avec tous les funérariums de Marseille ?', a: 'Oui, nous coordonnons avec tous les établissements funéraires de Marseille : Funérarium Municipal, Roc Eclerc, JDS, Phénix, La Rosa, PFG et tous les autres. Il vous suffit de nous indiquer le nom et l\'adresse.' },
              { q: 'Que comprend le prix de la composition ?', a: 'Le prix comprend la composition florale réalisée à la main, le ruban personnalisé et la livraison à Marseille. Pour les communes plus éloignées, un supplément de transport peut s\'appliquer.' },
              { q: 'Proposez-vous des fleurs pour les cérémonies de crémation ?', a: 'Oui. Pour les cérémonies de crémation, nous préparons des compositions de taille adaptée — bouquets, gerbes légères et ornements floraux — pensées pour l\'espace et le protocole du Crématorium Saint-Pierre de Marseille.' },
              { q: 'Puis-je passer commande le jour même de la cérémonie ?', a: 'Oui, dans la mesure où la commande est passée avant 11h. Pour les cérémonies en après-midi, nous acceptons les commandes jusqu\'à 13h. Pour les urgences absolues, appelez-nous directement.' },
              { q: 'Quelle est la différence entre une couronne et une gerbe ?', a: 'La couronne est une composition circulaire, symbole du cycle éternel, placée verticalement près du cercueil. La gerbe est un arrangement allongé déposé horizontalement sur le cercueil. Les deux sont des gestes d\'hommage collectif.' },
              { q: 'Pouvez-vous livrer directement au cimetière ?', a: 'Oui, nous livrons dans tous les cimetières de Marseille et des communes environnantes. Indiquez-nous le nom du cimetière, le numéro de concession si vous le connaissez, et l\'heure prévue de l\'inhumation.' },
              { q: 'Quels sont les modes de paiement acceptés ?', a: 'Nous acceptons le paiement par carte bancaire, virement ou espèces. Pour les commandes urgentes, vous pouvez régler à la livraison. Nous proposons également la facturation pour les entreprises de pompes funèbres.' },
              { q: 'Avez-vous un catalogue physique ou uniquement en ligne ?', a: 'Nous disposons d\'un catalogue numérique avec tous nos modèles et tarifs. Si vous le souhaitez, vous pouvez nous rendre visite dans notre atelier du Quartier du Panier à Marseille pour voir les compositions en personne.' },
            ].map((f, i) => {
              const [open, setOpen] = React.useState(false);
              return (
                <div key={i} style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 10%, transparent)' }}>
                  <button className="w-full flex items-center justify-between gap-6 py-6 text-left hover:opacity-70 transition-opacity" onClick={() => setOpen(v => !v)}>
                    <div className="flex items-center gap-5 min-w-0">
                      <span className="font-serif italic text-[10px] flex-shrink-0" style={{ color: 'color-mix(in srgb, var(--primary) 50%, transparent)' }}>{String(i + 1).padStart(2, '0')}</span>
                      <span className="text-sm font-medium leading-snug" style={{ color: 'var(--on-surface)' }}>{f.q}</span>
                    </div>
                    <Icon name="expand_more" className="flex-shrink-0 transition-transform duration-300" style={{ color: 'var(--primary)', transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }} />
                  </button>
                  {open && <div className="pb-6 pl-10 pr-6"><p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{f.a}</p></div>}
                </div>
              );
            })}
            <div style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 10%, transparent)' }} />
          </div>
        </div>
      </section>
    </main>
  );
}

function LivraisonMarseillePage({ setRoute }) {
  return (
    <main>
      <section className="px-5 sm:px-8 pt-14 sm:pt-20 md:pt-28 pb-12 sm:pb-16 page-hero-banner" style={{ '--banner-bg-img': 'url(assets/florista-marseille-service.jpg)' }}>
        <div className="max-w-7xl mx-auto">
          <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
            <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
            <Icon name="chevron_right" className="text-[10px]" />
            <span>Livraison fleurs funéraires</span>
          </nav>
          <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Livraison</p>
          <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-7xl tracking-tight leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
            Livraison fleurs<br /><span className="italic">funéraires Marseille</span>
          </h1>
        </div>
      </section>

      <section className="px-8 py-24 md:py-32">
        <div className="max-w-7xl mx-auto space-y-16">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-14">
            <div className="lg:col-span-7 space-y-6">
              <h2 className="font-serif text-4xl" style={{ color: 'var(--on-surface)' }}>
                Livraison le jour même <span className="italic">à Marseille</span>
              </h2>
              <div className="space-y-5 text-base leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
                <p>Notre service de <strong style={{ color: 'var(--on-surface)' }}>livraison de fleurs funéraires à Marseille</strong> opère 7j/7, 24h/24. Pour toute commande passée avant 11h, nous garantissons la livraison le jour même dans tous les arrondissements de Marseille et dans les communes limitrophes.</p>
                <p>Nous coordonnons directement avec les funérariums, chambres funéraires et cimetières de Marseille pour assurer que vos compositions arrivent en temps voulu, avant la cérémonie, avec tout le soin qu'elles méritent.</p>
              </div>
            </div>
            <div className="lg:col-span-5 grid grid-cols-1 gap-4">
              {[
                { zone: 'Marseille (1er-16ème)', delai: 'Livraison le jour même', horaire: 'Commande avant 11h' },
                { zone: 'Aubagne · La Ciotat · Cassis', delai: '2 à 3 heures', horaire: 'Service 7j/7' },
                { zone: 'Aix-en-Provence · Salon', delai: '2 à 4 heures', horaire: 'Service 7j/7' },
                { zone: 'Arles · Les Baux · Martigues', delai: '3 à 5 heures', horaire: 'Sur commande' },
              ].map(z => (
                <div key={z.zone} className="p-5" style={{ background: 'var(--surface-container-low)' }}>
                  <p className="text-sm font-semibold mb-1" style={{ color: 'var(--on-surface)' }}>{z.zone}</p>
                  <p className="text-xs" style={{ color: 'var(--primary)' }}>{z.delai}</p>
                  <p className="text-xs" style={{ color: 'var(--on-surface-variant)' }}>{z.horaire}</p>
                </div>
              ))}
            </div>
          </div>
          <div className="flex flex-wrap gap-4">
            <button onClick={() => setRoute('boutique')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
              Commander maintenant <Icon name="arrow_forward" className="text-sm" />
            </button>
            <button onClick={() => setRoute('contact')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}>
              Urgence décès
            </button>
          </div>
        </div>
      </section>

      {/* Nos Créations */}
      <section className="py-28 md:py-32 px-8" style={{ background: 'var(--surface-container-lowest)' }}>
        <div className="max-w-7xl mx-auto">
          <div className="flex justify-between items-end mb-16 md:mb-20">
            <div>
              <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Collection signature</p>
              <h2 className="font-serif text-4xl md:text-5xl italic leading-tight" style={{ color: 'var(--on-surface)' }}>Nos Créations</h2>
              <p className="max-w-md leading-relaxed mt-4 text-sm md:text-base" style={{ color: 'var(--on-surface-variant)' }}>
                Couronnes, compositions et bouquets funéraires réalisés à la main. Livraison le jour même dans tout le Grand Marseille.
              </p>
            </div>
            <button onClick={() => setRoute('boutique')} className="hidden md:block uppercase tracking-widest text-[11px] underline underline-offset-8 hover:opacity-70 transition-opacity" style={{ color: 'var(--primary)' }}>Toute la collection →</button>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12">
            {window.FDL_DATA.PRODUCTS.slice(0, 3).map(p => (
              <article key={p.id} className="group cursor-pointer" onClick={() => setRoute('boutique')}>
                <div className="aspect-[4/5] mb-8 overflow-hidden" style={{ background: 'var(--surface-container-low)' }}>
                  <img src={p.img} alt={p.name} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" />
                </div>
                <p className="uppercase tracking-widest text-[10px] mb-2" style={{ color: 'var(--primary)' }}>{p.category}</p>
                <h3 className="font-serif text-xl md:text-2xl mb-2" style={{ color: 'var(--on-surface)' }}>{p.name}</h3>
                <p className="text-sm mb-8" style={{ color: 'var(--on-surface-variant)' }}>{p.tagline}</p>
                <div className="flex justify-between items-center">
                  <span className="font-serif text-lg" style={{ color: 'var(--on-surface)' }}>{p.price.toFixed(2).replace('.', ',')} €</span>
                  <span className="uppercase tracking-widest text-[10px] font-medium group-hover:opacity-70" style={{ color: 'var(--primary)', borderBottom: '1px solid color-mix(in srgb, var(--primary) 40%, transparent)', paddingBottom: '2px' }}>Envoyer cet hommage</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Comment fonctionne notre livraison */}
      <section className="py-28 md:py-36 px-8" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-7xl mx-auto">
          <div className="max-w-3xl mb-16">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Processus de livraison</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.05]" style={{ color: 'var(--on-surface)' }}>
              Comment fonctionne <span className="italic">notre livraison</span>
            </h2>
            <p className="leading-relaxed mt-6 text-base max-w-2xl" style={{ color: 'var(--on-surface-variant)' }}>
              Un processus fluide et coordonné pour que vos fleurs arrivent toujours à temps, avec soin et discrétion.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              { num: '01', icon: 'shopping_basket', title: 'Passez votre commande', desc: 'En ligne, par téléphone ou par email. Indiquez-nous le funérarium, la date et l\'heure de la cérémonie et le message de ruban.' },
              { num: '02', icon: 'cut', title: 'Nous préparons la composition', desc: 'Nos fleuristes élaborent votre composition à la main avec des fleurs fraîches de saison dans notre atelier marseillais.' },
              { num: '03', icon: 'support_agent', title: 'Coordination avec le funérarium', desc: 'Nous contactons directement l\'établissement funéraire pour confirmer le créneau de livraison et les consignes.' },
              { num: '04', icon: 'check_circle', title: 'Livraison confirmée', desc: 'Vos fleurs arrivent à l\'heure indiquée. Nous vous envoyons une confirmation de livraison.' },
            ].map((s, i) => (
              <div key={i} className="p-8" style={{ background: 'var(--surface-container-lowest)' }}>
                <div className="flex items-center gap-3 mb-5">
                  <span className="font-serif text-3xl italic" style={{ color: 'color-mix(in srgb, var(--primary) 30%, transparent)' }}>{s.num}</span>
                  <Icon name={s.icon} className="text-xl" style={{ color: 'var(--primary)' }} />
                </div>
                <h3 className="font-serif text-xl mb-3" style={{ color: 'var(--on-surface)' }}>{s.title}</h3>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Service 24h/24 */}
      <section className="py-28 md:py-36 px-8" style={{ background: 'var(--surface-container-lowest)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
          <div className="lg:col-span-6 space-y-6">
            <p className="uppercase tracking-widest text-[11px]" style={{ color: 'var(--primary)' }}>Disponibilité totale</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.05]" style={{ color: 'var(--on-surface)' }}>
              Service d'urgence <span className="italic">24h/24</span>
            </h2>
            <p className="text-base leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>Un décès ne prévient pas. C'est pourquoi notre service de livraison de fleurs funéraires est disponible 24 heures sur 24, 7 jours sur 7. Que la cérémonie soit demain matin ou que vous ayez besoin de fleurs ce soir même, nous sommes à votre disposition.</p>
            <p className="text-base leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>Pour les urgences nocturnes ou en jours fériés, nous vous recommandons de nous contacter directement par téléphone. Notre équipe répond en moins de 30 minutes et confirme la faisabilité de la livraison.</p>
            <div className="flex flex-wrap gap-4 pt-2">
              <button onClick={() => setRoute('contact')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
                Contacter urgence <Icon name="arrow_forward" className="text-sm" />
              </button>
              <button onClick={() => setRoute('boutique')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}>
                Voir les compositions
              </button>
            </div>
          </div>
          <div className="lg:col-span-6 grid grid-cols-2 gap-4">
            {[
              { icon: 'schedule', title: '24h/24', desc: 'Service d\'urgence disponible tous les jours de l\'année, sans exception.' },
              { icon: 'local_shipping', title: 'Jour même', desc: 'Commandes avant 11h livrées le jour même dans tout Marseille.' },
              { icon: 'location_on', title: '16 arrondissements', desc: 'Couverture totale de tous les arrondissements de Marseille et communes PACA.' },
              { icon: 'verified', title: 'Confirmation', desc: 'Nous vous notifions chaque livraison pour votre tranquillité d\'esprit.' },
            ].map(item => (
              <div key={item.title} className="p-6" style={{ background: 'var(--surface-container-low)' }}>
                <Icon name={item.icon} className="text-2xl mb-3" style={{ color: 'var(--primary)' }} />
                <p className="font-serif text-2xl mb-1" style={{ color: 'var(--on-surface)' }}>{item.title}</p>
                <p className="text-xs leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ livraison */}
      <section className="py-28 md:py-36 px-8" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-14 lg:gap-20">
          <div className="lg:col-span-4 lg:sticky lg:top-28 self-start">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Questions fréquentes</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.06]" style={{ color: 'var(--on-surface)' }}>
              Tout sur <span className="italic">notre livraison</span>
            </h2>
            <p className="mt-6 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
              Réponses claires sur notre service de livraison de fleurs funéraires à Marseille.
            </p>
          </div>
          <div className="lg:col-span-8">
            {[
              { q: "Jusqu'à quelle heure puis-je commander pour une livraison le jour même ?", a: "Pour une livraison le jour même à Marseille, nous acceptons les commandes jusqu'à 11h. Pour les communes plus éloignées (Aix-en-Provence, Arles), nous recommandons de commander avant 9h. Pour les urgences hors de ces horaires, contactez-nous directement par téléphone." },
              { q: 'Livrez-vous le dimanche et les jours fériés ?', a: "Oui, notre service fonctionne 7 jours sur 7, dimanches et jours fériés inclus. Pour les commandes en jours fériés, nous recommandons de les passer avec au minimum 12 heures d'avance, sauf urgences." },
              { q: 'Comment coordinez-vous avec le funérarium ?', a: "Nous contactons directement le responsable de réception de l'établissement funéraire pour confirmer le créneau de livraison. Il vous suffit de nous indiquer le nom et l'adresse du funérarium et l'heure approximative de la cérémonie." },
              { q: 'Pouvez-vous livrer à plusieurs endroits en même temps ?', a: "Oui, si vous devez envoyer des fleurs à différents établissements ou domiciles le même jour, nous pouvons gérer des livraisons multiples. Contactez-nous par téléphone ou email pour coordonner les détails." },
              { q: "Que se passe-t-il si la cérémonie est retardée ou change de lieu ?", a: "Prévenez-nous le plus tôt possible en cas de changement. Notre équipe s'adapte aux imprévus avec le maximum de flexibilité. Si nous ne sommes pas encore partis, nous redirigeons la livraison sans frais supplémentaires." },
              { q: 'Comment savoir que mes fleurs ont bien été livrées ?', a: "Nous vous envoyons une confirmation de livraison par email ou SMS dès que la composition a été réceptionnée à l'endroit indiqué. Vous pouvez être serein en sachant que tout est arrivé à temps." },
              { q: 'Proposez-vous la livraison en cimetière ?', a: "Oui, nous livrons directement dans tous les cimetières de Marseille et des communes environnantes. Indiquez-nous le nom du cimetière et, si vous le connaissez, le numéro de la concession ou le nom de la famille." },
              { q: 'Quel est le coût de la livraison ?', a: "La livraison à Marseille est incluse dans le prix des compositions. Pour les communes plus éloignées, un supplément peut s'appliquer et vous sera communiqué à la confirmation de commande. Aucun frais caché." },
              { q: 'Puis-je personnaliser le message du ruban de livraison ?', a: "Oui, chaque composition peut être accompagnée d'un ruban avec le message de votre choix (jusqu'à 60 caractères). Vous pouvez l'indiquer lors de la commande en ligne ou nous le communiquer par téléphone." },
              { q: 'Comment puis-je suivre ma commande ?', a: "Une fois votre commande confirmée, nous vous attribuons un numéro de référence. Vous pouvez nous contacter à tout moment pour connaître l'état de votre livraison. Nous vous informons proactivement en cas de problème." },
            ].map((f, i) => {
              const [open, setOpen] = React.useState(false);
              return (
                <div key={i} style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 10%, transparent)' }}>
                  <button className="w-full flex items-center justify-between gap-6 py-6 text-left hover:opacity-70 transition-opacity" onClick={() => setOpen(v => !v)}>
                    <div className="flex items-center gap-5 min-w-0">
                      <span className="font-serif italic text-[10px] flex-shrink-0" style={{ color: 'color-mix(in srgb, var(--primary) 50%, transparent)' }}>{String(i + 1).padStart(2, '0')}</span>
                      <span className="text-sm font-medium leading-snug" style={{ color: 'var(--on-surface)' }}>{f.q}</span>
                    </div>
                    <Icon name="expand_more" className="flex-shrink-0 transition-transform duration-300" style={{ color: 'var(--primary)', transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }} />
                  </button>
                  {open && <div className="pb-6 pl-10 pr-6"><p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{f.a}</p></div>}
                </div>
              );
            })}
            <div style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 10%, transparent)' }} />
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- Mentions légales ----
function MentionsLegalesPage({ setRoute }) {
  return (
    <main className="px-8 py-20 md:py-28 max-w-4xl mx-auto">
      <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
        <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
        <Icon name="chevron_right" className="text-[10px]" />
        <span>Mentions légales</span>
      </nav>
      <h1 className="font-serif text-4xl md:text-5xl mb-10" style={{ color: 'var(--on-surface)' }}>Mentions légales</h1>
      <div className="space-y-8 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>1. Éditeur du site</h2>
          <p className="mb-2">Le présent site est édité par :</p>
          <p className="mb-1"><strong style={{ color: 'var(--on-surface)' }}>Fleurs de Deuil Marseille</strong></p>
          <p className="mb-1">Forme juridique : [À COMPLÉTER — ex. SAS, SARL, Auto-entrepreneur]</p>
          <p className="mb-1">SIRET : [À COMPLÉTER]</p>
          <p className="mb-1">RCS : [À COMPLÉTER]</p>
          <p className="mb-1">Capital social : [À COMPLÉTER]</p>
          <p className="mb-1">Adresse du siège social : Quartier du Panier, 13002 Marseille, France</p>
          <p className="mb-1">Email : contact@fleursdeuilmarseille.fr</p>
          <p>Téléphone : +33 4 91 00 00 00</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>2. Directeur de la publication</h2>
          <p>[À COMPLÉTER — Nom et prénom du responsable de la publication, conformément à la loi n° 82-652 du 29 juillet 1982]</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>3. Hébergement</h2>
          <p className="mb-1">Le site est hébergé par :</p>
          <p>[À COMPLÉTER — Nom de l'hébergeur, adresse, téléphone]</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>4. Propriété intellectuelle</h2>
          <p className="mb-3">L'ensemble du contenu de ce site (textes, photographies, illustrations, logos, compositions florales présentées) est la propriété exclusive de Fleurs de Deuil Marseille ou de ses partenaires, et est protégé par les dispositions du Code de la propriété intellectuelle.</p>
          <p>Toute reproduction, représentation, modification, publication, adaptation ou exploitation, partielle ou intégrale, par quelque procédé que ce soit, sans l'autorisation écrite préalable de Fleurs de Deuil Marseille, est strictement interdite et constituerait une contrefaçon sanctionnée par les articles L.335-2 et suivants du Code de la propriété intellectuelle.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>5. Liens hypertextes</h2>
          <p className="mb-3">Le site peut contenir des liens vers des sites tiers. Fleurs de Deuil Marseille n'exerce aucun contrôle sur ces sites et décline toute responsabilité quant à leur contenu ou leur politique de confidentialité.</p>
          <p>La création de liens hypertextes vers ce site est soumise à l'accord préalable et écrit de Fleurs de Deuil Marseille.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>6. Limitation de responsabilité</h2>
          <p className="mb-3">Les informations présentées sur ce site sont fournies à titre indicatif. Fleurs de Deuil Marseille s'efforce de maintenir les informations à jour mais ne peut garantir l'exactitude, l'exhaustivité ou l'actualité de l'ensemble des contenus publiés.</p>
          <p>Fleurs de Deuil Marseille ne saurait être tenu responsable des dommages directs ou indirects résultant de l'utilisation de ce site ou de l'impossibilité d'y accéder.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>7. Données personnelles</h2>
          <p>Le traitement des données personnelles collectées sur ce site est décrit dans notre <button onClick={() => setRoute('politique-confidentialite')} className="underline hover:opacity-70" style={{ color: 'var(--primary)' }}>Politique de confidentialité</button>. Conformément au RGPD, vous disposez de droits d'accès, de rectification et de suppression de vos données en contactant : contact@fleursdeuilmarseille.fr</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>8. Cookies</h2>
          <p>Ce site utilise des cookies afin d'améliorer l'expérience de navigation. Pour en savoir plus, consultez notre <button onClick={() => setRoute('politique-cookies')} className="underline hover:opacity-70" style={{ color: 'var(--primary)' }}>Politique de cookies</button>.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>9. Droit applicable et juridiction</h2>
          <p>Le présent site et ses mentions légales sont soumis au droit français. En cas de litige, les tribunaux de Marseille seront seuls compétents.</p>
        </div>
      </div>
    </main>
  );
}

// ---- Politique de confidentialité ----
function PolitiqueConfidentialitePage({ setRoute }) {
  return (
    <main className="px-8 py-20 md:py-28 max-w-4xl mx-auto">
      <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
        <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
        <Icon name="chevron_right" className="text-[10px]" />
        <span>Politique de confidentialité</span>
      </nav>
      <h1 className="font-serif text-4xl md:text-5xl mb-4" style={{ color: 'var(--on-surface)' }}>Politique de confidentialité</h1>
      <p className="text-sm mb-10" style={{ color: 'var(--on-surface-variant)' }}>Dernière mise à jour : mai 2026</p>
      <div className="space-y-8 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>1. Responsable du traitement</h2>
          <p className="mb-2">Le responsable du traitement de vos données personnelles est :</p>
          <p className="mb-1"><strong style={{ color: 'var(--on-surface)' }}>Fleurs de Deuil Marseille</strong></p>
          <p className="mb-1">Quartier du Panier, 13002 Marseille, France</p>
          <p className="mb-1">Email : contact@fleursdeuilmarseille.fr</p>
          <p>Téléphone : +33 4 91 00 00 00</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>2. Données collectées et base légale</h2>
          <p className="mb-3">Nous collectons uniquement les données strictement nécessaires à la fourniture de nos services. Les catégories de données collectées sont :</p>
          <ul className="list-disc pl-5 space-y-2 mb-3">
            <li><strong style={{ color: 'var(--on-surface)' }}>Données d'identification :</strong> nom, prénom — nécessaires à la personnalisation des rubans et à la réception de la commande.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Coordonnées :</strong> adresse email, numéro de téléphone — pour confirmer la commande et vous contacter en cas de besoin.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Adresse de livraison :</strong> adresse complète, code postal, ville — indispensable à l'exécution de la livraison.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Message funèbre et instructions :</strong> informations que vous nous communiquez volontairement pour personnaliser votre commande.</li>
          </ul>
          <p>La base légale du traitement est l'exécution du contrat (article 6.1.b du RGPD) pour les données liées aux commandes, et votre consentement (article 6.1.a du RGPD) pour les communications commerciales optionnelles.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>3. Finalités du traitement</h2>
          <p className="mb-3">Vos données sont traitées pour les finalités suivantes :</p>
          <ul className="list-disc pl-5 space-y-2">
            <li>Traitement, préparation et livraison de vos commandes de fleurs funéraires.</li>
            <li>Communication relative à votre commande (confirmation, suivi, livraison).</li>
            <li>Gestion des réclamations et du service après-vente.</li>
            <li>Respect de nos obligations légales et comptables.</li>
            <li>Amélioration de la qualité de nos services (sur la base de statistiques anonymisées).</li>
          </ul>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>4. Destinataires des données</h2>
          <p className="mb-3">Vos données personnelles sont destinées exclusivement au personnel habilité de Fleurs de Deuil Marseille. Elles ne sont jamais vendues, louées ou cédées à des tiers à des fins commerciales.</p>
          <p>Dans le cadre strict de l'exécution de la livraison, certaines données (nom, adresse de livraison) peuvent être partagées avec nos prestataires logistiques, qui agissent en qualité de sous-traitants et sont soumis à des obligations contractuelles de confidentialité.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>5. Durée de conservation</h2>
          <p className="mb-2">Vos données sont conservées selon les durées suivantes :</p>
          <ul className="list-disc pl-5 space-y-2">
            <li><strong style={{ color: 'var(--on-surface)' }}>Données de commande :</strong> 3 ans à compter de la dernière commande (obligation légale comptable).</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Données de contact :</strong> 3 ans à compter du dernier contact, puis suppression définitive.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Données de facturation :</strong> 10 ans conformément aux obligations fiscales françaises (Code de commerce).</li>
          </ul>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>6. Vos droits</h2>
          <p className="mb-3">Conformément au Règlement Général sur la Protection des Données (RGPD — Règlement UE 2016/679) et à la loi Informatique et Libertés modifiée, vous disposez des droits suivants :</p>
          <ul className="list-disc pl-5 space-y-2 mb-3">
            <li><strong style={{ color: 'var(--on-surface)' }}>Droit d'accès</strong> (art. 15 RGPD) : obtenir une copie de vos données.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Droit de rectification</strong> (art. 16 RGPD) : corriger des données inexactes.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Droit à l'effacement</strong> (art. 17 RGPD) : demander la suppression de vos données.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Droit à la portabilité</strong> (art. 20 RGPD) : recevoir vos données dans un format structuré.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Droit d'opposition</strong> (art. 21 RGPD) : vous opposer à certains traitements.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Droit à la limitation</strong> (art. 18 RGPD) : demander la suspension d'un traitement.</li>
          </ul>
          <p>Pour exercer ces droits, contactez-nous par email à contact@fleursdeuilmarseille.fr en précisant votre demande et en joignant une copie d'un justificatif d'identité. Nous vous répondrons dans un délai d'un mois. Vous disposez également du droit d'introduire une réclamation auprès de la <strong style={{ color: 'var(--on-surface)' }}>CNIL</strong> (www.cnil.fr).</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>7. Sécurité des données</h2>
          <p>Nous mettons en œuvre des mesures techniques et organisationnelles appropriées pour protéger vos données contre toute perte accidentelle, destruction, altération, divulgation non autorisée ou accès illicite. L'accès aux données est restreint aux seules personnes habilitées ayant besoin d'en connaître dans le cadre de leurs missions.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>8. Modifications de la présente politique</h2>
          <p>Nous nous réservons le droit de modifier cette politique à tout moment. La date de dernière mise à jour figurera en haut de cette page. En cas de modification substantielle, vous en serez informé par email si vous avez passé commande auprès de nous.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>9. Contact</h2>
          <p>Pour toute question relative à la protection de vos données personnelles, contactez notre référent : contact@fleursdeuilmarseille.fr — Fleurs de Deuil Marseille, Quartier du Panier, 13002 Marseille.</p>
        </div>
      </div>
    </main>
  );
}

// ---- Politique de cookies ----
function PolitiqueCookiesPage({ setRoute }) {
  return (
    <main className="px-8 py-20 md:py-28 max-w-4xl mx-auto">
      <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
        <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
        <Icon name="chevron_right" className="text-[10px]" />
        <span>Politique de cookies</span>
      </nav>
      <h1 className="font-serif text-4xl md:text-5xl mb-4" style={{ color: 'var(--on-surface)' }}>Politique de cookies</h1>
      <p className="text-sm mb-10" style={{ color: 'var(--on-surface-variant)' }}>Dernière mise à jour : mai 2026</p>
      <div className="space-y-8 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>1. Qu'est-ce qu'un cookie ?</h2>
          <p className="mb-3">Un cookie est un petit fichier texte déposé sur votre terminal (ordinateur, tablette, smartphone) lors de la consultation d'un site internet. Il permet au site de reconnaître votre navigateur lors d'une visite ultérieure et de mémoriser certaines informations concernant votre navigation.</p>
          <p>Les cookies ne permettent pas d'identifier personnellement les utilisateurs mais servent à améliorer l'expérience de navigation et à réaliser des statistiques d'audience.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>2. Cookies utilisés sur ce site</h2>
          <div className="space-y-5">
            <div className="p-4" style={{ background: 'var(--surface-container-low)' }}>
              <p className="font-semibold mb-1" style={{ color: 'var(--on-surface)' }}>Cookies strictement nécessaires</p>
              <p className="mb-2">Ces cookies sont indispensables au bon fonctionnement du site. Sans eux, certaines fonctionnalités essentielles ne seraient pas accessibles. Ils ne nécessitent pas votre consentement (base légale : intérêt légitime).</p>
              <p><em>Exemples : mémorisation du contenu du panier, préférences d'affichage, maintien de la session.</em></p>
            </div>
            <div className="p-4" style={{ background: 'var(--surface-container-low)' }}>
              <p className="font-semibold mb-1" style={{ color: 'var(--on-surface)' }}>Cookies de mesure d'audience (analytiques)</p>
              <p className="mb-2">Ces cookies nous permettent de mesurer le nombre de visites, les pages consultées et le comportement de navigation afin d'améliorer les performances du site. Les données collectées sont anonymisées.</p>
              <p><em>Exemples : statistiques de pages visitées, temps de visite, provenance du trafic.</em></p>
            </div>
            <div className="p-4" style={{ background: 'var(--surface-container-low)' }}>
              <p className="font-semibold mb-1" style={{ color: 'var(--on-surface)' }}>Cookies de fonctionnalité</p>
              <p className="mb-2">Ces cookies mémorisent vos préférences de navigation (couleur d'affichage, langue) pour vous offrir une expérience personnalisée lors de votre prochaine visite.</p>
              <p><em>Exemples : préférences de thème, couleur principale sélectionnée.</em></p>
            </div>
          </div>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>3. Durée de conservation des cookies</h2>
          <p className="mb-2">La durée de conservation varie selon le type de cookie :</p>
          <ul className="list-disc pl-5 space-y-2">
            <li><strong style={{ color: 'var(--on-surface)' }}>Cookies de session :</strong> supprimés automatiquement à la fermeture de votre navigateur.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Cookies persistants :</strong> conservés pour une durée maximale de 13 mois à compter de leur dépôt, conformément aux recommandations de la CNIL. À l'expiration de ce délai, votre consentement sera à nouveau recueilli.</li>
          </ul>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>4. Base légale et consentement</h2>
          <p className="mb-3">Conformément à la directive ePrivacy (transposée en droit français à l'article 82 de la loi Informatique et Libertés) et aux recommandations de la CNIL :</p>
          <ul className="list-disc pl-5 space-y-2">
            <li>Les cookies strictement nécessaires sont déposés sans consentement préalable.</li>
            <li>Les cookies analytiques et de fonctionnalité nécessitent votre consentement explicite, recueilli lors de votre première visite.</li>
            <li>Vous pouvez retirer votre consentement à tout moment, sans que cela n'affecte la licéité du traitement antérieur.</li>
          </ul>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>5. Comment gérer vos cookies ?</h2>
          <p className="mb-3">Vous disposez de plusieurs moyens pour gérer les cookies :</p>
          <ul className="list-disc pl-5 space-y-3">
            <li><strong style={{ color: 'var(--on-surface)' }}>Via notre bannière de consentement :</strong> lors de votre première visite, une bannière vous permet d'accepter ou refuser les cookies non nécessaires. Vous pouvez modifier vos choix à tout moment.</li>
            <li><strong style={{ color: 'var(--on-surface)' }}>Via les paramètres de votre navigateur :</strong> chaque navigateur propose des options de gestion des cookies. Voici les liens pour les navigateurs les plus courants : Chrome (Paramètres {">"} Confidentialité {">"} Cookies), Firefox (Paramètres {">"} Vie privée), Safari (Préférences {">"} Confidentialité), Edge (Paramètres {">"} Confidentialité).</li>
          </ul>
          <p className="mt-3">Attention : le refus de certains cookies peut entraîner un dysfonctionnement partiel du site (panier non mémorisé, préférences non conservées).</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>6. Liens utiles</h2>
          <p>Pour en savoir plus sur les cookies et vos droits, vous pouvez consulter le site de la Commission Nationale de l'Informatique et des Libertés (CNIL) : www.cnil.fr</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>7. Contact</h2>
          <p>Pour toute question relative à notre utilisation des cookies ou pour exercer vos droits : contact@fleursdeuilmarseille.fr — Fleurs de Deuil Marseille, Quartier du Panier, 13002 Marseille.</p>
        </div>
      </div>
    </main>
  );
}

// ---- Conditions générales de vente ----
function CGVPage({ setRoute }) {
  return (
    <main className="px-8 py-20 md:py-28 max-w-4xl mx-auto">
      <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
        <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
        <Icon name="chevron_right" className="text-[10px]" />
        <span>Conditions générales de vente</span>
      </nav>
      <h1 className="font-serif text-4xl md:text-5xl mb-4" style={{ color: 'var(--on-surface)' }}>Conditions générales de vente</h1>
      <p className="text-sm mb-10" style={{ color: 'var(--on-surface-variant)' }}>Dernière mise à jour : mai 2026</p>
      <div className="space-y-8 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 1 — Objet et champ d'application</h2>
          <p className="mb-3">Les présentes Conditions Générales de Vente (ci-après « CGV ») régissent l'ensemble des relations contractuelles entre Fleurs de Deuil Marseille (ci-après « le Vendeur ») et toute personne physique ou morale passant commande via le site (ci-après « le Client »).</p>
          <p>Le fait de passer commande implique l'acceptation pleine, entière et sans réserve des présentes CGV. Le Vendeur se réserve le droit de modifier ses CGV à tout moment. Les CGV applicables sont celles en vigueur à la date de la commande.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 2 — Produits</h2>
          <p className="mb-3">Les compositions florales présentées sur le site sont réalisées à la main par nos artisans fleuristes à partir de fleurs fraîches de saison. Les photographies sont données à titre illustratif. En raison de la nature périssable des fleurs et des variations saisonnières d'approvisionnement, les compositions livrées peuvent légèrement différer des visuels présentés, tout en respectant l'esprit général, la gamme de couleurs et le niveau de qualité choisis.</p>
          <p>Le Vendeur s'engage à informer le Client de toute substitution significative avant l'expédition, dans la mesure du possible compte tenu des délais de livraison.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 3 — Passation de commande</h2>
          <p className="mb-3">Les commandes peuvent être passées via le site internet, par téléphone (+33 4 91 00 00 00) ou par email (contact@fleursdeuilmarseille.fr). La commande est réputée ferme et définitive après confirmation écrite du Vendeur (email de confirmation) et encaissement du paiement.</p>
          <p>Le Client est responsable de l'exactitude des informations fournies lors de la commande (adresse de livraison, date et heure de cérémonie, nom du défunt, message du ruban). Le Vendeur décline toute responsabilité en cas d'informations erronées communiquées par le Client.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 4 — Prix et paiement</h2>
          <p className="mb-3">Les prix sont indiqués en euros, toutes taxes comprises (TTC). Le Vendeur se réserve le droit de modifier ses tarifs à tout moment ; les prix applicables sont ceux en vigueur au moment de la confirmation de commande.</p>
          <p className="mb-3">Le paiement est exigible en totalité au moment de la commande. Les modes de paiement acceptés sont :</p>
          <ul className="list-disc pl-5 space-y-1 mb-3">
            <li>Carte bancaire (Visa, Mastercard)</li>
            <li>Virement bancaire</li>
            <li>Espèces (à la livraison pour les commandes locales à Marseille uniquement)</li>
          </ul>
          <p>Les frais de livraison sont inclus dans le prix affiché pour les zones desservies. Aucun frais supplémentaire n'est appliqué sans en avoir préalablement informé le Client.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 5 — Livraison</h2>
          <p className="mb-3">Les délais de livraison indiqués sur le site sont donnés à titre indicatif. Le Vendeur s'engage à mobiliser tous les moyens nécessaires pour respecter ces délais, compte tenu de la nature des cérémonies funèbres. Toutefois, des circonstances exceptionnelles (conditions météorologiques extrêmes, accidents de circulation, rupture d'approvisionnement) peuvent occasionner un retard.</p>
          <p className="mb-3">En cas d'impossibilité de livraison (adresse incorrecte, accès impossible, absence de réceptionnaire), le Client sera contacté dans les meilleurs délais. Si la livraison ne peut être effectuée du fait du Client, les frais de nouvelle livraison pourront être facturés.</p>
          <p>Le Vendeur livre à domicile, en funérarium, en cimetière ou dans tout établissement funéraire sur les zones desservies (Marseille et ses communes environnantes).</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 6 — Droit de rétractation</h2>
          <p className="mb-3">Conformément à l'article L221-28 4° du Code de la consommation, le droit de rétractation de 14 jours prévu par l'article L221-18 <strong style={{ color: 'var(--on-surface)' }}>ne s'applique pas</strong> aux biens susceptibles de se détériorer ou de se périmer rapidement, notamment les fleurs fraîches coupées.</p>
          <p>Par conséquent, toute commande confirmée et payée ne peut faire l'objet d'une annulation ou d'un remboursement, sauf en cas de faute avérée et exclusive du Vendeur (non-livraison, composition non conforme à la commande).</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 7 — Garanties et réclamations</h2>
          <p className="mb-3">Le Vendeur garantit que ses compositions sont réalisées avec des fleurs fraîches le jour de la livraison. Toute réclamation relative à la qualité ou à la non-conformité d'une composition doit être formulée dans les <strong style={{ color: 'var(--on-surface)' }}>24 heures suivant la livraison</strong>, par email à contact@fleursdeuilmarseille.fr, accompagnée si possible de photographies.</p>
          <p>Le Vendeur s'engage à traiter chaque réclamation avec diligence et bienveillance, en proposant selon les cas : un remplacement, un avoir sur commande future ou un remboursement partiel. Aucune réclamation ne pourra être acceptée après ce délai de 24 heures compte tenu de la nature périssable des produits.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 8 — Responsabilité</h2>
          <p className="mb-3">La responsabilité du Vendeur ne saurait être engagée en cas de force majeure (catastrophe naturelle, grève, épidémie, coupure de réseau), d'inexactitude des informations fournies par le Client, ou de tout fait imputable à un tiers.</p>
          <p>En tout état de cause, la responsabilité du Vendeur est limitée au montant de la commande concernée.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 9 — Protection des données personnelles</h2>
          <p>Les données collectées dans le cadre des commandes sont traitées conformément à notre <button onClick={() => setRoute('politique-confidentialite')} className="underline hover:opacity-70" style={{ color: 'var(--primary)' }}>Politique de confidentialité</button> et au RGPD.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 10 — Médiation et règlement des litiges</h2>
          <p className="mb-3">En cas de litige, le Client est invité à contacter en premier lieu le service client de Fleurs de Deuil Marseille à contact@fleursdeuilmarseille.fr afin de rechercher une solution amiable.</p>
          <p>Conformément aux articles L616-1 et R616-1 du Code de la consommation, le Client peut recourir à un service de médiation de la consommation. À défaut de résolution amiable, tout litige sera soumis à la compétence exclusive des tribunaux de Marseille.</p>
        </div>
        <div>
          <h2 className="font-semibold text-base mb-3" style={{ color: 'var(--on-surface)' }}>Article 11 — Droit applicable</h2>
          <p>Les présentes CGV sont régies exclusivement par le droit français. La langue de rédaction et d'interprétation est le français.</p>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, {
  FunerariumsPage, FunerariumDetailPage, GuidePage, ContactPage, AProposPage,
  CommunePage, FleuristeMarseillePage, LivraisonMarseillePage,
  MentionsLegalesPage, PolitiqueConfidentialitePage, PolitiqueCookiesPage, CGVPage
});