// MRB Auto storefront — responsive Header (mobile-first) + mobile drawer
const _mkH = (n) => (props) => { const C = window.MRBAutoDesignSystem_73c751 && window.MRBAutoDesignSystem_73c751[n]; return C ? React.createElement(C, props) : null; };
const IconButton = _mkH('IconButton'), Icon = _mkH('Icon'), Button = _mkH('Button');

const NAV = ['Mercedes', 'BMW', 'Audi', 'Land Rover', 'Porsche', 'VW', 'Catégories', 'Jantes'];
const LOGO = () => (window.__resources && window.__resources.logo) || 'assets/logo-mrbauto.webp';

function TopBar() {
  const items = ['Livraison 24-48h France & Europe', 'Paiement 3x / 4x sans frais', 'Satisfait ou remboursé 14 jours', 'Entreprise française depuis 2015'];
  return (
    <div className="mrb-topbar" style={{ background: 'var(--ink-900)', color: 'var(--ink-300)' }}>
      <div className="kit-wrap" style={{ height: 38, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', gap: 26, overflow: 'hidden' }}>
          {items.map((t, i) => (
            <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-sans)', fontSize: '11.5px', fontWeight: 500, whiteSpace: 'nowrap', color: i === 3 ? 'var(--white)' : 'var(--ink-300)' }}>
              <Icon name="check" size={13} color="var(--accent)" />{t}
            </span>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
          {['FR', 'EN', 'DE', 'ES', 'IT'].map((l, i) => (
            <span key={l} style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', fontWeight: 700, color: i === 0 ? 'var(--white)' : 'var(--ink-500)', cursor: 'pointer' }}>{l}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function MobileDrawer({ open, onClose, cartCount }) {
  return (
    <>
      <div className="drawer-backdrop" data-open={open ? 'true' : 'false'} onClick={onClose} />
      <aside className="drawer-panel" data-open={open ? 'true' : 'false'} aria-hidden={!open}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px', borderBottom: '1px solid var(--border-default)' }}>
          <img src={LOGO()} alt="MRB Auto" style={{ height: 26 }} />
          <IconButton icon="x" label="Fermer" onClick={onClose} />
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', padding: '8px 0' }}>
          {NAV.map((item) => (
            <a key={item} href="#" onClick={onClose} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '15px', color: 'var(--text-primary)', borderBottom: '1px solid var(--border-subtle)' }}>
              {item} <Icon name="chevronRight" size={16} color="var(--text-muted)" />
            </a>
          ))}
        </nav>
        <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: 10, marginTop: 'auto' }}>
          <a href="tel:0761079155" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 'var(--radius-pill)', background: 'var(--accent-tint)', color: 'var(--accent)' }}><Icon name="phone" size={18} /></span>
            <span style={{ display: 'flex', flexDirection: 'column' }}>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: '11px', color: 'var(--text-muted)' }}>Conseil & SAV 7j/7</span>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '18px', color: 'var(--text-primary)' }}>07 61 07 91 55</span>
            </span>
          </a>
          <div style={{ display: 'flex', gap: 8 }}>
            <Button variant="secondary" size="sm" iconLeft="user" style={{ flex: 1 }}>Compte</Button>
            <Button variant="secondary" size="sm" iconLeft="heart" style={{ flex: 1 }}>Favoris</Button>
          </div>
        </div>
      </aside>
    </>
  );
}

function Header({ cartCount, onSearch, active }) {
  const [menu, setMenu] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = menu ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menu]);

  const SearchField = ({ big }) => (
    <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-tile)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', padding: big ? '0 6px 0 18px' : '0 14px', height: big ? 46 : 42, maxWidth: big ? 520 : 'none' }}>
      <Icon name="search" size={18} color="var(--text-muted)" />
      <input placeholder="Rechercher une pièce, un modèle…" onChange={(e) => onSearch && onSearch(e.target.value)}
        style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-sans)', fontSize: '14px', color: 'var(--text-primary)', minWidth: 0 }} />
      {big && <Button variant="primary" size="sm">OK</Button>}
    </div>
  );

  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'var(--surface-page)', borderBottom: '1px solid var(--border-default)' }}>
      <TopBar />
      <div className="kit-wrap mrb-header__main">
        <button type="button" aria-label="Menu" className="mrb-burger" onClick={() => setMenu(true)}
          style={{ alignItems: 'center', justifyContent: 'center', width: 42, height: 42, border: 'none', background: 'transparent', color: 'var(--text-primary)', cursor: 'pointer', flexShrink: 0, marginLeft: -8 }}>
          <Icon name="menu" size={24} />
        </button>
        <a href="index.html" style={{ flexShrink: 0, marginRight: 'auto' }}>
          <img src={LOGO()} alt="MRB Auto" style={{ height: 28, display: 'block' }} />
        </a>
        <div className="mrb-header__search" style={{ flex: 1, justifyContent: 'center' }}><SearchField big /></div>
        <a href="tel:0761079155" className="mrb-header__phone" style={{ alignItems: 'center', gap: 10, flexShrink: 0 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 'var(--radius-pill)', background: 'var(--accent-tint)', color: 'var(--accent)' }}>
            <Icon name="phone" size={19} />
          </span>
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: '11px', color: 'var(--text-muted)' }}>Conseil & SAV</span>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '17px', letterSpacing: '0.01em', color: 'var(--text-primary)' }}>07 61 07 91 55</span>
          </span>
        </a>
        <div style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
          <span className="only-desktop"><IconButton icon="user" label="Compte" /></span>
          <span className="only-desktop"><IconButton icon="heart" label="Favoris" /></span>
          <IconButton icon="cart" label="Panier" count={cartCount} />
        </div>
      </div>

      {/* mobile inline search row */}
      <div className="mrb-header__mobilesearch kit-wrap" style={{ paddingBottom: 10, paddingTop: 2 }}>
        <SearchField />
      </div>

      <nav className="mrb-header__nav" style={{ borderTop: '1px solid var(--border-subtle)' }}>
        <div className="kit-wrap" style={{ height: 48, display: 'flex', alignItems: 'center', gap: 4 }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 16px 0 0', marginRight: 8, borderRight: '1px solid var(--border-default)', height: 24, fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '13px', textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--text-primary)' }}>
            <Icon name="menu" size={18} /> Toutes catégories
          </span>
          {NAV.map((item, i) => (
            <a key={item} href="#" style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '0 14px', height: 48, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '13.5px', color: active === item ? 'var(--text-accent)' : 'var(--text-secondary)' }}>
              {item}{i < 6 && <Icon name="chevronDown" size={14} color="var(--text-muted)" />}
            </a>
          ))}
        </div>
      </nav>

      <MobileDrawer open={menu} onClose={() => setMenu(false)} cartCount={cartCount} />
    </header>
  );
}

window.MRBHeader = Header;