// logos.jsx — "吃啥了" logo concepts, simple-shape only.
// Exports to window: Wordmark, LogoBowl, LogoFace, LogoBubble, LogoTile, LogoSpoon, LOGO_CONCEPTS

function Wordmark({ color = '#2B2218', size = 26, font }) {
  return (
    <span className="num" style={{
      fontFamily: font || "'Fredoka','Noto Sans SC',sans-serif",
      fontWeight: 700, fontSize: size, color, letterSpacing: '.02em', lineHeight: 1, whiteSpace: 'nowrap',
    }}>吃啥了</span>
  );
}

// 饭碗 + 热气
function LogoBowl({ size = 56, color = '#FF7A45', dark = '#E85C28', steam = true }) {
  const w = size, bowlW = w * 0.86;
  return (
    <div style={{ width: w, height: w, position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
      {steam && (
        <div style={{ position: 'absolute', top: w * 0.06, display: 'flex', gap: w * 0.12 }}>
          {[0,1,2].map(i => (
            <span key={i} style={{
              width: w * 0.07, height: w * 0.24, borderRadius: 99, background: color, opacity: .5,
              animation: `ccSteam ${1.6 + i * .25}s ease-in-out ${i * .2}s infinite`,
            }} />
          ))}
        </div>
      )}
      <div style={{ position: 'relative', width: bowlW, height: bowlW * 0.62 }}>
        {/* rim */}
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: w * 0.16, borderRadius: '50%',
          background: dark }} />
        {/* bowl body */}
        <div style={{ position: 'absolute', top: w * 0.08, left: 0, right: 0, bottom: 0,
          background: color, borderRadius: `0 0 ${bowlW}px ${bowlW}px` }} />
      </div>
    </div>
  );
}

// 圆脸怪 + 咬一口
function LogoFace({ size = 56, color = '#FF7A45', bg = '#FFF8F3', feat = '#fff' }) {
  const w = size;
  return (
    <div style={{ width: w, height: w, position: 'relative' }}>
      <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: color }} />
      {/* bite */}
      <div style={{ position: 'absolute', top: -w * 0.12, right: -w * 0.12, width: w * 0.5, height: w * 0.5,
        borderRadius: '50%', background: bg }} />
      {/* eyes */}
      <div style={{ position: 'absolute', top: w * 0.38, left: w * 0.27, width: w * 0.1, height: w * 0.1,
        borderRadius: 99, background: feat }} />
      <div style={{ position: 'absolute', top: w * 0.38, left: w * 0.5, width: w * 0.1, height: w * 0.1,
        borderRadius: 99, background: feat }} />
      {/* smile */}
      <div style={{ position: 'absolute', top: w * 0.52, left: w * 0.3, width: w * 0.32, height: w * 0.2,
        border: `${w*0.06}px solid ${feat}`, borderTop: 'none', borderRadius: `0 0 ${w}px ${w}px` }} />
    </div>
  );
}

// 对话气泡「吃啥?」
function LogoBubble({ size = 56, color = '#FF7A45', font }) {
  const w = size;
  return (
    <div style={{ width: w, height: w, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ width: w, height: w * 0.82, borderRadius: w * 0.34, background: color,
        display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
        <span className="num" style={{ fontFamily: font || "'Fredoka','Noto Sans SC',sans-serif",
          fontWeight: 700, fontSize: w * 0.3, color: '#fff' }}>吃啥</span>
        <div style={{ position: 'absolute', bottom: -w * 0.08, left: w * 0.22, width: w * 0.22, height: w * 0.22,
          background: color, borderRadius: '0 0 4px 16px', transform: 'skewX(-12deg)' }} />
      </div>
    </div>
  );
}

// App 图标 tile（圆角方 + 碗 + 筷子）
function LogoTile({ size = 56, color = '#FF7A45', dark = '#E85C28' }) {
  const w = size;
  return (
    <div style={{ width: w, height: w, borderRadius: w * 0.26, position: 'relative', overflow: 'hidden',
      background: `linear-gradient(150deg, ${color}, ${dark})`, boxShadow: `0 6px 16px -6px ${dark}` }}>
      {/* chopsticks */}
      <div style={{ position: 'absolute', top: w * 0.16, right: w * 0.2, width: w * 0.07, height: w * 0.46,
        background: 'rgba(255,255,255,0.92)', borderRadius: 99, transform: 'rotate(18deg)' }} />
      <div style={{ position: 'absolute', top: w * 0.16, right: w * 0.32, width: w * 0.07, height: w * 0.46,
        background: 'rgba(255,255,255,0.92)', borderRadius: 99, transform: 'rotate(18deg)' }} />
      {/* bowl */}
      <div style={{ position: 'absolute', bottom: w * 0.18, left: w * 0.16, width: w * 0.5, height: w * 0.26,
        background: '#fff', borderRadius: `0 0 ${w}px ${w}px` }} />
      <div style={{ position: 'absolute', bottom: w * 0.4, left: w * 0.16, width: w * 0.5, height: w * 0.08,
        background: 'rgba(255,255,255,0.6)', borderRadius: '50%' }} />
    </div>
  );
}

// 勺子圆标
function LogoSpoon({ size = 56, color = '#FF7A45' }) {
  const w = size;
  return (
    <div style={{ width: w, height: w, borderRadius: '50%', border: `${w*0.08}px solid ${color}`,
      position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ width: w * 0.34, height: w * 0.4, borderRadius: '50% 50% 48% 48%', background: color }} />
      <div style={{ position: 'absolute', bottom: w * 0.12, width: w * 0.09, height: w * 0.26, borderRadius: 99, background: color }} />
    </div>
  );
}

const LOGO_CONCEPTS = [
  { key: 'bowl',   name: '热气饭碗',   desc: '一碗热腾腾，最直白的「吃」。热气可做加载动效。',
    render: (c) => <LogoBowl size={64} color={c.primary} dark={c.dark} /> },
  { key: 'face',   name: '咬一口怪',   desc: '被咬掉一口的圆脸小怪，呆萌、有记忆点。',
    render: (c) => <LogoFace size={64} color={c.primary} bg={c.surface} /> },
  { key: 'bubble', name: '对话气泡',   desc: '把「吃啥?」做成提问气泡，呼应产品名。',
    render: (c) => <LogoBubble size={64} color={c.primary} font={c.display} /> },
  { key: 'tile',   name: 'App 图标',  desc: '渐变圆角方 + 碗筷，可直接做小程序方形图标。',
    render: (c) => <LogoTile size={64} color={c.primary} dark={c.dark} /> },
  { key: 'spoon',  name: '勺子圆章',   desc: '极简线性勺子，适合做小尺寸/单色场景。',
    render: (c) => <LogoSpoon size={64} color={c.primary} /> },
];

Object.assign(window, { Wordmark, LogoBowl, LogoFace, LogoBubble, LogoTile, LogoSpoon, LOGO_CONCEPTS });