// Top navigation — floating pill style, scroll-aware.
const { useState: useStateN, useEffect: useEffectN } = React;

const navStyles = {
  wrap: {
    position: 'fixed', top: 20, left: 0, right: 0, zIndex: 50,
    display: 'flex', justifyContent: 'center', pointerEvents: 'none',
  },
  bar: {
    pointerEvents: 'auto',
    display: 'flex', alignItems: 'center', gap: 18,
    padding: '10px 12px 10px 22px',
    backdropFilter: 'blur(20px) saturate(140%)',
    WebkitBackdropFilter: 'blur(20px) saturate(140%)',
    border: '1px solid var(--line-2)',
    borderRadius: 999,
    transition: 'background .35s ease, border-color .35s ease',
  },
  logo: { display: 'flex', alignItems: 'center', gap: 10 },
  mark: { height: 26, width: 'auto' },
  links: { display: 'flex', gap: 4 },
  link: { padding: '8px 14px', fontSize: 14, color: 'var(--ink-2)', borderRadius: 999, transition: 'color .2s, background .2s' },
  themeBtn: {
    width: 34, height: 34, borderRadius: 999,
    display: 'grid', placeItems: 'center',
    border: '1px solid var(--line-2)',
    color: 'var(--ink-2)',
    cursor: 'pointer',
    transition: 'color .2s, background .2s, border-color .2s',
  },
  cta: { padding: '9px 16px', fontSize: 14, background: 'var(--accent)', color: 'var(--accent-fg)', borderRadius: 999, fontWeight: 500 },
};

function Nav() {
  const links = [
    { h: '#comment', t: 'Fonctionnement' },
    { h: '#secteurs', t: 'Secteurs' },
    { h: '#tarifs',   t: 'Tarifs' },
    { h: '#clients',  t: 'Clients' },
    { h: '#faq',      t: 'FAQ' },
  ];

  const [theme, setTheme] = useStateN(() => (window.__TWEAKS && window.__TWEAKS.theme) || 'dark');

  // Stay in sync with any other place that flips the theme (Tweaks panel).
  useEffectN(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__edit_mode_set_keys' && d.edits && d.edits.theme) {
        setTheme(d.edits.theme);
      }
    };
    window.addEventListener('message', onMsg);
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const toggleTheme = () => {
    const next = theme === 'dark' ? 'light' : 'dark';
    setTheme(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { theme: next } }, '*');
  };

  // Translucent pill: keep the original near-black on dark, switch to a soft white on light.
  const barBg = theme === 'light' ? 'rgba(255,255,255,.72)' : 'rgba(18,18,18,.72)';
  const linkHoverBg = theme === 'light' ? 'rgba(10,10,10,.05)' : 'rgba(245,243,238,.05)';

  return (
    <div style={navStyles.wrap}>
      <nav style={{...navStyles.bar, background: barBg}} className="nav-bar">
        <a href="#" style={navStyles.logo} aria-label="BackMeUp">
          <img src="assets/logo-white.png" alt="BackMeUp" className="logo-dark"  style={navStyles.mark}/>
          <img src="assets/logo.png"       alt="BackMeUp" className="logo-light" style={navStyles.mark}/>
        </a>
        <div style={navStyles.links} className="nav-links">
          {links.map((l) => (
            <a key={l.h} href={l.h} style={navStyles.link}
               onMouseEnter={(e)=>{e.currentTarget.style.color='var(--ink)';e.currentTarget.style.background=linkHoverBg;}}
               onMouseLeave={(e)=>{e.currentTarget.style.color='var(--ink-2)';e.currentTarget.style.background='transparent';}}>
              {l.t}
            </a>
          ))}
        </div>
        <button
          type="button"
          onClick={toggleTheme}
          aria-label={theme === 'dark' ? 'Passer en thème clair' : 'Passer en thème sombre'}
          title={theme === 'dark' ? 'Thème clair' : 'Thème sombre'}
          style={navStyles.themeBtn}
          onMouseEnter={(e)=>{e.currentTarget.style.color='var(--ink)';e.currentTarget.style.borderColor='var(--ink-3)';}}
          onMouseLeave={(e)=>{e.currentTarget.style.color='var(--ink-2)';e.currentTarget.style.borderColor='var(--line-2)';}}
        >
          {theme === 'dark' ? <SunIcon/> : <MoonIcon/>}
        </button>
        <a href="#contact" style={navStyles.cta} className="nav-cta">Demander un devis →</a>
      </nav>
    </div>
  );
}

function SunIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
      <circle cx="8" cy="8" r="3"/>
      <path d="M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1 1M11.6 11.6l1 1M3.4 12.6l1-1M11.6 4.4l1-1"/>
    </svg>
  );
}
function MoonIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M13.5 9.5A5.5 5.5 0 016.5 2.5a5.5 5.5 0 107 7z"/>
    </svg>
  );
}

Object.assign(window, { Nav });