// Pages : Accueil, Boutique

const { useState: useStateP, useMemo: useMemoP } = React;

function HeroSearch({ setRoute }) {
  const { useState: useStateH, useRef: useRefH, useEffect: useEffectH } = React;
  const [query, setQuery] = useStateH('');
  const [showResults, setShowResults] = useStateH(false);
  const wrapperRef = useRefH(null);

  const allHomes = window.FDL_DATA.FUNERAL_HOMES;
  const results = query.trim().length > 1
    ? allHomes.filter(h =>
        h.name.toLowerCase().includes(query.toLowerCase()) ||
        h.district.toLowerCase().includes(query.toLowerCase()) ||
        h.address.toLowerCase().includes(query.toLowerCase()) ||
        h.operator.toLowerCase().includes(query.toLowerCase())
      )
    : [];

  useEffectH(() => {
    function handler(e) {
      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setShowResults(false);
    }
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  function handleSearch() { setRoute('funerariums'); setShowResults(false); }

  return (
    <section className="relative min-h-[480px] md:min-h-[560px] flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0 z-0">
        <img alt="" className="w-full h-full object-cover" style={{ opacity: 0.28, filter: 'saturate(0.55)' }} src="assets/hero-banner.jpg" />
        <div className="absolute inset-0" style={{ background: 'linear-gradient(to bottom, color-mix(in srgb, var(--surface) 35%, transparent), color-mix(in srgb, var(--surface) 8%, transparent), var(--surface))' }} />
      </div>
      <div className="relative z-10 max-w-4xl w-full px-8 text-center flex flex-col items-center">
        <span className="uppercase tracking-[0.25em] text-[11px] mb-6 sm:mb-8" style={{ color: 'var(--primary)' }}>
          Atelier floral funéraire — Marseille
        </span>
        <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl mb-4 sm:mb-6 leading-[1.08] tracking-tight" style={{ color: 'var(--on-surface)' }}>
          Fleurs funéraires à Marseille,<br /><span className="italic">à la hauteur de l'adieu</span>
        </h1>
        <p className="mb-8 sm:mb-10 text-sm sm:text-base md:text-lg max-w-xl" style={{ color: 'var(--on-surface-variant)' }}>
          Fleurs funéraires à Marseille — couronnes, gerbes de fleurs deuil et compositions florales funéraires livrées le jour même pour toutes vos obsèques dans tout le Grand Marseille.
        </p>

        <div className="w-full max-w-2xl relative" ref={wrapperRef}>
          <div className="p-2 backdrop-blur-md" style={{ background: 'color-mix(in srgb, var(--surface-container-lowest) 85%, transparent)', boxShadow: '0 12px 40px rgba(20, 20, 30, 0.06)' }}>
            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-0 px-4 py-2 sm:py-1">
              <div className="flex items-center gap-3 flex-1">
                <Icon name="search" style={{ color: 'var(--primary)' }} className="flex-shrink-0" />
                <input
                  className="flex-1 bg-transparent border-none focus:ring-0 focus:outline-none py-3 text-sm min-w-0"
                  placeholder="Trouver un funérarium à Marseille..."
                  style={{ color: 'var(--on-surface)' }}
                  value={query}
                  onChange={e => { setQuery(e.target.value); setShowResults(true); }}
                  onFocus={() => setShowResults(true)}
                  onKeyDown={e => e.key === 'Enter' && handleSearch()}
                />
                {query && (
                  <button onClick={() => { setQuery(''); setShowResults(false); }} className="hover:opacity-60 transition-opacity flex-shrink-0 w-10 h-10 flex items-center justify-center" style={{ color: 'var(--on-surface-variant)' }}>
                    <Icon name="close" className="text-base" />
                  </button>
                )}
              </div>
              <button onClick={handleSearch} className="w-full sm:w-auto px-6 py-3 text-xs uppercase tracking-widest font-medium transition-opacity hover:opacity-90 flex-shrink-0 text-center" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
                Rechercher
              </button>
            </div>
          </div>

          {showResults && results.length > 0 && (
            <div className="absolute left-0 right-0 top-full mt-1 z-50 max-h-72 overflow-y-auto animate-slideDown" style={{ background: 'var(--surface-container-lowest)', boxShadow: '0 16px 40px rgba(20,20,30,0.12)' }}>
              {results.map(h => (
                <button key={h.id} className="w-full text-left px-6 py-4 flex items-start gap-4 hover:opacity-70 transition-opacity" style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 6%, transparent)' }} onClick={() => { setRoute(`funerarium-${h.id}`); setShowResults(false); setQuery(''); }}>
                  <Icon name="location_on" className="text-base flex-shrink-0 mt-0.5" style={{ color: 'var(--primary)' }} />
                  <div className="min-w-0">
                    <p className="text-sm font-medium truncate" style={{ color: 'var(--on-surface)' }}>{h.name}</p>
                    <p className="text-xs mt-0.5" style={{ color: 'var(--on-surface-variant)' }}>{h.district} · {h.hours}</p>
                  </div>
                </button>
              ))}
              <button className="w-full text-left px-6 py-3 text-xs uppercase tracking-widest font-medium hover:opacity-70 transition-opacity flex items-center gap-2" style={{ color: 'var(--primary)', background: 'var(--surface-container-low)' }} onClick={handleSearch}>
                <Icon name="arrow_forward" className="text-sm" />
                Voir tous les funérariums
              </button>
            </div>
          )}

          {showResults && query.trim().length > 1 && results.length === 0 && (
            <div className="absolute left-0 right-0 top-full mt-1 z-50 px-6 py-5 animate-slideDown" style={{ background: 'var(--surface-container-lowest)', boxShadow: '0 16px 40px rgba(20,20,30,0.12)' }}>
              <p className="text-sm" style={{ color: 'var(--on-surface-variant)' }}>Aucun résultat pour «{query}»</p>
              <button className="mt-3 text-xs uppercase tracking-widest font-medium hover:opacity-70 transition-opacity flex items-center gap-2" style={{ color: 'var(--primary)' }} onClick={handleSearch}>
                <Icon name="arrow_forward" className="text-sm" />
                Voir tous les funérariums
              </button>
            </div>
          )}
        </div>

        <div className="flex flex-col sm:flex-row items-center gap-3 sm:gap-6 mt-8 sm:mt-10 text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
          <button onClick={() => setRoute('boutique')} className="py-3 px-1 hover:opacity-70 transition-opacity underline underline-offset-8" style={{ color: 'var(--primary)' }}>
            Voir les créations
          </button>
          <span className="hidden sm:inline" style={{ opacity: 0.3 }}>·</span>
          <button onClick={() => setRoute('guide')} className="py-3 px-1 hover:opacity-70 transition-opacity">Guide funéraire</button>
        </div>
      </div>
    </section>
  );
}

function FeaturedProducts({ setRoute, openProduct }) {
  const featured = window.FDL_DATA.PRODUCTS.slice(0, 3);
  return (
    <section className="py-28 md:py-32 px-8 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 compositions de fleurs funéraires</h2>
          <p className="max-w-md leading-relaxed mt-4 text-sm md:text-base" style={{ color: 'var(--on-surface-variant)' }}>
            Couronnes, gerbes et bouquets confectionnés dans notre atelier marseillais pour chaque cérémonie funèbre.
          </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">
        {featured.map(p => (
          <article key={p.id} className="group cursor-pointer" onClick={() => openProduct(p)}>
            <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>
            <div className="flex flex-col">
              <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 transition-opacity" style={{ color: 'var(--primary)', borderBottom: '1px solid color-mix(in srgb, var(--primary) 40%, transparent)', paddingBottom: '2px' }}>
                  Envoyer cet hommage
                </span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function CategoriesBlock({ goToBoutique }) {
  const cats = [
    {
      key: 'Couronnes',
      num: '01',
      icon: 'circle',
      title: 'Couronnes funéraires',
      text: "Symbole universel du dernier hommage, la couronne de fleurs funéraires est posée auprès du cercueil lors de la veillée ou de la cérémonie. Notre atelier les confectionne à la main en fleurs fraîches de saison — roses blanches, lys, chrysanthèmes ou hortensias — dans des formats ronds ou en cœur, du diamètre 40 au 90 cm. Chaque couronne est livrée directement au funérarium à Marseille avec un ruban personnalisé portant le message de votre choix.",
      features: ['Diamètre 40 à 90 cm', 'Ruban gravé inclus', 'Livraison au funérarium'],
      cta: 'Voir les couronnes',
    },
    {
      key: 'Compositions',
      num: '02',
      icon: 'spa',
      title: 'Compositions funéraires',
      text: "Pièce maîtresse déposée sur le cercueil ou l'autel, la composition florale funéraire est le geste le plus solennel. Nos créations — dessus de cercueil, coussins de fleurs deuil, gerbes couchées — sont réalisées en camaïeux de blancs, de crèmes et de verts doux pour accompagner la cérémonie avec élégance et retenue. Format, palette et essences sont adaptés à vos souhaits et aux dimensions du cercueil.",
      features: ['Format adapté au cercueil', 'Camaïeux sur mesure', 'Tenue toute la journée'],
      cta: 'Voir les compositions',
    },
    {
      key: 'Bouquets',
      num: '03',
      icon: 'local_florist',
      title: 'Bouquets funéraires',
      text: "Plus intime, le bouquet funéraire — comme la gerbe de fleurs deuil ou la raquette de fleurs deuil — s'offre à la famille en signe de soutien ou se dépose personnellement auprès du défunt. Confectionnés à la main avec des fleurs fraîches de saison issues de producteurs provençaux, nos créations sont présentées dans un emballage sobre et discret. Livraison au domicile des proches ou directement au funérarium à Marseille.",
      features: ['Livraison domicile ou funérarium', 'Fleurs fraîches de saison', 'Confectionnés à la main'],
      cta: 'Voir les bouquets',
    },
  ];

  return (
    <section className="py-24 md:py-32 px-8" 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 items-start">

        {/* Colonne gauche — titre fixe */}
        <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)' }}>Nos catégories</p>
          <h2 className="font-serif text-4xl md:text-5xl leading-[1.06] mb-6" style={{ color: 'var(--on-surface)' }}>
            Pour chaque cérémonie,<br /><span className="italic">sa composition</span>
          </h2>
          <p className="text-sm leading-relaxed mb-8" style={{ color: 'var(--on-surface-variant)' }}>
            Trois familles de créations florales réalisées à la main dans notre atelier marseillais, chacune pensée pour un moment précis de l'adieu.
          </p>
          <button
            onClick={() => goToBoutique(null)}
            className="inline-flex items-center gap-2 text-[11px] uppercase tracking-widest font-medium hover:opacity-70 transition-opacity"
            style={{ color: 'var(--primary)', borderBottom: '1px solid color-mix(in srgb, var(--primary) 40%, transparent)', paddingBottom: '3px' }}
          >
            Voir toute la collection
            <Icon name="arrow_forward" style={{ fontSize: '13px' }} />
          </button>
        </div>

        {/* Colonne droite — 3 blocs catégories */}
        <div className="lg:col-span-8 flex flex-col gap-4">
          {cats.map((c, idx) => (
            <button
              key={c.key}
              onClick={() => goToBoutique(c.key)}
              className="group text-left w-full px-5 py-6 sm:px-8 sm:py-8 flex flex-col gap-4 sm:gap-5 hover:opacity-95 transition-opacity"
              style={{ background: 'var(--surface-container-lowest)', outline: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)' }}
            >
              {/* En-tête du bloc */}
              <div className="flex items-center gap-5">
                <span
                  className="font-serif italic leading-none flex-shrink-0"
                  style={{ fontSize: '2.8rem', color: 'color-mix(in srgb, var(--primary) 30%, transparent)' }}
                >
                  {c.num}
                </span>
                <h3
                  className="font-serif leading-tight"
                  style={{ color: 'var(--on-surface)', fontSize: 'clamp(1.6rem, 2.2vw, 2.2rem)' }}
                >
                  {c.title}
                </h3>
              </div>

              {/* Description */}
              <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
                {c.text}
              </p>

              {/* Caractéristiques */}
              <div className="flex flex-wrap gap-2">
                {c.features.map(f => (
                  <span key={f} className="inline-flex items-center gap-1.5 text-[10px] px-3 py-1.5" style={{ background: 'var(--surface-container-low)', color: 'var(--on-surface-variant)' }}>
                    <span style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--primary)', display: 'inline-block', flexShrink: 0 }} />
                    {f}
                  </span>
                ))}
              </div>

              {/* CTA */}
              <div className="flex justify-end mt-1">
                <div className="inline-flex items-center gap-2 px-5 py-3 group-hover:opacity-90 transition-opacity"
                  style={{ background: 'var(--primary)', color: '#ffffff' }}>
                  <span className="text-[11px] uppercase tracking-widest font-medium">{c.cta}</span>
                  <Icon name="arrow_forward" style={{ fontSize: '14px', transition: 'transform 0.3s ease' }} className="group-hover:translate-x-1" />
                </div>
              </div>

            </button>
          ))}
        </div>

      </div>
    </section>
  );
}

function SeoMarseillBlock({ setRoute }) {
  return (
    <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 items-start">
        <div className="lg:col-span-7 order-2 lg:order-1">
          <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Livraison locale</p>
          <h2 className="font-serif text-4xl md:text-5xl leading-[1.06] mb-8" style={{ color: 'var(--on-surface)' }}>
            Livraison de fleurs deuil<br /><span className="italic">à Marseille &amp; Provence</span>
          </h2>
          <div className="space-y-5 text-base leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
            <p>
              Notre atelier marseillais est spécialisé dans la création de <strong style={{ color: 'var(--on-surface)' }}>fleurs funéraires à Marseille</strong> : couronnes, compositions florales et bouquets livrés directement au funérarium, à l'église ou au domicile des familles.
            </p>
            <p>
              Avec un service disponible <strong style={{ color: 'var(--on-surface)' }}>24h/24 et 7j/7</strong>, nous répondons aux urgences décès Marseille et assurons la livraison le jour même dans tous les arrondissements (1er au 16ème) ainsi que dans les communes environnantes : <strong style={{ color: 'var(--on-surface)' }}>Aix-en-Provence, Aubagne, La Ciotat, Cassis, Martigues</strong> et l'ensemble du littoral provençal.
            </p>
            <p>
              Nos fleuristes connaissent tous les établissements funéraires marseillais — du Funérarium Municipal Saint-Pierre aux chambres funéraires privées — et coordonnent la livraison directement avec les équipes en place.
            </p>
          </div>
          <div className="flex flex-wrap gap-4 mt-10">
            <button onClick={() => setRoute('fleuriste-marseille')} className="inline-flex items-center gap-2 px-6 py-3 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: '#fff' }}>
              Fleuriste funéraire Marseille <Icon name="arrow_forward" className="text-[14px]" />
            </button>
            <button onClick={() => setRoute('livraison-marseille')} className="inline-flex items-center gap-2 px-6 py-3 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}>
              Livraison fleurs funéraires
            </button>
          </div>
        </div>
        <div className="lg:col-span-5 order-1 lg:order-2">
          <div className="aspect-[4/5] overflow-hidden" style={{ background: 'var(--surface-container)' }}>
            <img src="assets/florista-marseille.jpg" alt="Fleurs funéraires Marseille" className="w-full h-full object-cover" />
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorksBlock({ setRoute }) {
  const steps = [
    {
      num: '01',
      icon: 'search',
      title: 'Choisissez votre composition',
      text: "Parcourez notre boutique et sélectionnez la couronne, le centre ou le bouquet adapté à la cérémonie. Chaque création est décrite avec ses dimensions, ses fleurs et son usage.",
    },
    {
      num: '02',
      icon: 'edit_note',
      title: 'Personnalisez votre hommage',
      text: "Indiquez le message de votre ruban, la date et le lieu de la cérémonie. En cas d'urgence ou de demande particulière, vous pouvez nous appeler directement — nous sommes disponibles 24h/24.",
    },
    {
      num: '03',
      icon: 'local_shipping',
      title: 'Nous livrons pour vous',
      text: "Votre composition est confectionnée le jour même dans notre atelier marseillais et livrée directement au funérarium, à l'église ou au cimetière, en coordination avec l'équipe sur place.",
    },
  ];

  return (
    <section className="py-28 md:py-32 px-8" style={{ background: 'var(--surface-container-lowest)' }}>
      <div className="max-w-7xl mx-auto">

        {/* En-tête */}
        <div className="max-w-2xl mb-16 md:mb-20">
          <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Simple et rapide</p>
          <h2 className="font-serif text-4xl md:text-5xl leading-[1.06]" style={{ color: 'var(--on-surface)' }}>
            Commandez vos fleurs funéraires en ligne<br /><span className="italic">en 3 étapes</span>
          </h2>
          <p className="mt-6 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
            Commander vos fleurs funéraires en ligne à Marseille en trois étapes simples. Un processus pensé pour les familles : rapide, humain et coordonné de bout en bout.
          </p>
        </div>

        {/* Étapes */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px" style={{ background: 'color-mix(in srgb, var(--on-surface) 10%, transparent)' }}>
          {steps.map((s, idx) => (
            <div key={s.num} className="flex flex-col gap-6 px-8 py-10" style={{ background: 'var(--surface-container-lowest)' }}>

              {/* Numéro + icône */}
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 flex items-center justify-center flex-shrink-0" style={{ background: 'color-mix(in srgb, var(--primary) 10%, transparent)' }}>
                  <Icon name={s.icon} style={{ color: 'var(--primary)', fontSize: '20px' }} />
                </div>
                <span className="font-serif italic text-[11px]" style={{ color: 'color-mix(in srgb, var(--primary) 50%, transparent)' }}>{s.num}</span>
              </div>

              {/* Texte */}
              <div>
                <h3 className="font-serif text-xl leading-snug mb-3" style={{ color: 'var(--on-surface)' }}>{s.title}</h3>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{s.text}</p>
              </div>

              {/* Connecteur visuel entre étapes */}
              {idx < 2 && (
                <div className="hidden md:block absolute" />
              )}
            </div>
          ))}
        </div>

        {/* CTA bas */}
        <div className="mt-12 flex flex-col sm:flex-row items-start sm:items-center gap-5">
          <button
            onClick={() => setRoute('boutique')}
            className="inline-flex items-center gap-2 px-7 py-3.5 text-[11px] uppercase tracking-widest font-medium hover:opacity-90 transition-opacity"
            style={{ background: 'var(--primary)', color: '#fff' }}
          >
            Voir les compositions
            <Icon name="arrow_forward" style={{ fontSize: '14px' }} />
          </button>
          <button
            onClick={() => setRoute('contact')}
            className="inline-flex items-center gap-2 text-[11px] uppercase tracking-widest font-medium hover:opacity-70 transition-opacity"
            style={{ color: 'var(--on-surface-variant)' }}
          >
            <Icon name="phone" style={{ fontSize: '14px' }} />
            Nous contacter pour une urgence
          </button>
        </div>

      </div>
    </section>
  );
}

function FaqBlock() {
  const [open, setOpen] = useStateP(null);
  const faqs = [
    { q: 'Livrez-vous dans tout Marseille le jour même ?', a: "Oui, nous livrons dans les 16 arrondissements de Marseille le jour même pour toute commande passée avant 11h. Un service express est disponible 24h/24 pour les urgences décès." },
    { q: 'Quelles zones couvrez-vous autour de Marseille ?', a: "Nous livrons dans toutes les communes environnantes : Aix-en-Provence, Aubagne, La Ciotat, Cassis, Martigues, Salon-de-Provence, Les Baux-de-Provence et Arles. Délai variable selon la distance (1 à 4 heures)." },
    { q: 'Quelle fleur choisir pour un enterrement à Marseille ?', a: "Pour un enterrement à Marseille, le choix des fleurs dépend de votre rôle et de votre lien avec le défunt. La couronne de fleurs funéraires est le symbole traditionnel de l'hommage collectif, posée auprès du cercueil. La composition florale funéraire — dessus de cercueil, coussin de fleurs deuil ou gerbe de fleurs deuil — est un geste plus formel, souvent envoyé par la famille proche. Le bouquet, plus personnel, s'offre directement aux proches endeuillés. Notre équipe vous conseille selon la cérémonie et le funérarium concerné." },
    { q: 'Puis-je personnaliser le message du ruban ?', a: "Oui, chaque composition peut être accompagnée d'un ruban personnalisé portant le message de votre choix (jusqu'à 60 caractères). Vous pouvez saisir ce message lors de la commande." },
    { q: "Quel est le délai pour une urgence décès à Marseille ?", a: "Notre service d'urgence est disponible 24h/24. Nous pouvons préparer et livrer une composition funéraire en 2 à 4 heures selon le secteur. Contactez-nous directement par téléphone pour les urgences." },
    { q: "Livrez-vous directement aux funérariums de Marseille ?", a: "Oui, nous coordonnons directement avec le Funérarium Municipal, les chambres funéraires Roc Eclerc, JDS, Phénix, La Rosa et tous les établissements de Marseille pour garantir une livraison en temps voulu." },
    { q: "Proposez-vous des fleurs funéraires pour les cérémonies musulmanes ou juives à Marseille ?", a: "Oui, nous sommes familiers des traditions funéraires de toutes les communautés présentes à Marseille. Nous adaptons nos compositions selon les rites : fleurs blanches pour les cérémonies islamiques, etc." },
    { q: "Quel est le coût de la livraison de fleurs funéraires à Marseille ?", a: "La livraison est incluse dans le prix des compositions pour Marseille et ses environs immédiats. Pour les communes plus éloignées comme Arles ou Les Baux-de-Provence, un supplément peut s'appliquer et vous sera communiqué à la confirmation de commande." },
    { q: "Puis-je passer commande la veille au soir pour une cérémonie le lendemain matin ?", a: "Oui. Notre service est disponible 24h/24. Une commande passée le soir est préparée dès les premières heures du matin et livrée avant la cérémonie. Nous vous recommandons de nous appeler directement pour les commandes nocturnes urgentes." },
    { q: "Quelles fleurs utilisez-vous pour les compositions funéraires ?", a: "Nous travaillons exclusivement avec des fleurs fraîches de saison issues de producteurs locaux de Provence : roses blanches, lys, chrysanthèmes, hortensias, glaïeuls, gypsophile et feuillages argentés ou verts. Chaque composition est réalisée à la main dans notre atelier marseillais." },
  ];
  return (
    <section className="py-28 md:py-36 px-8">
      <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)' }}>
            Vos questions, <span className="italic">nos réponses</span>
          </h2>
          <p className="mt-6 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
            Des réponses claires pour vous accompagner dans vos démarches funéraires à Marseille.
          </p>
        </div>
        <div className="lg:col-span-8">
          {faqs.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={() => setOpen(open === 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: open === i ? 'rotate(180deg)' : 'rotate(0deg)' }} />
              </button>
              {open === 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>
  );
}

function HomePage({ setRoute, openProduct, goToBoutique }) {
  return (
    <main>
      <HeroSearch setRoute={setRoute} />
      <TrustBar />
      <FeaturedProducts setRoute={setRoute} openProduct={openProduct} />
      <CategoriesBlock goToBoutique={goToBoutique} />
      <SeoMarseillBlock setRoute={setRoute} />
      <HowItWorksBlock setRoute={setRoute} />
      <FaqBlock />
    </main>
  );
}

function BoutiquePage({ openProduct, initialCat }) {
  const allProducts = window.FDL_DATA.PRODUCTS;
  const cats = ['Tout', ...Array.from(new Set(allProducts.map(p => p.category)))];
  const [activeCat, setActiveCat] = useStateP(initialCat || 'Tout');
  const [sort, setSort] = useStateP('default');

  const filtered = useMemoP(() => {
    let r = activeCat === 'Tout' ? allProducts : allProducts.filter(p => p.category === activeCat);
    if (sort === 'price-asc') r = [...r].sort((a, b) => a.price - b.price);
    if (sort === 'price-desc') r = [...r].sort((a, b) => b.price - a.price);
    return r;
  }, [activeCat, sort]);

  return (
    <main>
      <section className="px-8 pt-20 md:pt-28 pb-16 page-hero-banner" style={{ '--banner-bg-img': 'url(assets/florista-marseille-service.jpg)' }}>
        <div className="max-w-7xl mx-auto">
          <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Atelier floral</p>
          <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-7xl tracking-tight leading-[1.02] mb-6" style={{ color: 'var(--on-surface)' }}>
            Fleuriste funéraire<br /><span className="italic">Marseille</span>
          </h1>
          <p className="max-w-xl text-base md:text-[17px] leading-relaxed" 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 — pompes funèbres et funérariums inclus.
          </p>
        </div>
      </section>

      <section className="px-8 py-6 sticky top-[73px] z-30 backdrop-blur-xl" style={{ background: 'color-mix(in srgb, var(--surface) 92%, transparent)', borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)' }}>
        <div className="max-w-7xl mx-auto flex items-center justify-between flex-wrap gap-4">
          <div className="flex gap-1 flex-wrap">
            {cats.map(cat => (
              <button key={cat} onClick={() => setActiveCat(cat)} className="px-4 py-3 text-[11px] uppercase tracking-widest font-medium transition-all"
                style={{ background: activeCat === cat ? 'var(--primary)' : 'transparent', color: activeCat === cat ? 'var(--on-primary)' : 'var(--on-surface-variant)', border: activeCat === cat ? 'none' : '1px solid color-mix(in srgb, var(--on-surface) 15%, transparent)' }}>
                {cat}
              </button>
            ))}
          </div>
          <select value={sort} onChange={e => setSort(e.target.value)} className="text-[11px] uppercase tracking-widest px-4 py-3 focus:outline-none focus:ring-0 border-0" style={{ background: 'var(--surface-container-low)', color: 'var(--on-surface-variant)' }}>
            <option value="default">Tri par défaut</option>
            <option value="price-asc">Prix croissant</option>
            <option value="price-desc">Prix décroissant</option>
          </select>
        </div>
      </section>

      <section className="px-8 py-20 max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 md:gap-12">
          {filtered.map(p => (
            <article key={p.id} className="group cursor-pointer" onClick={() => openProduct(p)}>
              <div className="aspect-[4/5] mb-6 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-1" style={{ color: 'var(--on-surface)' }}>{p.name}</h3>
              <p className="text-sm mb-5" 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="text-[10px] uppercase tracking-widest 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>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, BoutiquePage });