// Placeholder pages: Tanatorios (Funérariums), Contact, À propos

function PagePlaceholder({ kicker, title, italic, desc, icon, 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)' }}>{kicker}</p>
      <h1 className="font-serif text-5xl md:text-7xl mb-10 tracking-tight leading-[1.08]" style={{ color: 'var(--on-surface)' }}>
        {title} <span className="italic">{italic}</span>
      </h1>
      <p className="max-w-2xl leading-relaxed mb-16 text-base md:text-lg" style={{ color: 'var(--on-surface-variant)' }}>
        {desc}
      </p>
      <div className="p-16 md:p-24 flex flex-col items-center justify-center text-center" style={{ background: 'var(--surface-container-low)' }}>
        <Icon name={icon} className="text-6xl mb-8" style={{ color: 'var(--primary)', opacity: 0.4 }} />
        <p className="font-serif text-2xl mb-3" style={{ color: 'var(--on-surface)' }}>Page en préparation</p>
        <p className="text-sm max-w-md mb-8" style={{ color: 'var(--on-surface-variant)' }}>
          Le contenu de cette section sera bientôt disponible. Revenez prochainement.
        </p>
        <button onClick={() => setRoute('home')} className="px-6 py-3 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
          Retour à l'accueil
        </button>
      </div>
    </main>
  );
}

function TanatoriosPage({ setRoute }) {
  const homes = window.FDL_DATA.FUNERAL_HOMES;
  return (
    <main>
      {/* Hero */}
      <section className="px-8 pt-20 md:pt-28 pb-16 md:pb-20" style={{ background: 'var(--surface-container-lowest)' }}>
        <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-5xl md:text-7xl tracking-tight leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
              Funérariums<br/>
              <span className="italic">du Grand Lyon</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 quatre plus grands établissements funéraires de la métropole lyonnaise, avec lesquels nous coordonnons quotidiennement la livraison de vos compositions florales.
            </p>
          </div>
        </div>
      </section>

      {/* Stats bar */}
      <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: '04', l: 'Établissements majeurs' },
            { n: '36', l: 'Salons de recueillement' },
            { n: '7j/7', l: 'Livraison coordonnée' },
            { n: '< 2h', l: 'Délai express Lyon' },
          ].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>

      {/* List */}
      <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 md:mb-20 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 leading-tight" style={{ color: 'var(--on-surface)' }}>
                Les <span className="italic">principaux établissements</span>
              </h2>
            </div>
            <p className="text-sm max-w-sm" style={{ color: 'var(--on-surface-variant)' }}>
              Sélectionnez un funérarium pour découvrir les cérémonies à venir et envoyer directement des fleurs.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
            {homes.map((h, i) => (
              <article
                key={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)' }}
              >
                <div className="aspect-[16/10] overflow-hidden mb-8" style={{ background: 'var(--surface-container-low)' }}>
                  <img src={h.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>
                </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-8" style={{ color: 'var(--on-surface-variant)' }}>
                  {h.description}
                </p>

                <div className="flex flex-wrap gap-x-5 gap-y-2 mb-8">
                  <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-8 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>
                  </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-sm underline underline-offset-4 hover:opacity-70 break-all" style={{ color: 'var(--primary)' }}>
                          {h.website}
                        </a>
                      </>
                    )}
                  </div>
                </div>

                <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: '#fff' }}
                >
                  Envoyer des fleurs
                  <Icon name="arrow_forward" className="text-[14px]" />
                </button>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* SEO */}
      <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-5 lg:sticky lg:top-32 self-start">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Envoi de fleurs</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.05] mb-8" style={{ color: 'var(--on-surface)' }}>
              Envoyer des fleurs<br/>
              <span className="italic">dans un funérarium de Lyon</span>
            </h2>
            <p className="leading-relaxed text-base md:text-[17px]" style={{ color: 'var(--on-surface-variant)' }}>
              Fleurs de Lyon livre chaque jour couronnes, centres et bouquets funéraires dans l'ensemble des funérariums, chambres funéraires et crématoriums de la métropole lyonnaise. Un service pensé pour les familles, les proches et les entreprises qui souhaitent rendre hommage sans se déplacer.
            </p>
          </div>

          <div className="lg:col-span-7 space-y-10">
            <div>
              <h3 className="font-serif text-xl md:text-2xl mb-4" style={{ color: 'var(--on-surface)' }}>
                Une livraison coordonnée avec l'établissement
              </h3>
              <p className="leading-relaxed text-[15px] md:text-base" style={{ color: 'var(--on-surface-variant)' }}>
                Nos livreurs connaissent chacun des funérariums de Lyon — du 7e arrondissement au crématorium de la rue Pierre Delore, en passant par le centre Rivière Grange-Blanche et la maison PFG Thomas Blanchet. Nous contactons systématiquement l'établissement avant la livraison pour confirmer l'horaire exact de la cérémonie, le nom du défunt et le lieu précis de remise : salon de recueillement, salle de cérémonie civile, parvis ou accueil. Votre composition est déposée discrètement, avant l'arrivée des familles, et installée avec soin.
              </p>
            </div>

            <div>
              <h3 className="font-serif text-xl md:text-2xl mb-4" style={{ color: 'var(--on-surface)' }}>
                Des compositions pensées pour la cérémonie
              </h3>
              <p className="leading-relaxed text-[15px] md:text-base" style={{ color: 'var(--on-surface-variant)' }}>
                Chaque funérarium a ses propres contraintes — dimensions des salons, luminosité, durée d'exposition. Nos fleuristes adaptent la composition à ces paramètres : une couronne ronde pour un salon de recueillement classique, un coussin horizontal pour un cercueil en chambre funéraire, un bouquet lié main à déposer auprès des proches. Nous travaillons exclusivement des fleurs fraîches de saison, garanties impeccables pendant toute la durée de la cérémonie.
              </p>
            </div>

            <div>
              <h3 className="font-serif text-xl md:text-2xl mb-4" style={{ color: 'var(--on-surface)' }}>
                Livraison rapide à Lyon et dans la métropole
              </h3>
              <p className="leading-relaxed text-[15px] md:text-base" style={{ color: 'var(--on-surface-variant)' }}>
                Pour toute commande passée avant 14h, nous assurons une livraison le jour même dans Lyon intra-muros et dans les principales communes du Rhône : Villeurbanne, Caluire, Bron, Vénissieux, Écully, Oullins, Tassin, Sainte-Foy-lès-Lyon. Pour les cérémonies urgentes, un service express permet une livraison en moins de deux heures dans le centre de Lyon. Notre équipe reste joignable sept jours sur sept pour toute demande particulière.
              </p>
            </div>

            <div className="grid grid-cols-2 gap-6 pt-10" style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' }}>
              <div>
                <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--primary)' }}>Zones livrées</p>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface)' }}>
                  Lyon 1er → 9ème · Villeurbanne · Bron · Caluire · Vénissieux · Écully · Oullins · Tassin · Sainte-Foy
                </p>
              </div>
              <div>
                <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--primary)' }}>Types de lieux</p>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface)' }}>
                  Funérariums · Chambres funéraires · Crématoriums · Églises · Cimetières · Salles de cérémonie civile
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="px-8 py-24 md:py-28" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-10 items-center">
          <div className="md:col-span-8">
            <h3 className="font-serif text-3xl md:text-4xl leading-tight mb-4" style={{ color: 'var(--on-surface)' }}>
              Votre funérarium n'apparaît pas ici ?
            </h3>
            <p className="leading-relaxed text-base max-w-2xl" style={{ color: 'var(--on-surface-variant)' }}>
              Nous livrons également dans tous les funérariums, églises, crématoriums et cimetières de la métropole lyonnaise. Indiquez simplement l'adresse au moment de la commande.
            </p>
          </div>
          <div className="md:col-span-4 flex md:justify-end">
            <button
              onClick={() => setRoute('contact')}
              className="inline-flex items-center gap-3 px-7 py-4 text-[11px] uppercase tracking-widest font-medium transition-all hover:opacity-90 hover:gap-4"
              style={{ background: 'var(--primary)', color: '#fff' }}
            >
              Nous contacter
              <Icon name="arrow_forward" className="text-[14px]" />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

function ContactPage({ setRoute }) {
  const [form, setForm] = useStateP({ name: '', email: '', phone: '', subject: 'commande', ceremony: '', message: '' });
  const [sent, setSent] = useStateP(false);

  const subjects = [
    { v: 'commande', label: 'Passer une commande' },
    { v: 'conseil', label: 'Conseil personnalisé' },
    { v: 'urgence', label: 'Demande urgente' },
    { v: 'partenariat', label: 'Partenariat funéraire' },
    { v: 'autre', label: 'Autre demande' },
  ];

  function submit(e) {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 5000);
    setForm({ name: '', email: '', phone: '', subject: 'commande', ceremony: '', message: '' });
  }

  return (
    <main>
      {/* Hero */}
      <section className="px-8 pt-20 md:pt-28 pb-16 md:pb-20" style={{ background: 'var(--surface-container-lowest)' }}>
        <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>
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-end">
            <div className="lg:col-span-8">
              <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Nous joindre</p>
              <h1 className="font-serif text-5xl md:text-7xl tracking-tight leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
                Contact<br/>
                <span className="italic">& rendez-vous</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)' }}>
                Un conseiller à votre écoute sept jours sur sept pour vous accompagner dans ces moments délicats.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Info bar */}
      <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-1 md:grid-cols-2">
          {[
            { icon: 'mail', kicker: 'Email', main: 'contact@fleursdelyon.fr', sub: 'Réponse sous 2 heures' },
            { icon: 'location_on', kicker: 'Atelier', main: '15 Rue des Remparts d\'Ainay', sub: '69002 Lyon — Presqu\'île' },
          ].map((c, i) => (
            <div key={i} className="py-10 md:py-14 px-2 md:px-8 flex items-start gap-5" style={{ borderRight: i < 1 ? '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' : 'none' }}>
              <div className="flex-shrink-0 w-12 h-12 flex items-center justify-center" style={{ background: 'color-mix(in srgb, var(--primary) 10%, transparent)' }}>
                <Icon name={c.icon} className="text-[20px]" style={{ color: 'var(--primary)' }} />
              </div>
              <div>
                <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--on-surface-variant)' }}>{c.kicker}</p>
                <p className="font-serif text-xl md:text-2xl leading-tight mb-1" style={{ color: 'var(--on-surface)' }}>{c.main}</p>
                <p className="text-xs" style={{ color: 'var(--on-surface-variant)' }}>{c.sub}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Form + side */}
      <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-14 lg:gap-20">
          {/* Left — copy */}
          <div className="lg:col-span-4">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Formulaire</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.05] mb-8" style={{ color: 'var(--on-surface)' }}>
              Écrivez-nous<br/>
              <span className="italic">en quelques mots</span>
            </h2>
            <p className="leading-relaxed text-base mb-10" style={{ color: 'var(--on-surface-variant)' }}>
              Renseignez le formulaire ci-contre, nous vous répondons sous deux heures en journée. Pour une cérémonie urgente, précisez-le dans l'objet de votre message.
            </p>

            <div className="p-8 mb-6" 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)' }}>Urgence cérémonie</p>
              <p className="font-serif text-xl mb-2" style={{ color: 'var(--on-surface)' }}>contact@fleursdelyon.fr</p>
              <p className="text-xs leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
                Pour les cérémonies dans les prochaines 24 heures, indiquez « Urgence » dans votre message. Livraison express possible en moins de 2h dans Lyon.
              </p>
            </div>

            <div className="grid grid-cols-2 gap-px" style={{ background: 'color-mix(in srgb, var(--on-surface) 12%, transparent)' }}>
              {[
                { icon: 'schedule', label: '< 2h', sub: 'Réponse moyenne' },
                { icon: 'verified', label: '7j/7', sub: 'Équipe joignable' },
              ].map((s, i) => (
                <div key={i} className="p-6" style={{ background: 'var(--surface-container-lowest)' }}>
                  <Icon name={s.icon} className="text-[20px] mb-3" style={{ color: 'var(--primary)' }} />
                  <p className="font-serif text-xl mb-1" style={{ color: 'var(--on-surface)' }}>{s.label}</p>
                  <p className="text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>{s.sub}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Right — form */}
          <div className="lg:col-span-8">
            <form onSubmit={submit} className="p-8 md:p-12 space-y-8" style={{ background: 'var(--surface-container-lowest)' }}>
              {/* Name + email */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <label className="flex flex-col gap-3">
                  <span className="text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>Nom complet *</span>
                  <input
                    required
                    type="text"
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    className="bg-transparent py-3 focus:outline-none text-base transition-colors"
                    style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 25%, transparent)', color: 'var(--on-surface)' }}
                    onFocus={(e) => e.target.style.borderBottomColor = 'var(--primary)'}
                    onBlur={(e) => e.target.style.borderBottomColor = 'color-mix(in srgb, var(--on-surface) 25%, transparent)'}
                  />
                </label>
                <label className="flex flex-col gap-3">
                  <span className="text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>Email *</span>
                  <input
                    required
                    type="email"
                    value={form.email}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                    className="bg-transparent py-3 focus:outline-none text-base"
                    style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 25%, transparent)', color: 'var(--on-surface)' }}
                    onFocus={(e) => e.target.style.borderBottomColor = 'var(--primary)'}
                    onBlur={(e) => e.target.style.borderBottomColor = 'color-mix(in srgb, var(--on-surface) 25%, transparent)'}
                  />
                </label>
              </div>

              {/* Email (replaces phone) + ceremony */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <label className="flex flex-col gap-3">
                  <span className="text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>Lieu / date de cérémonie</span>
                  <input
                    type="text"
                    placeholder="Ex : Crématorium de Lyon, 24 oct. 14h30"
                    value={form.ceremony}
                    onChange={(e) => setForm({ ...form, ceremony: e.target.value })}
                    className="bg-transparent py-3 focus:outline-none text-base placeholder:opacity-40"
                    style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 25%, transparent)', color: 'var(--on-surface)' }}
                    onFocus={(e) => e.target.style.borderBottomColor = 'var(--primary)'}
                    onBlur={(e) => e.target.style.borderBottomColor = 'color-mix(in srgb, var(--on-surface) 25%, transparent)'}
                  />
                </label>
                <label className="flex flex-col gap-3">
                  <span className="text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>Type de demande</span>
                  <input
                    type="text"
                    placeholder="Ex : couronne, bouquet, conseil…"
                    value={form.subject === 'commande' ? '' : form.subject}
                    onChange={(e) => setForm({ ...form, subject: e.target.value })}
                    className="bg-transparent py-3 focus:outline-none text-base placeholder:opacity-40"
                    style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 25%, transparent)', color: 'var(--on-surface)' }}
                    onFocus={(e) => e.target.style.borderBottomColor = 'var(--primary)'}
                    onBlur={(e) => e.target.style.borderBottomColor = 'color-mix(in srgb, var(--on-surface) 25%, transparent)'}
                  />
                </label>
              </div>

              {/* Message */}
              <label className="flex flex-col gap-3">
                <span className="text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>Message *</span>
                <textarea
                  required
                  rows={6}
                  value={form.message}
                  onChange={(e) => setForm({ ...form, message: e.target.value })}
                  placeholder="Décrivez-nous votre demande, le type de composition souhaité, le message pour le ruban…"
                  className="bg-transparent py-3 focus:outline-none text-base resize-none placeholder:opacity-40 leading-relaxed"
                  style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 25%, transparent)', color: 'var(--on-surface)' }}
                  onFocus={(e) => e.target.style.borderBottomColor = 'var(--primary)'}
                  onBlur={(e) => e.target.style.borderBottomColor = 'color-mix(in srgb, var(--on-surface) 25%, transparent)'}
                />
              </label>

              {/* Footer */}
              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6 pt-6" style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' }}>
                <p className="text-xs max-w-md leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
                  En envoyant ce formulaire, vous acceptez que vos données soient utilisées pour répondre à votre demande. Elles ne seront jamais transmises à des tiers.
                </p>
                <button
                  type="submit"
                  className="inline-flex items-center gap-3 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-all hover:opacity-90 hover:gap-4 whitespace-nowrap"
                  style={{ background: 'var(--primary)', color: '#fff' }}
                >
                  Envoyer le message
                  <Icon name="arrow_forward" className="text-[14px]" />
                </button>
              </div>

              {sent && (
                <div className="p-5 flex items-start gap-4" style={{ background: 'color-mix(in srgb, var(--primary) 10%, transparent)', borderLeft: '2px solid var(--primary)' }}>
                  <Icon name="check_circle" className="text-[20px] mt-0.5" style={{ color: 'var(--primary)' }} />
                  <div>
                    <p className="font-serif text-lg mb-1" style={{ color: 'var(--on-surface)' }}>Message envoyé</p>
                    <p className="text-sm" style={{ color: 'var(--on-surface-variant)' }}>Notre équipe vous répond sous deux heures en journée.</p>
                  </div>
                </div>
              )}
            </form>
          </div>
        </div>
      </section>

      {/* Horaires + accès */}
    </main>
  );
}

function AProposPage({ setRoute }) {
  return (
    <main>
      {/* Hero */}
      <section className="px-8 pt-20 md:pt-28 pb-16 md:pb-20" style={{ background: 'var(--surface-container-lowest)' }}>
        <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>
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-end">
            <div className="lg:col-span-8">
              <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Notre maison</p>
              <h1 className="font-serif text-5xl md:text-7xl tracking-tight leading-[1.02]" style={{ color: 'var(--on-surface)' }}>
                Fleurs de Deuil Lyon<br/>
                <span className="italic">depuis 2008</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)' }}>
                Un atelier floral spécialisé dans les compositions funéraires, fondé à Lyon et au service des familles lyonnaises depuis plus de quinze ans.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Stats bar */}
      <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: '15+', l: 'Années d\'expérience' },
            { n: '7j/7', l: 'Ouvert et joignable' },
            { n: '4h', l: 'Livraison Grand Lyon' },
            { n: '100%', l: 'Fleurs fraîches' },
          ].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>

      {/* Histoire */}
      <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-14 lg:gap-20 items-start">
          <div className="lg:col-span-5 lg:sticky lg:top-32">
            <div className="aspect-[4/5] overflow-hidden" style={{ background: 'var(--surface-container-low)' }}>
              <img
                src="/assets/editorial/compositionfunerairerosesfeuillagefondmarbrelyon.jpg"
                alt="Atelier Fleurs de Deuil Lyon — composition funéraire artisanale"
                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 Deuil Lyon — Presqu'île
            </figcaption>
          </div>

          <div className="lg:col-span-7 space-y-10">
            <div>
              <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Notre histoire</p>
              <h2 className="font-serif text-4xl md:text-5xl leading-[1.05] mb-8" style={{ color: 'var(--on-surface)' }}>
                Nés à Lyon,<br/>
                <span className="italic">pour les familles lyonnaises</span>
              </h2>
            </div>

            <div className="space-y-6 leading-relaxed text-[15px] md:text-base" style={{ color: 'var(--on-surface)' }}>
              <p>
                Fleurs de Deuil Lyon a ouvert ses portes en 2008, dans le quartier de la Presqu'île. À l'origine, un constat simple : les familles en deuil méritaient un interlocuteur unique, disponible, capable de prendre en charge la commande florale sans les alourdir de démarches supplémentaires dans des moments déjà difficiles.
              </p>
              <p style={{ color: 'var(--on-surface-variant)' }}>
                Depuis, nous composons chaque jour des couronnes, centres funéraires et bouquets livrés dans les funérariums, crématoriums, églises et cimetières de l'agglomération lyonnaise. Notre connaissance du territoire — chaque arrondissement, chaque établissement, chaque protocole — nous permet d'assurer une livraison discrète et ponctuelle, coordinée directement avec les pompes funèbres.
              </p>
              <p style={{ color: 'var(--on-surface-variant)' }}>
                Ce qui n'a pas changé depuis le premier jour : nos fleuristes composent à la main, avec des fleurs fraîches sélectionnées le matin même. Pas de compositions préfabriquées, pas d'intermédiaire. Chaque pièce est réalisée pour une seule famille, pour un seul moment.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-10" style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' }}>
              <div>
                <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--primary)' }}>Localisation</p>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface)' }}>
                  15 Rue des Remparts d'Ainay<br/>69002 Lyon — Presqu'île
                </p>
              </div>
              <div>
                <p className="text-[10px] uppercase tracking-widest mb-2" style={{ color: 'var(--primary)' }}>Disponibilité</p>
                <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface)' }}>
                  Lundi – Dimanche, 7h – 20h<br/>Service urgence 7j/7
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Valeurs */}
      <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-3xl mb-20">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Ce qui nous guide</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.05]" style={{ color: 'var(--on-surface)' }}>
              Trois engagements,<br/>
              <span className="italic">sans exception</span>
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-px" style={{ background: 'color-mix(in srgb, var(--on-surface) 12%, transparent)' }}>
            {[
              {
                num: '01',
                icon: 'spa',
                title: 'L\'artisanat comme point de départ',
                text: "Chaque composition est réalisée à la main dans notre atelier, le jour de la livraison. Nous refusons le prêt-à-porter floral. Une couronne pour une cérémonie à 14h30 est composée le matin même, avec des fleurs sélectionnées à l'ouverture du marché. C'est ce soin du détail qui fait la différence quand on dépose une composition devant un cercueil.",
              },
              {
                num: '02',
                icon: 'visibility_off',
                title: 'La discrétion comme règle absolue',
                text: "Nous livrons dans des lieux de recueillement. Nos livreurs savent ce que ça implique — sobriété dans la tenue, ponctualité, coordination silencieuse avec l'établissement. Nous ne sonnons pas à la porte d'une famille endeuillée sans prévenir. Chaque livraison est préparée en amont avec l'équipe du funérarium pour s'intégrer sans perturber.",
              },
              {
                num: '03',
                icon: 'handshake',
                title: 'La proximité comme choix délibéré',
                text: "Nous travaillons exclusivement dans le Grand Lyon et le Rhône. Ce n'est pas une contrainte — c'est un choix. Connaître chaque funérarium, chaque cimetière, chaque responsable de salle nous permet de garantir ce que les plateformes nationales ne peuvent pas : une livraison vraiment coordonnée, pas juste tracée. Quand nous disons 4h, c'est 4h.",
              },
            ].map((v, i) => (
              <article key={i} className="p-10 md:p-12 flex flex-col gap-6" style={{ background: 'var(--surface-container-lowest)' }}>
                <div className="flex items-center justify-between mb-2">
                  <span className="font-serif text-5xl italic" style={{ color: 'color-mix(in srgb, var(--primary) 30%, transparent)' }}>{v.num}</span>
                  <Icon name={v.icon} className="text-3xl" style={{ color: 'var(--primary)', opacity: 0.7 }} />
                </div>
                <h3 className="font-serif text-2xl md:text-3xl leading-tight" style={{ color: 'var(--on-surface)' }}>
                  {v.title}
                </h3>
                <p className="text-sm md:text-base leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
                  {v.text}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Citation */}
      <section className="px-8 py-24 md:py-32" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-5xl mx-auto text-center">
          <Icon name="format_quote" className="text-5xl mb-10" style={{ color: 'var(--primary)', opacity: 0.4 }} />
          <blockquote className="font-serif text-3xl md:text-4xl lg:text-5xl leading-[1.18] mb-12" style={{ color: 'var(--on-surface)' }}>
            "Les fleurs que l'on dépose lors d'un deuil ne sont pas un geste d'apparat. Ce sont les mots qu'on n'arrive pas à dire."
          </blockquote>
          <p className="text-[11px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
            L'équipe — Fleurs de Deuil Lyon
          </p>
        </div>
      </section>

      {/* Savoir-faire */}
      <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 items-start">
          <div className="lg:col-span-7 space-y-8">
            <p className="uppercase tracking-widest text-[11px]" style={{ color: 'var(--primary)' }}>Notre savoir-faire</p>
            <h2 className="font-serif text-4xl md:text-5xl leading-[1.05]" style={{ color: 'var(--on-surface)' }}>
              De la fleur à la cérémonie,<br/>
              <span className="italic">tout se passe dans nos mains</span>
            </h2>

            <div className="space-y-10 pt-4">
              {[
                {
                  step: '01',
                  title: 'Approvisionnement quotidien',
                  text: "Chaque matin, nous sélectionnons nos fleurs auprès de producteurs régionaux et du marché de Rungis. Aucune fleur de la veille dans nos compositions. Nous travaillons avec ce qui est frais, ce qui est beau, ce qui tiendra toute la cérémonie.",
                },
                {
                  step: '02',
                  title: 'Composition artisanale',
                  text: "Nos fleuristes assemblent chaque pièce à la main selon votre commande — le type de composition, les coloris, le message du ruban. Nous n'utilisons pas de moules préfabriqués. Chaque couronne, chaque centre, chaque bouquet est unique.",
                },
                {
                  step: '03',
                  title: 'Livraison coordonnée',
                  text: "Avant chaque livraison, nous contactons l'établissement pour confirmer l'heure exacte de la cérémonie et le point de remise. Nos livreurs déposent la composition avec soin, en temps et en heure, sans que vous ayez à intervenir.",
                },
              ].map((s, i) => (
                <div key={i} className="flex gap-8" style={{ borderTop: i === 0 ? '1px solid color-mix(in srgb, var(--on-surface) 12%, transparent)' : 'none', paddingTop: i === 0 ? '2.5rem' : '0' }}>
                  <span className="font-serif text-sm italic flex-shrink-0 pt-1" style={{ color: 'color-mix(in srgb, var(--primary) 55%, transparent)' }}>{s.step}</span>
                  <div className="space-y-2">
                    <h3 className="font-serif text-xl md:text-2xl" style={{ color: 'var(--on-surface)' }}>{s.title}</h3>
                    <p className="text-sm md:text-base leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{s.text}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="lg:col-span-5 lg:sticky lg:top-32 space-y-6">
            <div className="aspect-square overflow-hidden" style={{ background: 'var(--surface-container-low)' }}>
              <img
                src="/assets/editorial/perceneigefleursdeuillyon.jpg"
                alt="Fleuriste composant une couronne funéraire à Lyon"
                className="w-full h-full object-cover"
              />
            </div>
            <div className="p-8" 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)' }}>Approvisionnement local</p>
              <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface)' }}>
                Nous travaillons en priorité avec des producteurs du Rhône et de l'Isère, complétés par le marché de Rungis pour les variétés de saison introuvables localement.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="px-8 py-24 md:py-28" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-10 items-center">
          <div className="md:col-span-8">
            <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>Nous sommes là</p>
            <h3 className="font-serif text-3xl md:text-4xl leading-tight mb-4" style={{ color: 'var(--on-surface)' }}>
              Parlez-nous de la cérémonie.<br/>
              <span className="italic">On s'occupe du reste.</span>
            </h3>
            <p className="leading-relaxed text-base max-w-2xl" style={{ color: 'var(--on-surface-variant)' }}>
              Une question sur une composition, un délai serré, une demande particulière — notre équipe est disponible sept jours sur sept pour vous accompagner.
            </p>
          </div>
          <div className="md:col-span-4 flex flex-col sm:flex-row md:flex-col gap-4 md:items-end">
            <button
              onClick={() => setRoute('contact')}
              className="inline-flex items-center gap-3 px-7 py-4 text-[11px] uppercase tracking-widest font-medium transition-all hover:opacity-90 hover:gap-4"
              style={{ background: 'var(--primary)', color: '#fff' }}
            >
              Nous contacter
              <Icon name="arrow_forward" className="text-[14px]" />
            </button>
            <button
              onClick={() => setRoute('boutique')}
              className="inline-flex items-center gap-3 px-7 py-4 text-[11px] uppercase tracking-widest font-medium transition-all hover:opacity-80"
              style={{ border: '1px solid color-mix(in srgb, var(--primary) 40%, transparent)', color: 'var(--primary)' }}
            >
              Voir les créations
              <Icon name="arrow_forward" className="text-[14px]" />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { TanatoriosPage, ContactPage, AProposPage });