// MEGALIS — Nav with live dual clocks + section-active highlight + news ticker + lang toggle

const navStyles = `
  .nav-wrap {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
  }
  .nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 18px var(--pad);
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: -0.02em;
  }
  .brand-mark {
    height: 22px;
    width: auto;
    display: block;
  }
  body[data-theme="light"] .brand-mark { filter: invert(1); }
  .brand-jp {
    font-family: var(--font-jp);
    font-size: 14.55px;
    color: var(--fg-3);
    letter-spacing: 0.22em;
  }
  .brand-dot {
    width: 8px; height: 8px;
    background: var(--accent);
    display: inline-block;
    transform: rotate(45deg);
  }

  .nav-links {
    display: flex;
    justify-content: center;
    min-width: max-content;
    gap: 28px;
    justify-self: center;
  }
  .nav-link {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-2);
    padding: 8px 2px;
    position: relative;
    transition: color 0.25s var(--easing);
  }
  body[data-lang="ja"] .nav-link {
    font-family: var(--font-jp);
    letter-spacing: 0.1em;
    text-transform: none;
    font-size: 13px;
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--easing);
  }
  .nav-link:hover, .nav-link[data-active="true"] { color: var(--fg); }
  .nav-link[data-active="true"]::after { transform: scaleX(1); }

  .nav-right {
    display: flex;
    gap: 14px;
    justify-self: end;
    align-items: center;
    min-width: 0;
  }
  .clock-block {
    display: flex;
    gap: 18px;
    padding-right: 14px;
    border-right: 1px solid var(--line);
    min-width: 0;
  }
  /* Nav content is fixed-width and non-shrinkable; drop clocks at their measured minimums. */
  @media (max-width: 1340px) { .nav-right .clock-block .clock:nth-child(3) { display: none; } }
  @media (max-width: 1150px) { .nav-right .clock-block .clock:nth-child(2) { display: none; } }
  @media (max-width: 1000px) { .nav-right .clock-block { display: none; } }

  .lang-toggle {
    height: 36px;
    min-width: 56px;
    padding: 0 12px;
    border-radius: 18px;
    border: 1px solid var(--line);
    color: var(--fg);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: all 0.25s var(--easing);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .lang-toggle:hover {
    border-color: var(--fg);
    color: var(--accent);
  }
  body[data-lang="ja"] .lang-toggle {
    font-family: var(--font-jp);
    letter-spacing: 0.06em;
  }
  .lang-toggle .lang-current {
    color: var(--fg);
    font-weight: 600;
  }
  .lang-toggle .lang-sep {
    color: var(--fg-3);
  }
  .lang-toggle .lang-alt {
    color: var(--fg-3);
  }

  .theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--fg);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.3s var(--easing);
    background: transparent;
    position: relative;
    overflow: hidden;
  }
  .theme-toggle:hover {
    border-color: var(--fg);
    color: var(--accent);
  }
  .theme-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.5s var(--easing), opacity 0.3s var(--easing);
    position: absolute;
  }
  .theme-toggle .ico-sun { transform: rotate(0deg) scale(1); opacity: 1; }
  .theme-toggle .ico-moon { transform: rotate(-90deg) scale(0.4); opacity: 0; }
  body[data-theme="light"] .theme-toggle .ico-sun { transform: rotate(90deg) scale(0.4); opacity: 0; }
  body[data-theme="light"] .theme-toggle .ico-moon { transform: rotate(0deg) scale(1); opacity: 1; }

  .clock {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--fg-2);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .clock .pip {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }
  .clock-loc {
    color: var(--fg-3);
    margin-left: 2px;
  }
  body[data-lang="ja"] .clock-loc {
    font-family: var(--font-jp);
    letter-spacing: 0.05em;
  }

  /* Hamburger for mobile */
  .nav-burger { display: none; }
  @media (max-width: 880px) {
    .nav { grid-template-columns: 1fr auto; }
    .nav-links { display: none; }
    .nav-right .clock-block { display: none; }
    .nav-burger {
      display: inline-flex;
      flex-direction: column;
      gap: 4px;
    }
    .nav-burger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--fg);
    }
  }

  /* News ticker */
  .ticker {
    border-bottom: 1px solid var(--line);
    background: #00FF7F;
    overflow: hidden;
    padding: 10px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(18% 0.05 145);
  }
  body[data-lang="ja"] .ticker {
    font-family: var(--font-jp);
    letter-spacing: 0.06em;
    text-transform: none;
  }
  .ticker .item { display: inline-flex; align-items: center; gap: 14px; }
  .ticker .badge {
    background: oklch(15% 0.04 145);
    color: #00FF7F;
    padding: 2px 8px;
    font-weight: 600;
    letter-spacing: 0.18em;
  }
  .ticker .dot { color: oklch(30% 0.06 145); }
`;

function useClock(timeZone) {
  const [now, setNow] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const fmt = new Intl.DateTimeFormat("en-GB", {
    hour: "2-digit", minute: "2-digit", second: "2-digit",
    hour12: false, timeZone,
  });
  return fmt.format(now);
}

function Clock({ tz, label }) {
  const t = useClock(tz);
  return (
    <div className="clock">
      <span className="pip"></span>
      <span>{t}</span>
      <span className="clock-loc">{label}</span>
    </div>
  );
}

function ThemeToggle({ theme, onToggle }) {
  const nav = window.useI18n('nav');
  const isLight = theme === "light";
  const label = isLight ? nav.themeLight : nav.themeDark;
  return (
    <button className="theme-toggle"
      type="button"
      aria-label={label}
      title={label}
      onClick={onToggle}>
      <svg className="ico-sun" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="4.2" fill="currentColor"/>
        <g stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
          <line x1="12" y1="2.5" x2="12" y2="5"/>
          <line x1="12" y1="19" x2="12" y2="21.5"/>
          <line x1="2.5" y1="12" x2="5" y2="12"/>
          <line x1="19" y1="12" x2="21.5" y2="12"/>
          <line x1="5.2" y1="5.2" x2="7" y2="7"/>
          <line x1="17" y1="17" x2="18.8" y2="18.8"/>
          <line x1="5.2" y1="18.8" x2="7" y2="17"/>
          <line x1="17" y1="7" x2="18.8" y2="5.2"/>
        </g>
      </svg>
      <svg className="ico-moon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M20 14.5 A8 8 0 1 1 9.5 4 a6.5 6.5 0 0 0 10.5 10.5z"
              fill="currentColor"/>
      </svg>
    </button>
  );
}

function LangToggle({ lang, onToggle }) {
  const nav = window.useI18n('nav');
  const isEn = lang === 'en';
  return (
    <button className="lang-toggle"
      type="button"
      aria-label={nav.langToggleAria}
      title={nav.langToggleAria}
      onClick={onToggle}>
      <span className={isEn ? "lang-current" : "lang-alt"}>EN</span>
      <span className="lang-sep">/</span>
      <span className={isEn ? "lang-alt" : "lang-current"}>日本語</span>
    </button>
  );
}

function Nav({ activeSection, mobileOpen, setMobileOpen, theme, onThemeToggle, lang, onLangToggle }) {
  const nav = window.useI18n('nav');
  return (
    <>
      <style>{navStyles}</style>
      <div className="nav-wrap">
        <nav className="nav" aria-label={nav.ariaLabel}>
          <a href="#top" className="brand" aria-label="MEGALIS — Home">
            <img src="assets/megalis-logo.png" alt="MEGALIS" className="brand-mark" />
            <span className="brand-jp" aria-hidden="true">メガリス</span>
          </a>
          <div className="nav-links" role="menubar">
            {nav.items.map(item => (
              <a key={item.id}
                 className="nav-link"
                 href={`#${item.id}`}
                 data-active={activeSection === item.id}>
                {item.label}
              </a>
            ))}
          </div>
          <div className="nav-right">
            <div className="clock-block">
              <Clock tz="Asia/Tokyo" label={nav.tokyo} />
              <Clock tz="Europe/Paris" label={nav.avignon} />
              <Clock tz="America/Los_Angeles" label={nav.losangeles} />
            </div>
            <LangToggle lang={lang} onToggle={onLangToggle} />
            <ThemeToggle theme={theme} onToggle={onThemeToggle} />
            <button className="nav-burger"
              aria-label="Toggle menu"
              aria-expanded={mobileOpen}
              onClick={() => setMobileOpen(v => !v)}>
              <span></span><span></span><span></span>
            </button>
          </div>
        </nav>
        <NewsTicker />
      </div>
      {mobileOpen ? <MobileMenu onClose={() => setMobileOpen(false)} /> : null}
    </>
  );
}

function NewsTicker() {
  const t = window.useI18n('ticker');
  const items = [
    { type: "badge", text: t.newsBadge },
    ...t.items.map((s) => ({ type: "text", text: s })),
  ];
  const Track = () => (
    <div className="marquee-track">
      {items.map((it, i) => (
        <span key={i} className="item">
          {it.type === "badge"
            ? <span className="badge">{it.text}</span>
            : <span>{it.text}</span>}
          <span className="dot">— — —</span>
        </span>
      ))}
    </div>
  );
  return (
    <div className="ticker marquee" aria-label="Studio news">
      <div className="marquee-inner">
        <Track />
        <Track />
      </div>
    </div>
  );
}

function MobileMenu({ onClose }) {
  const nav = window.useI18n('nav');
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 60,
      background: "var(--bg)",
      padding: "32px var(--pad)",
      display: "flex", flexDirection: "column", gap: "8px"
    }}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:"32px"}}>
        <img src="assets/megalis-logo.png" alt="MEGALIS" style={{height:"24px", width:"auto"}} />
        <button onClick={onClose} className="micro">{nav.close}</button>
      </div>
      {nav.items.map(item => (
        <a key={item.id} href={`#${item.id}`} onClick={onClose}
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 700,
            fontSize: "48px",
            letterSpacing: "-0.03em",
            padding: "12px 0",
            borderBottom: "1px solid var(--line)",
          }}>
          {item.label}
        </a>
      ))}
      <div style={{marginTop:"32px", display:"flex", gap:"24px"}}>
        <Clock tz="Asia/Tokyo" label={nav.tokyo} />
        <Clock tz="Europe/Paris" label={nav.avignon} />
        <Clock tz="America/Los_Angeles" label={nav.losangeles} />
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Clock, ThemeToggle, LangToggle });