// Shared components: Nav, Footer, Icon, Button, TweaksPanel

const { useState, useEffect, useRef, useMemo } = React;

function Icon({ name, className = '', style }) {
  return <span className={`material-symbols-outlined ${className}`} style={style}>{name}</span>;
}

function NavBar({ route, setRoute, cartCount, onOpenCart, onOpenTweaks }) {
  const items = [
    { key: 'boutique', label: 'Fleuriste' },
    { key: 'tanatorios', label: 'Funérariums' },
    { key: 'contact', label: 'Contact' },
    { key: 'apropos', label: 'À propos' },
  ];
  return (
    <header className="sticky top-0 z-40 backdrop-blur-xl" style={{ background: 'color-mix(in srgb, var(--surface) 82%, transparent)' }}>
      <div className="flex justify-between items-center w-full px-8 py-5 max-w-7xl mx-auto">
        <button onClick={() => setRoute('home')} className="flex items-center">
          <img src="assets/logo.png" alt="Fleurs Deuil Lyon" className="h-8 md:h-9 w-auto object-contain" style={{ filter: 'var(--logo-filter, none)' }} />
        </button>
        <nav className="hidden md:flex items-center space-x-10">
          {items.map(it => {
            const active = route === it.key;
            return (
              <button
                key={it.key}
                onClick={() => setRoute(it.key)}
                className="text-sm font-body transition-opacity duration-300 hover:opacity-70 pb-1"
                style={{
                  color: active ? 'var(--primary)' : 'var(--on-surface-variant)',
                  fontWeight: active ? 600 : 400,
                  borderBottom: active ? '1.5px solid var(--primary)' : '1.5px solid transparent',
                }}
              >
                {it.label}
              </button>
            );
          })}
        </nav>
        <div className="flex items-center gap-5">
          <button onClick={onOpenTweaks} className="hidden md:inline-flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-widest transition-opacity hover:opacity-70" style={{ color: 'var(--primary)' }}>
            <Icon name="palette" className="text-base" /> Couleurs
          </button>
          <button onClick={onOpenCart} className="relative transition-opacity hover:opacity-70" style={{ color: 'var(--primary)' }}>
            <Icon name="shopping_basket" />
            {cartCount > 0 && (
              <span className="absolute -top-2 -right-2 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold flex items-center justify-center" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
                {cartCount}
              </span>
            )}
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer({ setRoute }) {
  return (
    <footer className="mt-32" style={{ background: 'var(--footer-bg)' }}>
      <div className="max-w-7xl mx-auto px-12 py-20 grid grid-cols-1 md:grid-cols-3 gap-12">
        <div className="space-y-6">
          <img src="assets/logo.png" alt="Fleurs Deuil Lyon" className="h-10 w-auto object-contain mb-2" style={{ filter: 'var(--logo-filter, none)' }} />
          <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
            Artisan fleuriste spécialisé dans l'accompagnement funéraire. Nous mettons notre savoir-faire au service de votre hommage avec discrétion et élégance.
          </p>
          <div className="flex items-center gap-3 text-xs font-medium uppercase tracking-widest" style={{ color: 'var(--primary)' }}>
            <Icon name="schedule" className="text-base" />
            Atelier ouvert 7j/7
          </div>
        </div>
        <div className="space-y-6">
          <h5 className="font-medium uppercase tracking-widest text-xs" style={{ color: 'var(--primary)' }}>Informations</h5>
          <ul className="space-y-3 text-sm" style={{ color: 'var(--on-surface-variant)' }}>
            <li><button onClick={() => setRoute('tanatorios')} className="hover:opacity-70 transition-opacity text-left">Funérariums</button></li>
            <li><button onClick={() => setRoute('apropos')} className="hover:opacity-70 transition-opacity text-left">À propos</button></li>
            <li><button onClick={() => setRoute('contact')} className="hover:opacity-70 transition-opacity text-left">Contact</button></li>
            <li><a href="#" className="hover:opacity-70 transition-opacity">Mentions légales</a></li>
          </ul>
        </div>
        <div className="space-y-6">
          <h5 className="font-medium uppercase tracking-widest text-xs" style={{ color: 'var(--primary)' }}>Nous contacter</h5>
          <div className="space-y-3 text-sm" style={{ color: 'var(--on-surface-variant)' }}>
            <p className="flex items-center gap-3"><Icon name="mail" className="text-base" /> contact@fleurs-deuil-lyon.fr</p>
            <p className="flex items-center gap-3"><Icon name="location_on" className="text-base" /> Quartier Croix-Rousse, 69004 Lyon</p>
          </div>
        </div>
      </div>
      <div className="max-w-7xl mx-auto px-12 pb-10">
        <div className="pt-8 flex flex-col md:flex-row justify-between items-center gap-4" style={{ borderTop: '1px solid color-mix(in srgb, var(--primary) 12%, transparent)' }}>
          <p className="text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)', opacity: 0.6 }}>© Fleurs de Deuil Lyon · Artisan Fleuriste Funéraire</p>
          <div className="flex gap-4 text-xl" style={{ color: 'var(--on-surface-variant)', opacity: 0.5 }}>
            <Icon name="payments" />
            <Icon name="lock" />
            <Icon name="verified" />
          </div>
        </div>
      </div>
    </footer>
  );
}

function TrustBar() {
  const items = [
    { icon: 'local_shipping', label: 'Logistique', value: 'Livraison le jour même' },
    { icon: 'visibility_off', label: 'Engagement', value: 'Service discret' },
    { icon: 'schedule', label: 'Disponibilité', value: 'Disponible 24h/24' },
    { icon: 'location_on', label: 'Périmètre', value: 'Livraison Grand Lyon' },
  ];
  return (
    <section className="py-14" style={{ background: 'var(--surface-container-low)' }}>
      <div className="max-w-7xl mx-auto px-8">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-y-10 md:gap-8">
          {items.map(it => (
            <div key={it.label} className="flex flex-col md:flex-row items-center md:items-start gap-4 text-center md:text-left">
              <Icon name={it.icon} className="text-3xl" style={{ color: 'var(--primary)' }} />
              <div>
                <p className="uppercase tracking-widest text-[10px] mb-1" style={{ color: 'var(--primary)' }}>{it.label}</p>
                <p className="text-sm font-medium" style={{ color: 'var(--on-surface)' }}>{it.value}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TweaksPanel({ open, onClose, primaryColor, setPrimaryColor }) {
  const palette = [
    { key: '#000e77', label: 'Bleu Sanctuaire', sub: 'Original' },
    { key: '#0f22a5', label: 'Bleu Cobalt', sub: 'Plus saturé' },
    { key: '#1e3a5f', label: 'Bleu Ardoise', sub: 'Feutré' },
    { key: '#2d4a3e', label: 'Vert Sauge', sub: 'Organique' },
    { key: '#4a1e3a', label: 'Prune', sub: 'Mémoriel' },
    { key: '#3a2d1e', label: 'Terre Brûlée', sub: 'Chaleureux' },
    { key: '#1c1c1c', label: 'Noir Encre', sub: 'Minimaliste' },
  ];
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-[60] pointer-events-none">
      <div className="absolute inset-0 pointer-events-auto" style={{ background: 'rgba(0,0,0,0.12)' }} onClick={onClose} />
      <div className="absolute bottom-6 right-6 w-[360px] max-w-[calc(100vw-3rem)] pointer-events-auto animate-fadeInUp" style={{ background: 'var(--surface-container-lowest)', boxShadow: '0 24px 60px rgba(20, 20, 30, 0.18)' }}>
        <div className="flex items-center justify-between px-6 py-4" style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)' }}>
          <div>
            <p className="text-[10px] uppercase tracking-widest font-medium" style={{ color: 'var(--primary)' }}>Tweaks</p>
            <p className="font-serif text-lg" style={{ color: 'var(--on-surface)' }}>Couleur primaire</p>
          </div>
          <button onClick={onClose} className="hover:opacity-60 transition-opacity"><Icon name="close" /></button>
        </div>
        <div className="p-6 space-y-2">
          {palette.map(p => {
            const active = p.key.toLowerCase() === primaryColor.toLowerCase();
            return (
              <button
                key={p.key}
                onClick={() => setPrimaryColor(p.key)}
                className="w-full flex items-center gap-4 p-3 transition-colors hover:bg-[var(--surface-container-low)] text-left"
                style={{ background: active ? 'var(--surface-container-low)' : 'transparent' }}
              >
                <span className="w-10 h-10 rounded-sm flex-shrink-0" style={{ background: p.key }} />
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium" style={{ color: 'var(--on-surface)' }}>{p.label}</p>
                  <p className="text-xs" style={{ color: 'var(--on-surface-variant)' }}>{p.sub}</p>
                </div>
                {active && <Icon name="check" className="text-base" style={{ color: 'var(--primary)' }} />}
              </button>
            );
          })}
        </div>
        <div className="px-6 py-4 text-[11px]" style={{ background: 'var(--surface-container-low)', color: 'var(--on-surface-variant)' }}>
          Le changement s'applique à toute l'interface. Activable aussi depuis la barre d'édition.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, NavBar, Footer, TrustBar, TweaksPanel });