const Nav = () => {
  const items = [
    { zh: "課程", href: "#courses" },
    { zh: "師資", href: "#teachers" },
    { zh: "考照", href: "#exam" },
    { zh: "成果", href: "#works" },
    { zh: "開課", href: "#schedule" },
    { zh: "報名", href: "#signup" },
  ];
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" className="wordmark">
          <span className="zh">美如玉</span>
          <span className="en tagline">
            美
            <small>溫 潤 如 玉</small>
          </span>
        </a>
        <ul className="nav-links">
          {items.map((it) => (
            <li key={it.zh}><a href={it.href}>{it.zh}</a></li>
          ))}
        </ul>
        <div className="nav-cta">
          <a href="tel:03-8328227" className="nav-phone">03 8328227</a>
          <a href="tel:0910551357" className="btn btn-rose nav-cta-btn" data-hover="0910 551357">
            <span className="cta-default">立即來電</span>
          </a>
        </div>
      </div>
    </nav>
  );
};

window.Nav = Nav;