// Beside — shared tokens and primitives
const T = {
  bg: '#0A0A0F',
  bgEl: '#16161D',
  bgEl2: '#1F1F28',
  bgEl3: '#262630',
  border: '#2C2C36',
  borderSoft: 'rgba(255,255,255,0.06)',
  text: '#FFFFFF',
  text2: '#A8A8B5',
  text3: '#6E6E7A',
  text4: '#4A4A55',
  primary: '#7B5FE6',
  primaryLight: '#9D85F2',
  primaryDark: '#5A3FD0',
  primaryGlow: 'rgba(123,95,230,0.18)',
  danger: '#FF3B30',
  dangerBg: '#2D0B0B',
  dangerDeep: '#1A0507',
  success: '#34C759',
  warning: '#FF9F0A',
  info: '#0A84FF',
  font: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif',
};

// Beside wordmark — two stacked rounded slabs forming a shield+presence glyph,
// then lowercase "beside". Intentionally quiet, no decoration.
const BesideMark = ({ size = 20, color = '#fff' }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color, fontFamily: T.font }}>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M5 4c0-1 .8-2 2-2h4a4 4 0 014 4v0a4 4 0 01-4 4H7c-1 0-2-.8-2-2V4z" fill={color}/>
      <path d="M5 14c0-1 .8-2 2-2h10a4 4 0 014 4v2a4 4 0 01-4 4H7c-1 0-2-.8-2-2v-6z" fill={color} opacity="0.5"/>
    </svg>
    <span style={{ fontSize: size * 0.95, fontWeight: 600, letterSpacing: -0.5 }}>beside</span>
  </div>
);

// Avatar with initials, deterministic color
const Avatar = ({ name = '', size = 40, src }) => {
  const initials = name.trim().split(/\s+/).map(w => w[0]).slice(0, 2).join('').toUpperCase();
  const palette = ['#7B5FE6', '#E66A8E', '#5BB89E', '#E6A55F', '#5F8DE6', '#B85FE6'];
  const hash = [...name].reduce((a, c) => a + c.charCodeAt(0), 0);
  const bg = palette[hash % palette.length];
  return (
    <div style={{
      width: size, height: size, borderRadius: size / 2, background: bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontWeight: 600, fontSize: size * 0.36, fontFamily: T.font,
      flexShrink: 0,
    }}>{initials}</div>
  );
};

// Generic phone-screen scaffold — dark bg, scrollable content area
const Screen = ({ children, bg = T.bg, padTop = 60 }) => (
  <div style={{
    width: '100%', height: '100%', background: bg, color: T.text,
    fontFamily: T.font, display: 'flex', flexDirection: 'column',
    paddingTop: padTop, position: 'relative', overflow: 'hidden',
  }}>{children}</div>
);

// Status pill (e.g. "You're safe", "Safe Walk active")
const StatusPill = ({ tone = 'safe', children }) => {
  const tones = {
    safe:   { bg: 'rgba(52,199,89,0.12)',  fg: '#34C759', dot: '#34C759' },
    active: { bg: 'rgba(123,95,230,0.14)', fg: '#9D85F2', dot: '#9D85F2' },
    danger: { bg: 'rgba(255,59,48,0.14)',  fg: '#FF6B62', dot: '#FF3B30' },
    warn:   { bg: 'rgba(255,159,10,0.14)', fg: '#FFB54A', dot: '#FF9F0A' },
  };
  const c = tones[tone];
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 12px 6px 10px', borderRadius: 999,
      background: c.bg, color: c.fg, fontSize: 13, fontWeight: 500,
    }}>
      <span style={{
        width: 6, height: 6, borderRadius: 3, background: c.dot,
        boxShadow: `0 0 0 4px ${c.bg}`,
      }} />
      {children}
    </div>
  );
};

// Card surface
const Card = ({ children, style = {}, padding = 16 }) => (
  <div style={{
    background: T.bgEl, borderRadius: 20, padding,
    border: `1px solid ${T.borderSoft}`, ...style,
  }}>{children}</div>
);

// Primary button
const PrimaryButton = ({ children, color = T.primary, fg = '#fff', icon, style = {} }) => (
  <div style={{
    height: 56, borderRadius: 16, background: color, color: fg,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    fontSize: 17, fontWeight: 600, letterSpacing: -0.2,
    boxShadow: color === T.primary ? `0 8px 24px ${T.primaryGlow}` : undefined,
    ...style,
  }}>{icon}{children}</div>
);
const SecondaryButton = ({ children, icon, style = {} }) => (
  <div style={{
    height: 56, borderRadius: 16, background: 'transparent',
    border: `1.5px solid ${T.border}`, color: T.text,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    fontSize: 17, fontWeight: 600, ...style,
  }}>{icon}{children}</div>
);

// Bottom tab bar — used on most main screens
const TabBar = ({ active = 'home' }) => {
  const tabs = [
    { id: 'home', label: 'Home', icon: <I.Home size={22} /> },
    { id: 'map', label: 'Map', icon: <I.Map size={22} /> },
    { id: 'people', label: 'People', icon: <I.Users size={22} /> },
    { id: 'settings', label: 'Settings', icon: <I.Settings size={22} /> },
  ];
  return (
    <div style={{
      position: 'absolute', left: 12, right: 12, bottom: 28, height: 64,
      background: 'rgba(22,22,29,0.85)', backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      border: `1px solid ${T.borderSoft}`, borderRadius: 26,
      display: 'flex', alignItems: 'center', justifyContent: 'space-around',
      padding: '0 12px', zIndex: 5,
    }}>
      {tabs.map(t => (
        <div key={t.id} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
          color: active === t.id ? T.primaryLight : T.text3,
        }}>
          {t.icon}
          <div style={{ fontSize: 10, fontWeight: 500 }}>{t.label}</div>
        </div>
      ))}
    </div>
  );
};

// Mini map illustration — abstract street grid in dark style
const MiniMap = ({ height = 140, withRoute = false, withPin = true }) => (
  <div style={{
    width: '100%', height, borderRadius: 16, overflow: 'hidden',
    background: 'linear-gradient(135deg, #14141B 0%, #1A1B26 60%, #14141B 100%)',
    position: 'relative', border: `1px solid ${T.borderSoft}`,
  }}>
    {/* street grid */}
    <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0 }}>
      <defs>
        <pattern id="dots" width="24" height="24" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.5" fill="rgba(255,255,255,0.04)"/>
        </pattern>
      </defs>
      <rect width="400" height="200" fill="url(#dots)"/>
      {/* river */}
      <path d="M -10 60 Q 100 90 200 70 T 410 95" stroke="rgba(80,120,180,0.35)" strokeWidth="14" fill="none"/>
      {/* main roads */}
      <path d="M 0 130 L 400 130" stroke="rgba(180,180,200,0.18)" strokeWidth="3"/>
      <path d="M 0 165 L 400 165" stroke="rgba(180,180,200,0.12)" strokeWidth="2"/>
      <path d="M 80 0 L 80 200" stroke="rgba(180,180,200,0.18)" strokeWidth="3"/>
      <path d="M 220 0 L 220 200" stroke="rgba(180,180,200,0.14)" strokeWidth="2"/>
      <path d="M 320 0 L 320 200" stroke="rgba(180,180,200,0.10)" strokeWidth="2"/>
      {/* small streets */}
      <path d="M 0 30 L 400 30" stroke="rgba(180,180,200,0.06)" strokeWidth="1"/>
      <path d="M 0 100 L 400 100" stroke="rgba(180,180,200,0.06)" strokeWidth="1"/>
      <path d="M 150 0 L 150 200" stroke="rgba(180,180,200,0.06)" strokeWidth="1"/>
      {/* buildings */}
      <rect x="100" y="135" width="40" height="22" rx="2" fill="rgba(255,255,255,0.04)"/>
      <rect x="150" y="135" width="55" height="28" rx="2" fill="rgba(255,255,255,0.03)"/>
      <rect x="240" y="35" width="50" height="22" rx="2" fill="rgba(255,255,255,0.04)"/>
      {withRoute && (
        <>
          <path d="M 60 170 L 60 130 L 220 130 L 220 50 L 320 50" stroke="#7B5FE6" strokeWidth="3.5"
            fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M 60 170 L 60 130 L 130 130" stroke="#9D85F2" strokeWidth="3.5"
            fill="none" strokeLinecap="round" strokeLinejoin="round" opacity="0.95"/>
        </>
      )}
    </svg>
    {/* user location pulse */}
    {withPin && (
      <div style={{
        position: 'absolute', left: '15%', top: '85%', transform: 'translate(-50%,-50%)',
      }}>
        <div style={{
          position: 'absolute', inset: -10, borderRadius: '50%',
          background: 'rgba(123,95,230,0.25)', animation: 'pulse 2s ease-out infinite',
        }} />
        <div style={{
          width: 14, height: 14, borderRadius: 7, background: T.primaryLight,
          border: '2.5px solid #fff', boxShadow: '0 0 12px rgba(123,95,230,0.6)',
        }} />
      </div>
    )}
    {withRoute && (
      <div style={{
        position: 'absolute', left: '80%', top: '25%', transform: 'translate(-50%,-100%)',
        color: T.primaryLight,
      }}>
        <I.MapPin size={26} />
      </div>
    )}
  </div>
);

window.T = T;
window.BesideMark = BesideMark;
window.Avatar = Avatar;
window.Screen = Screen;
window.StatusPill = StatusPill;
window.Card = Card;
window.PrimaryButton = PrimaryButton;
window.SecondaryButton = SecondaryButton;
window.TabBar = TabBar;
window.MiniMap = MiniMap;