// BatiSpot — Logo (loaded from source SVG file, never re-inlined)
// Lockup variant only — for icon-only contexts use logo-mark.svg directly.
const Logo = ({ width = 160, dark = false }) => (
  <img
    src={dark ? 'logo-lockup-dark.svg' : 'logo-lockup.svg'}
    width={width}
    height={width * 0.24}
    alt="BatiSpot"
    style={{ display: 'block' }}
  />
);

// Lucide-style inline icons used across the site
const Icon = ({ name, size = 20, stroke = 2, color = "currentColor" }) => {
  const paths = {
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></>,
    zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
    phone: <><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></>,
    folder: <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>,
    msg: <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>,
    lock: <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></>,
    home: <><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></>,
    check: <polyline points="20 6 9 17 4 12"/>,
    user: <><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    briefcase: <><rect x="1" y="6" width="22" height="16" rx="1"/><path d="M6 6V4a2 2 0 012-2h8a2 2 0 012 2v2"/><path d="M1 14h22"/></>,
    wrench: <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>,
    layers: <><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></>,
    bath: <><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></>,
    drop: <path d="M14 14.76V3.5a2.5 2.5 0 00-5 0v11.26a4.5 4.5 0 105 0z"/>,
    roof: <><path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z"/><polyline points="4 22 12 16 20 22"/></>,
    coffee: <><path d="M18 8h1a4 4 0 010 8h-1"/><path d="M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

const BSNav = ({ onCta }) => (
  <nav className="bs-nav">
    <a href="#" className="logo" aria-label="BatiSpot — Accueil"><Logo width={160} /></a>
    <ul className="nav-links">
      <li><a href="#pourquoi">Pourquoi BatiSpot</a></li>
      <li><a href="#services">Nos services</a></li>
      <li><a href="#parcours">Comment ça marche</a></li>
      <li><a href="#" style={{color:"var(--g2)",fontWeight:700}}>Estimer mes travaux</a></li>
    </ul>
    <div className="nav-switch">
      <a href="#" className="nav-pro-link"><Icon name="user" size={14}/> Mon espace</a>
      <a href="#" className="nav-pro-link"><Icon name="briefcase" size={14}/> Vous êtes artisan ?</a>
      <a href="#devis" className="nav-cta" onClick={onCta}>Déposer mon projet</a>
    </div>
  </nav>
);

Object.assign(window, { Logo, Icon, BSNav });