/* global React, Icon, Button */

function Nav({ onCTA }) {
  const links = [
    { href: "#about",       label: "About" },
    { href: "#expertise",   label: "Expertise" },
    { href: "#journey",     label: "Journey" },
    { href: "#projects",    label: "Projects" },
    { href: "#services",    label: "Services" },
    { href: "#creator",     label: "Content" },
    { href: "#workshops",   label: "Workshops" },
  ];
  return (
    <div className="topnav-wrap">
      <nav className="topnav">
        <a href="#top" className="topnav-logo">
          <span className="topnav-mark">D</span>
          <span className="topnav-logo-text">
            <span className="topnav-logo-name">Dhany Indraswara</span>
            <span className="topnav-logo-role">Data · AI · Automation</span>
          </span>
        </a>
        <ul className="topnav-links">
          {links.map(l => (
            <li key={l.href}><a href={l.href}>{l.label}</a></li>
          ))}
        </ul>
        <div className="topnav-cta">
          <Button variant="primary" onClick={onCTA} arrow>Work with me</Button>
        </div>
      </nav>
    </div>
  );
}

window.Nav = Nav;