// Top nav, bottom nav (mobile), ticker, footer

function LogoMark({ size = 22 }) {
  return (
    <span className="inline-flex items-center gap-2">
      <span
        className="relative inline-flex items-center justify-center"
        style={{
          width: size, height: size,
          background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%)',
          borderRadius: 6,
          boxShadow: '0 0 24px var(--accent-glow)'
        }}>
        <span className="glyph text-[#0b0320]" style={{ fontSize: size * 0.66, lineHeight: 1 }}>d</span>
      </span>
      <span className="font-semibold tracking-tight">daves<span style={{ color: 'var(--accent)' }}>shop</span></span>
    </span>
  );
}

function TopNav({ page, go, cartCount, searchQ, onSearch, session, onSignOut, onOpenAuth, isAdmin }) {
  const items = [
    { id: 'home', label: 'Home' },
    { id: 'catalog', label: 'Catalog' },
    ...(isAdmin ? [{ id: 'admin', label: 'Admin' }] : []),
  ];
  const [local, setLocal] = React.useState(searchQ || '');
  React.useEffect(() => { setLocal(searchQ || ''); }, [searchQ]);
  const submit = (e) => {
    e.preventDefault();
    onSearch(local);
  };
  return (
    <header className="sticky top-0 z-30 backdrop-blur-xl" style={{ background: 'rgba(7,7,12,0.72)', borderBottom: '1px solid var(--line)' }}>
      <div className="max-w-[1280px] mx-auto px-5 md:px-8 h-16 flex items-center gap-6">
        <button onClick={() => go('home')} className="flex items-center">
          <LogoMark />
        </button>
        <nav className="hidden md:flex items-center gap-6 ml-4">
          {items.map((it) => (
            <button
              key={it.id}
              onClick={() => go(it.id)}
              className={`nav-link text-sm ${page === it.id ? 'active' : ''}`}
            >
              {it.label}
            </button>
          ))}
        </nav>
        <div className="ml-auto flex items-center gap-2">
          <form onSubmit={submit} className="hidden md:flex hairline rounded-lg items-center gap-2 px-3 py-1.5 accent-ring" style={{ background: 'rgba(255,255,255,0.03)' }}>
            <Icon name="search" size={14} />
            <input
              value={local}
              onChange={(e) => setLocal(e.target.value)}
              placeholder="Search products"
              className="bg-transparent outline-none text-sm w-48"
            />
          </form>
          <button onClick={() => go('cart')} className="relative btn-ghost flex items-center gap-2 text-sm px-3 py-2">
            <Icon name="cart" size={14} />
            <span className="hidden sm:inline">Cart</span>
            {cartCount > 0 && (
              <span className="absolute -top-1.5 -right-1.5 text-[10px] mono font-semibold rounded-full px-1.5 py-[1px]" style={{ background: 'var(--accent)', color: '#0b0320' }}>{cartCount}</span>
            )}
          </button>
          {session ? (
            <>
              <button onClick={() => go('account')} className="btn-ghost flex items-center gap-2 text-sm px-3 py-2">
                <Icon name="user" size={14} />
                <span className="hidden sm:inline mono text-xs max-w-[140px] truncate">
                  {session.user?.email}
                </span>
              </button>
              <button onClick={onSignOut} title="Sign out" className="btn-ghost flex items-center gap-2 text-sm px-3 py-2">
                <Icon name="x" size={14} />
                <span className="hidden md:inline">Sign out</span>
              </button>
            </>
          ) : (
            <button onClick={onOpenAuth} className="btn-primary flex items-center gap-2 text-sm px-3 py-2">
              <Icon name="user" size={14} />
              <span>Sign in</span>
            </button>
          )}
        </div>
      </div>
    </header>
  );
}

function BottomNav({ page, go, cartCount }) {
  const items = [
    { id: 'home', label: 'Home', icon: 'home' },
    { id: 'catalog', label: 'Shop', icon: 'grid' },
    { id: 'cart', label: 'Cart', icon: 'cart', badge: cartCount },
    { id: 'account', label: 'Account', icon: 'user' },
  ];
  return (
    <nav className="md:hidden fixed bottom-0 inset-x-0 z-30 safe-bottom" style={{ background: 'rgba(7,7,12,0.92)', borderTop: '1px solid var(--line)', backdropFilter: 'blur(14px)' }}>
      <div className="grid grid-cols-4 px-2 pt-2">
        {items.map((it) => (
          <button key={it.id} onClick={() => go(it.id)} className="flex flex-col items-center gap-1 py-1.5 text-[10px] mono uppercase tracking-widest relative" style={{ color: page === it.id ? 'var(--accent)' : 'var(--ink-mute)' }}>
            <span className="relative">
              <Icon name={it.icon} size={20} />
              {it.badge > 0 && <span className="absolute -top-1 -right-2 text-[9px] mono rounded-full px-1 py-[1px]" style={{ background: 'var(--accent)', color: '#0b0320' }}>{it.badge}</span>}
            </span>
            {it.label}
          </button>
        ))}
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="mt-24 border-t" style={{ borderColor: 'var(--line)' }}>
      <div className="max-w-[1280px] mx-auto px-5 md:px-8 py-14 grid grid-cols-2 md:grid-cols-5 gap-10">
        <div className="col-span-2">
          <LogoMark />
          <p className="mt-4 text-sm text-white/55 max-w-sm">Instant-delivery digital goods. Crypto only. No accounts, no tracking, no middlemen. Fulfillment is automated — most orders land in under 3 minutes.</p>
          <div className="flex flex-wrap items-center gap-2 mt-5">
            <span className="chip mono">SOL</span>
          </div>
        </div>
        {[
          { h: 'Shop', items: ['Streaming', 'Gaming', 'Productivity', 'Social', 'Boosts'] },
          { h: 'Support', items: ['Order tracking', 'Warranty policy', 'Replacement tickets', 'FAQ'] },
          { h: 'Company', items: ['About', 'Terms', 'Refund policy', 'Contact'] },
        ].map((col, i) => (
          <div key={i}>
            <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-3">{col.h}</div>
            <ul className="space-y-2 text-sm text-white/70">
              {col.items.map(it => <li key={it}><a className="hover:text-white" href="#">{it}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div className="border-t px-5 md:px-8 py-5 text-[11px] mono uppercase tracking-widest text-white/40 max-w-[1280px] mx-auto" style={{ borderColor: 'var(--line)' }}>
        © 2026 DavesShop · All rights reserved
      </div>
    </footer>
  );
}

Object.assign(window, { LogoMark, TopNav, BottomNav, Footer });