/* ============================================================
 * Fuelio · marketing shell
 * Shared topbar, footer, drawer, locale dictionary, icons.
 * Used by Home.html, Plans.html, Referrals.html.
 * Exposes: window.MK = { Topbar, Footer, Drawer, Ico, useMkLocale, COPY }
 * ============================================================ */

const { useState, useEffect } = React;

const MK_COPY = {
  en: {
    'nav.home': 'Home',
    'nav.shop': 'Shop',
    'nav.lookup': 'Order lookup',
    'nav.cart': 'Cart',
    'nav.referral': 'Refer & earn',
    'nav.plans': 'Plans',
    'nav.docs': 'Docs',
    'nav.faq': 'FAQ',
    'top.signin': 'Sign in',
    'top.start': 'Get started',

    'foot.tag': 'One bill for every dev subscription. Pay in your currency, top up with credits, see all your usage in one panel.',
    'foot.product': 'Product',
    'foot.product.plans': 'Plans',
    'foot.product.refer': 'Referrals',
    'foot.product.changelog': 'Changelog',
    'foot.product.status': 'Status',
    'foot.developers': 'Developers',
    'foot.developers.docs': 'Docs',
    'foot.developers.api': 'API',
    'foot.developers.cli': 'CLI',
    'foot.developers.openapi': 'OpenAPI spec',
    'foot.company': 'Company',
    'foot.company.about': 'About',
    'foot.company.contact': 'Contact',
    'foot.company.brand': 'Brand kit',
    'foot.company.careers': 'Careers',
    'foot.legal.tos': 'Terms',
    'foot.legal.privacy': 'Privacy',
    'foot.legal.sla': 'SLA',
    'foot.legal.cookies': 'Cookies',
    'foot.copy': '© 2026 Fuelio Labs. Tokyo · Singapore.',
  },
  zh: {
    'nav.home': '首页',
    'nav.shop': '购物',
    'nav.lookup': '订单查询',
    'nav.cart': '购物车',
    'nav.referral': '邀请有奖',
    'nav.plans': '套餐',
    'nav.docs': '文档',
    'nav.faq': 'FAQ',
    'top.signin': '登录',
    'top.start': '立即开始',

    'foot.tag': '所有开发订阅，一张账单。本地货币结算，积分按行抵扣，所有用量集中查看。',
    'foot.product': '产品',
    'foot.product.plans': '套餐',
    'foot.product.refer': '邀请有奖',
    'foot.product.changelog': '更新日志',
    'foot.product.status': '服务状态',
    'foot.developers': '开发者',
    'foot.developers.docs': '文档',
    'foot.developers.api': 'API',
    'foot.developers.cli': 'CLI',
    'foot.developers.openapi': 'OpenAPI',
    'foot.company': '公司',
    'foot.company.about': '关于我们',
    'foot.company.contact': '联系',
    'foot.company.brand': '品牌资源',
    'foot.company.careers': '招聘',
    'foot.legal.tos': '服务条款',
    'foot.legal.privacy': '隐私政策',
    'foot.legal.sla': 'SLA',
    'foot.legal.cookies': 'Cookies',
    'foot.copy': '© 2026 Fuelio Labs · 东京 · 新加坡',
  },
};

function useMkLocale() {
  const [lang, _setLang] = useState(() => localStorage.getItem('fuelio_home_lang') || 'zh');
  const [theme, _setTheme] = useState(() => localStorage.getItem('fuelio_home_theme') || 'dark');

  useEffect(() => {
    document.body.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('fuelio_home_theme', theme);
  }, [theme]);
  useEffect(() => {
    localStorage.setItem('fuelio_home_lang', lang);
    document.documentElement.lang = lang === 'zh' ? 'zh-Hans' : 'en';
  }, [lang]);

  const setLang = (v) => _setLang(v);
  const setTheme = (v) => _setTheme(v);
  const c = (k) => (MK_COPY[lang][k] !== undefined ? MK_COPY[lang][k] : k);
  return { lang, setLang, theme, setTheme, c };
}

// ---------- icons ----------
const I = ({d, w=16}) => <svg width={w} height={w} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{d}</svg>;
const Ico = {
  arrow: <I d={<><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>}/>,
  check: <I d={<path d="M4 12l5 5 11-11"/>}/>,
  globe: <I d={<><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a13 13 0 0 1 0 18M12 3a13 13 0 0 0 0 18"/></>}/>,
  sun: <I d={<><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></>}/>,
  moon: <I d={<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>}/>,
  burger: <I d={<><path d="M4 7h16M4 12h16M4 17h16"/></>} w={20}/>,
  x: <I d={<><path d="M6 6l12 12M18 6L6 18"/></>} w={20}/>,
  bolt: <I d={<path d="M13 2L4 14h7l-1 8 9-12h-7z"/>}/>,
  shield: <I d={<><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></>}/>,
  swap: <I d={<><path d="M7 7h13M16 3l4 4-4 4"/><path d="M17 17H4M8 13l-4 4 4 4"/></>}/>,
  layers: <I d={<><polygon points="12,3 21,8 12,13 3,8"/><polyline points="3,13 12,18 21,13"/></>}/>,
  copy: <I d={<><rect x="9" y="9" width="11" height="11" rx="1"/><path d="M5 15V5a1 1 0 0 1 1-1h10"/></>}/>,
  send: <I d={<><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></>}/>,
  qr: <I d={<><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 14h3v3h-3zM18 18h3v3h-3z"/></>}/>,
  user: <I d={<><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>}/>,
  arrowUp: <I d={<><path d="M12 19V5"/><path d="M5 12l7-7 7 7"/></>}/>,
  arrowDown: <I d={<><path d="M12 5v14"/><path d="M5 12l7 7 7-7"/></>}/>,
};

// ---------- topbar (uses app.css .tb* classes — same chrome as Fuelio.html) ----------
function Topbar({ lang, setLang, theme, setTheme, setDrawer, active }) {
  const c = (k) => MK_COPY[lang][k];
  const navLink = (href, key) => (
    <a href={href} className={active === key ? 'active' : ''}>{c('nav.' + key)}</a>
  );
  return (
    <header className="tb">
      <a href="Home.html" className="tb__logo">
        <span className="tb__logo-mark">F</span>
        <span>Fuelio</span>
      </a>
      <nav className="tb__nav">
        <a href="Home.html" className={active === 'home' ? 'active' : ''}>{c('nav.home')}</a>
        <a href="Shop.html" className={active === 'shop' ? 'active' : ''}>{c('nav.shop')}</a>
        <a href="OrdersLookup.html" className={active === 'lookup' ? 'active' : ''}>{c('nav.lookup')}</a>
        <a href="Cart.html" className={active === 'cart' ? 'active' : ''}>{c('nav.cart')}</a>
        <a href="Referrals.html" className={active === 'referral' ? 'active' : ''}>{c('nav.referral')}</a>
      </nav>
      <div className="tb__spacer"/>
      <div className="tb__right">
        <button className="tb__chip" onClick={() => setLang(lang === 'en' ? 'zh' : 'en')} title="Language">
          {Ico.globe}{lang === 'en' ? 'EN' : '中'}
        </button>
        <button className="tb__chip" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} title="Theme">
          {theme === 'dark' ? Ico.sun : Ico.moon}
        </button>
        <a className="tb__chip" href="Fuelio.html#signin" style={{textDecoration:'none'}}>{c('top.signin')}</a>
        <a className="btn btn--primary btn--sm" href="Fuelio.html" style={{marginLeft:4}}>{c('top.start')} {Ico.arrow}</a>
        <button className="tb__hamburger mk-tb-burger" onClick={() => setDrawer(true)} title="Menu" style={{marginLeft:4}}>{Ico.burger}</button>
      </div>
    </header>
  );
}

function Drawer({ open, onClose, lang, setLang, theme, setTheme }) {
  if (!open) return null;
  const c = (k) => MK_COPY[lang][k];
  return (
    <div className="mk-drawer open">
      <div className="mk-drawer__top">
        <a href="Home.html" className="mk-tb__logo">
          <span className="mk-tb__mark">F</span><span>Fuelio</span>
        </a>
        <button className="mk-tb__icbtn" onClick={onClose}>{Ico.x}</button>
      </div>
      <nav className="mk-drawer__nav">
        <a href="Home.html">{c('nav.home')}</a>
        <a href="Shop.html">{c('nav.shop')}</a>
        <a href="OrdersLookup.html">{c('nav.lookup')}</a>
        <a href="Cart.html">{c('nav.cart')}</a>
        <a href="Referrals.html">{c('nav.referral')}</a>
      </nav>
      <div className="mk-drawer__bottom">
        <button className="mk-hero__cta mk-hero__cta--ghost" onClick={() => setLang(lang === 'en' ? 'zh' : 'en')}>{Ico.globe} {lang === 'en' ? '中文' : 'English'}</button>
        <button className="mk-hero__cta mk-hero__cta--ghost" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>{theme === 'dark' ? Ico.sun : Ico.moon} {theme === 'dark' ? 'Light' : 'Dark'}</button>
        <a className="mk-hero__cta" href="Fuelio.html#signin">{c('top.signin')}</a>
        <a className="mk-hero__cta" href="Fuelio.html">{c('top.start')} {Ico.arrow}</a>
      </div>
    </div>
  );
}

function Footer({ lang }) {
  const c = (k) => MK_COPY[lang][k];
  return (
    <footer className="mk-foot">
      <div className="mk__inner">
        <div className="mk-foot__top">
          <div>
            <a href="Home.html" className="mk-tb__logo"><span className="mk-tb__mark">F</span><span>Fuelio</span></a>
            <div className="mk-foot__brand-tag">{c('foot.tag')}</div>
          </div>
          <div className="mk-foot__col">
            <div className="mk-foot__col-title">{c('foot.product')}</div>
            <a href="Plans.html">{c('foot.product.plans')}</a>
            <a href="Referrals.html">{c('foot.product.refer')}</a>
            <a href="#changelog">{c('foot.product.changelog')}</a>
            <a href="#status">{c('foot.product.status')}</a>
          </div>
          <div className="mk-foot__col">
            <div className="mk-foot__col-title">{c('foot.developers')}</div>
            <a href="#docs">{c('foot.developers.docs')}</a>
            <a href="#api">{c('foot.developers.api')}</a>
            <a href="#cli">{c('foot.developers.cli')}</a>
            <a href="#openapi">{c('foot.developers.openapi')}</a>
          </div>
          <div className="mk-foot__col">
            <div className="mk-foot__col-title">{c('foot.company')}</div>
            <a href="#about">{c('foot.company.about')}</a>
            <a href="#contact">{c('foot.company.contact')}</a>
            <a href="#brand">{c('foot.company.brand')}</a>
            <a href="#careers">{c('foot.company.careers')}</a>
          </div>
        </div>
        <div className="mk-foot__bottom">
          <div className="l">
            <a href="#tos">{c('foot.legal.tos')}</a>
            <a href="#privacy">{c('foot.legal.privacy')}</a>
            <a href="#sla">{c('foot.legal.sla')}</a>
            <a href="#cookies">{c('foot.legal.cookies')}</a>
          </div>
          <div className="r">{c('foot.copy')}</div>
        </div>
      </div>
    </footer>
  );
}

window.MK = { Topbar, Footer, Drawer, Ico, useMkLocale, MK_COPY };