/* 셔틀아이디 앱 화면 컴포넌트 — 마케팅 이미지에서 재사용 */

const SID = {
  yellow: '#FFD400',
  yellowDeep: '#F5C400',
  yellowSoft: '#FFF6CC',
  yellowBanner: '#FFF4D6',
  text: '#1A1A1A',
  textMid: '#4A4A4A',
  textSub: '#8A8A8A',
  bg: '#FFFFFF',
  bgGray: '#F5F5F7',
  border: '#ECECEC',
  green: '#22C55E',
  red: '#EF4444',
  blue: '#3B82F6',
  dark: '#0F1115',
};

const Mascot = ({size = 48}) => (
  <svg width={size} height={size} viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="46" fill={SID.yellow} />
    <ellipse cx="36" cy="48" rx="5" ry="6" fill={SID.text} />
    <ellipse cx="64" cy="48" rx="5" ry="6" fill={SID.text} />
    <path d="M 38 64 Q 50 72 62 64" stroke={SID.text} strokeWidth="3.5" strokeLinecap="round" fill="none" />
    <circle cx="26" cy="58" r="4" fill="#FFB6B6" opacity="0.7" />
    <circle cx="74" cy="58" r="4" fill="#FFB6B6" opacity="0.7" />
  </svg>
);

const StatusBar = ({dark = false, time = '9:30'}) => {
  const c = dark ? '#fff' : SID.text;
  return (
    <div style={{
      height: 54, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 32px 0 36px', fontSize: 17, fontWeight: 600, color: c, letterSpacing: '-0.3px',
    }}>
      <div>{time}</div>
      <div style={{display: 'flex', alignItems: 'center', gap: 6}}>
        <svg width="20" height="11" viewBox="0 0 20 11" fill={c}>
          <rect x="0" y="7" width="3" height="4" rx="0.5" />
          <rect x="5" y="5" width="3" height="6" rx="0.5" />
          <rect x="10" y="3" width="3" height="8" rx="0.5" />
          <rect x="15" y="0" width="3" height="11" rx="0.5" />
        </svg>
        <svg width="28" height="13" viewBox="0 0 28 13" fill="none">
          <rect x="0.5" y="0.5" width="23" height="12" rx="3" stroke={c} fill="none" />
          <rect x="2" y="2" width="20" height="9" rx="1.5" fill={c} />
          <rect x="24.5" y="4" width="2" height="5" rx="1" fill={c} />
        </svg>
      </div>
    </div>
  );
};

const BottomNav = ({active = 'home'}) => {
  const items = [
    {id: 'home', label: '홈', icon: 'home'},
    {id: 'stats', label: '통계', icon: 'stats'},
    {id: 'settings', label: '설정', icon: 'settings'},
    {id: 'my', label: '마이', icon: 'my'},
  ];
  return (
    <div style={{
      height: 84, borderTop: `1px solid ${SID.border}`, background: '#fff',
      display: 'flex', justifyContent: 'space-around', alignItems: 'flex-start', paddingTop: 10,
    }}>
      {items.map(it => {
        const on = it.id === active;
        const color = on ? SID.text : '#B5B5B5';
        return (
          <div key={it.id} style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4}}>
            <NavIcon name={it.icon} color={color} />
            <div style={{fontSize: 11, color, fontWeight: on ? 600 : 500}}>{it.label}</div>
          </div>
        );
      })}
    </div>
  );
};

const NavIcon = ({name, color}) => {
  const props = {width: 26, height: 26, fill: 'none', stroke: color, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'};
  if (name === 'home') return <svg {...props} viewBox="0 0 24 24"><path d="M3 11L12 3l9 8" /><path d="M5 9.5V20a1 1 0 0 0 1 1h4v-7h4v7h4a1 1 0 0 0 1-1V9.5" /></svg>;
  if (name === 'stats') return <svg {...props} viewBox="0 0 24 24"><rect x="3" y="14" width="4" height="7" /><rect x="10" y="8" width="4" height="13" /><rect x="17" y="3" width="4" height="18" /></svg>;
  if (name === 'settings') return <svg {...props} viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" /><path d="M4 12a8 8 0 0 1 .3-2.2L2.5 8.3l1.8-3.1 2.2.8a8 8 0 0 1 3.8-2.2L11 1.5h2l.7 2.3a8 8 0 0 1 3.8 2.2l2.2-.8 1.8 3.1-1.8 1.5a8 8 0 0 1 0 4.4l1.8 1.5-1.8 3.1-2.2-.8a8 8 0 0 1-3.8 2.2L13 22.5h-2l-.7-2.3a8 8 0 0 1-3.8-2.2l-2.2.8-1.8-3.1 1.8-1.5A8 8 0 0 1 4 12z" /></svg>;
  if (name === 'my') return <svg {...props} viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></svg>;
  return null;
};

const Phone = ({children, dark = false, bezel = 12}) => (
  <div style={{
    width: 390, height: 844, position: 'relative',
    background: dark ? SID.dark : '#fff',
    borderRadius: 54, overflow: 'hidden',
    boxShadow: `0 0 0 ${bezel}px #111418, 0 0 0 ${bezel + 2}px #2a2d33, 0 50px 90px rgba(0,0,0,0.22)`,
  }}>
    {children}
  </div>
);

const Caret = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={SID.text} strokeWidth="2" strokeLinecap="round">
    <path d="M15 18l-6-6 6-6" />
  </svg>
);

const MenuRow = ({icon, title, sub}) => (
  <div style={{display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0'}}>
    <div style={{width: 36, height: 36, borderRadius: 10, background: SID.yellowSoft, display: 'grid', placeItems: 'center'}}>
      <MenuIcon name={icon} />
    </div>
    <div style={{flex: 1}}>
      <div style={{fontSize: 14, fontWeight: 700, marginBottom: 2}}>{title}</div>
      <div style={{fontSize: 11, color: SID.textSub}}>{sub}</div>
    </div>
    <div style={{color: SID.textSub, fontSize: 16}}>›</div>
  </div>
);

const MenuIcon = ({name}) => {
  const p = {width: 18, height: 18, fill: 'none', stroke: SID.text, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round'};
  if (name === 'recognize') return <svg {...p} viewBox="0 0 24 24"><path d="M3 7V5a2 2 0 0 1 2-2h2M21 7V5a2 2 0 0 0-2-2h-2M3 17v2a2 2 0 0 0 2 2h2M21 17v2a2 2 0 0 1-2 2h-2" /><circle cx="12" cy="12" r="4" /></svg>;
  if (name === 'work') return <svg {...p} viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>;
  if (name === 'data') return <svg {...p} viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="8" ry="3" /><path d="M4 6v12c0 1.5 3.6 3 8 3s8-1.5 8-3V6" /><path d="M4 12c0 1.5 3.6 3 8 3s8-1.5 8-3" /></svg>;
};

Object.assign(window, {SID, Mascot, StatusBar, BottomNav, Phone, Caret, MenuRow, MenuIcon});