// Shared nav + footer + icons

const Icon = ({ name, size = 18, stroke = 1.7 }) => {
  const paths = {
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    map: <path d="M9 4l-6 2v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14" />,
    pin: <><path d="M12 21s-7-6.5-7-12a7 7 0 0114 0c0 5.5-7 12-7 12z" /><circle cx="12" cy="9" r="2.5" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>,
    target: <><circle cx="12" cy="12" r="8" /><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3" /></>,
    whatsapp: <><path d="M21 12a9 9 0 1 1-4.2-7.6L21 3l-1.4 4.2A9 9 0 0 1 21 12z" /><path d="M9 9c0 4 3 7 7 7M9 9c.5-.5 1-1 1.5-1l1 2-1.5 1.5M16 16c-.5.5-1 1-1 1l-2-1L15 14" strokeLinejoin="round" /></>,
    heart: <path d="M12 21s-7-4.5-9-9c-1.2-3 0-7 4-7 2.5 0 4 2 5 3 1-1 2.5-3 5-3 4 0 5.2 4 4 7-2 4.5-9 9-9 9z" />,
    users: <><circle cx="9" cy="8" r="3.5" /><path d="M2 21a7 7 0 0 1 14 0" /><circle cx="17" cy="9" r="2.5" /><path d="M16 14h2a4 4 0 0 1 4 4v1" /></>,
    home: <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-9z" />,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    chevron: <path d="m9 6 6 6-6 6" />,
    close: <path d="M6 6l12 12M18 6 6 18" />,
    menu: <path d="M4 7h16M4 12h16M4 17h16" />,
    sparkle: <path d="M12 3l1.5 5L18 9.5 13.5 11 12 16l-1.5-5L6 9.5 10.5 8 12 3zM19 16l.7 2 2 .8-2 .7-.7 2-.8-2-2-.7 2-.8L19 16z" />,
    quote: <path d="M7 7c-2 0-3.5 2-3.5 4s1.5 4 3.5 4M17 7c-2 0-3.5 2-3.5 4s1.5 4 3.5 4" />
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
      {paths[name]}
    </svg>);

};

const NAV_ITEMS = [
{ id: "home", label: "Accueil" },
{ id: "find", label: "Trouver ma FI" },
{ id: "about", label: "À propos" }];


const Nav = ({ route, setRoute }) =>
<header className="nav">
    <div className="container nav__inner">
      <a className="nav__logo" onClick={() => setRoute("home")} href="#home">
        <img src="assets/logo.png" alt="Famille d'Impact Angers" />
      </a>
      <nav className="nav__links">
        {NAV_ITEMS.map((item) =>
      <button
        key={item.id}
        className={"nav__link" + (route === item.id ? " nav__link--active" : "")}
        onClick={() => setRoute(item.id)}>
        
            {item.label}
          </button>
      )}
      </nav>
      <button className="nav__cta" onClick={() => setRoute("find")}>
        <Icon name="pin" size={16} />
        Trouver ma FI
      </button>
    </div>
  </header>;


const Footer = ({ setRoute }) =>
<footer className="footer">
    <div className="container">
      <div className="footer__grid">
        <div className="footer__brand">
          <img src="assets/logo-white.png" alt="" />
          <p className="footer__tag">La dynamique des Familles d'Impact à Angers — vivre l'amour fraternel à proximité, partout dans la ville.

        </p>
        </div>
        <div className="footer__col">
          <h4>Le site</h4>
          <a onClick={() => setRoute("home")} href="#home">Accueil</a>
          <a onClick={() => setRoute("find")} href="#find">Trouver ma FI</a>
          <a onClick={() => setRoute("about")} href="#about">À propos</a>
        </div>
        <div className="footer__col">
          <h4>LA DYNAMIQUE</h4>
          <a href="https://www.familledimpact.com" target="_blank" rel="noreferrer">familledimpact.com</a>
          <a href="#"></a>
          <a href="#"></a>
        </div>
        <div className="footer__col">
          <h4>Nous écrire</h4>
          <a href="https://wa.me/33624763374?text=Bonjour%20%21%20J%27ai%20une%20question%20au%20sujet%20des%20Familles%20d%27Impact%20Angers." target="_blank" rel="noreferrer">WhatsApp · +33 6 24 76 33 74</a>
          <a href="https://www.instagram.com/egliseicc_angers/" target="_blank" rel="noreferrer">Instagram</a>
          <a href="#"></a>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 Famille d'Impact Angers</span>
        <span>L'amour fraternel à proximité</span>
      </div>
    </div>
  </footer>;


Object.assign(window, { Icon, Nav, Footer, NAV_ITEMS });