// ============ Header.jsx ============
const NAV = [
{ id: "home", label: "Home" },
{ id: "method", label: "Method" },
{ id: "about", label: "About" },
{ id: "contact", label: "Contact" }];


const Header = ({ current, onNavigate }) => {
  const [navOpen, setNavOpen] = React.useState(false);
  const handleNav = (id) => { setNavOpen(false); onNavigate(id); };
  return (
    <div className="mc-header-wrap">
      <div className="mc-shell">
        <header className="mc-header">
          <button className="mc-mark" onClick={() => handleNav("home")}>
            <img className="mc-mark-img" src="assets/logo-malca-consulting.png" alt="Malca consulting" />
          </button>
          <nav className={"mc-nav" + (navOpen ? " is-open" : "")}>
            {NAV.map((it) =>
              <button
                key={it.id}
                className={"mc-nav-link" + (current === it.id ? " is-current" : "")}
                onClick={() => handleNav(it.id)}>
                {it.label}
              </button>
            )}
          </nav>
          <div className="mc-lang" hidden></div>
          <button className="mc-nav-toggle" onClick={() => setNavOpen(o => !o)} aria-label="Menu" aria-expanded={navOpen}>
            <span className="bars" aria-hidden="true"><span></span><span></span><span></span></span>
            {navOpen ? "Close" : "Menu"}
          </button>
        </header>
      </div>
    </div>
  );
};


// ============ Footer.jsx ============
const Footer = ({ onNavigate }) =>
<footer className="mc-footer">
    <div className="mc-shell mc-footer-inner">
      <div className="mc-footer-row">
        <div className="mc-footer-col">
          <img src="assets/logo-malca-consulting.png" alt="Malca consulting" style={{ height: 46, width: "auto", marginLeft: -4 }} />
          <div style={{ fontSize: 13, color: "var(--mc-stone)", marginTop: 14, maxWidth: "28ch", lineHeight: 1.55 }}>
            For clinical practices in Geneva and French-speaking Switzerland built on real expertise.
          </div>
        </div>
        <div className="mc-footer-col">
          <div className="eyebrow">Contact</div>
          <a href="mailto:hello@malcaconsulting.com">hello@malcaconsulting.com</a>
        </div>
        <div className="mc-footer-col">
          <div className="eyebrow">Geneva</div>
          <span>Rue du Rhône 14</span>
          <span>1204 Genève · Switzerland</span>
        </div>
        <div className="mc-footer-col">
          <div className="eyebrow">Index</div>
          <button className="mc-nav-link" style={{ padding: 0, fontFamily: "var(--font-body)", textTransform: "none", letterSpacing: "0.005em", fontSize: 14, color: "var(--mc-ink)" }} onClick={() => onNavigate("home")}>Home</button>
          <button className="mc-nav-link" style={{ padding: 0, fontFamily: "var(--font-body)", textTransform: "none", letterSpacing: "0.005em", fontSize: 14, color: "var(--mc-ink)" }} onClick={() => onNavigate("method")}>Method</button>
          <button className="mc-nav-link" style={{ padding: 0, fontFamily: "var(--font-body)", textTransform: "none", letterSpacing: "0.005em", fontSize: 14, color: "var(--mc-ink)" }} onClick={() => onNavigate("about")}>About</button>
          <button className="mc-nav-link" style={{ padding: 0, fontFamily: "var(--font-body)", textTransform: "none", letterSpacing: "0.005em", fontSize: 14, color: "var(--mc-ink)" }} onClick={() => onNavigate("contact")}>Contact</button>
        </div>
      </div>
      <div className="mc-footer-meta">
        <span>Malca consulting</span>
        <span className="dot">·</span>
        <span>Boutique consultancy for clinical practices</span>
      </div>
    </div>
  </footer>;


Object.assign(window, { Header, Footer, NAV });