// ─────────────────────────────────────────────────────────────
// Mezoo — Chrome (top bar, primary nav, footer)
// Persistent across all routes; nav highlights current page and
// triggers smooth page transitions via the router context.
// ─────────────────────────────────────────────────────────────

function TopBar({ theme, setTheme }) {
  const { page, go } = useRouter();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const items = [
    { id: 'home', label: 'Atelier' },
    { id: 'manifeste', label: 'Manifeste' },
    { id: 'case', label: 'Pièce n°47' },
    { id: 'contact', label: 'Rendez-vous' },
  ];

  // Close the mobile menu when the route changes.
  React.useEffect(() => { setMenuOpen(false); }, [page]);
  // Lock body scroll while the mobile sheet is open.
  React.useEffect(() => {
    if (!menuOpen) return undefined;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [menuOpen]);

  return (
    <>
      {/* Thin meta strip — version + locale + theme */}
      <div style={{
        background: 'var(--fg)', color: 'var(--bg)',
        fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
      }}>
        <div className="mz-container-wide" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '8px var(--gutter)',
        }}>
          <span style={{ opacity: 0.75 }}><span className="mz-meta-strip-detail">● </span>mezoo atelier <span className="mz-meta-strip-detail">· paris–lyon · depuis 1996</span></span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 18, opacity: 0.85 }} className="mz-meta-strip-actions">
            <span>FR · EN</span>
            <span style={{ width: 1, height: 10, background: 'currentColor', opacity: 0.3 }} />
            <button
              onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
              style={{
                fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit',
                color: 'inherit', padding: 0, display: 'inline-flex', alignItems: 'center', gap: 6,
              }}
              aria-label="Basculer le thème">
              <span style={{
                width: 10, height: 10, border: '1px solid currentColor',
                background: theme === 'dark' ? 'currentColor' : 'transparent',
                transition: 'background var(--dur-base) var(--ease-out)',
              }} />
              {theme === 'dark' ? 'SOMBRE' : 'CLAIR'}
            </button>
          </span>
        </div>
      </div>

      {/* Primary nav */}
      <nav style={{
        borderBottom: '1px solid var(--hairline)',
        background: 'var(--bg)',
        position: 'sticky', top: 0, zIndex: 50,
        backdropFilter: 'saturate(140%)',
      }}>
        <div className="mz-container-wide" style={{
          display: 'flex', alignItems: 'center', gap: 'var(--s-6)',
          padding: '20px var(--gutter)',
        }}>
          <button onClick={() => go('home')} aria-label="Mezoo — accueil"
            style={{ padding: 0, display: 'inline-flex' }}>
            <MezooLockup size={20} tagline="Atelier numérique" />
          </button>

          <ul className="mz-nav-desktop" style={{
            margin: 0, marginLeft: 'auto', padding: 0, listStyle: 'none',
            display: 'flex', gap: 'var(--s-5)', alignItems: 'center',
          }}>
            {items.map((it) => (
              <li key={it.id}>
                <button onClick={() => go(it.id)} style={{
                  padding: '6px 2px', fontSize: 14, letterSpacing: '-0.005em',
                  position: 'relative', color: page === it.id ? 'var(--fg)' : 'var(--fg-muted)',
                  transition: 'color var(--dur-base) var(--ease-out)',
                }}>
                  {it.label}
                  <span style={{
                    position: 'absolute', left: 0, right: 0, bottom: -2, height: 1,
                    background: 'var(--accent)',
                    transform: page === it.id ? 'scaleX(1)' : 'scaleX(0)',
                    transformOrigin: '0 50%',
                    transition: 'transform var(--dur-base) var(--ease-out)',
                  }} />
                </button>
              </li>
            ))}
          </ul>

          <span aria-hidden style={{ width: 1, height: 22, background: 'var(--hairline)' }} className="mz-nav-desktop" />

          <button onClick={() => go('contact')} className="mz-btn mz-btn-primary mz-nav-desktop">
            Prendre rendez-vous
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 6h8M6 2l4 4-4 4" /></svg>
          </button>

          {/* Mobile-only burger */}
          <button className="mz-burger mz-nav-mobile" onClick={() => setMenuOpen(true)} aria-label="Ouvrir le menu" style={{ marginLeft: 'auto' }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
              <line x1="2" y1="5" x2="14" y2="5" /><line x1="2" y1="11" x2="14" y2="11" />
            </svg>
          </button>
        </div>

        {menuOpen && (
          <div className="mz-mobile-menu" role="dialog" aria-modal="true">
            <div className="mz-mobile-menu-head">
              <MezooLockup size={20} tagline="Atelier numérique" />
              <button className="mz-burger" onClick={() => setMenuOpen(false)} aria-label="Fermer">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
                  <line x1="3" y1="3" x2="13" y2="13" /><line x1="13" y1="3" x2="3" y2="13" />
                </svg>
              </button>
            </div>
            <nav className="mz-mobile-menu-list">
              {items.map((it, i) => (
                <button key={it.id} onClick={() => go(it.id)} aria-current={page === it.id}>
                  <span>{it.label}</span>
                  <span className="mz-mono" style={{ color: 'var(--fg-subtle)', fontSize: 12 }}>0{i + 1}</span>
                </button>
              ))}
            </nav>
            <div className="mz-mobile-menu-foot">
              <button onClick={() => go('contact')} className="mz-btn mz-btn-primary mz-btn-block-mobile">
                Prendre rendez-vous
                <svg width="13" height="13" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 6h8M6 2l4 4-4 4" /></svg>
              </button>
              <span className="mz-mono" style={{ color: 'var(--fg-subtle)', letterSpacing: '0.08em' }}>
                hello@mezoo.studio ·
              </span>
            </div>
          </div>
        )}
      </nav>
    </>
  );
}

// ── Footer ───────────────────────────────────────────────────────
function Footer() {
  const { go } = useRouter();
  const cols = [
    {
      head: 'Atelier',
      items: [
        ['178 rue du Maréchal Leclerc', null],
        ['hello@mezoo.studio', 'mailto:hello@mezoo.studio'],
      ],
    },
    {
      head: 'Pratique',
      items: [
        ['Méthode', 'home'],
        ['Pièces récentes', 'case'],
        ['Prendre rendez-vous', 'contact'],
        ['Journal & livres blancs', null],
      ],
    },
    {
      head: 'Conviction',
      items: [
        ['Manifeste — 3 piliers', 'manifeste'],
        ['Sécurité & conformité', 'manifeste'],
        ['Stack agnostique', 'manifeste'],
        ['Carrières — 2 postes', null],
      ],
    },
  ];

  return (
    <footer style={{
      borderTop: '1px solid var(--hairline-strong)',
      paddingTop: 'var(--s-8)', paddingBottom: 'var(--s-6)',
      background: 'var(--bg)',
    }}>
      <div className="mz-container-wide" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 'var(--s-7)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
          <MezooMark size={56} />
          <p className="mz-italic" style={{ fontSize: 28, lineHeight: 1.15, fontWeight: 400, color: 'var(--fg)' }}>
            Construire des actifs<br />numériques durables.
          </p>
          <p className="mz-body" style={{ maxWidth: 340 }}>
            Conseil agnostique, ingénierie sans dette, sécurité de niveau entreprise — depuis 1996.
          </p>
        </div>
        {cols.map((c) => (
          <div key={c.head} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)' }}>
            <h4 className="mz-eyebrow" style={{ margin: 0 }}>{c.head}</h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map(([label, href]) => (
                <li key={label}>
                  {href && (href.startsWith('mailto:') || href.startsWith('tel:'))
                    ? <a href={href} className="mz-link" style={{ fontSize: 14 }}>{label}</a>
                    : href
                      ? <button onClick={() => go(href)} className="mz-link" style={{ fontSize: 14, padding: 0 }}>{label}</button>
                      : <span style={{ fontSize: 14, color: 'var(--fg-muted)' }}>{label}</span>}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div className="mz-container-wide" style={{ marginTop: 'var(--s-7)', paddingTop: 'var(--s-4)', borderTop: '1px solid var(--hairline)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-subtle)', flexWrap: 'wrap', gap: 16 }}>
        <span>© Mezoo Atelier · MMXXVI — 30 ans d'ingénierie</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, background: 'var(--signal-ok)', borderRadius: 999 }} />
            Tous services opérationnels
          </span>
          <button onClick={() => go('legal')} className="mz-link" style={{ padding: 0, fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', textTransform: 'inherit', color: 'inherit' }}>
            Mentions & RGPD
          </button>
          <span>v2026.1</span>
          <span>SIRET 412 088 044 00037</span>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, Footer });