const meetups = [
  { city: "清迈", emoji: "🇹🇭", date: "3月9日 周一", attendees: 12 },
  { city: "曼谷", emoji: "🇹🇭", date: "3月12日 周四", attendees: 8 },
  { city: "巴厘岛", emoji: "🇮🇩", date: "3月14日 周六", attendees: 15 },
  { city: "大理", emoji: "🇨🇳", date: "3月16日 周一", attendees: 6 },
  { city: "里斯本", emoji: "🇵🇹", date: "3月20日 周五", attendees: 23 },
];

const travelingNow = [
  { name: "小明", bg: "#f43f5e", destination: "清迈" },
  { name: "雨晴", bg: "#8b5cf6", destination: "巴厘岛" },
  { name: "阿杰", bg: "#3b82f6", destination: "曼谷" },
  { name: "小燕", bg: "#10b981", destination: "东京" },
  { name: "大伟", bg: "#f59e0b", destination: "里斯本" },
  { name: "佳琪", bg: "#ec4899", destination: "墨西哥城" },
  { name: "志远", bg: "#06b6d4", destination: "柏林" },
  { name: "心怡", bg: "#ef4444", destination: "首尔" },
  { name: "凯文", bg: "#84cc16", destination: "巴塞罗那" },
  { name: "子豪", bg: "#7c3aed", destination: "成都" },
  { name: "浩然", bg: "#0d9488", destination: "大理" },
  { name: "雅琪", bg: "#ea580c", destination: "台北" },
  { name: "天翔", bg: "#6366f1", destination: "布达佩斯" },
  { name: "美玲", bg: "#d946ef", destination: "梅德林" },
  { name: "俊杰", bg: "#14b8a6", destination: "普吉岛" },
  { name: "晓华", bg: "#f97316", destination: "吉隆坡" },
];

const newMembers = [
  { name: "林", bg: "#3b82f6" },
  { name: "张", bg: "#8b5cf6" },
  { name: "陈", bg: "#f43f5e" },
  { name: "周", bg: "#10b981" },
  { name: "吴", bg: "#f59e0b" },
  { name: "杨", bg: "#ec4899" },
  { name: "赵", bg: "#06b6d4" },
  { name: "黄", bg: "#ef4444" },
  { name: "孙", bg: "#84cc16" },
  { name: "马", bg: "#7c3aed" },
  { name: "朱", bg: "#0d9488" },
  { name: "胡", bg: "#ea580c" },
  { name: "郭", bg: "#6366f1" },
  { name: "何", bg: "#d946ef" },
  { name: "高", bg: "#14b8a6" },
  { name: "梁", bg: "#f97316" },
  { name: "郑", bg: "#a855f7" },
  { name: "罗", bg: "#22c55e" },
  { name: "谢", bg: "#e11d48" },
  { name: "韩", bg: "#0ea5e9" },
];

const hotTopics = [
  { title: "清迈最佳共享办公空间推荐 Top 10", views: 2340 },
  { title: "2026年数字游民签证政策汇总", views: 1890 },
  { title: "远程工作者的跨国税务规划指南", views: 1560 },
  { title: "东南亚 vs 拉美：哪个更适合游民？", views: 1230 },
  { title: "新手游民必备工具与装备清单", views: 980 },
];

export default function Sidebar() {
  return (
    <aside className="w-[320px] shrink-0 hidden lg:block">
      <div className="sticky top-20 space-y-4 sidebar-scroll max-h-[calc(100vh-100px)] overflow-y-auto pr-1">
        {/* Insurance / Visa Promo */}
        <div className="rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-100 p-5">
          <div className="flex items-start gap-3 mb-3">
            <span className="text-2xl">🛡️</span>
            <div>
              <h3 className="font-bold text-gray-900 text-sm">全球旅行保险</h3>
              <p className="text-xs text-gray-500 mt-0.5">
                为数字游民定制的全球医疗保障方案
              </p>
            </div>
          </div>
          <p className="text-xs text-emerald-700 bg-emerald-100/50 rounded-lg px-3 py-2 mb-3">
            覆盖 195+ 国家和地区，远程工作专属条款，¥15/天起
          </p>
          <button className="w-full text-center text-sm font-semibold text-emerald-700 hover:text-emerald-800 bg-white border border-emerald-200 rounded-full py-2 transition-colors hover:bg-emerald-50">
            了解更多 →
          </button>
          <p className="text-[10px] text-gray-400 text-center mt-2">广告</p>
        </div>

        {/* Upcoming Meetups */}
        <div className="rounded-2xl bg-white border border-gray-100 shadow-sm p-5">
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-bold text-gray-900 text-sm flex items-center gap-1.5">
              🍹 近期聚会
            </h3>
            <span className="text-[11px] text-gray-400">8场/月</span>
          </div>
          <div className="space-y-3">
            {meetups.map((m) => (
              <div
                key={m.city + m.date}
                className="flex items-center justify-between py-2 border-b border-gray-50 last:border-0 last:pb-0"
              >
                <div className="flex items-center gap-2.5">
                  <span className="text-lg">{m.emoji}</span>
                  <div>
                    <p className="text-sm font-medium text-gray-800">
                      {m.city}
                    </p>
                    <p className="text-[11px] text-gray-400">{m.date}</p>
                  </div>
                </div>
                <span className="text-[11px] text-gray-400 bg-gray-50 rounded-full px-2 py-0.5">
                  {m.attendees} 人报名
                </span>
              </div>
            ))}
          </div>
          <button className="w-full text-center text-xs font-medium text-gray-500 hover:text-gray-700 mt-3 pt-3 border-t border-gray-100 transition-colors">
            查看全部聚会 →
          </button>
        </div>

        {/* Traveling Now */}
        <div className="rounded-2xl bg-white border border-gray-100 shadow-sm p-5">
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-bold text-gray-900 text-sm flex items-center gap-1.5">
              🛩️ 正在旅行
            </h3>
            <span className="text-[11px] text-gray-400">
              {travelingNow.length} 人
            </span>
          </div>
          <div className="flex flex-wrap gap-2">
            {travelingNow.map((m) => (
              <div key={m.name} className="group relative">
                <div
                  className="w-9 h-9 rounded-full flex items-center justify-center text-xs text-white font-medium shadow-sm cursor-pointer hover:scale-110 transition-transform avatar-online"
                  style={{ backgroundColor: m.bg }}
                  title={`${m.name} · ${m.destination}`}
                >
                  {m.name.charAt(0)}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* New Members */}
        <div className="rounded-2xl bg-white border border-gray-100 shadow-sm p-5">
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-bold text-gray-900 text-sm flex items-center gap-1.5">
              👋 新加入成员
            </h3>
            <span className="text-[11px] text-gray-400">86人/月</span>
          </div>
          <div className="flex flex-wrap gap-2">
            {newMembers.map((m) => (
              <div
                key={m.name}
                className="w-9 h-9 rounded-full flex items-center justify-center text-xs text-white font-medium shadow-sm cursor-pointer hover:scale-110 transition-transform"
                style={{ backgroundColor: m.bg }}
              >
                {m.name}
              </div>
            ))}
          </div>
        </div>

        {/* Hot Topics */}
        <div className="rounded-2xl bg-white border border-gray-100 shadow-sm p-5">
          <h3 className="font-bold text-gray-900 text-sm flex items-center gap-1.5 mb-4">
            🔥 热门讨论
          </h3>
          <div className="space-y-3">
            {hotTopics.map((t, i) => (
              <a
                key={t.title}
                href="#"
                className="flex items-start gap-2.5 group"
              >
                <span className="text-xs font-bold text-gray-300 mt-0.5 w-4 shrink-0">
                  {i + 1}
                </span>
                <div className="flex-1 min-w-0">
                  <p className="text-sm text-gray-700 group-hover:text-gray-900 transition-colors line-clamp-1 leading-snug">
                    {t.title}
                  </p>
                  <p className="text-[11px] text-gray-400 mt-0.5">
                    {t.views.toLocaleString()} 次浏览
                  </p>
                </div>
              </a>
            ))}
          </div>
          <button className="w-full text-center text-xs font-medium text-gray-500 hover:text-gray-700 mt-3 pt-3 border-t border-gray-100 transition-colors">
            查看更多话题 →
          </button>
        </div>

        {/* Chat CTA */}
        <div className="rounded-2xl bg-gradient-to-br from-violet-50 to-purple-50 border border-violet-100 p-5">
          <div className="flex items-start gap-3 mb-3">
            <span className="text-2xl">💬</span>
            <div>
              <h3 className="font-bold text-gray-900 text-sm">
                游牧中国社区聊天
              </h3>
              <p className="text-xs text-gray-500 mt-0.5">
                本月已有 3,200+ 条消息
              </p>
            </div>
          </div>
          <button className="w-full text-center text-sm font-semibold text-violet-700 hover:text-violet-800 bg-white border border-violet-200 rounded-full py-2 transition-colors hover:bg-violet-50">
            加入聊天 →
          </button>
        </div>

        {/* Visa Service */}
        <div className="rounded-2xl bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-100 p-5">
          <div className="flex items-start gap-3 mb-3">
            <span className="text-2xl">🏛️</span>
            <div>
              <h3 className="font-bold text-gray-900 text-sm">签证代办服务</h3>
              <p className="text-xs text-gray-500 mt-0.5">
                数字游民签证、工作签证、税务规划一站式服务
              </p>
            </div>
          </div>
          <div className="flex flex-wrap gap-1.5 mb-3">
            <span className="text-[11px] bg-amber-100/60 text-amber-700 rounded-full px-2 py-0.5">
              🇹🇭 泰国
            </span>
            <span className="text-[11px] bg-amber-100/60 text-amber-700 rounded-full px-2 py-0.5">
              🇵🇹 葡萄牙
            </span>
            <span className="text-[11px] bg-amber-100/60 text-amber-700 rounded-full px-2 py-0.5">
              🇪🇸 西班牙
            </span>
            <span className="text-[11px] bg-amber-100/60 text-amber-700 rounded-full px-2 py-0.5">
              🇮🇩 印尼
            </span>
          </div>
          <button className="w-full text-center text-sm font-semibold text-amber-700 hover:text-amber-800 bg-white border border-amber-200 rounded-full py-2 transition-colors hover:bg-amber-50">
            了解详情 →
          </button>
          <p className="text-[10px] text-gray-400 text-center mt-2">广告</p>
        </div>
      </div>
    </aside>
  );
}