// Pages: Home, Boutique, Établissements, Avis, Services, Product detail

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

function HeroSearch({ setRoute }) {
  return (
    <section className="relative min-h-[420px] md:min-h-[500px] 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/editorial/bouquetfunerairelysblancsverdurelyon.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-8" style={{ color: 'var(--primary)' }}>Artisan Fleuriste Funéraire — Lyon</span>
        <h1 className="font-serif text-5xl md:text-6xl lg:text-7xl leading-[1.08] tracking-tight" style={{ color: 'var(--on-surface)' }}>
          Un hommage en toute<br/><span className="italic">sérénité</span>
        </h1>
      </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 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.
          </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, i) => (
          <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',
      kicker: 'Hommage solennel',
      title: 'Couronnes',
      subtitle: 'Funéraires',
      text: "La couronne est le symbole le plus universel du recueillement. Composées à la main dans nos ateliers, rondes ou en forme de cœur, elles accompagnent l'adieu avec la noblesse et la sobriété que mérite l'instant.",
      text2: "Nous travaillons exclusivement des fleurs fraîches de saison — roses blanches, lys, chrysanthèmes, feuillages argentés — assemblées sur une structure végétale solide. Chaque couronne est livrée avec un ruban personnalisé portant le message de votre choix.",
      features: ['Livraison directe au lieu de cérémonie', 'Ruban personnalisé inclus', 'Diamètre de 40 à 90 cm'],
      cta: 'Voir les couronnes',
    },
    {
      key: 'Compositions',
      num: '02',
      kicker: 'Cœur de la cérémonie',
      title: 'Centres',
      subtitle: 'Funéraires',
      text: "Pièce maîtresse posée sur le cercueil ou sur l'autel, le centre funéraire concentre toute l'émotion de la cérémonie. Nos fleuristes imaginent des compositions horizontales, des coussins floraux et des gerbes couchées à la géométrie équilibrée.",
      text2: "Selon la saison et l'atmosphère souhaitée, nous travaillons des camaïeux de blancs purs, des tons poudrés ou des accents plus chauds. Chaque pièce est pensée pour s'intégrer avec justesse à l'ambiance du lieu et à la personnalité du défunt.",
      features: ['Format adapté au cercueil', 'Tenue garantie toute la journée', 'Camaïeux sur mesure'],
      cta: 'Voir les centres',
    },
    {
      key: 'Bouquets',
      num: '03',
      kicker: 'Geste personnel',
      title: 'Bouquets',
      subtitle: 'Funéraires',
      text: "Plus intime que la couronne, le bouquet funéraire se dépose auprès du défunt ou s'offre à la famille en signe de réconfort. Gerbes liées à la main, bouquets ronds ou compositions champêtres, chaque modèle traduit un adieu singulier.",
      text2: "Nous composons avec des fleurs de saison aux teintes douces — pensées, renoncules, eucalyptus, blés — assemblées sans artifice. Ce sont des pièces à taille humaine, que l'on tient dans les bras, que l'on pose sur une tombe, que l'on offre en silence.",
      features: ['Livraison au funérarium ou au domicile', 'Fleurs de saison exclusivement', 'Liés à la main dans nos ateliers'],
      cta: 'Voir les bouquets',
    },
  ];
  return (
    <section className="py-28 md:py-36 px-8" style={{ background: 'var(--surface-container-lowest)' }}>
      <div className="max-w-7xl mx-auto">
        <div className="max-w-3xl mb-20 md:mb-28">
          <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-6xl leading-[1.05]" style={{ color: 'var(--on-surface)' }}>
            Chaque hommage, <span className="italic">sa composition</span>
          </h2>
          <p className="leading-relaxed mt-8 text-base md:text-lg max-w-2xl" style={{ color: 'var(--on-surface-variant)' }}>
            Trois familles de créations pensées pour les différents moments de la cérémonie. Chacune répond à un geste, à une place précise dans l'adieu. Choisissez celle qui correspond à l'hommage que vous souhaitez rendre.
          </p>
        </div>

        <div className="flex flex-col">
          {cats.map((c, i) => (
            <article
              key={c.key}
              className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-16 py-16 md:py-20"
              style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' }}
            >
              <div className="md:col-span-4">
                <div className="flex items-baseline gap-4 mb-6">
                  <span className="font-serif text-5xl md:text-6xl italic" style={{ color: 'color-mix(in srgb, var(--primary) 35%, transparent)' }}>{c.num}</span>
                  <span className="uppercase tracking-widest text-[10px]" style={{ color: 'var(--primary)' }}>{c.kicker}</span>
                </div>
                <h3 className="font-serif text-4xl md:text-5xl leading-[1.02] mb-2" style={{ color: 'var(--on-surface)' }}>
                  {c.title}
                </h3>
                <h3 className="font-serif text-4xl md:text-5xl italic leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
                  {c.subtitle}
                </h3>
              </div>

              <div className="md:col-span-5 flex flex-col gap-5">
                <p className="leading-relaxed text-base md:text-[17px]" style={{ color: 'var(--on-surface)' }}>
                  {c.text}
                </p>
                <p className="leading-relaxed text-sm md:text-base" style={{ color: 'var(--on-surface-variant)' }}>
                  {c.text2}
                </p>
              </div>

              <div className="md:col-span-3 flex flex-col justify-between gap-10">
                <ul className="space-y-4">
                  {c.features.map((f, j) => (
                    <li key={j} className="flex items-start gap-3 text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
                      <span className="block w-4 h-px mt-[10px] flex-shrink-0" style={{ background: 'var(--primary)' }} />
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
                <button
                  onClick={() => goToBoutique(c.key)}
                  className="self-start inline-flex items-center gap-3 px-7 py-4 text-[11px] uppercase tracking-widest font-medium transition-all hover:opacity-90 hover:gap-5"
                  style={{ background: 'var(--primary)', color: '#fff' }}
                >
                  {c.cta}
                  <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>
  );
}

function PhotoStrip() {
  const photos = [
    { src: '/assets/editorial/bouquetfunerairegerberasrosesfreesiaslyon.jpg', alt: 'Bouquet funéraire gerberas et freesias Lyon' },
    { src: '/assets/editorial/bouquetfunerairerosesrosesjaunesvuedessuslyon.jpg', alt: 'Bouquet funéraire roses Lyon' },
    { src: '/assets/editorial/bouquetfunerairetournesolsrosesmargueriteslyon.jpg', alt: 'Bouquet funéraire tournesols et roses Lyon' },
  ];
  return (
    <section className="grid grid-cols-3 h-[38vw] max-h-[560px] min-h-[220px]">
      {photos.map((p, i) => (
        <div key={i} className="overflow-hidden" style={{ background: 'var(--surface-container-low)' }}>
          <img src={p.src} alt={p.alt} className="w-full h-full object-cover transition-transform duration-1000 hover:scale-105" />
        </div>
      ))}
    </section>
  );
}

function SeoLyonBlock() {
  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.05] mb-10" style={{ color: 'var(--on-surface)' }}>
            Livraison de fleurs<br/>
            <span className="italic">pour funérailles à Lyon</span>
          </h2>

          <div className="space-y-6 leading-relaxed text-[15px] md:text-base" style={{ color: 'var(--on-surface)' }}>
            <p>
              Fleurs de Lyon accompagne les familles de la région lyonnaise dans les moments de deuil depuis plus de quinze ans. Nos fleuristes composent chaque jour des couronnes, centres et bouquets funéraires livrés directement dans les funérariums, églises, crématoriums et cimetières de Lyon et de toute la métropole.
            </p>
            <p style={{ color: 'var(--on-surface-variant)' }}>
              Nous desservons l'ensemble des arrondissements de Lyon — du 1er au 9e — ainsi que Villeurbanne, Caluire-et-Cuire, Bron, Vénissieux, Écully, Oullins, Tassin-la-Demi-Lune, Sainte-Foy-lès-Lyon et les principales communes du Rhône. Nos livreurs connaissent chaque lieu de cérémonie de la région et coordonnent la remise de vos fleurs directement avec l'établissement funéraire, à l'horaire exact de la cérémonie.
            </p>
            <p style={{ color: 'var(--on-surface-variant)' }}>
              Toutes nos compositions sont réalisées à la main, le jour même, à partir de fleurs fraîches sélectionnées auprès de producteurs locaux et de Rungis. Nous garantissons une tenue impeccable tout au long de la cérémonie, un ruban personnalisé avec le message de votre choix, et une livraison discrète et ponctuelle. Pour toute commande avant 14h, la livraison est assurée le jour même dans Lyon intra-muros.
            </p>
            <p style={{ color: 'var(--on-surface-variant)' }}>
              Notre équipe reste joignable sept jours sur sept pour vous conseiller dans le choix de la composition, adapter un budget, ou répondre à une demande urgente. Nous comprenons l'émotion et la précipitation de ces moments, et mettons tout en œuvre pour vous en décharger.
            </p>
          </div>

          <div className="grid grid-cols-3 gap-8 mt-14 pt-10" style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' }}>
            <div>
              <p className="font-serif text-4xl md:text-5xl mb-2" style={{ color: 'var(--primary)' }}>7j/7</p>
              <p className="text-xs uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>Livraison garantie</p>
            </div>
            <div>
              <p className="font-serif text-4xl md:text-5xl mb-2" style={{ color: 'var(--primary)' }}>2h</p>
              <p className="text-xs uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>Délai express Lyon</p>
            </div>
            <div>
              <p className="font-serif text-4xl md:text-5xl mb-2" style={{ color: 'var(--primary)' }}>15+</p>
              <p className="text-xs uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>Années d'expérience</p>
            </div>
          </div>
        </div>

        <div className="lg:col-span-5 order-1 lg:order-2 lg:sticky lg:top-32">
          <div className="aspect-[4/5] overflow-hidden" style={{ background: 'var(--surface-container-lowest)' }}>
            <img
              src="/assets/editorial/compositionfunerairerosespecheverdurelyon.jpg"
              alt="Composition florale funéraire livrée à Lyon"
              className="w-full h-full object-cover"
            />
          </div>
          <figcaption className="mt-5 text-xs uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
            Atelier Fleurs de Lyon — Presqu'île
          </figcaption>
        </div>
      </div>
    </section>
  );
}

function AvisSection({ setRoute }) {
  const obits = window.FDL_DATA.OBITUARIES.slice(0, 3);
  return (
    <section className="py-28 md:py-32 px-8 overflow-hidden" style={{ background: 'var(--surface-container-low)' }}>
      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-20 items-start">
        <div className="lg:col-span-4 lg:sticky lg:top-32">
          <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Mémoire collective</p>
          <h2 className="font-serif text-4xl md:text-5xl mb-8 leading-tight" style={{ color: 'var(--on-surface)' }}>Espace<br/><span className="italic">du Souvenir</span></h2>
          <p className="leading-relaxed mb-10" style={{ color: 'var(--on-surface-variant)' }}>
            Retrouvez les derniers avis de décès de la région lyonnaise et transmettez vos condoléances en fleurs directement à la cérémonie.
          </p>
          <div className="p-8" style={{ background: 'color-mix(in srgb, var(--primary) 5%, transparent)', borderLeft: '2px solid var(--primary)' }}>
            <Icon name="verified" style={{ color: 'var(--primary)' }} />
            <p className="text-sm font-medium mt-4 mb-2" style={{ color: 'var(--on-surface)' }}>Livraison garantie</p>
            <p className="text-xs leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
              Nous coordonnons la livraison avec l'établissement funéraire pour chaque cérémonie listée.
            </p>
          </div>
        </div>
        <div className="lg:col-span-8 space-y-4">
          {obits.map(o => (
            <div key={o.id} className="p-8 flex flex-col md:flex-row md:items-center justify-between gap-6 transition-all duration-500 hover:-translate-y-0.5" style={{ background: 'var(--surface-container-lowest)' }}>
              <div>
                <div className="flex items-center gap-3 mb-2">
                  <span className="uppercase tracking-widest text-[10px]" style={{ color: 'var(--primary)' }}>{o.label}</span>
                  <span className="h-px w-8" style={{ background: 'color-mix(in srgb, var(--on-surface) 15%, transparent)' }} />
                  <span className="text-xs italic" style={{ color: 'var(--on-surface-variant)' }}>{o.published}</span>
                </div>
                <h4 className="font-serif text-2xl mb-1" style={{ color: 'var(--on-surface)' }}>{o.name}</h4>
                <p className="text-sm" style={{ color: 'var(--on-surface-variant)' }}>{o.when} — {o.where}</p>
              </div>
              <button onClick={() => setRoute('boutique')} className="px-6 py-3 text-[11px] uppercase tracking-widest font-medium transition-all hover:opacity-90 self-start md:self-center whitespace-nowrap" style={{ background: 'color-mix(in srgb, var(--primary) 12%, transparent)', color: 'var(--primary)' }}>
                Fleurir la cérémonie
              </button>
            </div>
          ))}
          <button onClick={() => setRoute('avis')} className="block w-full text-center py-6 uppercase tracking-widest text-[11px] transition-colors hover:opacity-80" style={{ border: '1px dashed color-mix(in srgb, var(--on-surface) 20%, transparent)', color: 'var(--on-surface-variant)' }}>
            Voir tous les avis →
          </button>
        </div>
      </div>
    </section>
  );
}

function FaqBlock() {
  const [open, setOpen] = useStateP(0);
  const faqs = [
    {
      q: 'Livrez-vous le jour même à Lyon ?',
      a: "Oui. Pour toute commande passée avant 14h, nous garantissons une livraison le jour même dans Lyon intra-muros ainsi que dans les principales communes de la métropole. Pour les cérémonies urgentes, contactez-nous directement par téléphone — nous trouvons toujours une solution."
    },
    {
      q: 'Comment se passe la livraison dans un funérarium ou une église ?',
      a: "Nos livreurs connaissent l'ensemble des funérariums, églises, crématoriums et cimetières de la région lyonnaise. Nous coordonnons la remise directement avec l'établissement pour que votre composition soit installée avant le début de la cérémonie, sans que vous ayez à vous en occuper."
    },
    {
      q: "Puis-je personnaliser le ruban et le message ?",
      a: "Absolument. Chaque couronne, centre ou bouquet funéraire est livré avec un ruban tissé portant le message de votre choix — une mention familiale, un prénom, une phrase personnelle. Vous renseignez le texte au moment de la commande, et notre atelier s'occupe du reste."
    },
    {
      q: 'Quelles zones couvrez-vous autour de Lyon ?',
      a: "Nous livrons l'ensemble des arrondissements de Lyon (1er au 9e) ainsi que Villeurbanne, Caluire-et-Cuire, Bron, Vénissieux, Écully, Oullins, Tassin-la-Demi-Lune, Sainte-Foy-lès-Lyon et les principales communes du Rhône. Pour une adresse en dehors de ces zones, contactez-nous : nous étudions chaque demande."
    },
    {
      q: 'Quel budget prévoir pour une composition funéraire ?',
      a: "Nos bouquets funéraires démarrent à 65 €, les centres et coussins à partir de 89 €, et les couronnes à partir de 125 €. Pour une cérémonie particulière ou une demande sur mesure, nous adaptons la composition à votre budget — n'hésitez pas à nous appeler pour en discuter."
    },
    {
      q: 'Que faire si je ne sais pas quelle composition choisir ?',
      a: "Notre équipe est à votre écoute sept jours sur sept par téléphone et par email. Nous vous conseillons en fonction du lien avec le défunt, du lieu de la cérémonie, du nombre de personnes attendues et de vos souhaits. Il n'y a pas de mauvais choix — seulement celui qui vous ressemble."
    },
    {
      q: 'Puis-je modifier ou annuler ma commande ?',
      a: "Toute commande peut être modifiée ou annulée jusqu'à 24h avant la cérémonie. Pour les commandes en livraison express (moins de 4h), contactez-nous au plus vite : nous ferons notre possible pour adapter ou arrêter la composition avant qu'elle ne soit réalisée."
    },
  ];
  return (
    <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-14 lg:gap-20">
        <div className="lg:col-span-4 lg:sticky lg:top-32 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.05] mb-8" style={{ color: 'var(--on-surface)' }}>
            Tout ce que vous<br/>
            <span className="italic">souhaitez savoir</span>
          </h2>
          <p className="leading-relaxed text-sm md:text-base mb-10" style={{ color: 'var(--on-surface-variant)' }}>
            Une dernière hésitation ? Voici les réponses aux questions que les familles nous posent le plus souvent. Si la vôtre ne figure pas ici, notre équipe reste à votre écoute.
          </p>
          <div className="p-7" style={{ background: 'color-mix(in srgb, var(--primary) 6%, transparent)', borderLeft: '2px solid var(--primary)' }}>
            <p className="text-[11px] uppercase tracking-widest mb-3" style={{ color: 'var(--primary)' }}>Besoin d'aide immédiate ?</p>
            <p className="font-serif text-xl mb-1" style={{ color: 'var(--on-surface)' }}>contact@fleursdelyon.fr</p>
            <p className="text-xs" style={{ color: 'var(--on-surface-variant)' }}>Réponse sous 2h · 7j/7</p>
          </div>
        </div>

        <div className="lg:col-span-8">
          <div style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 15%, transparent)' }}>
            {faqs.map((f, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 15%, transparent)' }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    className="w-full flex items-start justify-between gap-8 py-7 md:py-8 text-left transition-opacity hover:opacity-70"
                  >
                    <div className="flex items-start gap-6 md:gap-8 flex-1">
                      <span className="font-serif text-sm italic pt-1 flex-shrink-0" style={{ color: 'color-mix(in srgb, var(--primary) 60%, transparent)' }}>
                        {String(i + 1).padStart(2, '0')}
                      </span>
                      <h3 className="font-serif text-xl md:text-2xl leading-snug" style={{ color: 'var(--on-surface)' }}>
                        {f.q}
                      </h3>
                    </div>
                    <span
                      className="flex-shrink-0 flex items-center justify-center w-10 h-10 mt-1 transition-transform duration-500"
                      style={{
                        border: '1px solid color-mix(in srgb, var(--on-surface) 20%, transparent)',
                        transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                        background: isOpen ? 'var(--primary)' : 'transparent',
                        color: isOpen ? '#fff' : 'var(--on-surface)',
                      }}
                    >
                      <Icon name="add" className="text-[16px]" />
                    </span>
                  </button>
                  <div
                    className="overflow-hidden transition-all duration-500 ease-out"
                    style={{
                      maxHeight: isOpen ? '500px' : '0px',
                      opacity: isOpen ? 1 : 0,
                    }}
                  >
                    <div className="pb-8 md:pb-10 pl-[calc(1.5rem+1ch)] md:pl-[calc(2rem+1ch)] pr-16">
                      <p className="leading-relaxed text-[15px] md:text-base max-w-2xl" style={{ color: 'var(--on-surface-variant)' }}>
                        {f.a}
                      </p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ setRoute, openProduct, goToBoutique }) {
  return (
    <div>
      <HeroSearch setRoute={setRoute} />
      <TrustBar />
      <FeaturedProducts setRoute={setRoute} openProduct={openProduct} />
      <CategoriesBlock goToBoutique={goToBoutique} />
      <PhotoStrip />
      <SeoLyonBlock />
      <AvisSection setRoute={setRoute} />
      <FaqBlock />
    </div>
  );
}

/* ------ BOUTIQUE ------ */
function BoutiquePage({ openProduct, initialCat }) {
  const [cat, setCat] = useStateP(initialCat || 'Tout');
  const [q, setQ] = useStateP('');
  const [sort, setSort] = useStateP('recommandé');
  const cats = ['Tout', 'Couronnes', 'Compositions', 'Bouquets', 'Spécial'];

  const filtered = useMemoP(() => {
    let list = window.FDL_DATA.PRODUCTS.filter(p => cat === 'Tout' || p.category === cat);
    if (q) list = list.filter(p => (p.name + p.tagline + p.colors.join(' ')).toLowerCase().includes(q.toLowerCase()));
    if (sort === 'prix-asc') list = [...list].sort((a, b) => a.price - b.price);
    if (sort === 'prix-desc') list = [...list].sort((a, b) => b.price - a.price);
    return list;
  }, [cat, q, sort]);

  return (
    <main className="max-w-7xl mx-auto px-8">
      <section className="py-20 md:py-28 flex flex-col items-center text-center">
        <p className="uppercase tracking-widest text-[11px] mb-6" style={{ color: 'var(--primary)' }}>Artisanat Funéraire</p>
        <h1 className="font-serif text-5xl md:text-7xl leading-[1.08] mb-6 max-w-4xl tracking-tight" style={{ color: 'var(--on-surface)' }}>
          Le dernier hommage,<br/><span className="italic">empreint de sérénité.</span>
        </h1>
        <p className="text-base md:text-lg leading-relaxed max-w-2xl" style={{ color: 'var(--on-surface-variant)' }}>
          Nos créations florales accompagnent vos moments de recueillement avec douceur et élégance. Une sélection pensée pour Lyon et sa périphérie.
        </p>
      </section>

      <section className="mb-16 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 pb-6" style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)' }}>
        <div className="flex flex-wrap gap-x-8 gap-y-2">
          {cats.map(c => (
            <button
              key={c}
              onClick={() => setCat(c)}
              className="uppercase tracking-widest text-[11px] pb-2 transition-all"
              style={{
                color: cat === c ? 'var(--primary)' : 'var(--on-surface-variant)',
                borderBottom: cat === c ? '2px solid var(--primary)' : '2px solid transparent',
                fontWeight: cat === c ? 600 : 400,
              }}
            >
              {c}
            </button>
          ))}
        </div>
        <div className="flex gap-3 w-full md:w-auto">
          <div className="flex-1 md:w-64 flex items-center gap-2 px-3 py-2" style={{ background: 'var(--surface-container-low)' }}>
            <Icon name="search" className="text-base" style={{ color: 'var(--on-surface-variant)' }} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Rechercher…" className="flex-1 bg-transparent text-sm focus:outline-none" style={{ color: 'var(--on-surface)' }} />
          </div>
          <select value={sort} onChange={e => setSort(e.target.value)} className="px-3 py-2 text-xs uppercase tracking-widest focus:outline-none cursor-pointer" style={{ background: 'var(--surface-container-low)', color: 'var(--on-surface)' }}>
            <option value="recommandé">Recommandé</option>
            <option value="prix-asc">Prix ↑</option>
            <option value="prix-desc">Prix ↓</option>
          </select>
        </div>
      </section>

      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-20 md:gap-y-24 mb-32">
        {filtered.map((p, i) => (
          <article key={p.id} className="flex flex-col group cursor-pointer" onClick={() => openProduct(p)}>
            <div className="relative aspect-[4/5] overflow-hidden mb-8" 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 className="absolute top-4 right-4 px-3 py-1 text-[10px] uppercase tracking-widest backdrop-blur-sm" style={{ background: 'color-mix(in srgb, var(--surface-container-lowest) 90%, transparent)', color: 'var(--on-surface)' }}>
                {p.category}
              </div>
            </div>
            <h3 className="font-serif 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="mt-auto flex justify-between items-center">
              <span className="font-serif text-xl" style={{ color: 'var(--on-surface)' }}>{p.price.toFixed(2).replace('.', ',')} €</span>
              <span className="text-sm font-medium group-hover:opacity-70 transition-opacity" style={{ color: 'var(--primary)', borderBottom: '1px solid color-mix(in srgb, var(--primary) 30%, transparent)', paddingBottom: '2px' }}>
                Envoyer cet hommage
              </span>
            </div>
          </article>
        ))}
        {filtered.length === 0 && (
          <div className="col-span-full py-20 text-center">
            <p className="font-serif text-2xl mb-2" style={{ color: 'var(--on-surface)' }}>Aucune création trouvée</p>
            <p className="text-sm" style={{ color: 'var(--on-surface-variant)' }}>Essayez une autre catégorie ou recherche.</p>
          </div>
        )}
      </section>

      <section className="p-10 md:p-14 mb-28 flex flex-col md:flex-row items-start md:items-center justify-between gap-10" style={{ background: 'color-mix(in srgb, var(--primary) 7%, transparent)' }}>
        <div className="max-w-xl">
          <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Service garanti</p>
          <h2 className="font-serif text-3xl md:text-4xl mb-4 italic" style={{ color: 'var(--on-surface)' }}>Livraison express en 4 heures</h2>
          <p className="leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
            Nous livrons vos hommages floraux directement sur le lieu de cérémonie, à l'église ou au cimetière partout dans la métropole lyonnaise. Service discret et respectueux garanti.
          </p>
        </div>
        <div className="flex flex-col gap-4 min-w-[220px]">
          {[
            { icon: 'local_shipping', label: 'Grand Lyon & environs' },
            { icon: 'schedule', label: 'Livraison 7j/7' },
            { icon: 'verified', label: 'Message de ruban inclus' },
          ].map(x => (
            <div key={x.label} className="flex items-center gap-3">
              <Icon name={x.icon} style={{ color: 'var(--primary)' }} />
              <span className="uppercase tracking-widest text-[11px] font-medium" style={{ color: 'var(--on-surface)' }}>{x.label}</span>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

/* ------ ETABLISSEMENTS ------ */
function EtablissementsPage({ setRoute }) {
  const [q, setQ] = useStateP('');
  const list = useMemoP(() => {
    if (!q) return window.FDL_DATA.FUNERAL_HOMES;
    return window.FDL_DATA.FUNERAL_HOMES.filter(h => (h.name + h.district + h.address).toLowerCase().includes(q.toLowerCase()));
  }, [q]);

  return (
    <main className="min-h-screen">
      <section className="pt-16 pb-12 px-8 max-w-7xl mx-auto">
        <nav className="flex items-center gap-2 mb-10 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>Rhône</span>
          <Icon name="chevron_right" className="text-[10px]" />
          <span style={{ color: 'var(--primary)', fontWeight: 600 }}>Lyon</span>
        </nav>
        <div className="grid md:grid-cols-12 gap-12 items-end">
          <div className="md:col-span-8">
            <h1 className="text-5xl md:text-7xl font-serif leading-[1.08] mb-8 tracking-tight" style={{ color: 'var(--primary)' }}>
              Pompes Funèbres<br/><span className="italic font-normal" style={{ color: 'var(--on-surface)' }}>dans le Grand Lyon</span>
            </h1>
            <p className="text-base md:text-lg leading-relaxed max-w-2xl" style={{ color: 'var(--on-surface-variant)' }}>
              Nous accompagnons les familles lyonnaises dans le choix de prestataires funéraires de confiance. Retrouvez ici l'annuaire des maisons de funérailles sélectionnées pour leur dignité et leur professionnalisme.
            </p>
          </div>
          <div className="md:col-span-4 md:flex md:justify-end">
            <div className="px-6 py-5 max-w-xs" style={{ background: 'color-mix(in srgb, var(--primary) 8%, transparent)', borderLeft: '2px solid var(--primary)' }}>
              <span className="block uppercase tracking-widest text-[10px] mb-2" style={{ color: 'var(--primary)' }}>Disponibilité</span>
              <p className="text-sm font-medium leading-relaxed" style={{ color: 'var(--on-surface)' }}>Livraison de fleurs en 4h sur tous les lieux de cérémonie à Lyon.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="px-8 max-w-7xl mx-auto mb-16">
        <div className="p-2 flex flex-col md:flex-row gap-2" style={{ background: 'var(--surface-container-low)' }}>
          <div className="flex-1 relative">
            <Icon name="search" className="absolute left-4 top-1/2 -translate-y-1/2" style={{ color: 'var(--on-surface-variant)' }} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Rechercher par nom ou arrondissement…" className="w-full pl-12 bg-transparent focus:outline-none text-sm py-4" style={{ color: 'var(--on-surface)' }} />
          </div>
          <button className="px-8 py-4 text-xs uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
            Filtrer
          </button>
        </div>
        <p className="mt-4 text-xs uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>{list.length} établissements</p>
      </section>

      <section className="px-8 max-w-7xl mx-auto pb-28">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
          {list.map((h, i) => (
            <div key={h.id} className={`group cursor-pointer ${i % 3 === 1 ? 'md:mt-0 lg:mt-0' : i % 3 === 2 ? 'md:mt-0 lg:mt-20' : ''}`}>
              <div className="aspect-[4/5] overflow-hidden mb-8 relative" style={{ background: 'var(--surface-container-low)' }}>
                <img src={h.img} alt={h.name} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
                <div className="absolute top-4 left-4">
                  <span className="px-3 py-1 text-[10px] uppercase tracking-widest backdrop-blur" style={{ background: 'color-mix(in srgb, white 90%, transparent)', color: 'var(--on-surface)' }}>{h.district}</span>
                </div>
              </div>
              <h3 className="text-xl md:text-2xl font-serif mb-2 tracking-tight" style={{ color: 'var(--on-surface)' }}>{h.name}</h3>
              <p className="text-sm mb-6" style={{ color: 'var(--on-surface-variant)' }}>{h.address}</p>
              <span className="inline-flex items-center gap-2 group-hover:opacity-70 transition-opacity text-xs uppercase tracking-widest" style={{ color: 'var(--primary)', borderBottom: '1px solid color-mix(in srgb, var(--primary) 30%, transparent)', paddingBottom: '4px' }}>
                Voir les avis de décès <Icon name="arrow_forward" className="text-sm" />
              </span>
            </div>
          ))}
        </div>
      </section>

      <section className="py-24 px-8" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
          <div className="space-y-8">
            <p className="uppercase tracking-widest text-[11px]" style={{ color: 'var(--primary)' }}>Partenariat</p>
            <h2 className="text-4xl md:text-5xl font-serif italic leading-tight" style={{ color: 'var(--primary)' }}>Un accompagnement floral sur mesure</h2>
            <p className="leading-loose" style={{ color: 'var(--on-surface-variant)' }}>
              Pour chaque maison funéraire listée, Fleurs de Deuil Lyon propose un service de livraison prioritaire. Nous travaillons en étroite collaboration avec les pompes funèbres lyonnaises pour garantir que vos hommages floraux soient installés avec le plus grand soin.
            </p>
            <ul className="space-y-4">
              {[
                ['local_shipping', 'Livraison Grand Lyon en 4h'],
                ['spa', 'Créations artisanales uniques'],
                ['chat_bubble_outline', 'Message de ruban personnalisé'],
              ].map(([ic, t]) => (
                <li key={t} className="flex items-center gap-4 text-sm uppercase tracking-widest" style={{ color: 'var(--primary)' }}>
                  <Icon name={ic} className="text-lg" /> {t}
                </li>
              ))}
            </ul>
          </div>
          <div className="relative">
            <div className="aspect-square overflow-hidden" style={{ background: 'var(--surface-container-high)' }}>
              <img src="/assets/editorial/compositionfunerairelysjaunesrosesrosesvuedessuslyon.jpg" alt="Compositions florales funéraires Lyon" className="w-full h-full object-cover" />
            </div>
            <div className="absolute -bottom-8 -left-8 p-8 max-w-xs hidden lg:block" style={{ background: 'var(--surface)', boxShadow: '0 12px 40px rgba(20,20,30,0.06)' }}>
              <p className="font-serif italic text-lg mb-3 leading-snug" style={{ color: 'var(--primary)' }}>"La fleur est le dernier mot de la tendresse."</p>
              <p className="uppercase tracking-widest text-[10px]" style={{ color: 'var(--on-surface-variant)' }}>Service Client · Lyon</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ------ AVIS DE DÉCÈS page ------ */
function AvisPage({ setRoute }) {
  return (
    <main className="max-w-7xl mx-auto px-8 py-20 md:py-28">
      <p className="uppercase tracking-widest text-[11px] mb-6" style={{ color: 'var(--primary)' }}>Mémoire collective</p>
      <h1 className="font-serif text-5xl md:text-7xl mb-10 tracking-tight leading-[1.08]" style={{ color: 'var(--on-surface)' }}>
        Avis de <span className="italic">décès</span>
      </h1>
      <p className="max-w-2xl leading-relaxed mb-16 text-base md:text-lg" style={{ color: 'var(--on-surface-variant)' }}>
        Les derniers avis publiés dans la région lyonnaise. Transmettez vos condoléances en fleurs directement à la cérémonie.
      </p>
      <div className="space-y-4">
        {window.FDL_DATA.OBITUARIES.map(o => (
          <div key={o.id} className="p-8 flex flex-col md:flex-row md:items-center justify-between gap-6 hover:-translate-y-0.5 transition-transform" style={{ background: 'var(--surface-container-low)' }}>
            <div>
              <div className="flex items-center gap-3 mb-2">
                <span className="uppercase tracking-widest text-[10px]" style={{ color: 'var(--primary)' }}>{o.label}</span>
                <span className="h-px w-8" style={{ background: 'color-mix(in srgb, var(--on-surface) 15%, transparent)' }} />
                <span className="text-xs italic" style={{ color: 'var(--on-surface-variant)' }}>{o.published}</span>
              </div>
              <h4 className="font-serif text-2xl md:text-3xl mb-1" style={{ color: 'var(--on-surface)' }}>{o.name}</h4>
              <p className="text-sm" style={{ color: 'var(--on-surface-variant)' }}>{o.when} — {o.where}</p>
            </div>
            <button onClick={() => setRoute('boutique')} className="px-6 py-3 text-[11px] uppercase tracking-widest font-medium whitespace-nowrap self-start md:self-center transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
              Fleurir la cérémonie
            </button>
          </div>
        ))}
      </div>
    </main>
  );
}

/* ------ SERVICES page ------ */
function ServicesPage() {
  const services = [
    { icon: 'workspace_premium', title: 'Couronnes', desc: 'Pièces circulaires pour cercueil, plaques funéraires et cérémonies.' },
    { icon: 'spa', title: 'Compositions', desc: 'Créations libres ou structurées pour accompagner le dernier hommage.' },
    { icon: 'local_florist', title: 'Bouquets', desc: 'Attentions délicates pour condoléances, domicile ou cimetière.' },
    { icon: 'edit_note', title: 'Message de ruban', desc: 'Rédaction et calligraphie personnalisée, incluse sur toute création.' },
    { icon: 'local_shipping', title: 'Livraison 4h', desc: 'Coordination directe avec l\'établissement funéraire du Grand Lyon.' },
    { icon: 'support_agent', title: 'Accompagnement', desc: 'Un conseiller disponible 24h/24 pour vous guider dans le choix.' },
  ];
  return (
    <main className="max-w-7xl mx-auto px-8 py-20 md:py-28">
      <p className="uppercase tracking-widest text-[11px] mb-6" style={{ color: 'var(--primary)' }}>Savoir-faire</p>
      <h1 className="font-serif text-5xl md:text-7xl mb-10 tracking-tight leading-[1.08]" style={{ color: 'var(--on-surface)' }}>
        Nos <span className="italic">services</span>
      </h1>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 mt-20">
        {services.map(s => (
          <div key={s.title} className="p-8" style={{ background: 'var(--surface-container-low)' }}>
            <Icon name={s.icon} className="text-4xl mb-6" style={{ color: 'var(--primary)' }} />
            <h3 className="font-serif text-2xl 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>
    </main>
  );
}

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