// Nav + Footer + Announcement ticker + Mobile menu + Toast

const AnnouncementTicker = () => (
  <div className="ticker">
    <div className="ticker-track">
      {[0,1].map(k => (
        <React.Fragment key={k}>
          <span>Every Friday is a good day<span className="dot"/></span>
          <span>全站滿 NT$2,000 免運費<span className="dot"/></span>
          <span>WK17 Friday Drop — 04.25 00:00 上架<span className="dot"/></span>
          <span>會員首購 95 折<span className="dot"/></span>
          <span>Free shipping over NT$2,000<span className="dot"/></span>
          <span>FRIDAY × KOSUKE 聯名預告中<span className="dot"/></span>
        </React.Fragment>
      ))}
    </div>
  </div>
);

const Nav = () => {
  const { route, setRoute, setCartOpen, cartCount, setSearchOpen, setAuthOpen, setMobileOpen, user, lang, setLang } = useApp();
  const isActive = (r) => route.name === r;
  const go = (name, params) => (e) => { e.preventDefault(); setRoute(name, params); };
  return (
    <>
      <AnnouncementTicker />
      <nav className="nav">
        <div className="container-wide nav-inner">
          <div className="row middle" style={{ gap: 28 }}>
            <button className="menu-btn" onClick={() => setMobileOpen(true)} aria-label="menu">
              <IconMenu size={22}/>
            </button>
            <div className="nav-links">
              <a href="#" className={isActive('shop') && !route.params.cat ? 'active' : ''} onClick={go('shop')}>Shop</a>
              <a href="#" className={route.params?.cat === 'friday' ? 'active' : ''} onClick={go('shop', { cat: 'friday' })}>Friday Drop</a>
              <a href="#" onClick={go('lookbook')} className={isActive('lookbook') ? 'active' : ''}>Lookbook</a>
              <a href="#" onClick={go('news')} className={isActive('news') ? 'active' : ''}>News</a>
              <a href="#" onClick={go('about')} className={isActive('about') ? 'active' : ''}>About</a>
              <a href="#" onClick={go('stores')} className={isActive('stores') ? 'active' : ''}>Stores</a>
            </div>
          </div>
          <a href="#" className="nav-logo" onClick={go('home')} aria-label="FRIDAY home">
            <FridayLogo size={28} color="#0a0a0a" />
          </a>
          <div className="nav-actions">
            <button className="nav-icon" onClick={() => setLang(lang === 'zh' ? 'en' : 'zh')} aria-label="language"
              style={{ fontSize: 11, fontFamily: 'var(--f-mono)', letterSpacing: '0.1em' }}>
              {lang.toUpperCase()}
            </button>
            <button className="nav-icon" onClick={() => setSearchOpen(true)} aria-label="search"><IconSearch size={18}/></button>
            <button className="nav-icon" onClick={() => user ? setRoute('account') : setAuthOpen(true)} aria-label="account"><IconUser size={18}/></button>
            <button className="nav-icon" onClick={() => setCartOpen(true)} aria-label="cart">
              <IconBag size={18}/>
              {cartCount > 0 && <span className="nav-badge">{cartCount}</span>}
            </button>
          </div>
        </div>
      </nav>
    </>
  );
};

const Footer = () => {
  const { setRoute } = useApp();
  const go = (name, params) => (e) => { e.preventDefault(); setRoute(name, params); };
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div>
            <FridayLogo size={28} color="#fff" />
            <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 24, lineHeight: 1.7, maxWidth: 280 }}>
              FRIDAY is a Taipei-based select shop.<br/>
              Garments, accessories, and editorial drops every Friday.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
              <a href="#" aria-label="Instagram"><IconInstagram/></a>
              <a href="#" aria-label="Mail"><IconMail/></a>
              <a href="#" aria-label="Chat"><IconChat/></a>
            </div>
          </div>
          <div>
            <h4>Shop</h4>
            <a href="#" onClick={go('shop', { cat: 'new' })}>New Arrivals</a>
            <a href="#" onClick={go('shop', { cat: 'friday' })}>Friday Drop</a>
            <a href="#" onClick={go('shop', { cat: 'tops' })}>Tops</a>
            <a href="#" onClick={go('shop', { cat: 'outerwear' })}>Outerwear</a>
            <a href="#" onClick={go('shop', { cat: 'collab' })}>Collabs</a>
          </div>
          <div>
            <h4>Support</h4>
            <a href="#" onClick={go('contact')}>Contact</a>
            <a href="#">Size Guide</a>
            <a href="#">Shipping</a>
            <a href="#">Returns</a>
            <a href="#">FAQ</a>
          </div>
          <div>
            <h4>Company</h4>
            <a href="#" onClick={go('about')}>About</a>
            <a href="#" onClick={go('stores')}>Store Locator</a>
            <a href="#" onClick={go('news')}>Journal</a>
            <a href="#">Wholesale</a>
            <a href="#">Careers</a>
          </div>
          <div>
            <h4>Newsletter</h4>
            <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6, marginBottom: 14 }}>
              每週五 00:00,先收到 drop 通知。
            </p>
            <div style={{ display: 'flex', gap: 0, border: '1px solid rgba(255,255,255,0.2)' }}>
              <input type="email" placeholder="your@email.com"
                style={{ flex: 1, height: 42, padding: '0 12px', background: 'transparent', border: 0, color: '#fff', fontSize: 12, outline: 'none' }}/>
              <button style={{ width: 42, height: 42, background: 'var(--accent)', color: '#fff' }} aria-label="subscribe">
                <IconArrow size={16}/>
              </button>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 FRIDAY SELECT SHOP · Taipei</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

const MobileMenu = () => {
  const { mobileOpen, setMobileOpen, setRoute, setAuthOpen, user } = useApp();
  if (!mobileOpen) return null;
  const go = (name, params) => () => { setRoute(name, params); setMobileOpen(false); };
  return (
    <div className="mobile-menu open">
      <div className="mobile-menu-head">
        <FridayLogo size={26} color="#fff"/>
        <button onClick={() => setMobileOpen(false)} style={{ color: '#fff' }}><IconClose/></button>
      </div>
      <div style={{ padding: '20px 0', display: 'flex', flexDirection: 'column' }}>
        <a href="#" onClick={go('shop')}>Shop</a>
        <a href="#" onClick={go('shop', { cat: 'friday' })}>Friday Drop</a>
        <a href="#" onClick={go('lookbook')}>Lookbook</a>
        <a href="#" onClick={go('news')}>News</a>
        <a href="#" onClick={go('about')}>About</a>
        <a href="#" onClick={go('stores')}>Stores</a>
        <a href="#" onClick={go('contact')}>Contact</a>
        <a href="#" onClick={() => { user ? go('account')() : (setAuthOpen(true), setMobileOpen(false)); }}>
          {user ? 'Account' : 'Sign In'}
        </a>
      </div>
      <div style={{ padding: 24, marginTop: 'auto', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
        <div style={{ fontSize: 10, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', marginBottom: 12 }}>Every Friday is a good day</div>
        <div style={{ display: 'flex', gap: 12, color: 'rgba(255,255,255,0.7)' }}>
          <IconInstagram/><IconMail/><IconChat/>
        </div>
      </div>
    </div>
  );
};

const Toast = () => {
  const { toast } = useApp();
  if (!toast) return null;
  return (
    <div style={{
      position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)',
      background: 'var(--ink)', color: '#fff',
      padding: '12px 20px', fontSize: 12, letterSpacing: '0.08em',
      textTransform: 'uppercase', zIndex: 200, display: 'flex', gap: 8, alignItems: 'center'
    }}>
      <IconCheck size={14}/>{toast}
    </div>
  );
};

Object.assign(window, { Nav, Footer, MobileMenu, Toast });