/* Shared UI primitives — header, footer, product cards, icons, image placeholder */
/* globals React */

const { useState, useEffect, useRef, useMemo } = React;

// ——————— Icons (inline SVG, 2px stroke outlined) ———————
const Icon = ({ name, size = 20, className = '', style }) => {
  const s = { width: size, height: size, ...style };
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', className, style: s };
  switch (name) {
    case 'search': return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case 'cart': return <svg {...common}><path d="M3 4h2l2.6 12.6a2 2 0 0 0 2 1.4h8a2 2 0 0 0 2-1.4L22 8H6"/><circle cx="10" cy="21" r="1"/><circle cx="18" cy="21" r="1"/></svg>;
    case 'user': return <svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case 'menu': return <svg {...common}><path d="M4 6h16M4 12h16M4 18h16"/></svg>;
    case 'x': return <svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'chevron-right': return <svg {...common}><path d="M9 18l6-6-6-6"/></svg>;
    case 'chevron-left': return <svg {...common}><path d="M15 18l-9-6 9-6"/></svg>;
    case 'chevron-down': return <svg {...common}><path d="M6 9l6 6 6-6"/></svg>;
    case 'plus': return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus': return <svg {...common}><path d="M5 12h14"/></svg>;
    case 'check': return <svg {...common}><path d="M4 12l5 5L20 6"/></svg>;
    case 'lock': return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case 'ticket': return <svg {...common}><path d="M2 9a2 2 0 0 0 2 2 2 2 0 0 1 0 4 2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2 2 2 0 0 1 0-4 2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v1z"/><path d="M9 7v2M9 13v2M9 18v2"/></svg>;
    case 'globe': return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>;
    case 'building': return <svg {...common}><rect x="4" y="3" width="16" height="18"/><path d="M9 8h2M13 8h2M9 12h2M13 12h2M9 16h2M13 16h2"/></svg>;
    case 'gift': return <svg {...common}><rect x="3" y="8" width="18" height="4"/><path d="M12 8v13M5 12v9h14v-9"/><path d="M12 8c-2-3-6-3-6 0 0 2 3 2 6 0zM12 8c2-3 6-3 6 0 0 2-3 2-6 0z"/></svg>;
    case 'shield': return <svg {...common}><path d="M12 2l8 3v7c0 5-3.5 9-8 10-4.5-1-8-5-8-10V5l8-3z"/></svg>;
    case 'truck': return <svg {...common}><path d="M1 7h13v10H1zM14 10h5l3 3v4h-8"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></svg>;
    case 'sparkle': return <svg {...common}><path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>;
    case 'arrow-right': return <svg {...common}><path d="M4 12h15M14 6l6 6-6 6"/></svg>;
    case 'trash': return <svg {...common}><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg>;
    case 'heart': return <svg {...common}><path d="M20.8 5.6a5 5 0 0 0-7-.8L12 6.5l-1.8-1.7a5 5 0 1 0-7 7L12 21l8.8-9.2a5 5 0 0 0 0-6.2z"/></svg>;
    case 'star': return <svg {...common}><path d="M12 2l3 7 7 .6-5.3 4.7 1.6 7.2L12 17.8 5.7 21.5l1.6-7.2L2 9.6 9 9z"/></svg>;
    case 'doc': return <svg {...common}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>;
    case 'mail': return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg>;
    case 'map-pin': return <svg {...common}><path d="M12 22s8-7.5 8-13a8 8 0 0 0-16 0c0 5.5 8 13 8 13z"/><circle cx="12" cy="9" r="3"/></svg>;
    case 'card': return <svg {...common}><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>;
    case 'filter': return <svg {...common}><path d="M3 5h18M6 12h12M10 19h4"/></svg>;
    default: return null;
  }
};
window.Icon = Icon;

// ——————— Uber wordmark logo (real SVG from brand kit) ———————
const UberMark = ({ size = 22, color = 'currentColor' }) => {
  // viewBox uses the actual Uber logo path coordinates, narrowed to just the wordmark area.
  const h = size;
  const w = size * 3.3; // aspect ratio of wordmark
  return (
    <svg width={w} height={h} viewBox="426 426 1252 435" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }} aria-label="Uber">
      <path fill={color} d="M595.67 803.49c59.13 0 104.85-45.73 104.85-113.4V426.72h64V853.48H701.13V813.85c-28.65 29.87-68.27 46.94-112.78 46.94-91.45 0-161.56-66.45-161.56-167v-267h64V690.09c0 68.89 45.11 113.4 104.86 113.4"/>
      <path fill={color} d="M812.09 426.73h61.57V582.19A153.73 153.73 0 0 1 984 535.85c91.45 0 163.38 72.55 163.38 162.78 0 89.62-71.93 162.16-163.38 162.16a155.13 155.13 0 0 1-111-46.33v39h-61ZM979.74 806.54c58.53 0 106.69-48.17 106.69-107.91 0-60.36-48.16-107.91-106.69-107.91-59.14 0-107.3 47.55-107.3 107.91 0 59.74 47.55 107.91 107.3 107.91"/>
      <path fill={color} d="M1331.51 536.46c89.61 0 155.46 68.89 155.46 161.56v20.12H1234c8.54 50.6 50.6 88.4 103 88.4 36 0 66.46-14.64 89.62-45.73l44.51 32.92c-31.1 41.46-77.43 66.45-134.13 66.45-93.27 0-165.21-69.5-165.21-162.16 0-87.79 68.89-161.56 159.73-161.56m-96.33 132.91h189.6c-10.36-47.56-48.77-79.26-94.49-79.26s-84.13 31.7-95.11 79.26"/>
      <path fill={color} d="M1652.18 597.43c-40.24 0-69.5 31.09-69.5 79.25v176.8H1521.1V542.56h61V581c15.24-25 40.24-40.85 74.38-40.85h21.33v57.31Z"/>
    </svg>
  );
};
window.UberMark = UberMark;

// ——————— Uber Eats wordmark (constructed from the supplied logo style) ———————
const UberEatsMark = ({ size = 22, light = false }) => (
  <span style={{ display:'inline-flex', alignItems:'center', gap: size*0.22, fontFamily:'var(--font-display)', fontWeight: 700, letterSpacing:'-0.04em', fontSize: size, lineHeight: 1, color: light ? '#fff' : '#000' }}>
    <span>Uber</span>
    <span style={{ background:'var(--u-eats)', color:'#000', padding: `${size*0.12}px ${size*0.28}px`, borderRadius: size*0.18 }}>Eats</span>
  </span>
);
window.UberEatsMark = UberEatsMark;

// ——————— Product image (real imagery when product.image is set) ———————
const ProductImage = ({ product, aspect = '1 / 1', showLabel = true }) => {
  const cls = product.color === 'eats' ? 'is-eats'
    : product.color === 'black' ? 'is-black'
    : product.color === 'premium' ? 'is-premium'
    : product.color === 'erg' ? 'is-erg'
    : '';
  if (product.image) {
    return (
      <div className="img-ph has-img" style={{ aspectRatio: aspect, background: '#F2F2F2' }}>
        <img src={product.image} alt={product.name}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
      </div>
    );
  }
  return (
    <div className={`img-ph ${cls}`} style={{ aspectRatio: aspect }}>
      <div className="ph-badge">Image · {product.sku || product.id}</div>
      {showLabel && <div className="ph-label">{product.cat}</div>}
    </div>
  );
};
window.ProductImage = ProductImage;

// ——————— Header ———————
const Header = ({ mode, setMode, region, cartCount, onNav, current, onHome }) => {
  const nav = [
    { id: 'browse', label: 'Shop all' },
    { id: 'apparel', label: 'Apparel' },
    { id: 'accessories', label: 'Accessories' },
    { id: 'drinkware', label: 'Drinkware' },
    { id: 'tech', label: 'Tech' },
    { id: 'kits', label: 'Gift kits' },
    { id: 'executive', label: 'Executive', premium: true },
    { id: 'erg', label: 'ERG' },
  ];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 40, background: '#fff', borderBottom: '1px solid var(--u-line)' }}>
      {/* Utility bar */}
      <div style={{ background: '#000', color: '#fff', fontSize: 12 }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '8px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', gap: 20, alignItems: 'center', whiteSpace: 'nowrap' }}>
            <span style={{ opacity: 0.7 }}>Employee Store</span>
            <span style={{ opacity: 0.4 }}>·</span>
            <span style={{ opacity: 0.7 }}>All orders route through Uber Brand Desk for review</span>
            {onHome && (
              <>
                <span style={{ opacity: 0.4 }}>·</span>
                <button onClick={onHome} style={{ background: 'transparent', border: 0, color: '#fff', padding: 0, cursor: 'pointer', fontSize: 12, textDecoration: 'underline', opacity: 0.7 }}>Change path</button>
              </>
            )}
          </div>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <button onClick={() => setMode(mode === 'corporate' ? 'personal' : 'corporate')} style={{ background: 'transparent', border: 0, color: '#fff', padding: 0, cursor: 'pointer', fontSize: 12, display:'flex', alignItems:'center', gap: 6 }}>
              <Icon name={mode === 'corporate' ? 'building' : 'user'} size={14}/>
              <span>{mode === 'corporate' ? 'Corporate order' : 'Personal order'}</span>
              <span style={{ opacity: 0.5 }}>· switch</span>
            </button>
            <span style={{ opacity: 0.4 }}>|</span>
            <span style={{ display:'flex', alignItems:'center', gap: 6 }}><Icon name="globe" size={14}/>{region}</span>
            <span style={{ opacity: 0.4 }}>|</span>
            <span>jordan.chen@uber.com</span>
          </div>
        </div>
      </div>
      {/* Main nav */}
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '18px 32px', display: 'flex', alignItems: 'center', gap: 32 }}>
        <button onClick={() => onNav('landing')} style={{ background:'transparent', border:0, padding: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
          <UberMark size={26}/>
          <span style={{ width: 1, height: 22, background:'rgba(0,0,0,0.15)', flexShrink: 0 }}/>
          <span style={{ fontSize: 14, color: 'var(--u-text)', fontWeight: 500, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>Employee Store</span>
        </button>
        <nav style={{ display: 'flex', gap: 4, alignItems: 'center', marginLeft: 8, flexWrap: 'nowrap' }}>
          {nav.map(n => (
            <button key={n.id} onClick={() => onNav(n.id)}
              style={{
                background: 'transparent', border: 0, padding: '8px 12px',
                fontSize: 14, fontWeight: current === n.id ? 600 : 500,
                color: n.premium ? '#8a6b2d' : 'var(--u-text)',
                cursor: 'pointer',
                whiteSpace: 'nowrap',
                borderBottom: current === n.id ? '2px solid #000' : '2px solid transparent',
              }}>
              {n.label}
            </button>
          ))}
        </nav>
        <div style={{ flex: 1 }} />
        <div style={{ position: 'relative', width: 260 }}>
          <Icon name="search" size={16} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--u-text-3)' }}/>
          <input className="input" placeholder="Search products, SKUs…" style={{ padding: '10px 12px 10px 36px', fontSize: 14 }}/>
        </div>
        <button onClick={() => onNav('access-code')} className="btn btn-sm btn-outline" style={{ gap: 6 }}>
          <Icon name="ticket" size={16}/>Access code
        </button>
        <button onClick={() => onNav('cart')} style={{ position: 'relative', background: 'transparent', border: 0, cursor: 'pointer', padding: 8 }}>
          <Icon name="cart" size={22}/>
          {cartCount > 0 && <span style={{ position: 'absolute', top: -2, right: -2, background: 'var(--u-eats)', color: '#000', fontSize: 10, fontWeight: 700, minWidth: 18, height: 18, borderRadius: 9, padding: '0 5px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{cartCount}</span>}
        </button>
      </div>
    </header>
  );
};
window.Header = Header;

// ——————— Category chip bar (persistent cross-category nav on product pages) ———————
const CategoryChips = ({ current, onNav, theme = 'light' }) => {
  const cats = [
    { id: 'browse', label: 'Shop all' },
    { id: 'apparel', label: 'Apparel' },
    { id: 'accessories', label: 'Accessories' },
    { id: 'drinkware', label: 'Drinkware' },
    { id: 'tech', label: 'Tech' },
    { id: 'kits', label: 'Gift Kits' },
    { id: 'executive', label: 'Executive', premium: true },
    { id: 'erg', label: 'ERG' },
  ];
  const dark = theme === 'dark';
  const activeBg = dark ? '#fff' : '#000';
  const activeFg = dark ? '#000' : '#fff';
  const idleBg = dark ? 'rgba(255,255,255,0.06)' : '#F6F6F5';
  const idleFg = dark ? 'rgba(255,255,255,0.8)' : 'var(--u-text)';
  const border = dark ? 'rgba(255,255,255,0.12)' : 'var(--u-line)';
  return (
    <div style={{
      display: 'flex', gap: 8, flexWrap: 'wrap',
      padding: '16px 0',
      borderTop: `1px solid ${border}`,
      borderBottom: `1px solid ${border}`,
      marginBottom: 32,
    }}>
      {cats.map(c => {
        const isActive = current === c.id;
        return (
          <button key={c.id} onClick={() => onNav(c.id)} style={{
            background: isActive ? activeBg : idleBg,
            color: isActive ? activeFg : (c.premium ? (dark ? 'var(--u-premium-gold)' : '#8a6b2d') : idleFg),
            border: 0,
            padding: '9px 16px',
            borderRadius: 999,
            fontSize: 13,
            fontWeight: isActive ? 600 : 500,
            cursor: 'pointer',
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            whiteSpace: 'nowrap',
          }}>
            {c.premium && <Icon name="sparkle" size={11}/>}
            {c.label}
          </button>
        );
      })}
    </div>
  );
};
window.CategoryChips = CategoryChips;

// ——————— Footer ———————
const Footer = () => (
  <footer style={{ background: '#000', color: '#fff' }}>
    <div style={{ maxWidth: 1440, margin: '0 auto', padding: '64px 32px 40px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 48, paddingBottom: 48, borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
        <div>
          <UberMark size={32} color="#fff"/>
          <div style={{ marginTop: 12, fontSize: 13, opacity: 0.6, lineHeight: 1.6, maxWidth: 280 }}>
            The Uber employee store. Merchandise, gifting, and program kits for the global workforce.
          </div>
        </div>
        {[
          { t: 'Shop', items: ['Apparel','Accessories','Drinkware','Tech','Gift kits','Executive'] },
          { t: 'Programs', items: ['Enter access code','New hire kits','ERG collections','Event merchandise','Executive gifting'] },
          { t: 'Help', items: ['Order status','Shipping','Returns','Contact'] },
          { t: 'Internal', items: ['Brand Desk','Coupa / Zip','Finance codes','Vendor policy'] },
        ].map(col => (
          <div key={col.t}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.5, marginBottom: 14 }}>{col.t}</div>
            {col.items.map(i => <div key={i} style={{ fontSize: 14, marginBottom: 8, opacity: 0.8 }}>{i}</div>)}
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 32, display: 'flex', justifyContent: 'space-between', fontSize: 12, opacity: 0.5 }}>
        <span>© 2026 Uber Technologies, Inc. — Internal employee store.</span>
        <span>Brand assets used under Brand Desk approval. Typography: Uber Move + Uber Move Text.</span>
      </div>
    </div>
  </footer>
);
window.Footer = Footer;