// shell.jsx — Top bar, bottom nav, slide drawer, sticky utilities

const FF_LOGO = ({ size = 22, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M12 2 C 14 6, 18 8, 17 13 C 16 18, 12 21, 12 21 C 12 21, 8 18, 7 13 C 6 8, 10 6, 12 2 Z"
          fill={color} fillOpacity="0.95"/>
    <path d="M12 8 C 13 10, 14.5 11, 14 13.5 C 13.5 16, 12 17.5, 12 17.5 C 12 17.5, 10.5 16, 10 13.5 C 9.5 11, 11 10, 12 8 Z"
          fill="#0A0A0A"/>
  </svg>
);

const Wordmark = ({ size = 14 }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <FF_LOGO size={size + 6} color="var(--ff-text)" />
    <span style={{
      fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: size,
      letterSpacing: '0.14em', color: 'var(--ff-text)',
    }}>FLOWFIRE</span>
  </div>
);

// ─────────────── Top Bar ───────────────
function TopBar({ onMenu, onSearch, onCart, cartCount, scrolled, dark = true }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 30,
      height: 56,
      paddingTop: 'var(--safe-top)',
      background: scrolled ? 'rgba(10,10,10,0.78)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(160%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(160%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--ff-border)' : '1px solid transparent',
      transition: 'background 200ms var(--ff-ease), border-color 200ms',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 16px',
    }}>
      <button className="tap" onClick={onMenu}
        style={{ background: 'none', border: 'none', color: 'var(--ff-text)', padding: 10, marginLeft: -10, cursor: 'pointer' }}>
        <IconMenu size={22}/>
      </button>
      <Wordmark size={13}/>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
        <button className="tap" onClick={onSearch}
          style={{ background: 'none', border: 'none', color: 'var(--ff-text)', padding: 10, cursor: 'pointer' }}>
          <IconSearch size={20}/>
        </button>
        <button className="tap" onClick={onCart}
          style={{ background: 'none', border: 'none', color: 'var(--ff-text)', padding: 10, marginRight: -10, cursor: 'pointer', position: 'relative' }}>
          <IconCart size={22}/>
          {cartCount > 0 && (
            <span style={{
              position: 'absolute', top: 4, right: 4,
              background: 'var(--ff-orange)', color: '#fff',
              fontSize: 10, fontWeight: 600, fontFamily: 'var(--ff-mono)',
              minWidth: 16, height: 16, padding: '0 4px',
              borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: '1.5px solid var(--ff-bg)',
            }}>{cartCount}</span>
          )}
        </button>
      </div>
    </div>
  );
}

// ─────────────── Bottom Nav ───────────────
function BottomNav({ active, onChange, hidden, style: navStyle = 'icon-label', cartCount }) {
  const items = [
    { k: 'home', l: 'Home', I: IconHome },
    { k: 'shop', l: 'Shop', I: IconShop },
    { k: 'search', l: 'Search', I: IconSearch },
    { k: 'cart', l: 'Cart', I: IconCart },
  ];

  if (navStyle === 'pill') {
    // floating pill style
    return (
      <div style={{
        position: 'fixed', bottom: 'calc(16px + var(--safe-bottom))', left: '50%',
        transform: `translateX(-50%) translateY(${hidden ? 'calc(100% + 24px)' : '0'})`,
        transition: 'transform 280ms var(--ff-ease-out)',
        zIndex: 40,
        display: 'flex', gap: 4, padding: 6,
        background: 'rgba(20,20,20,0.78)',
        backdropFilter: 'blur(20px) saturate(180%)',
        WebkitBackdropFilter: 'blur(20px) saturate(180%)',
        border: '1px solid var(--ff-border)',
        borderRadius: 999,
        boxShadow: '0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04) inset',
      }}>
        {items.map(it => (
          <button key={it.k} onClick={() => onChange(it.k)}
            style={{
              background: active === it.k ? 'var(--ff-orange)' : 'transparent',
              color: active === it.k ? '#fff' : 'var(--ff-text-2)',
              border: 'none', cursor: 'pointer',
              width: 48, height: 48, borderRadius: 999,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'background 200ms, color 200ms',
              position: 'relative',
            }}>
            <it.I size={20}/>
            {it.k === 'cart' && cartCount > 0 && (
              <span style={pillBadgeStyle}>{cartCount}</span>
            )}
          </button>
        ))}
      </div>
    );
  }

  // icon-only or icon-label
  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0,
      transform: `translateY(${hidden ? '110%' : '0'})`,
      transition: 'transform 280ms var(--ff-ease-out)',
      zIndex: 40,
      paddingBottom: 'var(--safe-bottom)',
      background: 'rgba(10,10,10,0.92)',
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      borderTop: '1px solid var(--ff-border)',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', height: 64 }}>
        {items.map(it => {
          const isActive = active === it.k;
          return (
            <button key={it.k} onClick={() => onChange(it.k)}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                color: isActive ? 'var(--ff-orange)' : 'var(--ff-text-2)',
                display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'center', gap: 2,
                padding: 0, position: 'relative',
                transition: 'color 180ms',
              }}>
              <it.I size={navStyle === 'icon-label' ? 20 : 24}/>
              {navStyle === 'icon-label' && (
                <span style={{ fontSize: 10, fontWeight: 500, letterSpacing: 0.2 }}>{it.l}</span>
              )}
              {it.k === 'cart' && cartCount > 0 && (
                <span style={navBadgeStyle}>{cartCount}</span>
              )}
              {isActive && (
                <span style={{
                  position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)',
                  width: 24, height: 2, background: 'var(--ff-orange)', borderRadius: '0 0 2px 2px',
                }}/>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

const navBadgeStyle = {
  position: 'absolute', top: 8, right: '28%',
  background: 'var(--ff-orange)', color: '#fff',
  fontSize: 9, fontWeight: 600, fontFamily: 'var(--ff-mono)',
  minWidth: 14, height: 14, padding: '0 3px',
  borderRadius: 7, display: 'flex', alignItems: 'center', justifyContent: 'center',
};
const pillBadgeStyle = {
  position: 'absolute', top: 4, right: 4,
  background: 'var(--ff-orange)', color: '#fff',
  fontSize: 9, fontWeight: 600,
  minWidth: 14, height: 14, padding: '0 3px',
  borderRadius: 7, display: 'flex', alignItems: 'center', justifyContent: 'center',
  border: '2px solid #141414',
};

// ─────────────── Menu Drawer (slides in from right) ───────────────
function MenuDrawer({ open, onClose, onNav }) {
  const [shopOpen, setShopOpen] = React.useState(true);
  if (!open) return null;
  return (
    <>
      <div className="scrim" onClick={onClose} style={{
        position: 'fixed', inset: 0, zIndex: 60,
        background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(6px)',
        animation: 'ff-fade-in 220ms ease-out',
      }}/>
      <div style={{
        position: 'fixed', top: 0, bottom: 0, right: 0, width: '88%', maxWidth: 360,
        zIndex: 70, background: 'var(--ff-bg)', borderLeft: '1px solid var(--ff-border)',
        display: 'flex', flexDirection: 'column',
        animation: 'ff-slide-right 280ms cubic-bezier(0.16,1,0.3,1)',
        paddingTop: 'var(--safe-top)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', borderBottom: '1px solid var(--ff-border)' }}>
          <Wordmark size={13}/>
          <button className="tap" onClick={onClose}
            style={{ background: 'none', border: 'none', color: 'var(--ff-text)', padding: 8, marginRight: -8, cursor: 'pointer' }}>
            <IconClose size={22}/>
          </button>
        </div>

        <div style={{ flex: 1, overflowY: 'auto' }}>
          <div style={{ padding: '8px 0' }}>
            {/* Shop categories collapsible */}
            <button onClick={() => setShopOpen(o => !o)}
              style={drawerRowBtn(true)}>
              <span style={{ fontFamily: 'var(--ff-display)', fontSize: 18, fontWeight: 600 }}>Shop</span>
              <IconChevronDown size={18} style={{ transform: shopOpen ? 'rotate(180deg)' : 'none', transition: 'transform 200ms' }}/>
            </button>
            {shopOpen && (
              <div style={{ paddingBottom: 4 }}>
                {['All Products', 'Trigger Kits', 'Safeties', 'Components', 'Accessories'].map(c => (
                  <button key={c} onClick={() => { onNav('shop'); onClose(); }} style={drawerSubRow}>
                    {c}
                    <IconChevronRight size={16} style={{ color: 'var(--ff-text-3)' }}/>
                  </button>
                ))}
              </div>
            )}

            {[
              { k: 'how', l: 'How It Works' },
              { k: 'notes', l: 'Field Notes' },
              { k: 'support', l: 'Support' },
              { k: 'account', l: 'Account' },
              { k: 'compliance', l: 'Shipping & Compliance' },
            ].map(item => (
              <button key={item.k} onClick={() => { onNav(item.k); onClose(); }} style={drawerRowBtn(false)}>
                <span style={{ fontFamily: 'var(--ff-display)', fontSize: 18, fontWeight: 600 }}>{item.l}</span>
                <IconChevronRight size={18} style={{ color: 'var(--ff-text-3)' }}/>
              </button>
            ))}
          </div>

          <div style={{ padding: '24px 20px', borderTop: '1px solid var(--ff-border)' }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>FOLLOW</div>
            <div style={{ display: 'flex', gap: 10 }}>
              {[IconInstagram, IconYoutube].map((I, i) => (
                <button key={i} className="tap"
                  style={{ width: 44, height: 44, borderRadius: 4, border: '1px solid var(--ff-border)',
                    background: 'var(--ff-surface)', color: 'var(--ff-text-2)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                  <I size={18}/>
                </button>
              ))}
            </div>
          </div>

          <div style={{ padding: '20px', color: 'var(--ff-text-3)', fontSize: 13, lineHeight: 1.6 }}>
            <div className="mono" style={{ color: 'var(--ff-text-2)', fontSize: 11, letterSpacing: '0.12em', marginBottom: 8 }}>FLOWFIRE DEFENSE</div>
            <div>Machined in Texas, USA</div>
            <div>support@flowfiredefense.com</div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes ff-fade-in { from { opacity: 0 } to { opacity: 1 } }
        @keyframes ff-slide-right { from { transform: translateX(100%) } to { transform: translateX(0) } }
      `}</style>
    </>
  );
}

const drawerRowBtn = (isHeader) => ({
  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  padding: '16px 20px', background: 'none', border: 'none',
  borderBottom: isHeader ? '1px solid transparent' : '1px solid var(--ff-border)',
  color: 'var(--ff-text)', cursor: 'pointer', textAlign: 'left',
  minHeight: 56,
});
const drawerSubRow = {
  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  padding: '12px 20px 12px 32px', background: 'none', border: 'none',
  color: 'var(--ff-text-2)', cursor: 'pointer', textAlign: 'left',
  fontFamily: 'var(--ff-body)', fontSize: 15, minHeight: 44,
};

// ─────────────── Toast ───────────────
function Toast({ msg, onDone }) {
  React.useEffect(() => {
    if (!msg) return;
    const t = setTimeout(onDone, 2400);
    return () => clearTimeout(t);
  }, [msg]);
  if (!msg) return null;
  return (
    <div style={{
      position: 'fixed', bottom: 'calc(88px + var(--safe-bottom))', left: 16, right: 16, zIndex: 100,
      background: 'rgba(28,28,28,0.95)', backdropFilter: 'blur(16px)',
      border: '1px solid var(--ff-border)', borderRadius: 6,
      padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
      animation: 'ff-toast-in 240ms var(--ff-ease-out)',
      boxShadow: '0 12px 40px rgba(0,0,0,0.5)',
    }}>
      <div style={{ width: 26, height: 26, borderRadius: 13, background: 'var(--ff-orange-dim)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        border: '1px solid var(--ff-orange)' }}>
        <IconCheck size={14} color="var(--ff-orange)"/>
      </div>
      <div style={{ color: 'var(--ff-text)', fontSize: 14, fontWeight: 500, flex: 1 }}>{msg}</div>
      <style>{`@keyframes ff-toast-in { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }`}</style>
    </div>
  );
}

Object.assign(window, { Wordmark, FF_LOGO, TopBar, BottomNav, MenuDrawer, Toast });