---
const platforms = {
  douyin: { name: "抖音搜索", color: "#161823", glow: "rgba(22,24,35,.12)" },
  xiaohongshu: { name: "小红书搜索", color: "#FF2442", glow: "rgba(255,36,66,.14)" },
  doubao: { name: "豆包", color: "#2F6BFF", glow: "rgba(47,107,255,.14)" },
  qwen: { name: "通义千问", color: "#6F5BFF", glow: "rgba(111,91,255,.14)" },
  deepseek: { name: "DeepSeek", color: "#4D6BFE", glow: "rgba(77,107,254,.14)" },
  kimi: { name: "Kimi", color: "#111827", glow: "rgba(17,24,39,.11)" },
  yuanbao: { name: "腾讯元宝", color: "#0052D9", glow: "rgba(0,82,217,.14)" },
  baidu: { name: "百度AI", color: "#2932E1", glow: "rgba(41,50,225,.14)" },
  wenxin: { name: "文心一言", color: "#2468F2", glow: "rgba(36,104,242,.14)" },
};

const rows = [
  [platforms.douyin, platforms.xiaohongshu, platforms.doubao, platforms.qwen, platforms.deepseek],
  [platforms.kimi, platforms.yuanbao, platforms.baidu, platforms.wenxin, platforms.xiaohongshu],
  [platforms.deepseek, platforms.doubao, platforms.douyin, platforms.qwen, platforms.kimi],
  [platforms.wenxin, platforms.yuanbao, platforms.xiaohongshu, platforms.baidu, platforms.deepseek],
];
---
<div class="platform-flow" role="img" aria-label="覆盖抖音搜索、小红书搜索、豆包、通义千问、DeepSeek等主流AI与社媒搜索平台">
  {rows.map((row, rowIndex) => (
    <div class:list={["platform-flow__row", { "platform-flow__row--reverse": rowIndex % 2 === 1 }]}>
      <div class="platform-flow__track">
        {[false, true].map(() => (
          <div class="platform-flow__group" aria-hidden="true">
            {row.map((item) => <span class="platform-flow__item" style={`--platform-color:${item.color};--platform-glow:${item.glow}`}>{item.name}</span>)}
          </div>
        ))}
      </div>
    </div>
  ))}
</div>
