/* global React */
const { useState, useEffect } = React;

function TopNav({ active, onNav }) {
  const items = [
    { id: "hero", label: "首頁" },
    { id: "analyzer", label: "AI 分析" },
    { id: "records", label: "預測紀錄" },
    { id: "schedule", label: "賽程" },
    { id: "news", label: "體育新聞" },
    { id: "custom", label: "客製模型" },
  ];
  const [lang, setLang] = useState("zh");
  return (
    <nav className="topnav">
      <div className="topnav-inner">
        <a href="#hero" className="brand" onClick={(e) => { e.preventDefault(); onNav("hero"); }}>
          <div className="brand-mark">S</div>
          <span>Sports365</span>
        </a>
        <div className="nav-links">
          {items.map((it) => (
            <a key={it.id}
               href={`#${it.id}`}
               className={`nav-link ${active === it.id ? "is-active" : ""}`}
               onClick={(e) => { e.preventDefault(); onNav(it.id); }}>
              {it.label}
            </a>
          ))}
        </div>
        <div className="topnav-spacer" />
        <div className="lang-switch">
          {["zh", "en", "vi"].map((l) => (
            <button key={l} className={lang === l ? "active" : ""} onClick={() => setLang(l)}>{l.toUpperCase()}</button>
          ))}
        </div>
        <div className="avatar" title="會員">YL</div>
        <div className="menu-trigger"><span /></div>
      </div>
    </nav>
  );
}

window.TopNav = TopNav;