// Header — top nav. Logo · primary nav · Contact CTA.
function Header({ onNav, active }) {
  const items = [
    { id: "tentang", label: "Tentang" },
    { id: "layanan", label: "Layanan" },
    { id: "fasilitas", label: "Fasilitas" },
    { id: "pelanggan", label: "Pelanggan" },
    { id: "kontak", label: "Kontak" },
  ];
  return (
    <header className="dep-header">
      <a href="#top" className="dep-header__logo" onClick={(e) => { e.preventDefault(); onNav("top"); }}>
        <img src="../../assets/logo.svg" alt="PT Dinamika Electro Plating" />
      </a>
      <nav className="dep-header__nav">
        {items.map(it => (
          <a
            key={it.id}
            href={`#${it.id}`}
            className={`dep-header__link ${active === it.id ? "is-active" : ""}`}
            onClick={(e) => { e.preventDefault(); onNav(it.id); }}
          >{it.label}</a>
        ))}
      </nav>
      <a href="#kontak" className="btn btn-primary dep-header__cta" onClick={(e) => { e.preventDefault(); onNav("kontak"); }}>
        Minta Penawaran
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </a>
    </header>
  );
}

window.Header = Header;