// ============================================================
// MobileDrawer — slide-from-right nav for mobile.
// ============================================================

function JmMobileDrawer({ open, lang, onClose, onNavigate, onToggleLang }) {
  const t = JM.t[lang];
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  const items = [
    { id: 'shop',        label: t['nav.shop'] },
    { id: 'collections', label: t['nav.collections'] },
    { id: 'bestsellers', label: t['nav.bestsellers'] },
    ...JM.collections.map(c => ({ id: 'collection', col: c.id, label: '— ' + (lang === 'vi' ? c.name : c.en), sub: true })),
    { id: 'about',       label: t['nav.about'] },
    { id: 'contact',     label: t['nav.contact'] },
  ];

  return (
    <>
      <div className={`jm-scrim ${open ? 'is-open' : ''}`} onClick={onClose}></div>
      <aside className={`jm-mobile-drawer ${open ? 'is-open' : ''}`} aria-hidden={!open}>
        <div className="jm-mobile-drawer__top">
          <img src="src/assets/logo-jesmee.png" alt="JESMEE" style={{ height: 36, width: 'auto' }}/>
          <button className="jm-icon-btn" onClick={onClose} aria-label="Đóng">
            <i data-lucide="x" className="jm-icon"></i>
          </button>
        </div>

        <nav className="jm-mobile-drawer__nav">
          {items.map(it => (
            <a key={it.id + (it.col || '')} className={it.sub ? 'jm-mobile-drawer__sub' : ''} href={JM.hrefFor({ view: it.id, id: it.col })}
               onClick={(e) => { e.preventDefault(); onClose(); onNavigate({ view: it.id, id: it.col }); }}>
              {it.label}
              <i data-lucide="chevron-right" className="jm-icon jm-icon-sm"></i>
            </a>
          ))}
        </nav>

        <div className="jm-mobile-drawer__foot">
          <button className="jm-web-header__lang jm-web-header__lang--block" onClick={onToggleLang}>
            <span className={lang === 'vi' ? 'is-active' : ''}>Tiếng Việt</span>
            <span className={lang === 'en' ? 'is-active' : ''}>English</span>
          </button>
          {JM.shop.hotline && (
            <p className="jm-small" style={{ marginTop: 16 }}>
              Hotline<br/>
              <strong>{JM.shop.hotline}</strong>
            </p>
          )}
          {JM.shop.messenger && (
            <a className="jm-btn jm-btn-secondary" style={{ marginTop: 12 }} href={JM.shop.messenger} target="_blank" rel="noopener">
              {lang === 'vi' ? 'Nhắn tin Messenger' : 'Open Messenger'}
            </a>
          )}
        </div>
      </aside>
    </>
  );
}

window.JmMobileDrawer = JmMobileDrawer;