import { createRoot } from 'react-dom/client';
import React, { useState, useEffect } from 'react';
import { 
  Globe, 
  Map, 
  Palette, 
  Users, 
  BookOpen, 
  Sparkles, 
  Shirt, 
  Camera, 
  Activity, 
  Calendar, 
  Layers, 
  Image as ImageIcon, 
  ArrowLeft,
  ChevronDown
} from 'lucide-react';

const VOTER_ID_KEY = 'portrait_aesthetic_voter_id';
const LOCAL_VOTE_PREFIX = 'portrait_aesthetic_vote';

function getVoterId() {
  let voterId = localStorage.getItem(VOTER_ID_KEY);
  if (!voterId) {
    voterId = `voter_${Date.now()}_${Math.random().toString(16).slice(2)}`;
    localStorage.setItem(VOTER_ID_KEY, voterId);
  }
  return voterId;
}

function voteStorageKey(type, pollId) {
  return `${LOCAL_VOTE_PREFIX}_${type}_${pollId}`;
}

function readLocalVote(type, pollId) {
  return localStorage.getItem(voteStorageKey(type, pollId));
}

function saveLocalVote(type, pollId, option) {
  localStorage.setItem(voteStorageKey(type, pollId), option);
}

async function fetchVoteCounts(type, pollId) {
  const res = await fetch('/api/votes');
  const payload = await res.json();
  if (!payload.ok) throw new Error(payload.message || '投票数据获取失败');
  return payload.data?.[type]?.[pollId]?.counts || { total: 0 };
}

async function submitVote(type, pollId, option) {
  const res = await fetch('/api/vote', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ type, pollId, option, voterId: getVoterId() })
  });
  const payload = await res.json();
  if (!payload.ok) throw new Error(payload.message || '投票失败');
  return payload;
}

// --- 1. 基础 UI 组件 (原子组件) ---

const PhotoPlaceholder = ({ text, className = "h-32", imgClassName = "object-contain", iconSize = "w-6 h-6", src, onClick }) => (
  <div 
    onClick={src && onClick ? () => onClick(src) : undefined}
    className={`bg-[#f8f8f8] flex flex-col items-center justify-center text-slate-400 border-[1.5px] border-black/30 ${src ? 'border-solid p-1.5 cursor-zoom-in' : 'border-dashed cursor-pointer'} rounded-none overflow-hidden relative group hover:bg-white hover:border-black hover:shadow-[4px_4px_0_0_rgba(0,0,0,0.1)] transition-all duration-300 ${className}`}
  >
    {src ? (
      <img 
        src={src} 
        className={`w-full h-full mix-blend-multiply opacity-95 group-hover:opacity-100 group-hover:scale-105 transition-transform duration-500 ease-out ${imgClassName}`} 
        alt={text || "参考"} 
      />
    ) : (
      <>
        <div className="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out"></div>
        <ImageIcon className={`${iconSize} mb-2 opacity-40 group-hover:scale-125 group-hover:-rotate-6 group-hover:opacity-80 group-hover:text-black transition-all duration-500 ease-out`} />
        {text && (
          <span className="font-mono text-xs font-bold px-3 text-center text-slate-500 group-hover:text-black transition-colors duration-300 relative z-10 group-hover:-translate-y-1 transform uppercase tracking-widest">
            {text}
          </span>
        )}
      </>
    )}
  </div>
);

function PopulationBar({ region, pop, percentage, color, delay }) {
  return (
    <div className={`animate-in slide-in-from-bottom-4 fade-in duration-700 fill-mode-both group/bar ${delay}`}>
      <div className="flex justify-between items-end font-mono text-xs mb-2 tracking-widest uppercase">
        <span className="font-bold text-slate-700 group-hover/bar:text-black transition-colors duration-300">{region}</span>
        <span className="text-slate-500 font-bold bg-white border border-slate-200 px-2 py-0.5 shadow-sm transition-all duration-300 group-hover/bar:border-slate-300 group-hover/bar:text-black group-hover/bar:shadow">{pop}</span>
      </div>
      <div className="w-full bg-slate-100 h-1.5 border border-black/5 overflow-hidden rounded-full shadow-inner">
        <div className={`bg-gradient-to-r ${color} h-full relative rounded-full group-hover/bar:brightness-110 transition-all duration-500`} style={{ width: percentage }}>
           <div className="absolute top-0 right-0 bottom-0 w-4 bg-white/20 blur-[2px]"></div>
        </div>
      </div>
    </div>
  );
}

// --- 2. 数据配置 ---

const makeupPollData = [
  { id: 1, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1.png' },
  { id: 2, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2.png' },
  { id: 3, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/3.png' },
  { id: 4, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/4.png' },
  { id: 5, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/5.png' },
  { id: 6, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/6.png' },
  { id: 7, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/7.png' },
  { id: 8, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/8.png' },
];

const globalPollData = [
  { id: 1, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%A4%9A%E4%BA%BA%E7%A7%8D%E6%8A%95%E7%A5%A8%E7%8E%AF%E8%8A%821.png' },
  { id: 2, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%A4%9A%E4%BA%BA%E7%A7%8D%E6%8A%95%E7%A5%A8%E7%8E%AF%E8%8A%822.png' },
  { id: 3, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%A4%9A%E4%BA%BA%E7%A7%8D%E6%8A%95%E7%A5%A8%E7%8E%AF%E8%8A%823.png' },
  { id: 4, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%A4%9A%E4%BA%BA%E7%A7%8D%E6%8A%95%E7%A5%A8%E7%8E%AF%E8%8A%824.png' },
  { id: 5, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%A4%9A%E4%BA%BA%E7%A7%8D%E6%8A%95%E7%A5%A8%E7%8E%AF%E8%8A%825.png' },
  { id: 6, img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%A4%9A%E4%BA%BA%E7%A7%8D%E6%8A%95%E7%A5%A8%E7%8E%AF%E8%8A%826.png' },
];

const regionalMakeupData = [
  {
    region: "中东地区",
    title: "强调立体感与奢华感 - 极致放大眼部特征",
    desc: "深邃精致的眼妆是中东地区妆容的绝对灵魂。",
    products: [
      { name: "眼影盘/睫毛膏/浓黑眼线笔", brand: "Huda Beauty", brandTag: "(销量冠军)", link: "https://hudabeauty.com", point: "满足当地女性打造精致眼妆的刚需。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C1-%20%E7%9C%BC%E5%BD%B1%E7%9B%98%3A%E7%9D%AB%E6%AF%9B%E8%86%8F%3A%E6%B5%93%E9%BB%91%E7%9C%BC%E7%BA%BF%E7%AC%94.png" },
      { name: "高遮瑕哑光粉底", brand: "Asteri Beauty", brandTag: "(防水防汗)", link: "https://asteribeauty.com", point: "偏好高遮瑕、强效防水防脱的粉底。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C2-%20%E9%AB%98%E9%81%AE%E7%91%95%E5%93%91%E5%85%89%E7%B2%89%E5%BA%95%2B%E4%BF%AE%E5%AE%B9%3A%E9%AB%98%E5%85%89.png" },
      { name: "中东特色香氛", brand: "Kayali", brandTag: "(沉香/玫瑰)", link: "https://hudabeauty.com/us/en_US/kayali", point: "偏爱浓郁的中东特色香调。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C3-%20%E9%A6%99%E6%B0%9B%E4%BA%A7%E5%93%81%20.png" }
    ]
  },
  {
    region: "南亚地区",
    title: "强调无瑕度与持久性 - 抵抗高温高湿",
    desc: "受常年炎热潮湿气候影响，女性尤为看重底妆的抗氧化与防脱妆能力。",
    products: [
      { name: "丝绒哑光粉底液", brand: "Masarrat Misbah", brandTag: "(专为南亚定制)", link: "https://www.masarratmakeup.com", point: "适用于南亚闷热潮湿的气候。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8D%97%E4%BA%9A1-%20%E4%B8%9D%E7%BB%B8%E5%93%91%E5%85%89%E7%B2%89%E5%BA%95%E6%B6%B2.png" },
      { name: "提亮维C精华", brand: "Minimalist", brandTag: "(护肤级爆款)", link: "https://beminimalist.co", point: "针对常见的肤色暗沉问题。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8D%97%E4%BA%9A2-%20%E4%BA%AE%E8%82%A4%E7%BB%B4%E7%94%9F%E7%B4%A0C%E7%B2%BE%E5%8D%8E.png" },
      { name: "透水指甲油", brand: "Inglot", brandTag: "(Halal 认证)", link: "https://inglotcosmetics.com", point: "满足宗教小净需求的清真指甲油。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8D%97%E4%BA%9A3-%20%E9%80%8F%E6%B0%B4%EF%BC%88%E6%B8%85%E7%9C%9F%EF%BC%89%E6%8C%87%E7%94%B2%E6%B2%B9.png" }
    ]
  },
  {
    region: "东南亚地区",
    title: "强调轻盈感与呼吸感 - 追求自然伪素颜",
    desc: "深受韩流影响，穆斯林女性偏好自然通透、轻薄水润的妆效。",
    products: [
      { name: "高倍清爽防晒", brand: "Wardah", brandTag: "(本土销冠)", link: "https://www.wardahbeauty.com", point: "兼具高倍防护与轻盈肤感。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A1-%20SPF%2050%2B%20PA%2B%2B%2B%2B%20%E9%AB%98%E5%80%8D%E9%98%B2%E6%99%92%E9%9C%9C.png" },
      { name: "清透镜面唇彩", brand: "ESQA", brandTag: "(100% Halal)", link: "https://esqacosmetics.com", point: "不含酒精，价格亲民且持妆强。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A2-%20-%20%E6%B8%85%E9%80%8F%E9%95%9C%E9%9D%A2%E5%94%87%E5%BD%A9.png" },
      { name: "日常百搭眼影盘", brand: "Make Over", brandTag: "(平价大牌)", link: "https://www.makeoverforall.com", point: "全线清真认证，显色度极佳。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A3-%20%E7%9C%BC%E5%BD%B1%E7%9B%98.png" }
    ]
  },
  {
    region: "东非地区",
    title: "强调高显色与深肤适配 - 控油防沾蹭",
    desc: "底妆强调色号精准，彩妆偏好与深肤形成对比的高饱和色彩。",
    products: [
      { name: "哑光液体唇膏", brand: "Fenty Beauty", brandTag: "(深肤色天花板)", link: "https://fentybeauty.com", point: "色号专为深皮定制，不沾头巾。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E9%9D%9E1-%20%E5%93%91%E5%85%89%E6%B6%B2%E4%BD%93%E5%94%87%E8%86%8F.png" },
      { name: "深色号控油粉底", brand: "Huda Beauty", brandTag: "(控油王者)", link: "https://hudabeauty.com", point: "均匀肤色，强效控油。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E9%9D%9E2-%20%E7%B2%89%E5%BA%95%2B%E5%AE%9A%E5%A6%86%E6%95%A3%E7%B2%89.png" },
      { name: "深色唇线笔", brand: "MAC Cosmetics", brandTag: "(立体唇形)", link: "https://www.maccosmetics.com", point: "打造对比度极高的渐变唇。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E9%9D%9E3-%20%E5%94%87%E7%BA%BF%E7%AC%94.png" }
    ]
  }
];

const eventsData = [
  { month: '1月',
    na: [{ title: '🇺🇸金球奖', desc: '好莱坞颁奖季，高定礼服与红毯妆容的社媒首波高潮', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E9%87%91%E7%90%83%E5%A5%96.png' }],
    eu: [{ title: '🇪🇺巴黎时装周', desc: '全球顶奢品牌高定发布，决定了当年核心高消费审美趋势', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E5%B7%B4%E9%BB%8E%E6%97%B6%E8%A3%85%E5%91%A8.png' }],
    sea: [], me: [], latam: []
  },
  { month: '2月',
    na: [
      { title: '🇺🇸超级碗', desc: '全美最具商业价值的体育盛会，带火运动辣妹风与中场秀仿妆', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E8%B6%85%E7%BA%A7%E7%A2%97.png' },
      { title: '🇺🇸格莱美', desc: '欧美流行乐坛最高奖项，社媒上先锋/前卫妆造爆发地', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E6%A0%BC%E8%8E%B1%E7%BE%8E.png' }
    ],
    eu: [
      { title: '🇪🇺威尼斯狂欢节', desc: '华丽的古典主义与面具文化的传统盛典（极繁主义）', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E5%A8%81%E5%B0%BC%E6%96%AF%E7%8B%82%E6%AC%A2%E8%8A%82.png' },
      { title: '🇪🇺秋冬四大时装周', desc: '成衣秀，顶流网红/明星高奢穿搭', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E7%A7%8B%E5%86%AC%E5%9B%9B%E5%A4%A7%E6%97%B6%E8%A3%85%E5%91%A8.png' }
    ],
    sea: [], me: [],
    latam: [{ title: '🇧🇷巴西里约狂欢节', desc: '色彩缤纷视觉盛宴，穿着极度夸张的羽毛服饰搭配高饱和色彩亮片妆', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E-%E5%B7%B4%E8%A5%BF%E9%87%8C%E7%BA%A6%E7%8B%82%E6%AC%A2%E8%8A%82.png' }]
  },
  { month: '3月',
    na: [
      { title: '🇺🇸奥斯卡金像奖', desc: '全球关注度最高的红毯，极致完美“老钱风”妆造核心参考', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E5%A5%A5%E6%96%AF%E5%8D%A1%E9%87%91%E5%83%8F%E5%A5%96.png' },
      { title: '🇺🇸圣帕特里克节', desc: '全民绿色穿搭狂欢，线下酒吧/派对和游行高峰（绿色系彩妆/服饰热卖期）', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E5%9C%A3%E5%B8%95%E7%89%B9%E9%87%8C%E5%85%8B%E8%8A%82.png' }
    ],
    eu: [{ title: '🇪🇺F1', desc: '全球顶级体育赛事与名流社交场，强势带动“赛车风”服饰热潮，更是极致“老钱风”与高级感妆造的社媒焦点', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-F1.png' }],
    sea: [],
    me: [{ title: '🇦🇪斋月及开斋节', desc: '中东最高级别亲友聚会/送礼、高定长袍与高级雾面哑光妆的爆发期', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C-%E6%96%8B%E6%9C%88%E5%8F%8A%E5%BC%80%E6%96%8B.png' }],
    latam: [{ title: '🇨🇱南美Lollapalooza音乐节', desc: '南美最大音乐节，Y2K千禧风与音乐节辣妹妆爆发地', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8D%97%E7%BE%8ELollapalooza%E9%9F%B3%E4%B9%90%E8%8A%82.png' }]
  },
  { month: '4月', 
    na: [{ title: '🇺🇸科切拉音乐节', desc: '全球音乐节穿搭与妆容风向标', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E7%A7%91%E5%88%87%E6%8B%89%E9%9F%B3%E4%B9%90%E8%8A%82.png' }], 
    eu: [], 
    sea: [{ title: '🇹🇭泰国宋干节/泼水节', desc: '东南亚流量最大的夏日狂欢。防水妆/特色穿搭/节日氛围引起热议', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%B3%B0%E5%9B%BD%E5%AE%8B%E5%B9%B2%E8%8A%82%3A%E6%B3%BC%E6%B0%B4%E8%8A%82%20.png' }], 
    me: [], 
    latam: [] 
  },
  { month: '5月', 
    na: [{ title: '🇺🇸Met Gala大都会艺术博物馆慈善舞会', desc: '“时尚界奥斯卡”，每年设定不同主题，产生破圈的高定妆造', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-Met%20Gala.png' }], 
    eu: [{ title: '🇫🇷戛纳电影节', desc: '欧洲最高规格红毯', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E6%88%9B%E7%BA%B3.png' }], 
    sea: [], 
    me: [], 
    latam: [] 
  },
  { month: '6月', 
    na: [
      { title: '🇺🇸NBA', desc: '体育界流量峰值，引起球衣改造穿搭、美式街头风话题', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-NBA.png' },
      { title: '🇺🇸骄傲月', desc: '极度推崇彩虹色系穿搭、多巴胺彩妆、无性别主义的狂欢月', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E9%AA%84%E5%82%B2%E6%9C%88.png' }
    ], 
    eu: [{ title: '🇬🇧英国格拉斯顿伯里音乐节', desc: '欧洲最大的户外绿地音乐节，掀起了“英伦废土风/雨靴穿搭”风潮', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E8%8B%B1%E5%9B%BD%E6%A0%BC%E6%8B%89%E6%96%AF%E9%A1%BF%E4%BC%AF%E9%87%8C%E9%9F%B3%E4%B9%90%E8%8A%82.png' }], 
    sea: [], 
    me: [], 
    latam: [] 
  },
  { month: '6月+7月', 
    na: [], eu: [], sea: [], me: [], latam: [],
    specialEvent: {
       title: '🌍世界杯',
       desc: ' -- 全球化赛事，球衣/国旗妆/街头狂欢高度视觉化。对拉美、中东、欧洲影响特别大',
       img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/6-7%E6%9C%88%E4%B8%96%E7%95%8C%E6%9D%AF.png',
       inlineText: true,
       fullRow: true
    }
  },
  { month: '7月', 
    na: [], 
    eu: [{ title: '🇧🇪比利时明日世界电音节', desc: '全球最大电音节，赛博朋克/金属感妆容/镭射反光服饰发源地', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E6%AF%94%E5%88%A9%E6%97%B6%E6%98%8E%E6%97%A5%E4%B8%96%E7%95%8C%E7%94%B5%E9%9F%B3%E8%8A%82.png' }], 
    sea: [], 
    me: [], 
    latam: [{ title: '🏆美洲杯赛', desc: '拉美流量狂欢，掀起浓烈的国旗妆容与“球衣辣妹风”', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E-%E7%BE%8E%E6%B4%B2%E6%9D%AF%E8%B5%9B.png' }] 
  },
  { month: '8月', 
    na: [{ title: '🇺🇸火人节', desc: '为期八天的内华达沙漠狂欢。废土机能风/朋克风/部落彩绘', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E7%81%AB%E4%BA%BA%E8%8A%82%20.png' }], 
    eu: [{ title: '🇮🇹威尼斯国际电影节', desc: '电影颁奖季，复古意式风情妆容', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E5%A8%81%E5%B0%BC%E6%96%AF.png' }], 
    sea: [], 
    me: [], 
    latam: [] 
  },
  { month: '9月', 
    na: [], // 清空，采用特殊合并渲染
    eu: [{ title: '🇩🇪慕尼黑啤酒节', desc: '德国及欧洲最大民间狂欢', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E6%85%95%E5%B0%BC%E9%BB%91%E5%95%A4%E9%85%92%E8%8A%82.png' }], 
    sea: [], 
    me: [], 
    latam: [],
    specialEvent: {
       title: '春夏四大时装周 (9月全月)',
       desc: '纽约（实用现代 可穿性）/ 伦敦（个性反叛 潮流性）/ 米兰（经典浪漫 工艺性）/ 巴黎（精致奢华 艺术性）轮番上演，奠定次年春夏全球流行色彩、发型与妆容创作趋势。',
       img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%3A%E6%AC%A7%E6%B4%B2-%E6%98%A5%E5%A4%8F%E5%9B%9B%E5%A4%A7%E6%97%B6%E8%A3%85%E5%91%A8.png'
    }
  },
  { month: '10月', 
    na: [{ title: '🇺🇸万圣节 (10/31)', desc: '主流社媒流量最夸张的变装派对季。特效妆/脑洞Cosplay全面爆发', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E4%B8%87%E5%9C%A3%E8%8A%82%2810%3A31%29.png' }], 
    eu: [], 
    sea: [], 
    me: [{ title: '🇸🇦利雅得狂欢季', desc: '10月开幕持续至次年的超大型冬季盛会，主打“壕无人性”的奢华消费、文化体验与顶级娱乐。', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C-%E5%88%A9%E9%9B%85%E5%BE%97%E7%8B%82%E6%AC%A2%E5%AD%A3.png' }], 
    latam: [] 
  },
  { month: '11月', 
    na: [
      { title: '🇺🇸维密秀', desc: '顶级内衣秀场，掀起性感“大波浪与古铜肤色”热潮', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E7%BB%B4%E5%AF%86%E7%A7%80.png' },
      { title: '🇺🇸感恩节', desc: '北美家庭聚餐，偏向温暖的“南瓜色调”滤镜/妆造', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E6%84%9F%E6%81%A9%E8%8A%82.png' }
    ], 
    eu: [], 
    sea: [{ title: '🇹🇭泰国水灯节/天灯节', desc: '东南亚最传统节日，传统泰服/金饰步摇/轻泰妆集中展示', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A-%E6%B3%B0%E5%9B%BD%E6%B0%B4%E7%81%AF%3A%E5%A4%A9%E7%81%AF%E8%8A%82.png' }], 
    me: [], 
    latam: [{ title: '🇲🇽墨西哥亡灵节', desc: '具有神秘色彩，被列入世界文化遗产。卡特里娜骷髅妆/寿菊元素/民族复古大方裙摆元素', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E-%E5%A2%A8%E8%A5%BF%E5%93%A5%E4%BA%A1%E7%81%B5%E8%8A%82.png' }] 
  },
  { month: '12月', 
    na: [], 
    eu: [], 
    sea: [{ title: '🇹🇭Wonderfruit音乐节', desc: '亚洲调性最高的生活音乐节。主打环保嬉皮风、和原生态大地色系穿搭', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A-%E6%B3%B0%E5%9B%BDWonderfruit%E9%9F%B3%E4%B9%90%E8%8A%82%20.png' }], 
    me: [{ title: '🇸🇦沙特MDLBEAST音爆电音节', desc: '中东规模最大电音节。主打国际与本土潮流混搭，展现极具活力的沙特年轻一代狂欢群像。', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E6%B2%99%E7%89%B9MDLBEAST%20Soundstorm%E9%9F%B3%E7%88%86%E7%94%B5%E9%9F%B3%E8%8A%82.png' }], 
    latam: [] 
  }
];

const faceTraitData = [
  {
    region: "北美",
    races: [
      {
        name: "欧裔白人", percent: "55-60%",
        genes: "肤色基调多样，冷白皮到健康肤色。面部骨感强，眉眼深邃，高立体度。",
        body: "骨架较大四肢修长，追求匀称肌肉线条与未经过度修饰的活力感。",
        vibe: "崇尚真实随性，追求清冷感的骨相美与自信大方的精神面貌。",
        influencerName: "艾尔莎·霍斯克 (Elsa Hosk)", influencerDesc: "欧美真实感与松弛感完美结合",
        influencerLink: "https://www.instagram.com/hoskelsa/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E6%AC%A7%E8%A3%94%E7%99%BD%E4%BA%BA.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1-%E5%8C%97%E7%BE%8E%E6%AC%A7%E8%A3%94%E7%99%BD%E4%BA%BA%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B1.png"
      },
      {
        name: "拉丁裔", percent: "18-20%",
        genes: "健康小麦色及古铜肤色。面部折叠度高，浓眉大眼深邃，毛发浓密。",
        body: "曲线鲜明，主打肉感与力量感并存，认同丰满有线条的形体。",
        vibe: "强韧生命力与力量感，展示极度自信与热情奔放的野性美。",
        influencerName: "卡米拉·门德斯 (Camila Mendes)", influencerDesc: "典型拉丁骨相，肉感与力量并存",
        influencerLink: "https://www.instagram.com/camimendes/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E6%8B%89%E4%B8%81%E8%A3%94.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1-%E5%8C%97%E7%BE%8E%E6%8B%89%E4%B8%81%E8%A3%94%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B2.png"
      },
      {
        name: "非洲裔", percent: "12-14%",
        genes: "浅棕到深黑层次丰富。轮廓饱满，五官立体量感大，天然卷发。",
        body: "逆天头身比与大长腿。追求有张力的线条与紧实感，气场全开。",
        vibe: "打破白幼瘦框架，将生命张力与时尚前卫力量感完美融合。",
        influencerName: "洛里·哈维 (Lori Harvey)", influencerDesc: "力量感与肌肉线条美的代表",
        influencerLink: "https://www.instagram.com/loriharvey/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E9%9D%9E%E6%B4%B2%E8%A3%94.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1-%E5%8C%97%E7%BE%8E%E9%9D%9E%E6%B4%B2%E8%A3%94%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B2.png"
      },
      {
        name: "亚裔", percent: "6%",
        genes: "暖白至黄黑中性肤色。五官精致皮相紧致，受ABG风格影响明显。",
        body: "整体偏纤细匀称。近年逐渐增加肌肉锻炼，平衡柔美与力量。",
        vibe: "东方温婉与西方自信相融合，独具魅力的亚裔混血感。",
        influencerName: "Jenn Im", influencerDesc: "ABG Style标杆，阳光自信笑容",
        influencerLink: "https://www.instagram.com/imjennim/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E4%BA%9A%E8%A3%94.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1-%E5%8C%97%E7%BE%8E%E4%BA%9A%E8%A3%94%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B2.png"
      },
      {
        name: "混血人群", percent: "快速增长",
        genes: "多样的特征融合（白人骨相+有色人种肤色），INS极受欢迎。",
        body: "体型多样化，基因融合兼具修长与力量紧致的运动线条。",
        vibe: "打破单一族裔标签，强调个体的独特性与不可复制性。",
        influencerName: "凯尔西·梅里特 (@kelseymerritt)", influencerDesc: "亚裔+白人混血 “高审美”",
        influencerLink: "https://www.instagram.com/kelseymerritt/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E6%B7%B7%E8%A1%80.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1-%E5%8C%97%E7%BE%8E%E6%B7%B7%E8%A1%80%E8%A3%94%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B1.png"
      }
    ]
  },
  {
    region: "欧洲",
    races: [
      {
        name: "西欧 (法/德/英)", percent: "36.6%",
        genes: "自然白皙到偏粉的冷调或中性肤色。面部折叠度高，五官匀称。",
        body: "高挑修长视觉匀称。偏好自然体态，不过度强调夸张曲线。",
        vibe: "法式慵懒、英伦冷酷，整体呈现经典质感与现代简约的从容。",
        influencerName: "Romee Strijd", influencerDesc: "荷兰维密天使，健康阳光与自然性感美",
        influencerLink: "https://www.instagram.com/romeestrijd/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E8%A5%BF%E6%AC%A7.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2-%E6%AC%A7%E6%B4%B2%E8%A5%BF%E6%AC%A7%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B1.png"
      },
      {
        name: "北欧 (瑞典/丹麦/挪威)", percent: "5.0%",
        genes: "浅色冷白皮，面部色彩对比度低。面部平整骨骼感重，浅色瞳孔。",
        body: "四肢修长头身比优越。推崇极简自然主义与清瘦骨感。",
        vibe: "高智清冷感与极简主义，男性多留胡须展现疏离的高级美。",
        influencerName: "Elsa Hosk", influencerDesc: "冰雪精灵般的高智冷艳美感",
        influencerLink: "https://www.instagram.com/hoskelsa/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E5%8C%97%E6%AC%A7.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2-%E6%AC%A7%E6%B4%B2%E5%8C%97%E6%AC%A7%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B1.png"
      },
      {
        name: "南欧 (西/意/葡)", percent: "20.2%",
        genes: "健康橄榄色或暖沙色皮肤。浓颜系大五官，毛发浓密，眼窝深邃。",
        body: "体格相对强壮，肌肉线条与曲线感明显，喜爱充满活力的美感。",
        vibe: "热烈充满张力，展现奔放且极具生命力的氛围，性感奢华。",
        influencerName: "Georgina Rodriguez", influencerDesc: "张扬外放的南欧奢华热烈风",
        influencerLink: "https://www.instagram.com/georginagio/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E5%8D%97%E6%AC%A7.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2-%E6%AC%A7%E6%B4%B2%E5%8D%97%E6%AC%A7%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B1.png"
      },
      {
        name: "东欧 (俄/乌/波)", percent: "38.2%",
        genes: "细腻通透冷白皮。五官极为立体，眼窝深鼻尖锐，标准V型脸。",
        body: "身高优势绝对，直角肩加紧致线条，追求极致的头身比例。",
        vibe: "追求极致精致与强大的气场，视觉上呈现冷艳高贵的距离感。",
        influencerName: "Lena Perminova", influencerDesc: "东欧极致比例与冷艳高贵气质",
        influencerLink: "https://www.instagram.com/lenaperminova/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E4%B8%9C%E6%AC%A7.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2-%E6%AC%A7%E6%B4%B2%E4%B8%9C%E6%AC%A7%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B1.png"
      }
    ]
  },
  {
    region: "东南亚",
    races: [
      {
        name: "泰式混血系", percent: "约 25-30%",
        genes: "偏好白皙透亮或高光泽浅小麦色。混血感重，深邃大眼加野生眉。",
        body: "偏纤细的小骨架，追求年轻态与运动线条感的结合。",
        vibe: "融合多元审美，追求精致感与鲜活生命力，热带风情甜酷感。",
        influencerName: "davikah", influencerDesc: "泰式神颜，明艳大气的混血感",
        influencerLink: "https://www.instagram.com/davikah/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A-%E6%B3%B0%E5%BC%8F.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/3-%E4%B8%9C%E5%8D%97%E4%BA%9A%E6%B3%B0%E5%BC%8F%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B.png"
      },
      {
        name: "本土马来/印尼系", percent: "70%",
        genes: "健康深小麦色或暖古铜肤色。面部偏宽短，折叠度低骨相柔和。",
        body: "骨架偏小体态丰腴圆润，偏好充满生命力与肉感的丰腴美。",
        vibe: "追求原生生态的亲和力与自然美，强调健康的血色与淳朴张力。",
        influencerName: "Maudy Ayunda (@maudyayunda)", influencerDesc: "极具东南亚本土魅力的野性美",
        influencerLink: "https://www.instagram.com/maudyayunda/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A-%E6%9C%AC%E5%9C%9F%E9%A9%AC%E6%9D%A5%3A%E5%8D%B0%E5%B0%BC%E7%B3%BB.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/3-%E4%B8%9C%E5%8D%97%E4%BA%9A%E6%9C%AC%E5%9C%9F%E9%A9%AC%E6%9D%A5%3A%E5%8D%B0%E5%B0%BC%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B.png"
      }
    ]
  },
  {
    region: "中东",
    races: [
      {
        name: "海湾/阿拉伯系", percent: "50.1%",
        genes: "浅古铜到暖棕色。极致浓颜，眼眉浓密毛流感极强，轮廓极深。",
        body: "骨架较大体量感强，女性多为极度明显的沙漏型身材曲线。",
        vibe: "追求极致奢华感，浓墨重彩展现神秘高贵且不可冒犯的气场。",
        influencerName: "Rawan Bin Hussain", influencerDesc: "海湾顶级浓颜奢华富贵花",
        influencerLink: "https://www.instagram.com/rawan/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E6%B5%B7%E6%B9%BE%3A%E9%98%BF%E6%8B%89%E4%BC%AF%E7%B3%BB.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/4-%E4%B8%AD%E4%B8%9C%E6%B5%B7%E6%B9%BE%3A%E9%98%BF%E6%8B%89%E4%BC%AF%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B.png"
      },
      {
        name: "黎凡特/地中海系", percent: "19.3%",
        genes: "受地中海影响多为偏白或浅橄榄肤色。轮廓柔和紧实鼻型直挺。",
        body: "高挑修长兼具骨感与匀称，偏好优雅端庄的舒展姿态。",
        vibe: "追求自然松弛与精致优雅的平衡，散发出现代高知与独立属性。",
        influencerName: "Karen Wazen", influencerDesc: "黎凡特优雅松弛的高知现代美",
        influencerLink: "https://www.instagram.com/karenwazen/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E9%BB%8E%E5%87%A1%E7%89%B9%3A%E5%9C%B0%E4%B8%AD%E6%B5%B7%E7%B3%BB.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/4-%E4%B8%AD%E4%B8%9C%E9%BB%8E%E5%87%A1%E7%89%B9_%E5%9C%B0%E4%B8%AD%E6%B5%B7%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B.png"
      },
      {
        name: "波斯/伊朗系", percent: "30.4%",
        genes: "浅肤色为主，追求精致小巧鼻型。面部线条硬朗，眼眶深邃度高。",
        body: "高挑挺拔具有一定的力量感，注重健身与肌肉线条的精准雕刻。",
        vibe: "追求完美主义与极致的雕琢感，展现出高智且带棱角的张力。",
        influencerName: "Mahlagha Jaberi", influencerDesc: "波斯极致雕琢感与完美骨相",
        influencerLink: "https://www.instagram.com/mahlaghajaberi/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E6%B3%A2%E6%96%AF%3A%E4%BC%8A%E6%9C%97%E7%B3%BB.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/4-%E4%B8%AD%E4%B8%9C%E6%B3%A2%E6%96%AF%3A%E4%BC%8A%E6%9C%97%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B.png"
      }
    ]
  },
  {
    region: "拉美",
    races: [
      {
        name: "印欧混血系", percent: "45-50%",
        genes: "偏暖色调棕褐色肤色。融合美洲原住民下颌与欧洲立体深邃五官。",
        body: "比例匀称，赞美健康活力的体态，以及力量感的宽臀细腰。",
        vibe: "追求热情奔放与自然野性美，展现充满生机的健康气血感。",
        influencerName: "Kenia Os", influencerDesc: "拉美热情张扬与健康性感美",
        influencerLink: "https://www.instagram.com/keniaos/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E-%E5%8D%B0%E6%AC%A7%E6%B7%B7%E8%A1%80%E7%B3%BB.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/5-%E5%8D%B0%E6%AC%A7%E6%B7%B7%E8%A1%80%E6%8B%89%E7%BE%8E%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B.png"
      },
      {
        name: "欧洲后裔", percent: "30-35%",
        genes: "浅白到中等橄榄色，皮肤通透。纯正欧洲立体骨相，五官深邃。",
        body: "骨架较大骨感明显四肢修长，受欧美流行生活方式影响极大。",
        vibe: "在精巧线上保留着拉美独特生命力的底色，松弛且充满活力。",
        influencerName: "Valentina Zenere", influencerDesc: "欧式精巧骨相碰撞拉美活力",
        influencerLink: "https://www.instagram.com/valentinazenere/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E-%E6%AC%A7%E6%B4%B2%E8%A3%94%E6%8B%89%E7%BE%8E.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/5-%E6%AC%A7%E8%A3%94%E6%8B%89%E7%BE%8E%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B.png"
      },
      {
        name: "巴西/多生态混血", percent: "15%",
        genes: "肤色极其多样化。面部特征既有立体骨相又有本土的胶原饱满度。",
        body: "融合多种基因优势，极具力量感与线条感，追求饱满的臀腿。",
        vibe: "强调个体的独特性和不可复制性，张扬外放的无拘束野性。",
        influencerName: "Camila Coelho", influencerDesc: "巴西混血多元基因与绝对自信",
        influencerLink: "https://www.instagram.com/camilacoelho/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E-%E5%B7%B4%E8%A5%BF%3A%E5%A4%9A%E7%94%9F%E6%80%81%E6%B7%B7%E8%A1%80.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/5-%E5%B7%B4%E8%A5%BF%3A%E6%B7%B7%E8%A1%80%E6%8B%89%E7%BE%8E%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B.png"
      },
      {
        name: "非洲裔后代", percent: "5-10%",
        genes: "焦糖色到深巧克力色。骨相立体丰满，大体量五官，厚唇深眸。",
        body: "骨架宽大肌肉量强硬。腰腿比例优越，线条极具爆发力。",
        vibe: "无上的生命张力与绝对的自信性感，打破单一审美的视觉冲击。",
        influencerName: "IZA", influencerDesc: "绝对的生命张力与黑人性感美",
        influencerLink: "https://www.instagram.com/iza/",
        faceImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E-%E9%9D%9E%E8%A3%94%E6%8B%89%E7%BE%8E.png",
        influencerImg: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/5-%E9%9D%9E%E8%A3%94%E6%8B%89%E7%BE%8E%E5%8D%9A%E4%B8%BB%E4%B8%BE%E4%BE%8B.png"
      }
    ]
  }
];

// --- 3. 核心功能组件 ---

function MakeupPollItem({ item, onImageClick, user }) {
  const [selected, setSelected] = useState(null);
  const [userVote, setUserVote] = useState(null);
  const [voteCounts, setVoteCounts] = useState({ total: 0 });
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const options = ['中东地区', '南亚地区', '东南亚地区', '东非地区'];
  const labels = ['A', 'B', 'C', 'D'];

  useEffect(() => {
    const storedVote = readLocalVote('makeup', `poll_${item.id}`);
    if (storedVote) {
      setUserVote(storedVote);
      setSelected(storedVote);
    }
  }, [item.id]);

  useEffect(() => {
    let alive = true;
    const loadCounts = async () => {
      try {
        const counts = await fetchVoteCounts('makeup', `poll_${item.id}`);
        if (alive) setVoteCounts(counts);
      } catch (err) {
        console.warn("Vote counts error:", err);
      }
    };
    loadCounts();
    const timer = setInterval(loadCounts, 5000);
    return () => {
      alive = false;
      clearInterval(timer);
    };
  }, [item.id]);

  const handleVote = async () => {
    if (!selected || userVote || isSubmitting) return;
    setIsSubmitting(true);
    try {
       const payload = await submitVote('makeup', `poll_${item.id}`, selected);
       const finalSelection = payload.selected || selected;
       saveLocalVote('makeup', `poll_${item.id}`, finalSelection);
       setUserVote(finalSelection);
       setSelected(finalSelection);
       const counts = payload.data?.makeup?.[`poll_${item.id}`]?.counts;
       if (counts) setVoteCounts(counts);
    } catch (e) {
       console.error("Vote failed", e);
    } finally {
       setIsSubmitting(false);
    }
  };

  const voted = !!userVote;

  return (
    <div className="min-w-[260px] flex-shrink-0 flex flex-col bg-white border-[1.5px] border-black/20 p-4 group hover:border-black hover:shadow-[4px_4px_0_0_rgba(0,0,0,0.1)] transition-all duration-300 snap-center">
      <div 
        className={`h-64 mb-4 relative overflow-hidden border-[1.5px] border-black/10 bg-[#f8f8f8] ${item.img ? 'cursor-zoom-in' : ''} group/img`} 
        onClick={() => onImageClick && item.img && onImageClick(item.img)}
      >
        {item.img ? (
          <>
            <div className="absolute inset-0 bg-black/5 opacity-0 group-hover/img:opacity-100 transition-opacity duration-700 ease-out z-10 pointer-events-none"></div>
            <img src={item.img} className="w-full h-full object-cover group-hover/img:scale-105 transition-transform duration-700 ease-out" alt="Mystery" />
          </>
        ) : (
          <div className="absolute inset-0 flex items-center justify-center opacity-40"><span className="font-mono text-6xl text-black">?</span></div>
        )}
      </div>
      <div className="flex justify-between items-center mb-4 pb-2 border-b border-black/10">
        <span className="font-mono font-bold text-sm flex items-center text-black"><Palette className="w-3 h-3 mr-2" /> 多元妆容盲猜</span>
      </div>
      <div className="space-y-2 mb-6 flex-1 text-left">
        {options.map((opt, idx) => {
          const isSelected = selected === opt;
          const count = voteCounts[opt] || 0;
          const totalVotes = voteCounts.total || 0;
          const percentage = totalVotes > 0 ? Math.round((count / totalVotes) * 100) : 0;
          let stateClass = "border-transparent hover:border-black/20";
          if (voted) {
             if (isSelected) stateClass = "border-black bg-white font-bold text-black";
             else stateClass = "border-transparent opacity-60 text-slate-500";
          } else if (isSelected) {
             stateClass = "border-black bg-slate-50 text-black";
          }
          return (
            <div key={opt} className={`relative flex items-center space-x-3 text-xs cursor-pointer p-2 border-[1.5px] transition-all duration-300 overflow-hidden z-10 ${stateClass}`} onClick={() => !voted && setSelected(opt)}>
              {(voted || totalVotes > 0) && <div className={`absolute left-0 top-0 bottom-0 -z-10 transition-all duration-1000 ease-out ${isSelected ? 'bg-slate-200/80' : 'bg-slate-100/60'}`} style={{ width: `${percentage}%` }} />}
              <div className={`w-3 h-3 rounded-full border-[1.5px] flex items-center justify-center shrink-0 ${isSelected ? 'border-black' : 'border-black/30'}`}>{isSelected && <div className="w-1.5 h-1.5 bg-black rounded-full" />}</div>
              <span className="font-mono font-bold w-4 text-slate-400">{labels[idx]}</span>
              <span className="tracking-widest">{opt}</span>
              <div className="ml-auto flex items-center space-x-2 bg-white/60 px-1.5 py-0.5 rounded"><span className="font-mono text-[10px] font-bold text-black">{count}票</span><span className="font-mono text-[10px] text-slate-500">{percentage}%</span></div>
            </div>
          );
        })}
      </div>
      <button disabled={!selected || voted || isSubmitting} onClick={handleVote} className={`mt-auto w-full py-2.5 font-mono text-[11px] font-bold tracking-widest transition-all border-[1.5px] ${voted ? 'bg-slate-100 border-black/10 text-slate-400 cursor-default' : isSubmitting ? 'bg-slate-800 text-white border-slate-800 opacity-80 cursor-wait' : selected ? 'bg-black text-white border-black hover:bg-slate-800' : 'bg-[#f4f4f4] border-black/10 text-slate-400 cursor-not-allowed'}`}>
        {isSubmitting ? '提交中...' : voted ? '已完成投票' : '立即投票'}
      </button>
    </div>
  );
}

function GlobalPollItem({ item, onImageClick, user }) {
  const [selected, setSelected] = useState(null);
  const [userVote, setUserVote] = useState(null);
  const [voteCounts, setVoteCounts] = useState({ total: 0 });
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const options = ['北美', '欧洲', '东南亚', '中东', '拉美'];
  const labels = ['A', 'B', 'C', 'D', 'E'];

  useEffect(() => {
    const storedVote = readLocalVote('global', `poll_${item.id}`);
    if (storedVote) {
      setUserVote(storedVote);
      setSelected(storedVote);
    }
  }, [item.id]);

  useEffect(() => {
    let alive = true;
    const loadCounts = async () => {
      try {
        const counts = await fetchVoteCounts('global', `poll_${item.id}`);
        if (alive) setVoteCounts(counts);
      } catch (err) {
        console.warn("Vote counts error:", err);
      }
    };
    loadCounts();
    const timer = setInterval(loadCounts, 5000);
    return () => {
      alive = false;
      clearInterval(timer);
    };
  }, [item.id]);

  const handleVote = async () => {
    if (!selected || userVote || isSubmitting) return;
    setIsSubmitting(true);
    try {
       const payload = await submitVote('global', `poll_${item.id}`, selected);
       const finalSelection = payload.selected || selected;
       saveLocalVote('global', `poll_${item.id}`, finalSelection);
       setUserVote(finalSelection);
       setSelected(finalSelection);
       const counts = payload.data?.global?.[`poll_${item.id}`]?.counts;
       if (counts) setVoteCounts(counts);
    } catch (e) {
       console.error("Vote failed", e);
    } finally {
       setIsSubmitting(false);
    }
  };

  const voted = !!userVote;

  return (
    <div className="min-w-[260px] flex-shrink-0 flex flex-col bg-white border-[1.5px] border-black/20 p-4 group hover:border-black hover:shadow-[4px_4px_0_0_rgba(0,0,0,0.1)] transition-all duration-300 snap-center">
      <div 
        className={`h-64 mb-4 relative overflow-hidden border-[1.5px] border-black/10 bg-[#f8f8f8] ${item.img ? 'cursor-zoom-in' : ''} group/img`} 
        onClick={() => onImageClick && item.img && onImageClick(item.img)}
      >
        {item.img ? (
          <>
            <div className="absolute inset-0 bg-black/5 opacity-0 group-hover/img:opacity-100 transition-opacity duration-700 ease-out z-10 pointer-events-none"></div>
            <img src={item.img} className="w-full h-full object-cover group-hover/img:scale-105 transition-transform duration-700 ease-out" alt="Mystery" />
          </>
        ) : (
          <div className="absolute inset-0 flex items-center justify-center opacity-40"><span className="font-mono text-6xl text-black">?</span></div>
        )}
      </div>
      <div className="flex justify-between items-center mb-4 pb-2 border-b border-black/10">
        <span className="font-mono font-bold text-sm flex items-center text-black"><Users className="w-3 h-3 mr-2 text-[#4a6aa6]" /> 多元人像</span>
      </div>
      <div className="space-y-2 mb-6 flex-1 text-left">
        {options.map((opt, idx) => {
          const isSelected = selected === opt;
          const count = voteCounts[opt] || 0;
          const totalVotes = voteCounts.total || 0;
          const percentage = totalVotes > 0 ? Math.round((count / totalVotes) * 100) : 0;
          let stateClass = "border-transparent hover:border-black/20";
          if (voted) {
             if (isSelected) stateClass = "border-black bg-white font-bold text-black";
             else stateClass = "border-transparent opacity-60 text-slate-500";
          } else if (isSelected) {
             stateClass = "border-black bg-slate-50 text-black";
          }
          return (
            <div key={opt} className={`relative flex items-center space-x-3 text-xs cursor-pointer p-2 border-[1.5px] transition-all duration-300 overflow-hidden z-10 ${stateClass}`} onClick={() => !voted && setSelected(opt)}>
              {(voted || totalVotes > 0) && <div className={`absolute left-0 top-0 bottom-0 -z-10 transition-all duration-1000 ease-out ${isSelected ? 'bg-slate-200/80' : 'bg-slate-100/60'}`} style={{ width: `${percentage}%` }} />}
              <div className={`w-3 h-3 rounded-full border-[1.5px] flex items-center justify-center shrink-0 ${isSelected ? 'border-black' : 'border-black/30'}`}>{isSelected && <div className="w-1.5 h-1.5 bg-black rounded-full" />}</div>
              <span className="font-mono font-bold w-4 text-slate-400">{labels[idx]}</span>
              <span className="tracking-widest">{opt}</span>
              <div className="ml-auto flex items-center space-x-2 bg-white/60 px-1.5 py-0.5 rounded"><span className="font-mono text-[10px] font-bold text-black">{count}票</span><span className="font-mono text-[10px] text-slate-500">{percentage}%</span></div>
            </div>
          );
        })}
      </div>
      <button disabled={!selected || voted || isSubmitting} onClick={handleVote} className={`mt-auto w-full py-2.5 font-mono text-[11px] font-bold tracking-widest transition-all border-[1.5px] ${voted ? 'bg-slate-100 border-black/10 text-slate-400 cursor-default' : isSubmitting ? 'bg-slate-800 text-white border-slate-800 opacity-80 cursor-wait' : selected ? 'bg-black text-white border-black hover:bg-slate-800' : 'bg-[#f4f4f4] border-black/10 text-slate-400 cursor-not-allowed'}`}>
        {isSubmitting ? '提交中...' : voted ? '已完成投票' : '立即投票'}
      </button>
    </div>
  );
}

function MakeupDetailedTable({ onImageClick }) {
  return (
    <div className="w-full bg-white border-[1.5px] border-black/10 shadow-[4px_4px_0_0_rgba(0,0,0,0.03)] overflow-x-auto hide-scrollbar group/table transition-all hover:border-black/30 duration-300">
      <div className="flex min-w-[1200px]">
        <div className="w-14 shrink-0 border-r border-black/5 flex flex-col bg-slate-50/30">
           <div className="h-[120px] flex items-center justify-center border-b border-black/5"><span className="[writing-mode:vertical-lr] font-bold text-xs tracking-widest text-slate-400">美妆特点</span></div>
           <div className="flex-1 flex items-center justify-center py-20"><span className="[writing-mode:vertical-lr] font-bold text-xs tracking-widest text-slate-400">畅销单品</span></div>
        </div>
        <div className="flex-1 grid grid-cols-4 divide-x divide-black/5">
           {regionalMakeupData.map((col, colIdx) => {
             const [mainTitle, subTitle] = col.title.split(' - ');
             return (
               <div key={colIdx} className="flex flex-col group/col text-left">
                  <div className="p-6 border-b border-black/5 h-[120px] flex flex-col group-hover/col:bg-slate-50/30 transition-colors">
                     <div className="mb-4 flex justify-start"><span className="font-mono text-[11px] font-bold text-slate-700 bg-white border border-slate-200 px-3 py-1 shadow-sm rounded-sm">{col.region}</span></div>
                     <div className="space-y-1"><h4 className="font-bold text-[#4a6aa6] text-[13px]">{mainTitle}</h4>{subTitle && <h5 className="font-medium text-[#4a6aa6] text-[11px] opacity-80">{subTitle}</h5>}</div>
                  </div>
                  <div className="p-6 space-y-10 flex-1 bg-white">
                     {col.products.map((prod, pIdx) => (
                       <div key={pIdx} className="flex flex-col group/prod">
                          <div className="flex items-start mb-3"><span className="w-1.5 h-1.5 rounded-full bg-slate-300 mt-1 mr-2 shrink-0 group-hover/prod:bg-[#4a6aa6] transition-colors"></span><h5 className="font-bold text-[12px] text-slate-800 leading-snug">{prod.name}</h5></div>
                          <div className="pl-3.5 space-y-2 mb-4 border-l-[1.5px] border-slate-100 group-hover/prod:border-[#4a6aa6]/30 transition-colors">
                             <div className="text-[10px] leading-tight flex flex-wrap items-baseline"><span className="text-slate-400 mr-1 shrink-0">畅销品牌:</span><a href={prod.link} target="_blank" rel="noreferrer" className="text-[#4a6aa6] font-bold hover:underline">{prod.brand}</a></div>
                             <div className="text-[10px] leading-relaxed flex items-start"><span className="text-slate-400 mr-1 shrink-0">核心卖点:</span><span className="text-slate-500 line-clamp-2 hover:line-clamp-none transition-all duration-300">{prod.point}</span></div>
                          </div>
                          <div className="pl-3.5">
                             <PhotoPlaceholder 
                               className="h-32 w-full border-slate-200 shadow-sm group-hover/prod:border-[#4a6aa6]/30 transition-all duration-300" 
                               imgClassName="object-cover object-center !opacity-100 !mix-blend-normal" 
                               iconSize="w-4 h-4" 
                               text="单品图" 
                               src={prod.img} 
                               onClick={onImageClick} 
                             />
                          </div>
                       </div>
                     ))}
                  </div>
               </div>
             );
           })}
        </div>
      </div>
    </div>
  );
}

function HalalMakeupMarket() {
  const marketData = [
    {
      title: '市场潜力',
      subtitle: '年轻、庞大、多元',
      theme: { bg: 'bg-[#fdf6ea]', border: 'border-[#f5d9a9]', text: 'text-[#b47a18]', hoverBg: 'hover:bg-[#fdf6ea]/50' },
      items: [
        { highlight: '20亿+', desc: '全球人口基数', sub: '60%为30岁以下年轻群体' },
        { highlight: '$280亿', desc: '2032年预估规模', sub: '行业增长呈爆发态势' },
        { highlight: '+28%', desc: '男士护理激增', sub: '打破性别壁垒，走向多元化' }
      ]
    },
    {
      title: '核心规定',
      subtitle: '遵循伊斯兰教法',
      theme: { bg: 'bg-[#eef8f5]', border: 'border-[#bce3d4]', text: 'text-[#2c7a5b]', hoverBg: 'hover:bg-[#eef8f5]/50' },
      items: [
        { highlight: '0 禁忌', desc: '成分绝对透明', sub: '拒绝猪油/明胶等违规成分' },
        { highlight: '0 伤害', desc: '拒绝动物实验', sub: '不含酒精及有害化学物质' },
        { highlight: '0 污染', desc: '推行可持续性', sub: '超30%品牌使用环保可降解包装' }
      ]
    },
    {
      title: '市场细分',
      subtitle: '核心品类分布',
      theme: { bg: 'bg-[#f6f2fb]', border: 'border-[#d8c5f0]', text: 'text-[#6b42a1]', hoverBg: 'hover:bg-[#f6f2fb]/50' },
      items: [
        { highlight: '38%', desc: '护肤品类', sub: '占据市场绝对消费主力' },
        { highlight: '29%', desc: '护发品类', sub: '位居第二大核心需求' },
        { highlight: '21%', desc: '彩妆品类', sub: '色彩消费正在快速崛起' }
      ]
    }
  ];

  return (
    <div className="w-full bg-white border-[1.5px] border-black/10 shadow-[4px_4px_0_0_rgba(0,0,0,0.03)] p-10 overflow-hidden relative group/market transition-all duration-300">
      <div className="flex flex-col items-center relative mb-14 mt-2">
        {/* 背景虚线 */}
        <div className="absolute top-1/2 left-10 right-10 h-px border-t border-dashed border-slate-300 -z-10"></div>
        <div className="bg-slate-800 text-white font-bold text-sm px-8 py-2.5 tracking-widest rounded shadow-sm relative hover:scale-105 transition-transform duration-300 cursor-default">
          清真美妆市场洞察
        </div>
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {marketData.map((col, i) => (
          <div key={i} className="flex flex-col items-center border-[1.5px] border-black/5 p-6 bg-white hover:border-black/20 hover:shadow-lg transition-all duration-500 group/card rounded-sm">
             <span className={`${col.theme.bg} ${col.theme.border} ${col.theme.text} border font-bold px-4 py-1.5 rounded-full text-[11px] tracking-widest mb-4 shadow-sm group-hover/card:scale-110 transition-transform duration-300`}>
               {col.title}
             </span>
             <p className="font-black text-slate-800 text-[14px] mb-6 pb-4 border-b border-black/10 w-full text-center tracking-wide">
               {col.subtitle}
             </p>
             <div className="w-full flex flex-col gap-3">
               {col.items.map((item, j) => (
                 <div key={j} className={`flex items-center justify-between p-3 rounded border border-transparent ${col.theme.hoverBg} hover:border-black/5 transition-all duration-300 group/item cursor-default`}>
                    <div className="flex flex-col text-left">
                       <span className="font-bold text-slate-800 text-[12px] group-hover/item:translate-x-1 transition-transform">{item.desc}</span>
                       <span className="text-[10px] text-slate-500 mt-0.5 group-hover/item:translate-x-1 transition-transform delay-75">{item.sub}</span>
                    </div>
                    <div className={`font-mono text-lg font-black ${col.theme.text} drop-shadow-sm group-hover/item:scale-110 transition-transform origin-right`}>
                      {item.highlight}
                    </div>
                 </div>
               ))}
             </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ClothingCol({ region, femaleImages, maleImages, femaleDesc, maleDesc, materialDesc, onImageClick, customFemaleHeight, customMaleHeight }) {
  const renderImages = (images, height) => {
    if (Array.isArray(images)) return images.map((src, i) => (
      <PhotoPlaceholder 
        key={i} 
        className={height || "h-32"} 
        imgClassName="object-cover"
        src={src} 
        onClick={onImageClick} 
      />
    ));
    return [...Array(images)].map((_, i) => (
      <PhotoPlaceholder 
        key={i} 
        className={height || "h-32"} 
        text="参考" 
      />
    ));
  };
  return (
    <div className="flex flex-col space-y-5 bg-white p-5 border-[1.5px] border-black/20 hover:border-black transition-all duration-300 group">
      <div className="font-mono text-center py-2 text-sm font-black text-black border-b-[1.5px] border-black border-dashed uppercase tracking-widest">{region}</div>
      <div className="space-y-3 text-left">
        <span className="font-mono text-[10px] font-bold text-black bg-slate-100 border border-black/20 px-2 py-1 inline-block uppercase tracking-widest">女性</span>
        <div className="grid grid-cols-2 gap-2">{renderImages(femaleImages, customFemaleHeight)}</div>
        <p className="text-xs text-slate-600 leading-relaxed font-medium">{femaleDesc}</p>
      </div>
      <div className="space-y-3 text-left">
        <span className="font-mono text-[10px] font-bold text-black bg-slate-100 border border-black/20 px-2 py-1 inline-block uppercase tracking-widest">男性</span>
        <div className="grid grid-cols-2 gap-2">{renderImages(maleImages, customMaleHeight)}</div>
        <p className="text-xs text-slate-600 leading-relaxed font-medium">{maleDesc}</p>
      </div>
      <div className="mt-auto pt-4 border-t border-black/20 text-left"><p className="text-xs text-slate-500 font-medium leading-relaxed">{materialDesc}</p></div>
    </div>
  );
}

function FestivalDetailedTable({ onImageClick }) {
  return (
    <div className="w-full bg-white border-[1.5px] border-black/10 shadow-[4px_4px_0_0_rgba(0,0,0,0.03)] overflow-x-auto hide-scrollbar group/table transition-all hover:border-black/30 duration-300">
      <div className="flex min-w-[1300px] flex-col">
        <div className="flex border-b border-black/5 bg-slate-50/30">
          <div className="w-14 shrink-0 border-r border-black/5"></div>
          <div className="flex-1 text-center py-5 font-bold text-[#3B5998] tracking-wide border-r border-black/5 text-[14px]">斋月 (Ramadan)</div>
          <div className="flex-1 text-center py-5 font-bold text-[#3B5998] tracking-wide border-r border-black/5 text-[14px]">开斋节 (Eid al-Fitr)</div>
          <div className="flex-1 text-center py-5 font-bold text-[#3B5998] tracking-wide text-[14px]">古尔邦节 / 宰牲节 (Eid al-Adha)</div>
        </div>
        <div className="flex border-b border-black/5 group/row hover:bg-slate-50/30 transition-colors duration-500">
          <div className="w-14 shrink-0 border-r border-black/5 flex items-center justify-center bg-slate-50/50">
            <span className="[writing-mode:vertical-lr] font-bold text-xs tracking-widest text-slate-500 py-6 uppercase">简介</span>
          </div>
          {[
            { t1: "定位与仪式", d1: "伊斯兰教一年中最神圣的月份。穆斯林必须在黎明至日落期间严格禁食禁水。", t2: "文化内核", d2: "这不仅是对身体的考验，更是为了精神净化与自我反省，培养坚韧自律品格。" },
            { t1: "定位与仪式", d1: "标志着斋月圆满结束的庆祝节日。人们会换上新衣，参加盛大会礼。", t2: "文化内核", d2: "走亲访友、享用丰盛美食、分发红包礼物，象征团聚、喜悦与感恩。" },
            { t1: "定位与仪式", d1: "伊斯兰教最盛大节日。核心仪式是宰杀符合教规的健康牲畜（牛/羊/骆驼）。", t2: "文化内核", d2: "肉品均分为三份：自用、馈赠、施舍。借此践行无私奉献与慈善精神。" }
          ].map((intro, idx) => (
            <div key={idx} className={`flex-1 p-8 ${idx < 2 ? 'border-r border-black/5' : ''} flex flex-col justify-center text-left`}>
               <div className="mb-6">
                  <span className="inline-block text-[10px] font-mono bg-slate-100 text-slate-600 px-2 py-0.5 border border-slate-200 tracking-widest mb-3 rounded-sm shadow-sm"># {intro.t1}</span>
                  <p className="text-[12px] text-slate-600 leading-relaxed text-justify">{intro.d1}</p>
               </div>
               <div>
                  <span className="inline-block text-[10px] font-mono bg-slate-100 text-slate-600 px-2 py-0.5 border border-slate-200 tracking-widest mb-3 rounded-sm shadow-sm"># {intro.t2}</span>
                  <p className="text-[12px] text-slate-600 leading-relaxed text-justify">{intro.d2}</p>
               </div>
            </div>
          ))}
        </div>
        <div className="flex border-b border-black/5 group/row hover:bg-slate-50/30 transition-colors duration-500">
          <div className="w-14 shrink-0 border-r border-black/5 flex items-center justify-center bg-slate-50/50">
            <span className="[writing-mode:vertical-lr] font-bold text-xs tracking-widest text-slate-500 py-6 uppercase">活动</span>
          </div>
          {[
            { i1: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%96%8B%E6%9C%881.png", i2: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%96%8B%E6%9C%882.png" },
            { i1: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%BC%80%E6%96%8B%E8%8A%821.png", i2: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%BC%80%E6%96%8B%E8%8A%822.png" },
            { i1: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8F%A4%E5%B0%94%E9%82%A6%E8%8A%82%20_%20%E5%AE%B0%E7%89%B2%E8%8A%82%201.png", i2: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8F%A4%E5%B0%94%E9%82%A6%E8%8A%82%20_%20%E5%AE%B0%E7%89%B2%E8%8A%82%202.png" }
          ].map((act, idx) => (
            <div key={idx} className={`flex-1 p-6 ${idx < 2 ? 'border-r border-black/5' : ''} grid grid-cols-2 gap-5 items-start`}>
               <PhotoPlaceholder className="w-full aspect-[4/3] !p-0 !border-black/10 shadow-sm" imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal" src={act.i1} onClick={onImageClick} />
               <PhotoPlaceholder className="w-full aspect-[4/3] !p-0 !border-black/10 shadow-sm" imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal" src={act.i2} onClick={onImageClick} />
            </div>
          ))}
        </div>
        <div className="flex border-b border-black/5 group/row hover:bg-slate-50/30 transition-colors duration-500">
          <div className="w-14 shrink-0 border-r border-black/5 flex items-center justify-center bg-slate-50/50">
            <span className="[writing-mode:vertical-lr] font-bold text-xs tracking-widest text-slate-500 py-6 uppercase">代表性元素</span>
          </div>
          <div className="flex-1 p-8 grid grid-cols-5 gap-6 items-center">
             <PhotoPlaceholder className="w-full aspect-[4/3] !p-0 !border-black/10 shadow-sm" imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal" src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%96%8B%E6%9C%88_%E5%BC%80%E6%96%8B%E4%BB%A3%E8%A1%A8%E6%80%A7%E5%85%83%E7%B4%A02.png" onClick={onImageClick} />
             <PhotoPlaceholder className="w-full aspect-[4/3] !p-0 !border-black/10 shadow-sm" imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal" src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%96%8B%E6%9C%88_%E5%BC%80%E6%96%8B%E4%BB%A3%E8%A1%A8%E6%80%A7%E5%85%83%E7%B4%A01.png" onClick={onImageClick} />
             <PhotoPlaceholder className="w-full aspect-[4/3] !p-0 !border-black/10 shadow-sm" imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal" src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%96%8B%E6%9C%88_%E5%BC%80%E6%96%8B%E4%BB%A3%E8%A1%A8%E6%80%A7%E5%85%83%E7%B4%A03.png" onClick={onImageClick} />
             <PhotoPlaceholder className="w-full aspect-[4/3] !p-0 !border-black/10 shadow-sm" imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal" src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8F%A4%E5%B0%94%E9%82%A6%E8%8A%82%20_%20%E4%BB%A3%E8%A1%A8%E6%80%A7%E5%85%83%E7%B4%A01.png" onClick={onImageClick} />
             <PhotoPlaceholder className="w-full aspect-[4/3] !p-0 !border-black/10 shadow-sm" imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal" src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8F%A4%E5%B0%94%E9%82%A6%E8%8A%82%20_%20%E4%BB%A3%E8%A1%A8%E6%80%A7%E5%85%83%E7%B4%A02.png" onClick={onImageClick} />
          </div>
        </div>
        <div className="flex group/row hover:bg-slate-50/30 transition-colors duration-500">
          <div className="w-14 shrink-0 border-r border-black/5 flex items-center justify-center bg-slate-50/50">
            <span className="[writing-mode:vertical-lr] font-bold text-xs tracking-widest text-slate-500 py-8 uppercase">🕌 宗教建筑</span>
          </div>
          <div className="flex-1 p-8 grid grid-cols-4 gap-6 items-start">
             {[
               "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%AE%97%E6%95%99%E5%BB%BA%E7%AD%91-1.png",
               "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%AE%97%E6%95%99%E5%BB%BA%E7%AD%91-2.png",
               "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%AE%97%E6%95%99%E5%BB%BA%E7%AD%91-4.png",
               "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%AE%97%E6%95%99%E5%BB%BA%E7%AD%91-3.png"
             ].map((url, i) => (
               <PhotoPlaceholder key={i} className="w-full h-auto !p-0 !border-black/10 shadow-sm" imgClassName="object-contain w-full !h-auto !opacity-100 !mix-blend-normal" src={url} onClick={onImageClick} />
             ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// --- 4. 页面大板块组件 ---

function IntroSection() {
  return (
    <div className="space-y-10 animate-in fade-in slide-in-from-bottom-8 duration-700 ease-out text-left">
      <header className="relative mb-8 text-left">
        <h2 className="font-mono text-4xl font-black text-black tracking-tighter uppercase mb-6">01 / 定位与背景</h2>
        <div className="border-l-[3px] border-slate-300 pl-5 py-1 space-y-2">
          <p className="text-slate-500 font-medium text-[14px] leading-relaxed">
            当前 AI 模型在多元文化视觉生成中，容易出现“认知盲区”与“审美偏差”的情况
          </p>
          <p className="text-slate-500 font-medium text-[14px] leading-relaxed">
            文档核心目标是提升AI在跨文化语境下视觉生成的质感与美感，并辅助业务侧确保全球化视觉表达更精准、地道
          </p>
        </div>
      </header>

      <div className="bg-white border-[1.5px] border-black/10 rounded-2xl p-8 lg:p-10 shadow-sm hover:shadow-md transition-shadow duration-500">
        <div className="text-center mb-10">
          <h3 className="text-[20px] font-black text-slate-800 tracking-widest mb-2">项目定位 · 背景 · 结构</h3>
          <p className="text-[10px] font-bold text-slate-400 tracking-widest uppercase">全球文化审美研究 · 总览卡</p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Col 1 - 定位 */}
          <div className="bg-[#f8f6fb] rounded-xl p-7 relative flex flex-col hover:-translate-y-1 transition-transform duration-300">
             {/* Header */}
             <div className="flex items-center gap-3 mb-8 relative z-10">
                <div className="w-8 h-8 rounded-full bg-[#8271a3] text-white flex items-center justify-center text-[13px] font-black font-mono shadow-sm">01</div>
                <div>
                   <h4 className="font-black text-slate-800 text-lg leading-none">定位</h4>
                   <p className="text-[10px] text-[#8271a3] font-mono mt-1 tracking-wider uppercase">Positioning</p>
                </div>
             </div>

             {/* Timeline Area */}
             <div className="relative flex-1">
                {/* Vertical Line */}
                <div className="absolute left-[15.5px] top-2 bottom-2 w-[1.5px] bg-[#8271a3]/30"></div>

                {/* Node 1 */}
                <div className="relative flex items-start gap-4 mb-8">
                   <div className="w-8 flex justify-center shrink-0 mt-1 relative z-10">
                      <div className="w-3.5 h-3.5 rounded-full border-[2.5px] border-[#8271a3] bg-[#f8f6fb]"></div>
                   </div>
                   <div className="flex-1">
                      <h5 className="font-bold text-slate-800 text-[13px] mb-2">五大区域 · 全球视野</h5>
                      <p className="text-[11.5px] text-slate-500 leading-relaxed">
                         聚焦 <span className="font-bold text-slate-800">北美、欧洲、东南亚、中东、拉美</span> 五大区域<br/>分析全球主流审美趋势
                      </p>
                   </div>
                </div>

                {/* Node 2 */}
                <div className="relative flex items-start gap-4">
                   <div className="w-8 flex justify-center shrink-0 mt-1 relative z-10">
                      <div className="w-3.5 h-3.5 rounded-full border-[2.5px] border-[#8271a3] bg-[#f8f6fb]"></div>
                   </div>
                   <div className="flex-1">
                      <h5 className="font-bold text-slate-800 text-[13px] mb-2">从人像出发 · 多场景延展</h5>
                      <p className="text-[11.5px] text-slate-500 leading-relaxed">
                         深挖 <span className="font-bold text-slate-800">人像美学</span>，及其在 <span className="font-bold text-slate-800">服装、摄影、建筑空间</span> 中的本土化表达。
                      </p>
                   </div>
                </div>
             </div>
          </div>

          {/* Col 2 - 背景 */}
          <div className="bg-[#f4f7fb] rounded-xl p-7 relative flex flex-col hover:-translate-y-1 transition-transform duration-300">
             {/* Header */}
             <div className="flex items-center gap-3 mb-8 relative z-10">
                <div className="w-8 h-8 rounded-full bg-[#5d82b4] text-white flex items-center justify-center text-[13px] font-black font-mono shadow-sm">02</div>
                <div>
                   <h4 className="font-black text-slate-800 text-lg leading-none">背景</h4>
                   <p className="text-[10px] text-[#5d82b4] font-mono mt-1 tracking-wider uppercase">Background</p>
                </div>
             </div>

             {/* Timeline Area */}
             <div className="relative flex-1">
                {/* Vertical Line */}
                <div className="absolute left-[15.5px] top-2 bottom-2 w-[1.5px] bg-[#5d82b4]/30"></div>

                {/* Node 1 */}
                <div className="relative flex items-start gap-4 mb-8">
                   <div className="w-8 flex justify-center shrink-0 mt-1 relative z-10">
                      <div className="w-3.5 h-3.5 rounded-full border-[2.5px] border-[#5d82b4] bg-[#f4f7fb]"></div>
                   </div>
                   <div className="flex-1">
                      <h5 className="font-bold text-slate-800 text-[13px] mb-2">优化模型</h5>
                      <p className="text-[11.5px] text-slate-500 leading-relaxed">
                         打破 AI 在跨文化生成中的<br/>「认知盲区」与「审美偏差」。
                      </p>
                   </div>
                </div>

                {/* Node 2 */}
                <div className="relative flex items-start gap-4">
                   <div className="w-8 flex justify-center shrink-0 mt-1 relative z-10">
                      <div className="w-3.5 h-3.5 rounded-full border-[2.5px] border-[#5d82b4] bg-[#f4f7fb]"></div>
                   </div>
                   <div className="flex-1">
                      <h5 className="font-bold text-slate-800 text-[13px] mb-2">业务侧</h5>
                      <p className="text-[11.5px] text-slate-500 leading-relaxed">
                         确保 <span className="font-bold text-slate-800">全球化视觉表达</span><br/>更精准、地道
                      </p>
                   </div>
                </div>
             </div>
          </div>

          {/* Col 3 - 结构 */}
          <div className="bg-[#f4f9f4] rounded-xl p-7 relative flex flex-col hover:-translate-y-1 transition-transform duration-300">
             {/* Header */}
             <div className="flex items-center gap-3 mb-8 relative z-10">
                <div className="w-8 h-8 rounded-full bg-[#679c70] text-white flex items-center justify-center text-[13px] font-black font-mono shadow-sm">03</div>
                <div>
                   <h4 className="font-black text-slate-800 text-lg leading-none">结构</h4>
                   <p className="text-[10px] text-[#679c70] font-mono mt-1 tracking-wider uppercase">Structure</p>
                </div>
             </div>

             {/* Timeline Area */}
             <div className="relative flex-1">
                {/* Vertical Line */}
                <div className="absolute left-[15.5px] top-2 bottom-2 w-[1.5px] bg-[#679c70]/30"></div>

                {/* Node 1 */}
                <div className="relative flex items-start gap-4 mb-6">
                   <div className="w-8 flex justify-center shrink-0 mt-1 relative z-10">
                      <div className="w-3.5 h-3.5 rounded-full border-[2.5px] border-[#679c70] bg-[#f4f9f4]"></div>
                   </div>
                   <div className="flex-1">
                      <h5 className="font-bold text-slate-800 text-[13px] mb-2.5">研究主轴</h5>
                      <div className="bg-white border border-black/5 rounded-md px-3 py-1.5 text-[11px] font-bold text-slate-700 shadow-sm inline-block w-fit">
                         审美维度 (纵向) × 地理区域 (横向)
                      </div>
                   </div>
                </div>

                {/* Node 2 */}
                <div className="relative flex items-start gap-4 mb-5">
                   <div className="w-8 flex justify-center shrink-0 mt-1 relative z-10">
                      <div className="w-3.5 h-3.5 rounded-full border-[2.5px] border-[#679c70] bg-[#f4f9f4]"></div>
                   </div>
                   <div className="flex-1">
                      <h5 className="font-bold text-slate-800 text-[13px] mb-1.5">P0 · 文化根基</h5>
                      <p className="text-[11.5px] text-slate-500 leading-snug flex flex-col gap-1.5">
                         <span>· 民族传统</span>
                         <span>· 宗教习俗</span>
                      </p>
                   </div>
                </div>

                {/* Node 3 */}
                <div className="relative flex items-start gap-4 mb-5">
                   <div className="w-8 flex justify-center shrink-0 mt-1 relative z-10">
                      <div className="w-3.5 h-3.5 rounded-full border-[2.5px] border-[#679c70] bg-[#f4f9f4]"></div>
                   </div>
                   <div className="flex-1">
                      <h5 className="font-bold text-slate-800 text-[13px] mb-1.5">P1 · 流行趋势</h5>
                      <p className="text-[11.5px] text-slate-500 leading-snug flex flex-col gap-1.5">
                         <span>· 人像特征</span>
                         <span>· INS 网感</span>
                         <span>· 设计语言</span>
                      </p>
                   </div>
                </div>

                {/* Node 4 */}
                <div className="relative flex items-start gap-4">
                   <div className="w-8 flex justify-center shrink-0 mt-1 relative z-10">
                      <div className="w-3.5 h-3.5 rounded-full border-[2.5px] border-[#679c70] bg-[#f4f9f4]"></div>
                   </div>
                   <div className="flex-1">
                      <h5 className="font-bold text-slate-800 text-[13px] mb-1.5">P2 · 视觉体系</h5>
                      <p className="text-[11.5px] text-slate-500 leading-snug flex flex-col gap-1.5">
                         <span>· 跨文化</span>
                         <span>· 全球审美融合</span>
                      </p>
                   </div>
                </div>
             </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function MuslimSection({ onImageClick, user }) {
  const [subTab, setSubTab] = useState('population');
  const tabs = [
    { id: 'population', label: '人口分布', icon: <Users className="w-4 h-4" /> },
    { id: 'clothing', label: '服装特点', icon: <Shirt className="w-4 h-4" /> },
    { id: 'makeup', label: '美妆风格', icon: <Palette className="w-4 h-4" /> },
    { id: 'festival', label: '传统节日', icon: <Calendar className="w-4 h-4" /> },
  ];

  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-700 ease-out text-left">
      <header className="relative border-b border-black/20 pb-4">
        <h2 className="font-mono text-4xl font-black text-black tracking-tighter uppercase flex items-center gap-4">02 / 穆斯林文化与美感</h2>
        <p className="font-mono text-slate-500 mt-2 text-sm tracking-widest uppercase">穆斯林文化与美感体系</p>
      </header>
      <div className="flex flex-wrap gap-2 w-fit">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setSubTab(tab.id)}
            className={`flex items-center space-x-2 px-5 py-2.5 font-mono text-xs font-bold transition-all duration-300 border-[1.5px] uppercase tracking-widest ${
              subTab === tab.id ? 'bg-black text-white border-black shadow-sm' : 'bg-transparent text-slate-500 border-black/20 hover:border-black hover:text-black'
            }`}
          >
            {tab.icon} <span>{tab.label}</span>
          </button>
        ))}
      </div>
      <div className="bg-white border-[1.5px] border-black/20 p-8 min-h-[500px] relative shadow-[4px_4px_0_0_rgba(0,0,0,0.05)]">
        {subTab === 'population' && (
          <div className="space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-700">
            <div className="flex items-center justify-between border-b border-black/10 pb-4">
              <h3 className="font-mono text-2xl font-black text-black uppercase tracking-tight flex items-center">
                <span className="w-3 h-3 bg-black mr-3"></span>
                全球分布
              </h3>
            </div>
            
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center text-left">
              <div className="lg:col-span-5 space-y-10">
                <div className="p-8 border-[1.5px] border-black/10 bg-white relative shadow-[4px_4px_0_0_rgba(0,0,0,0.02)] hover:shadow-[4px_4px_0_0_rgba(0,0,0,0.06)] hover:-translate-y-1 transition-all duration-500 animate-in slide-in-from-bottom-4 fade-in duration-700 delay-100 fill-mode-both">
                  <div className="absolute top-0 left-0 w-1.5 h-full bg-black"></div>
                  <div className="flex items-baseline mb-2">
                    <p className="font-mono text-7xl font-black text-black tracking-tighter drop-shadow-sm">20</p>
                    <p className="font-mono text-2xl font-bold text-slate-500 ml-2">亿</p>
                  </div>
                  <div className="font-mono text-[13px] text-slate-500 font-bold uppercase tracking-widest leading-relaxed mt-5 border-t border-black/5 pt-5 text-left">
                    <p className="mb-1.5">占世界总人口的四分之一。</p>
                    <p>主要分布在中东、南亚、东南亚等地区。</p>
                  </div>
                </div>
                <div className="space-y-6 bg-slate-50/50 p-6 border border-black/5">
                  <PopulationBar region="中东地区" pop="3.6亿" percentage="93%" color="from-slate-800 to-slate-600" delay="delay-[200ms]" />
                  <PopulationBar region="南亚地区" pop="5.2亿" percentage="35%" color="from-slate-700 to-slate-500" delay="delay-[300ms]" />
                  <PopulationBar region="东南亚地区" pop="2.4亿" percentage="18%" color="from-slate-600 to-slate-400" delay="delay-[400ms]" />
                  <PopulationBar region="东非地区" pop="3.7亿" percentage="50%" color="from-slate-500 to-slate-300" delay="delay-[500ms]" />
                </div>
              </div>
              <div className="lg:col-span-7 h-full min-h-[500px] flex items-center justify-center relative group cursor-zoom-in animate-in fade-in zoom-in-95 duration-1000 delay-300 fill-mode-both" onClick={() => onImageClick("https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E7%A9%86%E6%96%AF%E6%9E%97%E5%85%A8%E7%90%83%E5%88%86%E5%B8%83.png")}>
                <div className="absolute inset-0 bg-gradient-to-br from-slate-100/50 to-transparent rounded-full blur-3xl opacity-50 group-hover:opacity-80 transition-opacity duration-700 -z-10"></div>
                <img 
                  src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E7%A9%86%E6%96%AF%E6%9E%97%E5%85%A8%E7%90%83%E5%88%86%E5%B8%83.png" 
                  alt="Map" 
                  className="w-full h-full max-h-[600px] object-contain mix-blend-multiply opacity-90 group-hover:opacity-100 group-hover:scale-[1.03] group-hover:-translate-y-2 drop-shadow-xl transition-all duration-[800ms] ease-[cubic-bezier(0.25,1,0.5,1)]" 
                />
              </div>
            </div>
          </div>
        )}
        {subTab === 'clothing' && (
          <div className="space-y-8 animate-in zoom-in-95 duration-500">
            <h3 className="font-mono text-2xl font-black text-black uppercase tracking-tight flex items-center"><span className="w-3 h-3 bg-black mr-3"></span>服装特点</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
               <ClothingCol region="中东地区" femaleImages={["https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E7%A9%86%E6%96%AF%E6%9E%97-%E4%B8%AD%E4%B8%9C%E6%9C%8D%E9%A5%B0%E5%A5%B3%E6%80%A71.png", "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E7%A9%86%E6%96%AF%E6%9E%97-%E4%B8%AD%E4%B8%9C%E6%9C%8D%E9%A5%B0%E5%A5%B3%E6%80%A72.png"]} maleImages={["https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E7%A9%86%E6%96%AF%E6%9E%97-%E4%B8%AD%E4%B8%9C%E6%9C%8D%E9%A5%B0%E7%94%B7%E6%80%A711.png", "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E7%A9%86%E6%96%AF%E6%9E%97-%E4%B8%AD%E4%B8%9C%E6%9C%8D%E9%A5%B0%E7%94%B7%E6%80%A722.png"]} customFemaleHeight="aspect-[3/4] h-auto" customMaleHeight="aspect-[3/4] h-auto" femaleDesc="海湾：黑色宽袍。土耳其：收腰长风衣。" maleDesc="及地长袍，简约笔挺。" materialDesc="奢华垂坠，丝绸羊毛。" onImageClick={onImageClick} />
               <ClothingCol region="南亚地区" femaleImages={["https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8D%97%E4%BA%9A%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E5%A5%B31-%E5%8D%95%E5%BC%A0.png", "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8D%97%E4%BA%9A%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E5%A5%B32-%E5%8D%95%E5%BC%A0.png"]} maleImages={["https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8D%97%E4%BA%9A%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E7%94%B72-%E5%8D%95%E5%BC%A0.png", "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8D%97%E4%BA%9A%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E7%94%B71-%E5%8D%95%E5%BC%A0.png"]} customFemaleHeight="aspect-[3/4] h-auto" customMaleHeight="aspect-[3/4] h-auto" femaleDesc="三件套，搭配巨大披肩 Dupatta。" maleDesc="及膝长衬衫衬裤。" materialDesc="重工刺绣，高饱和色彩。" onImageClick={onImageClick} />
               <ClothingCol region="东南亚地区" femaleImages={["https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E5%A5%B31-%E5%8D%95%E5%BC%A0.png", "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E5%A5%B32-%E5%8D%95%E5%BC%A0.png"]} maleImages={["https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E7%94%B71-%E5%8D%95%E5%BC%A0.png", "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E7%94%B72-%E5%8D%95%E5%BC%A0.png"]} customFemaleHeight="aspect-[3/4] h-auto" customMaleHeight="aspect-[3/4] h-auto" femaleDesc="Kebaya 修身上衣。" maleDesc="短纱笼。" materialDesc="蜡染亮白肌感。" onImageClick={onImageClick} />
               <ClothingCol region="东非地区" femaleImages={["https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E9%9D%9E%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E5%A5%B32-%E5%8D%95%E5%BC%A0.png", "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E9%9D%9E%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E5%A5%B31-%E5%8D%95%E5%BC%A0.png"]} maleImages={["https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E9%9D%9E%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E7%94%B72-%E5%8D%95%E5%BC%A0.png", "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E9%9D%9E%E7%A9%86%E6%96%AF%E6%9E%97%E6%9C%8D%E9%A5%B0%E7%94%B71-%E5%8D%95%E5%BC%A0.png"]} customFemaleHeight="aspect-[3/4] h-auto" customMaleHeight="aspect-[3/4] h-auto" femaleDesc="雪纺长裙。" maleDesc="刺绣圆帽。" materialDesc="极简金饰，透气棉纺。" onImageClick={onImageClick} />
            </div>

            {/* 特别地区 - 补充对比栏 */}
            <div className="mt-8 border-[1.5px] border-black/20 bg-white flex flex-col overflow-hidden shadow-[4px_4px_0_0_rgba(0,0,0,0.03)] hover:border-black transition-colors duration-300">
               {/* 顶部全宽 Label */}
               <div className="bg-slate-50/80 border-b border-black/10 flex items-center justify-center p-3">
                  <span className="font-mono text-[13px] font-bold tracking-widest text-slate-700 flex items-center gap-2">
                     <span className="text-base">👀</span>
                     特别地区
                  </span>
               </div>
               
               {/* 下方 垂直列表分析区 (左字右图) */}
               <div className="flex-1 flex flex-col divide-y divide-black/10">
                  
                  {/* 中东 - 伊朗 */}
                  <div className="flex flex-col md:flex-row group/sp">
                     {/* 左侧文字 */}
                     <div className="w-full md:w-[40%] xl:w-[35%] p-6 xl:p-8 flex flex-col justify-center border-b md:border-b-0 md:border-r border-black/10 bg-white">
                         <h5 className="text-[14px] font-bold text-[#4a6aa6] mb-4 flex items-center">
                            <span className="w-1.5 h-1.5 rounded-full bg-[#4a6aa6] mr-2"></span>
                            伊朗地区穆斯林男性：
                         </h5>
                         <p className="text-[13px] text-slate-600 leading-relaxed mb-5">日常多为西式衬衫 + 长裤，很少佩戴头巾</p>
                         <div className="border-l-[2px] border-[#4a6aa6]/40 pl-4 py-2 bg-slate-50/50">
                            <p className="text-[12px] text-slate-500 font-medium leading-relaxed">
                               最著名的潜规则是<strong className="text-[#4a6aa6]">“不打领带”</strong>，因为领带被视为西方颓废文化的象征
                            </p>
                         </div>
                     </div>
                     {/* 右侧图片 */}
                     <div className="w-full md:w-[60%] xl:w-[65%] p-6 bg-[#f8f8f8] flex items-center justify-center">
                         <PhotoPlaceholder 
                            src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%BC%8A%E6%9C%97%E7%A9%86%E6%96%AF%E6%9E%97%E7%94%B7%E6%80%A7%E8%A5%BF%E8%A3%85.png" 
                            className="w-full max-w-2xl !h-auto !border-black/10 group-hover/sp:border-black/30 transition-colors bg-white !p-0 shadow-sm" 
                            imgClassName="object-contain w-full max-h-[350px] xl:max-h-[400px] block" 
                            onClick={onImageClick} 
                         />
                     </div>
                  </div>

                  {/* 东南亚 - 苏门答腊 */}
                  <div className="flex flex-col md:flex-row group/sp">
                     {/* 左侧文字 */}
                     <div className="w-full md:w-[40%] xl:w-[35%] p-6 xl:p-8 flex flex-col justify-center border-b md:border-b-0 md:border-r border-black/10 bg-white">
                         <h5 className="text-[14px] font-bold text-[#4a6aa6] mb-4 flex items-start leading-snug">
                            <span className="w-1.5 h-1.5 rounded-full bg-[#4a6aa6] mr-2 mt-1.5 shrink-0"></span>
                            <div>苏门答腊文化圈 <span className="text-[12px] text-slate-500 font-normal ml-1">（亚齐 / 西苏门答腊）</span></div>
                         </h5>
                         <p className="text-[13px] text-slate-600 leading-relaxed">
                            街头会有 <strong className="text-red-700/80 bg-red-50 px-1.5 py-0.5 rounded font-bold">宗教警察</strong> 检查女性是否戴头巾、服装是否太紧。<br/><br/>这与东南亚其他地区（如印尼主流文化圈）相对宽松的着装要求形成鲜明反差。
                         </p>
                     </div>
                     {/* 右侧图片 */}
                     <div className="w-full md:w-[60%] xl:w-[65%] p-6 bg-[#f8f8f8] flex items-center justify-center">
                         <PhotoPlaceholder 
                            src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E7%A9%86%E6%96%AF%E6%9E%97%E8%AD%A6%E5%AF%9F.png" 
                            className="w-full max-w-2xl !h-auto !border-black/10 group-hover/sp:border-black/30 transition-colors bg-white !p-0 shadow-sm" 
                            imgClassName="object-contain w-full max-h-[350px] xl:max-h-[400px] block" 
                            onClick={onImageClick} 
                         />
                     </div>
                  </div>

                  {/* 东非 - 索马里 */}
                  <div className="flex flex-col md:flex-row group/sp">
                     {/* 左侧文字 */}
                     <div className="w-full md:w-[40%] xl:w-[35%] p-6 xl:p-8 flex flex-col justify-center border-b md:border-b-0 md:border-r border-black/10 bg-white">
                         <h5 className="text-[14px] font-bold text-[#4a6aa6] mb-4 flex items-start leading-snug">
                            <span className="w-1.5 h-1.5 rounded-full bg-[#4a6aa6] mr-2 mt-1.5 shrink-0"></span>
                            <div>索马里和苏丹女性 <span className="text-[12px] text-slate-600 font-normal ml-1">穿衣风格反差极大：</span></div>
                         </h5>
                         <p className="text-[13px] text-slate-600 leading-relaxed mb-6">
                            <strong className="text-slate-800 border-b border-[#4a6aa6]/40 pb-0.5">索马里：</strong>穿搭极其华丽张扬，女性非常喜爱佩戴夸张的黄金饰品。
                         </p>
                         <div className="text-[12px] text-[#4a6aa6] bg-slate-50 px-3 py-2 border border-[#4a6aa6]/20 font-medium">
                            ✨ 打破了“只能朴素单调”的刻板印象。
                         </div>
                     </div>
                     {/* 右侧图片 */}
                     <div className="w-full md:w-[60%] xl:w-[65%] p-6 bg-[#f8f8f8] flex items-center justify-center">
                         <PhotoPlaceholder 
                            src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E7%B4%A2%E9%A9%AC%E9%87%8C%E5%92%8C%E8%8B%8F%E4%B8%B9%E5%A5%B3%E6%80%A7%E7%A9%BF%E8%A1%A3%E9%A3%8E%E6%A0%BC%E5%8F%8D%E5%B7%AE%E5%A4%A7.png" 
                            className="w-full max-w-2xl !h-auto !border-black/10 group-hover/sp:border-black/30 transition-colors bg-white !p-0 shadow-sm" 
                            imgClassName="object-contain w-full max-h-[350px] xl:max-h-[400px] block" 
                            onClick={onImageClick} 
                         />
                     </div>
                  </div>
               </div>
            </div>

          </div>
        )}
        {subTab === 'makeup' && (
          <div className="space-y-12 animate-in zoom-in-95 duration-500 overflow-hidden">
            <div className="space-y-6">
              <h3 className="font-mono text-2xl font-black text-black uppercase flex items-center border-b border-black/20 pb-2"><span className="w-3 h-3 bg-black mr-3"></span>互动环节：盲猜美妆风格</h3>
              <div className="flex overflow-x-auto space-x-5 pb-8 pt-2 snap-x hide-scrollbar">
                 {makeupPollData.map(item => <MakeupPollItem key={item.id} item={item} onImageClick={onImageClick} user={user} />)}
              </div>
            </div>
            
            <div className="space-y-6 pt-6 border-t border-black/10">
              <h3 className="font-mono text-2xl font-black text-black uppercase flex items-center"><span className="w-3 h-3 bg-black mr-3 opacity-30"></span>清真美妆市场洞察</h3>
              <HalalMakeupMarket />
            </div>

            <div className="space-y-6 pt-6 border-t border-black/10">
              <h3 className="font-mono text-2xl font-black text-black uppercase flex items-center"><span className="w-3 h-3 bg-black mr-3 opacity-30"></span>区域美妆特征分析</h3>
              <MakeupDetailedTable onImageClick={onImageClick} />
            </div>
          </div>
        )}
        {subTab === 'festival' && (
           <div className="space-y-6 animate-in zoom-in-95 duration-500 overflow-hidden">
             <h3 className="font-mono text-2xl font-black text-black uppercase flex items-center border-b border-black/20 pb-2"><span className="w-3 h-3 bg-black mr-3"></span>传统节日与视觉特征</h3>
             <FestivalDetailedTable onImageClick={onImageClick} />
           </div>
        )}
      </div>
    </div>
  );
}

function GlobalSection({ onImageClick, user }) {
  const [subTab, setSubTab] = useState('core');
  const tabs = [
    { id: 'core', label: '核心目标', icon: <Sparkles className="w-4 h-4" /> },
    { id: 'ins', label: '网感氛围', icon: <Camera className="w-4 h-4" /> },
    { id: 'face', label: '面部特征', icon: <Users className="w-4 h-4" /> },
    { id: 'body', label: '身型趋势', icon: <Activity className="w-4 h-4" /> },
    { id: 'makeup_system', label: '主流妆造', icon: <Palette className="w-4 h-4" /> },
  ];

  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-700 ease-out text-left">
      <header className="relative border-b border-black/20 pb-4">
        <h2 className="font-mono text-4xl font-black text-black tracking-tighter uppercase">03 / 全球网感与特征</h2>
        <p className="font-mono text-slate-500 mt-2 text-sm tracking-widest uppercase">全球网感与特征体系</p>
      </header>
      <div className="flex flex-wrap gap-2 w-fit">
        {tabs.map((tab) => (
          <button key={tab.id} onClick={() => setSubTab(tab.id)} className={`px-5 py-2.5 font-mono text-xs font-bold transition-all border-[1.5px] uppercase tracking-widest ${subTab === tab.id ? 'bg-black text-white border-black' : 'bg-transparent text-slate-500 border-black/20 hover:border-black'}`}>{tab.label}</button>
        ))}
      </div>
      <div className="bg-white border-[1.5px] border-black/20 p-8 min-h-[500px] relative shadow-[4px_4px_0_0_rgba(0,0,0,0.05)]">
        {subTab === 'core' && (
          <div className="space-y-10 animate-in zoom-in-95 duration-500">
            <h3 className="font-mono text-3xl font-black text-black text-center uppercase">三大核心目标</h3>
            <div className="flex flex-col md:flex-row items-center gap-12 pt-6 text-left">
               <div className="w-full md:w-[45%] lg:w-[40%] shrink-0 group/coreimg">
                 <PhotoPlaceholder 
                   src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%BA%BA%E5%83%8F%E5%B0%81%E9%9D%A2-%E5%A4%87%E9%80%891.png"
                   onClick={onImageClick}
                   className="w-full !h-auto border-[1.5px] border-black/20 shadow-sm bg-transparent !p-0 overflow-hidden group-hover/coreimg:border-black group-hover/coreimg:shadow-[8px_8px_0_0_rgba(0,0,0,0.08)] group-hover/coreimg:-translate-y-1 transition-all duration-500 cursor-zoom-in" 
                   imgClassName="object-contain w-full h-auto block group-hover/coreimg:scale-[1.03] transition-transform duration-700 ease-out"
                   text="图解参考" 
                 />
               </div>
               <div className="w-full flex-1 space-y-5">
                  {[{id:'01',t:'氛围与质感',d:'拿捏不同文化 feel。'},{id:'02',t:'长相与人种',d:'真实强特征人像。'},{id:'03',t:'流行与审美',d:'当下变美思路。'}].map((i, idx)=>(
                    <div key={i.id} className="p-6 border-[1.5px] border-black/20 bg-white group/coreitem hover:border-black hover:shadow-[6px_6px_0_0_rgba(0,0,0,0.05)] hover:-translate-y-1 hover:translate-x-1 transition-all duration-300 cursor-default animate-in slide-in-from-right-4 fade-in fill-mode-both" style={{ animationDelay: `${idx * 150}ms`, animationDuration: '700ms' }}>
                      <h4 className="font-mono font-black uppercase flex items-center text-slate-800 group-hover/coreitem:text-[#4a6aa6] transition-colors duration-300">
                        <span className="border-[1.5px] border-black/30 px-2 py-0.5 mr-3 group-hover/coreitem:bg-[#4a6aa6] group-hover/coreitem:border-[#4a6aa6] group-hover/coreitem:text-white transition-all duration-300 shadow-sm">{i.id}</span>
                        {i.t}
                      </h4>
                      <p className="text-[13px] text-slate-600 mt-3 group-hover/coreitem:text-slate-800 transition-colors duration-300 leading-relaxed">{i.d}</p>
                    </div>
                  ))}
               </div>
            </div>
          </div>
        )}
        {subTab === 'ins' && (
          <div className="space-y-8 animate-in zoom-in-95 duration-500">
            <h3 className="font-mono text-2xl font-black text-black uppercase flex items-center"><span className="w-3 h-3 bg-black mr-3"></span>网感氛围分析</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 text-left">
              <InsCard 
                region="北美地区" 
                flag="US" 
                style="阳光胶片" 
                tone="偏好街头与户外等真实生活场景。" 
                vibe="主打chill动态抓拍，展现不受拘束的自由感。" 
                images={[
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E5%A5%B31.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E5%A5%B32.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E7%94%B71.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E7%94%B72.png"
                ]}
                onImageClick={onImageClick} 
              />
              <InsCard 
                region="欧洲地区" 
                flag="EU" 
                style="低饱和哑光" 
                tone="主打复古老钱风，偏好经典建筑与留白。" 
                vibe="营造不经意感，传递毫不费力的高级态度。" 
                images={[
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E5%A5%B31.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E5%A5%B32.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E7%94%B71.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E7%94%B72.png"
                ]}
                onImageClick={onImageClick} 
              />
              <InsCard 
                region="东南亚地区" 
                flag="TH" 
                style="高明度水光" 
                tone="主打可爱性感，多在海岛等色彩丰富地取景。" 
                vibe="镜头互动感极强，展现充满活力的俏皮甜辣风。" 
                images={[
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E5%A5%B31.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E5%A5%B32.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E7%94%B71.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E7%94%B72.png"
                ]}
                onImageClick={onImageClick} 
              />
              <InsCard 
                region="中东地区" 
                flag="AE" 
                style="金色奢华" 
                tone="主打奢华精致，多选华丽建筑与高端游艇。" 
                vibe="姿态优雅无夸张表情，传递不可冒犯的尊贵感。" 
                images={[
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E5%A5%B31.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E5%A5%B32.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E7%94%B71.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E7%94%B72.png"
                ]}
                onImageClick={onImageClick} 
              />
              <InsCard 
                region="拉美地区" 
                flag="BR" 
                style="黄金古铜" 
                tone="主打热情奔放，多集中于阳光沙滩或狂欢派对。" 
                vibe="肢体舒展动感，散发极强情绪感染力与绝对自信。" 
                images={[
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E5%A5%B31.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E5%A5%B32.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E7%94%B71.png",
                  "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E%E7%BD%91%E7%BA%A2%E5%8D%9A%E4%B8%BB%E5%8F%82%E8%80%83%E7%94%B72.png"
                ]}
                onImageClick={onImageClick} 
              />
            </div>
          </div>
        )}
        {subTab === 'face' && (
          <div className="space-y-12 animate-in zoom-in-95 duration-500 overflow-hidden">
            <div className="space-y-6">
              <h3 className="font-mono text-2xl font-black text-black uppercase flex items-center border-b border-black/20 pb-2">
                <Globe className="w-5 h-5 mr-3 text-[#4a6aa6]" /> 互动环节
              </h3>
              <div className="flex overflow-x-auto space-x-5 pb-8 pt-2 snap-x hide-scrollbar">
                 {globalPollData.map(item => <GlobalPollItem key={item.id} item={item} onImageClick={onImageClick} user={user} />)}
              </div>
            </div>
            <div className="space-y-6 pt-6 border-t border-black/10">
              <h3 className="font-mono text-3xl font-black text-black uppercase flex items-center mb-10 mt-6"><span className="w-3 h-3 bg-black mr-4 opacity-30"></span>多区域人像特征详析</h3>
              <div className="space-y-12">
                 <FaceTraitCard {...faceTraitData[0]} onImageClick={onImageClick} />
                 <FaceTraitCard {...faceTraitData[1]} onImageClick={onImageClick} />
                 
                 {/* 东南亚(2人群)和中东(3人群)并排展示，按2:3比例划分实现内部每一列的绝对等宽 */}
                 <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 items-stretch">
                    <div className="lg:col-span-2">
                       <FaceTraitCard {...faceTraitData[2]} onImageClick={onImageClick} />
                    </div>
                    <div className="lg:col-span-3">
                       <FaceTraitCard {...faceTraitData[3]} onImageClick={onImageClick} />
                    </div>
                 </div>

                 <FaceTraitCard {...faceTraitData[4]} onImageClick={onImageClick} />
              </div>
            </div>
          </div>
        )}
        {subTab === 'body' && (
          <div className="space-y-8 animate-in zoom-in-95 duration-500 text-left">
            <div className="mb-6">
              <h3 className="font-mono text-2xl font-black text-black uppercase flex items-center border-b border-black/20 pb-4">
                <span className="w-3 h-3 bg-black mr-3"></span>身型趋势分析
              </h3>
              <div className="mt-6 p-5 bg-[#f8f8f8] border-[1.5px] border-black/10 border-l-4 border-l-black shadow-sm">
                 <p className="font-mono font-bold text-black text-sm mb-2 uppercase tracking-wide">从“完美体态”全面转向“健康状态”</p>
                 <p className="text-xs text-slate-600 leading-relaxed font-medium">在全球“反身材焦虑”与审美多元化的浪潮下，单一严苛的标准正逐渐瓦解。各区域的审美趋势均已显著转向尊重基因差异，塑造出更具生命力的“健康力量体态”。</p>
              </div>
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-5 gap-5">
               <BodyTrendCard 
                 region="北美" 
                 before="过度填充的人工曲线" 
                 after="去BBL化，自然紧实" 
                 beforeImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E4%B9%8B%E5%89%8D.png"
                 afterImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E-%E4%B9%8B%E5%90%8E.png"
                 onImageClick={onImageClick} 
               />
               <BodyTrendCard 
                 region="欧洲" 
                 before="极致骨感的病态纤瘦" 
                 after="舒展自信的真实力量感" 
                 beforeImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E4%B9%8B%E5%89%8D.png"
                 afterImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2-%E4%B9%8B%E5%90%8E.png"
                 onImageClick={onImageClick} 
               />
               <BodyTrendCard 
                 region="东南亚" 
                 before="受韩流影响的白幼瘦" 
                 after="小麦色马甲线少女感" 
                 beforeImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A-%E4%B9%8B%E5%89%8D.png"
                 afterImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A-%E4%B9%8B%E5%90%8E.png"
                 onImageClick={onImageClick} 
               />
               <BodyTrendCard 
                 region="中东" 
                 before="依赖塑形衣的沙漏身材" 
                 after="充满爆发力的强壮身形" 
                 beforeImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C-%E4%B9%8B%E5%89%8D.png"
                 afterImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C-%E4%B9%8B%E5%90%8E.png"
                 onImageClick={onImageClick} 
               />
               <BodyTrendCard 
                 region="拉美" 
                 before="极致夸张的丰满臀腿" 
                 after="高度自律的紧致力量感" 
                 beforeImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E-%E4%B9%8B%E5%89%8D.png"
                 afterImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E-%E4%B9%8B%E5%90%8E.png"
                 onImageClick={onImageClick} 
               />
            </div>
          </div>
        )}
        {subTab === 'makeup_system' && (
          <div className="space-y-8 animate-in zoom-in-95 duration-500 text-left">
            <div className="mb-6">
              <h3 className="font-mono text-2xl font-black text-black uppercase flex items-center border-b border-black/20 pb-4">
                <span className="w-3 h-3 bg-black mr-3"></span>多区域主流妆造体系分析
              </h3>
              <div className="mt-6 p-5 bg-[#f8f8f8] border-[1.5px] border-black/10 border-l-4 border-l-black shadow-sm">
                 <p className="font-mono font-bold text-black text-sm mb-2 uppercase tracking-wide">核心演变：从“统一模版”向“多元原生”进化</p>
                 <p className="text-xs text-slate-600 leading-relaxed font-medium">在全球审美风向的更迭中，各区域的妆造体系正摆脱单一滤镜感。无论是北美的清透肌、欧洲的静奢风，还是中东的清透华丽，都指向了“保留原生纹理、放大独特气场”的全新高度。</p>
              </div>
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-5 gap-5">
               <MakeupSystemCard 
                 region="北美" 
                 topImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E4%B8%BB%E6%B5%81%E5%A6%86%E9%80%A0%E5%A4%B4%E5%9B%BE.png"
                 culture="极度包容多元个性，拒绝厚重面具感。"
                 aestheticTitle="自然感 + 干净裸妆"
                 aestheticDesc="极简底妆透出真实肌理，大面积腮红打造运动后的健康气色。"
                 makeups={[
                    { title: "极简白开水妆", desc: "透气净透底妆，强调皮肤原生感与健康饱满的自然状态。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E7%BE%8E%E5%A6%86%E7%83%AD%E8%AF%8D-1.png" },
                    { title: "Skin-first (轻透无痕)", desc: "做减法不遮瑕，刻意保留雀斑与真实肌理，追求生机感。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E7%BE%8E%E5%A6%86%E7%83%AD%E8%AF%8D-2.png" }
                 ]}
                 hairs={[
                    { title: "流动感高层次", desc: "灵动空气感修剪，修饰脸型并呈现丰盈健康的发量感。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E5%8F%91%E5%9E%8B%E7%83%AD%E8%AF%8D-1.png" },
                    { title: "慵懒随性盘发", desc: "强调毫不费力的松弛感，保留碎发与灵动的流动层次。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%8C%97%E7%BE%8E%E5%8F%91%E5%9E%8B%E7%83%AD%E8%AF%8D-2.png" }
                 ]}
                 onImageClick={onImageClick}
               />
               <MakeupSystemCard 
                 region="欧洲" 
                 topImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2%E4%B8%BB%E6%B5%81%E5%A6%86%E9%80%A0%E5%A4%B4%E5%9B%BE.png"
                 culture="追求低饱和与“高智感”，考究冷淡极简美学。"
                 aestheticTitle="老钱美学 + 精致知性"
                 aestheticDesc="半哑光丝绒底妆，克制色彩运用，弱化眼妆，突出野生毛流感。"
                 makeups={[
                    { title: "静奢老钱妆", desc: "哑光冷调修容，强调骨相立体度，透出智性感与高级距离感。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2%E7%BE%8E%E5%A6%86%E7%83%AD%E8%AF%8D-1%20.png" },
                    { title: "法式柔焦唇", desc: "拒绝尺规般清晰唇线，偏爱边缘晕染的模糊感，展现慵浪浪漫。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2%E7%BE%8E%E5%A6%86%E7%83%AD%E8%AF%8D-2.png" }
                 ]}
                 hairs={[
                    { title: "法式慵懒微卷", desc: "绝无刻意感，追求自然形成的毛糙与微卷，自带文艺电影氛围。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2%E5%8F%91%E5%9E%8B%E7%83%AD%E8%AF%8D-1.png" },
                    { title: "液态直发", desc: "极致的养护呈现，告别毛躁，打造如瀑布般高光泽感的垂顺感。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%AC%A7%E6%B4%B2%E5%8F%91%E5%9E%8B%E7%83%AD%E8%AF%8D-2.png" }
                 ]}
                 onImageClick={onImageClick}
               />
               <MakeupSystemCard 
                 region="东南亚" 
                 topImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E4%B8%BB%E6%B5%81%E5%A6%86%E9%80%A0%E5%A4%B4%E5%9B%BE.png"
                 culture="融合轻泰妆与亚裔辣妹风，兼具立体与明亮肤感。"
                 aestheticTitle="水光通透 + 融合创新"
                 aestheticDesc="适应高温高湿环境，打造宛如天生的清透水感光泽。"
                 makeups={[
                    { title: "Suay Meiku (混血精致)", desc: "完美融合泰式明艳与日式精致，打造“亚洲骨相+欧美立体”的混血感。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E7%BE%8E%E5%A6%86%E7%83%AD%E8%AF%8D-1.png" },
                    { title: "Cloud Skin (云朵肌)", desc: "无惧高温高湿，主打柔雾内敛搭配高显色腮红的透气哑光肌。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E7%BE%8E%E5%A6%86%E7%83%AD%E8%AF%8D-2.png" }
                 ]}
                 hairs={[
                    { title: "Hydro-Bob (水光波波头)", desc: "利落短发叠加微湿润泽质感，巧妙规避毛躁，散发清冷气场。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E5%8F%91%E5%9E%8B%E7%83%AD%E8%AF%8D-1.png" },
                    { title: "Social Shag (空气感层次)", desc: "高层次碎发，通过细碎修剪营造不经意的轻盈呼吸氛围。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%9C%E5%8D%97%E4%BA%9A%E5%8F%91%E5%9E%8B%E7%83%AD%E8%AF%8D-2.png" }
                 ]}
                 onImageClick={onImageClick}
               />
               <MakeupSystemCard 
                 region="中东" 
                 topImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E4%B8%BB%E6%B5%81%E5%A6%86%E9%80%A0%E5%A4%B4%E5%9B%BE.png"
                 culture="以浓郁深邃为核心，追求立体光影的极致华丽反差。"
                 aestheticTitle="浓郁轮廓 + 深邃眼妆"
                 aestheticDesc="告别假面厚重，保留原生高级光泽肌，极致放大眉眼深邃度。"
                 makeups={[
                    { title: "Clean-Glam (清透华丽)", desc: "告别假面厚重，以高完成度的无瑕底妆重塑健康质感，干净且高级。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E7%BE%8E%E5%A6%86%E7%83%AD%E8%AF%8D-1.png" },
                    { title: "Siren Eyes (塞壬之眼)", desc: "视觉中心绝对聚焦眼部。夸张上挑眼线搭配簇状睫毛，释放深邃侵略感。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E7%BE%8E%E5%A6%86%E7%83%AD%E8%AF%8D-2.png" }
                 ]}
                 hairs={[
                    { title: "Museum Tones (博物馆深棕)", desc: "告别强漂染，回归巧克力、冷棕等高质感深色，强调“贵气”与发丝健康。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E5%8F%91%E5%9E%8B%E7%83%AD%E8%AF%8D-1.png" },
                    { title: "Sculpted Pony (雕塑高马尾)", desc: "位置高挑且侧面线条极度利落，凸显强立体骨相与不可冒犯的威严感。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%B8%AD%E4%B8%9C%E5%8F%91%E5%9E%8B%E7%83%AD%E8%AF%8D-2.png" }
                 ]}
                 onImageClick={onImageClick}
               />
               <MakeupSystemCard 
                 region="拉美" 
                 topImg="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E%E4%B8%BB%E6%B5%81%E5%A6%86%E9%80%A0%E5%A4%B4%E5%9B%BE.png"
                 culture="张扬性感并存，极度追求高饱和色彩与节庆光泽感。"
                 aestheticTitle="饱和性感 + 节庆氛围"
                 aestheticDesc="拥抱真实“不完美”，用高饱和度放大阳光健康的生命力。"
                 makeups={[
                    { title: "Sun-kissed Glam (日晒古铜)", desc: "大面积运用暖橘/金棕色系，完美重现“被阳光亲吻过”的热带性感与张力。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E%E7%BE%8E%E5%A6%86%E7%83%AD%E8%AF%8D-1.png" },
                    { title: "Juicy Skin (多汁光泽肌)", desc: "极度追求水润与高光泽度，呈现饱满、紧致且充满生命力的皮肤状态。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E%E7%BE%8E%E5%A6%86%E7%83%AD%E8%AF%8D-2.png" }
                 ]}
                 hairs={[
                    { title: "Glass Hair (玻璃发)", desc: "极致顺滑，追求发丝如玻璃般的高强光线反射效果。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E%E5%8F%91%E5%9E%8B%E7%83%AD%E8%AF%8D-1.png" },
                    { title: "Natural Waves (自然波浪卷)", desc: "强调毫不做作的天然卷曲度与弹性，散发自由奔放的野性生命力。", img: "https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%8B%89%E7%BE%8E%E5%8F%91%E5%9E%8B%E7%83%AD%E8%AF%8D-2.png" }
                 ]}
                 onImageClick={onImageClick}
               />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function FaceTraitCard({ region, races, onImageClick }) {
  const gridColsClass = {
    2: 'lg:grid-cols-2',
    3: 'lg:grid-cols-3',
    4: 'lg:grid-cols-4',
    5: 'lg:grid-cols-5'
  }[races.length] || 'lg:grid-cols-1';

  return (
    <div className="border-[1.5px] border-black/10 bg-white hover:border-black/30 transition-all duration-300 shadow-[4px_4px_0_0_rgba(0,0,0,0.03)] group/main h-full flex flex-col">
      <div className="bg-slate-50/70 py-4 px-6 border-b border-black/10 flex items-center justify-between">
         <span className="font-mono font-black text-black text-lg uppercase tracking-tight flex items-center">
           <span className="w-2 h-2 bg-black mr-3"></span>{region}地区 · 面部特征分析
         </span>
         <span className="font-mono text-[10px] font-bold text-slate-500 border border-slate-300 bg-white px-2 py-1 uppercase tracking-widest shadow-sm">核心人群构成</span>
      </div>
      
      <div className={`grid grid-cols-1 ${gridColsClass} divide-y lg:divide-y-0 lg:divide-x divide-black/10 text-left flex-1`}>
        {races.map((race, idx) => (
          <div key={idx} className="flex flex-col group/race hover:bg-slate-50/40 transition-colors duration-500">
            {/* 顶部主图区域 */}
            <div className="p-4 border-b border-black/5 bg-[#f8f8f8]">
               <PhotoPlaceholder 
                 className="w-full aspect-[4/3] !p-0 !border-black/15 shadow-sm bg-white" 
                 imgClassName="object-contain w-full h-full !opacity-100 !mix-blend-normal group-hover/race:scale-[1.03] transition-transform duration-700" 
                 text={`${race.name} 面部参考`} 
                 src={race.faceImg}
                 onClick={onImageClick}
               />
            </div>
            
            <div className="p-6 flex flex-col flex-1">
              {/* 人群与占比 */}
              <div className="text-center mb-6">
                <h4 className="font-mono font-black text-black text-sm uppercase tracking-tight">{race.name}</h4>
                <div className="inline-block mt-2 px-3 py-1 border border-black/10 bg-white text-[10px] font-mono font-bold text-slate-500 uppercase tracking-widest shadow-[2px_2px_0_0_rgba(0,0,0,0.05)]">
                  占比: <span className="text-black ml-1">{race.percent}</span>
                </div>
              </div>
              
              {/* 核心特征分析 (强对齐) */}
              <div className="space-y-5 text-left mb-8 flex-1">
                <div className="space-y-2 min-h-[72px]">
                  <span className="flex items-center text-[10px] font-mono font-bold text-[#4a6aa6] uppercase tracking-widest"><Sparkles className="w-3 h-3 mr-1.5"/> 颜值基因</span>
                  <p className="text-[11.5px] text-slate-600 font-medium leading-relaxed">{race.genes}</p>
                </div>
                <div className="space-y-2 min-h-[72px]">
                  <span className="flex items-center text-[10px] font-mono font-bold text-red-700/70 uppercase tracking-widest"><Activity className="w-3 h-3 mr-1.5"/> 身材特征</span>
                  <p className="text-[11.5px] text-slate-600 font-medium leading-relaxed">{race.body}</p>
                </div>
                <div className="space-y-2 min-h-[72px]">
                  <span className="flex items-center text-[10px] font-mono font-bold text-orange-600/80 uppercase tracking-widest"><Palette className="w-3 h-3 mr-1.5"/> 审美内核</span>
                  <p className="text-[11.5px] text-slate-600 font-medium leading-relaxed">{race.vibe}</p>
                </div>
              </div>

              {/* 博主/明星案例 */}
              {race.influencerName && (
                <div className="pt-5 border-t border-black/5 mt-auto">
                   <PhotoPlaceholder 
                     className="w-full aspect-video !p-0 !border-black/15 shadow-sm mb-3 bg-[#f8f8f8]" 
                     imgClassName="object-contain w-full h-full !opacity-100 !mix-blend-normal group-hover/race:scale-105 transition-transform duration-700" 
                     text="代表人物参考" 
                     src={race.influencerImg}
                     onClick={onImageClick}
                   />
                   <div className="h-[72px] flex flex-col justify-start">
                     {race.influencerLink ? (
                       <a href={race.influencerLink} target="_blank" rel="noopener noreferrer" className="text-[11.5px] text-[#4a6aa6] font-black mb-1 leading-snug line-clamp-2 hover:underline decoration-[1.5px] underline-offset-2">
                         {race.influencerName}
                       </a>
                     ) : (
                       <p className="text-[11.5px] text-[#4a6aa6] font-black mb-1 leading-snug line-clamp-2">{race.influencerName}</p>
                     )}
                     <p className="text-[10.5px] text-slate-500 font-medium leading-relaxed line-clamp-2">{race.influencerDesc}</p>
                   </div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function BodyTrendCard({ region, before, after, beforeImg, afterImg, onImageClick }) {
  return (
    <div className="bg-white border-[1.5px] border-black/20 flex flex-col hover:border-black transition-all duration-300 h-full">
      <div className="bg-slate-50 py-3 font-mono font-black text-black text-center text-sm border-b border-black/20 uppercase tracking-widest">{region}</div>
      <div className="p-3 flex-1 flex flex-col space-y-3 text-left">
        <div className="border border-black/20 p-3 bg-white flex flex-col flex-1">
           <div className="mb-2">
             <span className="font-mono text-[10px] font-bold text-slate-400 block mb-1 tracking-widest uppercase">过去趋势</span>
             <p className="text-xs text-slate-500 font-medium line-through decoration-slate-300">{before}</p>
           </div>
           <PhotoPlaceholder 
             className={`w-full bg-slate-50 !border-black/10 text-slate-400 mt-auto !p-0 overflow-hidden ${!beforeImg ? 'min-h-[160px] flex-1' : ''}`} 
             imgClassName="object-contain w-full !h-auto !opacity-100 !mix-blend-normal block" 
             text="过去" 
             src={beforeImg} 
             onClick={onImageClick} 
           />
        </div>
        <div className="border-[1.5px] border-black p-3 bg-slate-50 flex-1 flex flex-col relative overflow-hidden shadow-inner">
           <div className="mb-2">
             <span className="font-mono text-[10px] font-bold text-black block mb-1 tracking-widest uppercase">当前趋势</span>
             <p className="text-[13px] text-black font-black leading-relaxed">{after}</p>
           </div>
           <PhotoPlaceholder 
             className={`w-full bg-white !border-black/10 text-slate-400 mt-auto !p-0 overflow-hidden ${!afterImg ? 'min-h-[160px] flex-1' : ''}`} 
             imgClassName="object-contain w-full !h-auto !opacity-100 !mix-blend-normal block" 
             text="现在" 
             src={afterImg} 
             onClick={onImageClick} 
           />
        </div>
      </div>
    </div>
  );
}

function InsCard({ region, flag, style, tone, vibe, imgCount = 4, images = [], onImageClick }) {
  return (
    <div className="bg-white p-6 border-[1.5px] border-black/15 flex flex-col h-full hover:border-black/40 hover:shadow-[8px_8px_0_0_rgba(0,0,0,0.06)] hover:-translate-y-1 transition-all duration-500 group rounded-2xl">
      <div className="flex justify-between items-center mb-6 pb-3 border-b border-black/5">
        <span className="font-mono font-black text-lg tracking-tight uppercase text-slate-800 group-hover:text-[#4a6aa6] transition-colors">{region}</span>
        <span className="text-[11px] font-bold text-slate-500 bg-slate-50 border border-slate-200 px-2.5 py-0.5 rounded-sm shadow-sm">{flag}</span>
      </div>
      
      {/* 全新重构的 Moodboard 拼图排版 */}
      <div className="flex flex-col gap-2 mb-7">
        {images && images.length > 0 ? (
          <>
            <PhotoPlaceholder 
              key={0} 
              className="w-full aspect-[16/10] !border-none !p-0 rounded-lg overflow-hidden bg-slate-50 relative" 
              imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal block hover:scale-105 transition-transform duration-700" 
              src={images[0]} 
              onClick={onImageClick} 
            />
            <div className="grid grid-cols-3 gap-2">
              {images.slice(1, 4).map((src, i) => (
                <PhotoPlaceholder 
                  key={i + 1} 
                  className="w-full aspect-square !border-none !p-0 rounded-lg overflow-hidden bg-slate-50 relative" 
                  imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal block hover:scale-110 transition-transform duration-700" 
                  src={src} 
                  onClick={onImageClick} 
                />
              ))}
            </div>
          </>
        ) : (
          [...Array(imgCount)].map((_, i) => <PhotoPlaceholder key={i} className="aspect-[3/4] w-full !h-auto !border-none bg-slate-50 rounded-lg" text="参考" />)
        )}
      </div>
      
      <div className="mt-auto flex flex-col">
        <div className="inline-block font-mono text-[11px] font-bold text-[#4a6aa6] border border-[#4a6aa6]/30 bg-[#4a6aa6]/5 px-3 py-1.5 mb-5 rounded-md tracking-widest uppercase w-fit shadow-sm">
          ✨ {style}
        </div>
        <div className="space-y-4 border-t border-black/5 pt-5 text-left text-[13px] font-medium text-slate-600">
          <div className="group/item">
            <span className="text-slate-400 block mb-1.5 uppercase tracking-widest font-mono text-[10px] flex items-center">
              <span className="w-1 h-1 rounded-full bg-slate-300 mr-1.5 group-hover/item:bg-[#4a6aa6] transition-colors"></span>
              色调与场景
            </span>
            <p className="leading-relaxed">{tone}</p>
          </div>
          <div className="group/item">
            <span className="text-slate-400 block mb-1.5 uppercase tracking-widest font-mono text-[10px] flex items-center">
              <span className="w-1 h-1 rounded-full bg-slate-300 mr-1.5 group-hover/item:bg-[#4a6aa6] transition-colors"></span>
              氛围感
            </span>
            <p className="leading-relaxed">{vibe}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function ExpandableText({ title, desc }) {
  const [isExpanded, setIsExpanded] = useState(false);
  return (
    <div 
      className="flex flex-col cursor-pointer group/expand" 
      onClick={() => setIsExpanded(!isExpanded)}
    >
      {/* 增加 min-h-[38px] 以兼容单行和双行文字的高度差异，确保外部卡片实现绝对的横向像素级对齐 */}
      <div className="flex justify-between items-start min-h-[38px]">
        <p className="text-[12px] text-[#4a6aa6] font-black leading-snug group-hover/expand:text-black transition-colors pr-2 line-clamp-2">{title}</p>
        <div className="mt-0.5 shrink-0 transition-transform duration-300" style={{ transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }}>
          <ChevronDown className="w-3 h-3 text-slate-400 group-hover/expand:text-black transition-colors" />
        </div>
      </div>
      <div className={`grid transition-all duration-300 ease-in-out ${isExpanded ? 'grid-rows-[1fr] opacity-100 mt-1' : 'grid-rows-[0fr] opacity-0 mt-0'}`}>
        <div className="overflow-hidden">
           <p className="text-[11px] text-slate-500 font-medium leading-relaxed text-justify pb-1">{desc}</p>
        </div>
      </div>
    </div>
  );
}

function MakeupSystemCard({ region, topImg, culture, aestheticTitle, aestheticDesc, makeups, hairs, onImageClick }) {
  return (
    <div className="bg-white border-[1.5px] border-black/10 flex flex-col hover:border-black/30 transition-all duration-300 h-full group/sys">
      {/* 顶部区域 Header */}
      <div className="bg-slate-50/50 py-3 font-mono font-black text-black text-center text-[15px] border-b border-black/10 uppercase tracking-widest">
        {region}
      </div>
      
      <div className="flex-1 flex flex-col">
        {/* 第一部分：视觉基调 & 核心理念区 */}
        <div className="p-5 flex flex-col border-b border-black/10 bg-white">
          <PhotoPlaceholder 
            className="w-full aspect-[3/2] !border-black/15 shadow-sm bg-white mb-5 !p-0" 
            imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal block" 
            text="视觉基调" 
            src={topImg} 
            onClick={onImageClick} 
          />
          <div className="text-left flex flex-col">
            <div className="space-y-1.5 mb-4 min-h-[76px]">
              <span className="font-mono text-[10px] font-bold text-slate-400 block tracking-widest uppercase">文化差异</span>
              <p className="text-[11px] text-slate-600 font-medium leading-relaxed">{culture}</p>
            </div>
            <div className="space-y-1.5 min-h-[120px]">
              <span className="font-mono text-[10px] font-bold text-slate-400 block tracking-widest uppercase">妆容审美特征</span>
              <p className="text-[13px] text-black font-black leading-snug">{aestheticTitle}</p>
              <p className="text-[11px] text-slate-600 font-medium leading-relaxed">{aestheticDesc}</p>
            </div>
          </div>
        </div>

        {/* 第二部分：美妆热词区 */}
        <div className="p-5 flex flex-col border-b border-black/10 bg-white text-left">
           <div className="mb-5">
             <span className="font-mono text-[10px] font-bold text-black border border-black/20 px-2 py-1 tracking-widest uppercase shadow-sm">2026 美妆热词</span>
           </div>
           <div className="flex flex-col gap-6">
             {makeups.map((item, idx) => (
               <div key={`m-${idx}`} className="flex flex-col">
                 <PhotoPlaceholder 
                   className="w-full aspect-[3/2] !border-black/15 shadow-sm bg-white !p-0 mb-3" 
                   imgClassName="object-contain w-full h-full !opacity-100 !mix-blend-normal block" 
                   text="美妆趋势图解" 
                   src={item.img} 
                   onClick={onImageClick} 
                 />
                 <ExpandableText title={item.title} desc={item.desc} />
               </div>
             ))}
           </div>
        </div>

        {/* 第三部分：发型热词区 */}
        <div className="p-5 flex flex-col bg-white text-left mt-auto">
           <div className="mb-5">
             <span className="font-mono text-[10px] font-bold text-black border border-black/20 px-2 py-1 tracking-widest uppercase shadow-sm">2026 发型热词</span>
           </div>
           <div className="flex flex-col gap-6">
             {hairs.map((item, idx) => (
               <div key={`h-${idx}`} className="flex flex-col">
                 <PhotoPlaceholder 
                   className="w-full aspect-[3/2] !border-black/15 shadow-sm bg-white !p-0 mb-3" 
                   imgClassName="object-contain w-full h-full !opacity-100 !mix-blend-normal block" 
                   text="发型趋势图解" 
                   src={item.img} 
                   onClick={onImageClick} 
                 />
                 <ExpandableText title={item.title} desc={item.desc} />
               </div>
             ))}
           </div>
        </div>

      </div>
    </div>
  );
}

function EventsSection({ onImageClick }) {
  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-700 ease-out text-left">
      <header className="relative border-b border-black/20 pb-4">
        <h2 className="font-mono text-4xl font-black text-black tracking-tighter uppercase">04 / 多区域代表性活动赛事及活动妆造</h2>
        <p className="font-mono text-slate-500 mt-2 text-sm tracking-widest uppercase">标志性节点与活动妆造日历</p>
      </header>
      <div className="bg-white border-[1.5px] border-black/20 p-8 min-h-[500px] relative shadow-[4px_4px_0_0_rgba(0,0,0,0.05)]">
         <div className="mb-8">
            <h3 className="font-mono text-2xl font-black text-black uppercase flex items-center border-b border-black/20 pb-4">
              <span className="w-3 h-3 bg-black mr-3"></span>国际赛事妆造时间轴
            </h3>
            <p className="text-xs text-slate-500 mt-4 leading-relaxed font-medium bg-slate-50 p-4 border border-black/10 border-l-4 border-l-black shadow-sm">
              严格按照世界时间轴（1月-12月）列举全球范围内最具社媒流量（TikTok/Instagram）、最能带动美妆/服饰/电商消费，以及最具文化视觉反差感的标志性节点。
            </p>
         </div>
         
         <div className="w-full border-[1.5px] border-black/20 overflow-x-auto hide-scrollbar bg-white shadow-sm">
           <div className="min-w-[1400px] flex flex-col">
             {/* Header */}
             <div className="flex bg-slate-50 border-b-[1.5px] border-black/20 text-center font-mono text-[13px] font-black uppercase tracking-widest text-slate-800 sticky top-0 z-10">
                <div className="w-20 shrink-0 border-r-[1.5px] border-black/20 py-4 flex items-center justify-center">月份</div>
                <div className="flex-1 border-r-[1.5px] border-black/20 py-4 flex items-center justify-center gap-2"><span className="text-lg drop-shadow-sm">🇺🇸</span> 北美</div>
                <div className="flex-1 border-r-[1.5px] border-black/20 py-4 flex items-center justify-center gap-2"><span className="text-lg drop-shadow-sm">🇪🇺</span> 欧洲</div>
                <div className="flex-1 border-r-[1.5px] border-black/20 py-4 flex items-center justify-center gap-2"><span className="text-lg drop-shadow-sm">🇹🇭</span> 东南亚</div>
                <div className="flex-1 border-r-[1.5px] border-black/20 py-4 flex items-center justify-center gap-2"><span className="text-lg drop-shadow-sm">🇦🇪</span> 中东</div>
                <div className="flex-1 py-4 flex items-center justify-center gap-2"><span className="text-lg drop-shadow-sm">🇧🇷</span> 拉美</div>
             </div>
             {/* Rows */}
             {eventsData.map((row, idx) => (
                <div key={idx} className="flex border-b border-black/10 group/row hover:bg-slate-50/40 transition-colors duration-500">
                   <div className="w-20 shrink-0 border-r border-black/10 flex items-center justify-center font-mono font-black text-sm text-slate-800 bg-slate-50/50">
                      【{row.month}】
                   </div>
                   
                   {/* 针对特殊行处理：跨列 */}
                   {row.specialEvent ? (
                     row.specialEvent.fullRow ? (
                        <div className="flex-1 flex flex-col w-full justify-center">
                           {/* 隐形网格，强行保证图片宽度精准对齐上方的第一列 */}
                           <div className="flex w-full">
                              <div className="flex-1 p-5 pb-3">
                                 <div className="flex flex-col group/event">
                                   <PhotoPlaceholder 
                                     className="w-full aspect-[16/9] !border-black/20 shadow-sm bg-[#f8f8f8] transition-all duration-500 group-hover/event:border-black/40 group-hover/event:shadow-md group-hover/event:-translate-y-1" 
                                     imgClassName="object-cover object-center w-full h-full !opacity-100 !mix-blend-normal block" 
                                     text={row.specialEvent.title} 
                                     src={row.specialEvent.img} 
                                     onClick={onImageClick} 
                                   />
                                 </div>
                              </div>
                              <div className="flex-1"></div>
                              <div className="flex-1"></div>
                              <div className="flex-1"></div>
                              <div className="flex-1"></div>
                           </div>
                           {/* 底部横向跨行的文本说明区 */}
                           <div className="w-full px-5 pb-5">
                             {row.specialEvent.inlineText ? (
                                 <div className="text-[13px] text-slate-600 leading-relaxed text-left">
                                     <span className="font-bold text-slate-800">{row.specialEvent.title}</span>{row.specialEvent.desc}
                                 </div>
                             ) : (
                                 <div className="text-left">
                                     <h4 className="text-[13px] font-black text-slate-800 mb-2 leading-snug">{row.specialEvent.title}</h4>
                                     <p className="text-[11px] text-slate-500 leading-relaxed text-justify">{row.specialEvent.desc}</p>
                                 </div>
                             )}
                           </div>
                        </div>
                     ) : (
                       <>
                          <div className="flex-[2] border-r border-black/10 p-5 flex flex-col gap-6">
                             {/* 欧洲的常规赛事 (如啤酒节) 如果有，先渲染在上面 */}
                             {row.eu && row.eu.length > 0 && (
                                 <div className="flex flex-col group/event w-1/2 ml-auto pl-2.5 pb-4 border-b border-black/5">
                                    <PhotoPlaceholder className="w-full aspect-[16/9] !border-black/20 shadow-sm bg-[#f8f8f8] mb-3 transition-all duration-500 group-hover/event:border-black/40 group-hover/event:shadow-md group-hover/event:-translate-y-1" imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal block" text="赛事画面" src={row.eu[0].img} onClick={onImageClick} />
                                    <h4 className="text-[13px] font-black text-slate-800 mb-1.5 leading-snug group-hover/event:text-[#4a6aa6] transition-colors">{row.eu[0].title}</h4>
                                    <p className="text-[11px] text-slate-500 leading-relaxed text-justify">{row.eu[0].desc}</p>
                                 </div>
                             )}
                             
                             {/* 特殊大横幅卡片 (横跨两列) */}
                             {row.specialEvent && (
                                <div className="flex flex-col group/event">
                                  <PhotoPlaceholder 
                                    className={`${row.specialEvent.imgClass || 'w-full aspect-[2.5/1]'} !border-black/20 shadow-sm bg-[#f8f8f8] mb-4 transition-all duration-500 group-hover/event:border-black/40 group-hover/event:shadow-md group-hover/event:-translate-y-1`} 
                                    imgClassName={`${row.specialEvent.imgInnerClass || 'object-cover object-center w-full h-full'} !opacity-100 !mix-blend-normal block`} 
                                    text={row.specialEvent.title} 
                                    src={row.specialEvent.img} 
                                    onClick={onImageClick} 
                                  />
                                  {row.specialEvent.inlineText ? (
                                      <div className="text-[13px] text-slate-600 leading-relaxed mt-1 text-left">
                                          <span className="font-bold text-slate-800">{row.specialEvent.title}</span>{row.specialEvent.desc}
                                      </div>
                                  ) : (
                                      <>
                                          <h4 className="text-[13px] font-black text-slate-800 mb-2 leading-snug group-hover/event:text-[#4a6aa6] transition-colors">{row.specialEvent.title}</h4>
                                          <p className="text-[11px] text-slate-500 leading-relaxed text-justify">{row.specialEvent.desc}</p>
                                      </>
                                  )}
                                </div>
                             )}
                          </div>
                          {/* 东南亚、中东、拉美 正常占位 */}
                          {[row.sea, row.me, row.latam].map((regionData, cIdx) => (
                            <div key={cIdx} className={`flex-1 p-5 flex flex-col gap-6 ${cIdx < 2 ? 'border-r border-black/10' : ''}`}>
                               <div className="flex-1 flex items-center justify-center h-full min-h-[140px] opacity-40 group-hover/row:opacity-60 transition-opacity"><span className="text-slate-300 font-mono font-light text-2xl italic">/</span></div>
                            </div>
                          ))}
                       </>
                     )
                   ) : (
                     /* 正常月份的渲染逻辑 */
                     [row.na, row.eu, row.sea, row.me, row.latam].map((regionData, cIdx) => (
                        <div key={cIdx} className={`flex-1 p-5 flex flex-col gap-6 ${cIdx < 4 ? 'border-r border-black/10' : ''}`}>
                           {regionData.length > 0 ? (
                              regionData.map((event, eIdx) => (
                                 <div key={eIdx} className="flex flex-col group/event h-full">
                                    <PhotoPlaceholder 
                                      className="w-full aspect-[16/9] !border-black/20 shadow-sm bg-[#f8f8f8] mb-4 transition-all duration-500 group-hover/event:border-black/40 group-hover/event:shadow-md group-hover/event:-translate-y-1" 
                                      imgClassName="object-cover w-full h-full !opacity-100 !mix-blend-normal block"
                                      text="赛事画面" 
                                      src={event.img}
                                      onClick={onImageClick} 
                                    />
                                    <h4 className="text-[13px] font-black text-slate-800 mb-2 leading-snug group-hover/event:text-[#4a6aa6] transition-colors">{event.title}</h4>
                                    <p className="text-[11px] text-slate-500 leading-relaxed text-justify">{event.desc}</p>
                                 </div>
                              ))
                           ) : (
                              <div className="flex-1 flex items-center justify-center h-full min-h-[140px] opacity-40 group-hover/row:opacity-60 transition-opacity">
                                 <span className="text-slate-300 font-mono font-light text-2xl italic">/</span>
                              </div>
                           )}
                        </div>
                     ))
                   )}
                </div>
             ))}
           </div>
         </div>
      </div>
    </div>
  );
}

function FutureTrendSection({ onImageClick }) {
  return (
    <div className="space-y-10 animate-in fade-in slide-in-from-bottom-8 duration-700 ease-out text-left">
      <header className="relative border-b border-black/20 pb-4">
        <h2 className="font-mono text-4xl font-black text-black tracking-tighter uppercase">05 / 跨文化审美融合与未来趋势</h2>
        <p className="font-mono text-slate-600 mt-4 text-sm font-medium leading-relaxed max-w-5xl">
          在全球化与社交媒体的催化下，单一地域的“刻板印象”正被打破。<br />
          未来的视觉审美趋势不再是单纯的“地理划分”，而是在尊重文化边界的前提下“<span className="text-black font-bold border-b border-black">打破地域壁垒</span>”、“<span className="text-black font-bold border-b border-black">走向跨文化融合</span>”
        </p>
      </header>

      {/* 1. 跨文化界限与生成盲区 */}
      <div className="space-y-6">
        <h3 className="font-mono text-2xl font-black text-[#4a6aa6] flex items-center">
          <span className="text-2xl mr-2">1.</span> 跨文化界限与生成盲区
        </h3>
        <div className="w-full bg-white border-[1.5px] border-black/20 shadow-[4px_4px_0_0_rgba(0,0,0,0.05)] overflow-hidden flex flex-col">
          {/* Header */}
          <div className="flex border-b-[1.5px] border-black/20 bg-slate-50">
            <div className="w-[500px] shrink-0 border-r-[1.5px] border-black/20 p-4 font-mono font-black text-[13px] text-center flex items-center justify-center text-slate-800">核心雷区 (痛点)</div>
            <div className="flex-1 p-4 font-mono font-black text-[14px] text-center flex items-center justify-center border-r-[1.5px] border-black/20"><span className="mr-2 text-red-600 text-lg">❌</span><span className="text-slate-800">生成误区</span></div>
            <div className="flex-1 p-4 font-mono font-black text-[14px] text-center flex items-center justify-center"><span className="mr-2 text-green-600 text-lg">✅</span><span className="text-slate-800">真实多样性</span></div>
          </div>
          
          {/* Row 1 */}
          <div className="flex border-b-[1.5px] border-black/20 group/row hover:bg-slate-50/50 transition-colors">
            <div className="w-[180px] shrink-0 border-r-[1.5px] border-black/20 p-5 flex flex-col items-center justify-center text-center bg-slate-50/30">
              <div className="font-black text-[13px] mb-2 flex items-center text-slate-800"><span className="mr-1 text-lg">💣</span> 穆斯林服饰“伪合规”</div>
              <div className="text-[10px] text-slate-500 font-mono tracking-widest leading-relaxed">(头巾不合规、长相刻板同质化)</div>
            </div>
            <div className="w-[320px] shrink-0 border-r-[1.5px] border-black/20 p-4 flex flex-col justify-center space-y-2 text-[12px] bg-white">
              <div className="group/item flex flex-col p-3 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="font-bold text-[#4a6aa6] mb-1 flex items-center group-hover/item:translate-x-1 transition-transform">
                  <span className="mr-1.5 text-[14px]">•</span>露肤红线
                </span>
                <span className="text-slate-600 leading-relaxed group-hover/item:translate-x-1 group-hover/item:text-slate-800 transition-all delay-75">当附加“颈部饰品”等词时，AI极易穿模暴露颈部或锁骨</span>
              </div>
              <div className="group/item flex flex-col p-3 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="font-bold text-[#4a6aa6] mb-1 flex items-center group-hover/item:translate-x-1 transition-transform">
                  <span className="mr-1.5 text-[14px]">•</span>告别同质化
                </span>
                <span className="text-slate-600 leading-relaxed group-hover/item:translate-x-1 group-hover/item:text-slate-800 transition-all delay-75">拒绝千篇一律的“浓颜大眼AI脸”，需引入更真实的地域性面部特征</span>
              </div>
            </div>
            <div className="flex-1 border-r-[1.5px] border-black/20 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder text="生成误区" className="w-full h-full min-h-[140px] !border-black/10" onClick={onImageClick} src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E7%A9%86%E6%96%AF%E6%9E%97%E9%94%99%E8%AF%AF%E5%9B%BE.png" imgClassName="object-contain w-full h-full" />
            </div>
            <div className="flex-1 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder text="真实多样性" className="w-full h-full min-h-[140px] !border-black/10" onClick={onImageClick} src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E7%A9%86%E6%96%AF%E6%9E%97%E6%AD%A3%E9%9D%A2%E5%9B%BE.png" imgClassName="object-contain w-full h-full" />
            </div>
          </div>

          {/* Row 2 */}
          <div className="flex border-b-[1.5px] border-black/20 group/row hover:bg-slate-50/50 transition-colors">
            <div className="w-[180px] shrink-0 border-r-[1.5px] border-black/20 p-5 flex flex-col items-center justify-center text-center bg-slate-50/30">
              <div className="font-black text-[13px] mb-2 flex items-center text-slate-800"><span className="mr-1 text-lg">💣</span> 亚洲肤色“一刀切”</div>
              <div className="text-[10px] text-slate-500 font-mono tracking-widest leading-relaxed">(肤色还原度低，地域辨识度低)</div>
            </div>
            <div className="w-[320px] shrink-0 border-r-[1.5px] border-black/20 p-4 flex flex-col justify-center space-y-1 text-[12px] bg-white">
              <div className="font-bold text-slate-800 mb-2 border-b border-black/10 pb-1.5 px-2 w-fit flex items-center">
                <Sparkles className="w-3 h-3 mr-1.5 text-[#4a6aa6]" /> 打破刻板印象
              </div>
              <div className="group/item flex items-start p-2.5 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="mr-2.5 text-sm group-hover/item:scale-125 transition-transform origin-center">🇰🇷</span>
                <div className="flex flex-col group-hover/item:translate-x-1 transition-transform">
                  <span className="font-bold text-slate-800 mb-0.5">东亚 (如韩国)</span>
                  <span className="text-slate-500 leading-relaxed group-hover/item:text-slate-700 transition-colors">偏爱冷白/水光肌，肤质干净</span>
                </div>
              </div>
              <div className="group/item flex items-start p-2.5 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="mr-2.5 text-sm group-hover/item:scale-125 transition-transform origin-center">🇹🇭</span>
                <div className="flex flex-col group-hover/item:translate-x-1 transition-transform">
                  <span className="font-bold text-slate-800 mb-0.5">东南亚 (如泰国)</span>
                  <span className="text-slate-500 leading-relaxed group-hover/item:text-slate-700 transition-colors">暖调小麦/深象牙色，注重野生毛流感与立体骨相</span>
                </div>
              </div>
              <div className="group/item flex items-start p-2.5 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="mr-2.5 text-sm group-hover/item:scale-125 transition-transform origin-center">🇮🇳</span>
                <div className="flex flex-col group-hover/item:translate-x-1 transition-transform">
                  <span className="font-bold text-slate-800 mb-0.5">南亚 (如印度)</span>
                  <span className="text-slate-500 leading-relaxed group-hover/item:text-slate-700 transition-colors">深棕褐/深棕色，强调深邃轮廓与浓艳五官量感</span>
                </div>
              </div>
            </div>
            <div className="flex-1 border-r-[1.5px] border-black/20 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder text="生成误区" className="w-full h-full min-h-[140px] !border-black/10" onClick={onImageClick} src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%BA%9A%E6%B4%B2%E8%82%A4%E8%89%B2%E4%B8%80%E5%88%80%E5%88%87%E9%94%99%E8%AF%AF.png" imgClassName="object-contain w-full h-full" />
            </div>
            <div className="flex-1 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder text="真实多样性" className="w-full h-full min-h-[140px] !border-black/10" onClick={onImageClick} src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%BA%9A%E6%B4%B2%E8%82%A4%E8%89%B2%E4%B8%80%E5%88%80%E5%88%87%E6%AD%A3%E7%A1%AE.png" imgClassName="object-contain w-full h-full" />
            </div>
          </div>

          {/* Row 3 */}
          <div className="flex group/row hover:bg-slate-50/50 transition-colors">
            <div className="w-[180px] shrink-0 border-r-[1.5px] border-black/20 p-5 flex flex-col items-center justify-center text-center bg-slate-50/30">
              <div className="font-black text-[13px] mb-2 flex items-center text-slate-800"><span className="mr-1 text-lg">💣</span> 文化挪用与常识幻觉</div>
              <div className="text-[10px] text-slate-500 font-mono tracking-widest mt-1"><span className="border-b-[2px] border-yellow-400 pb-0.5">(元素乱炖、场景穿帮)</span></div>
            </div>
            <div className="w-[320px] shrink-0 border-r-[1.5px] border-black/20 p-4 flex flex-col justify-center space-y-2 text-[12px] bg-white">
              <div className="group/item flex flex-col p-3 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="font-bold text-[#4a6aa6] mb-1 flex items-center group-hover/item:translate-x-1 transition-transform">
                  <span className="mr-1.5 text-[14px]">•</span>宗教元素
                </span>
                <span className="text-slate-600 leading-relaxed group-hover/item:translate-x-1 group-hover/item:text-slate-800 transition-all delay-75">相关元素错误（如亡灵节“亡灵面包”Pan de Muerto有误）</span>
              </div>
              <div className="group/item flex flex-col p-3 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="font-bold text-[#4a6aa6] mb-1 flex items-center group-hover/item:translate-x-1 transition-transform">
                  <span className="mr-1.5 text-[14px]">•</span>场景/物理常识穿帮
                </span>
                <span className="text-slate-600 leading-relaxed group-hover/item:translate-x-1 group-hover/item:text-slate-800 transition-all delay-75">测试相关赛事与地标建筑（如“篮球赛事道具生成有误” / 麦迪逊广场花园内部场景生成有误）</span>
              </div>
            </div>
            <div className="flex-1 border-r-[1.5px] border-black/20 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder text="生成误区" className="w-full h-full min-h-[140px] !border-black/10" onClick={onImageClick} src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%96%87%E5%8C%96%E6%8C%AA%E7%94%A8-%E9%94%99%E8%AF%AF.png" imgClassName="object-contain w-full h-full" />
            </div>
            <div className="flex-1 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder text="真实多样性" className="w-full h-full min-h-[140px] !border-black/10" onClick={onImageClick} src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E6%96%87%E5%8C%96%E6%8C%AA%E7%94%A8-%E6%AD%A3%E7%A1%AE.png" imgClassName="object-contain w-full h-full" />
            </div>
          </div>
        </div>
      </div>

      {/* 2. 全球人像审美融合 */}
      <div className="space-y-6 pt-8">
        <h3 className="font-mono text-2xl font-black text-[#4a6aa6] flex items-center">
          <span className="mr-2">2.</span> 全球人像审美融合趋势
        </h3>
        
        <div className="w-full bg-white border-[1.5px] border-black/20 shadow-[4px_4px_0_0_rgba(0,0,0,0.05)] overflow-hidden flex flex-col">
          {/* Header */}
          <div className="flex border-b-[1.5px] border-black/20 bg-slate-50">
            <div className="w-[180px] shrink-0 border-r-[1.5px] border-black/20 p-4 font-mono font-black text-[13px] text-center flex items-center justify-center text-slate-800">核心趋势</div>
            <div className="w-[320px] shrink-0 border-r-[1.5px] border-black/20 p-4"></div>
            <div className="flex-1 p-4 font-mono font-black text-[13px] text-center flex items-center justify-center border-r-[1.5px] border-black/20 text-slate-800">美学洞察 1</div>
            <div className="flex-1 p-4 font-mono font-black text-[13px] text-center flex items-center justify-center text-slate-800">美学洞察 2</div>
          </div>

          {/* Row 1 */}
          <div className="flex border-b-[1.5px] border-black/20 group/row hover:bg-slate-50/50 transition-colors">
            <div className="w-[180px] shrink-0 border-r-[1.5px] border-black/20 p-5 flex flex-col items-center justify-center text-center bg-slate-50/30">
              <div className="font-black text-[14px] mb-2 text-slate-800">高奢风向标</div>
              <div className="text-[11px] text-slate-500 font-mono tracking-widest leading-relaxed italic font-medium">(打破常规人像美学)</div>
            </div>
            <div className="w-[320px] shrink-0 border-r-[1.5px] border-black/20 p-4 flex flex-col justify-center space-y-2 text-[12px] bg-white">
              <div className="group/item flex flex-col p-3 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="font-bold text-slate-800 mb-1 flex items-center group-hover/item:translate-x-1 transition-transform">
                  <span className="text-[#4a6aa6] mr-1.5 text-[14px]">•</span>“无国界骨相”
                </span>
                <span className="text-slate-600 leading-relaxed group-hover/item:translate-x-1 group-hover/item:text-slate-800 transition-all delay-75">像 Louis Vuitton、Dior 这些顶奢品牌，越来越偏爱具有明显高颧骨/明显下颌线的立体骨相</span>
              </div>
              <div className="group/item flex flex-col p-3 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="font-bold text-slate-800 mb-1 flex items-center group-hover/item:translate-x-1 transition-transform">
                  <span className="text-[#4a6aa6] mr-1.5 text-[14px]">•</span>异世感与建模脸
                </span>
                <span className="text-slate-600 leading-relaxed group-hover/item:translate-x-1 group-hover/item:text-slate-800 transition-all delay-75">以 Gentle Monster、Balenciaga 为代表，刻意打破传统的“三庭五眼”，极宽眼距、冷漠的下三白，呈现出生人勿近、具有先锋感气质</span>
              </div>
            </div>
            <div className="flex-1 border-r-[1.5px] border-black/20 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder 
                className="w-full h-full min-h-[160px] !border-none !p-0" 
                text="美学洞察1" 
                onClick={onImageClick} 
                src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1%E9%AB%98%E5%A5%A2%E5%BC%95%E9%A2%86-1.png" 
                imgClassName="object-contain w-full h-full block" 
              />
            </div>
            <div className="flex-1 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder 
                className="w-full h-full min-h-[160px] !border-none !p-0" 
                text="美学洞察2" 
                onClick={onImageClick} 
                src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1%E9%AB%98%E5%A5%A2%E5%BC%95%E9%A2%86-2.png" 
                imgClassName="object-contain w-full h-full block" 
              />
            </div>
          </div>

          {/* Row 2 */}
          <div className="flex border-b-[1.5px] border-black/20 group/row hover:bg-slate-50/50 transition-colors">
            <div className="w-[180px] shrink-0 border-r-[1.5px] border-black/20 p-5 flex flex-col items-center justify-center text-center bg-slate-50/30">
              <div className="font-black text-[14px] mb-2 text-slate-800">绝对包容</div>
              <div className="text-[11px] text-slate-500 font-mono tracking-widest leading-relaxed italic font-medium">(重塑多元美学标准)</div>
            </div>
            <div className="w-[320px] shrink-0 border-r-[1.5px] border-black/20 p-4 flex flex-col justify-center space-y-2 text-[12px] bg-white">
              <div className="group/item flex flex-col p-3 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="font-bold text-slate-800 mb-1 flex items-center group-hover/item:translate-x-1 transition-transform">
                  <span className="text-[#4a6aa6] mr-1.5 text-[14px]">•</span>瑕疵即标志
                </span>
                <span className="text-slate-600 leading-relaxed group-hover/item:translate-x-1 group-hover/item:text-slate-800 transition-all delay-75">雀斑、白癜风、胎记不再是需要被掩盖的“缺陷”，反而成了模特身上最独一无二的视觉符号和记忆点</span>
              </div>
              <div className="group/item flex flex-col p-3 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="font-bold text-slate-800 mb-1 flex items-center group-hover/item:translate-x-1 transition-transform">
                  <span className="text-[#4a6aa6] mr-1.5 text-[14px]">•</span>拥抱真实鲜活的体型
                </span>
                <span className="text-slate-600 leading-relaxed group-hover/item:translate-x-1 group-hover/item:text-slate-800 transition-all delay-75">大码模特 (Plus-size) 走向主流秀场，强调真实体型之美，打破单一的“白幼瘦”或“极限沙漏型”标准</span>
              </div>
            </div>
            <div className="flex-1 border-r-[1.5px] border-black/20 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder 
                className="w-full h-full min-h-[160px] !border-none !p-0" 
                text="美学洞察1" 
                onClick={onImageClick} 
                src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2%E5%A4%9A%E5%85%83%E4%B8%8E%E5%8C%85%E5%AE%B9%E6%80%A7%E5%AE%A1%E7%BE%8E%E8%B6%8B%E5%8A%BF-1.png" 
                imgClassName="object-contain w-full h-full block" 
              />
            </div>
            <div className="flex-1 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder 
                className="w-full h-full min-h-[160px] !border-none !p-0" 
                text="美学洞察2" 
                onClick={onImageClick} 
                src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2%E5%A4%9A%E5%85%83%E4%B8%8E%E5%8C%85%E5%AE%B9%E6%80%A7%E5%AE%A1%E7%BE%8E%E8%B6%8B%E5%8A%BF-2.png" 
                imgClassName="object-contain w-full h-full block" 
              />
            </div>
          </div>

          {/* Row 3 */}
          <div className="flex group/row hover:bg-slate-50/50 transition-colors">
            <div className="w-[180px] shrink-0 border-r-[1.5px] border-black/20 p-5 flex flex-col items-center justify-center text-center bg-slate-50/30">
              <div className="font-black text-[14px] mb-2 text-slate-800">混血人像美学</div>
              <div className="text-[11px] text-slate-500 font-mono tracking-widest leading-relaxed italic font-medium">(打破单一地域基因壁垒)</div>
            </div>
            <div className="w-[320px] shrink-0 border-r-[1.5px] border-black/20 p-4 flex flex-col justify-center space-y-2 text-[12px] bg-white">
              <div className="group/item flex flex-col p-3 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="font-bold text-slate-800 mb-1 flex items-center group-hover/item:translate-x-1 transition-transform">
                  <span className="text-[#4a6aa6] mr-1.5 text-[14px]">•</span>亚欧融合
                </span>
                <span className="text-slate-600 leading-relaxed group-hover/item:translate-x-1 group-hover/item:text-slate-800 transition-all delay-75">亚洲平整细腻皮相 + 欧洲深邃立体骨相融合，兼具东方温婉与西方力量感</span>
              </div>
              <div className="group/item flex flex-col p-3 rounded-md border border-transparent hover:bg-slate-50 hover:border-black/10 transition-all duration-300">
                <span className="font-bold text-slate-800 mb-1 flex items-center group-hover/item:translate-x-1 transition-transform">
                  <span className="text-[#4a6aa6] mr-1.5 text-[14px]">•</span>混血张力
                </span>
                <span className="text-slate-600 leading-relaxed group-hover/item:translate-x-1 group-hover/item:text-slate-800 transition-all delay-75">如亚非或欧印融合 -- 非裔的深肤色与性感厚唇，配上亚裔细长杏眼特点...这种跨度极大的特质相融合，视觉冲击力拉满、极具辨识度</span>
              </div>
            </div>
            <div className="flex-1 border-r-[1.5px] border-black/20 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder 
                className="w-full h-full min-h-[160px] !border-none !p-0" 
                text="美学洞察1" 
                onClick={onImageClick} 
                src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%A4%9A%E5%9B%BD%E8%B7%A8%E7%95%8C%E6%B7%B7%E8%A1%801.png" 
                imgClassName="object-contain w-full h-full block" 
              />
            </div>
            <div className="flex-1 p-2 flex flex-col bg-slate-50/20 justify-center">
              <PhotoPlaceholder 
                className="w-full h-full min-h-[160px] !border-none !p-0" 
                text="美学洞察2" 
                onClick={onImageClick} 
                src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%A4%9A%E5%9B%BD%E8%B7%A8%E7%95%8C%E6%B7%B7%E8%A1%802.png" 
                imgClassName="object-contain w-full h-full block" 
              />
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

function BusinessImpactSection({ onImageClick }) {
  const portraitRows = [
    {
      dimension: '人物多样性',
      note: '人种、肤色、身材等方面是否拉开差异，避免固定脸型和单一审美模板',
      cases: [
        { label: '身材', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1-%E5%AF%B9%E6%AF%94_%E4%BA%BA%E5%83%8F_%E8%BA%AB%E6%9D%901.png' },
        { label: '长相 / 骨相', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1-%E5%AF%B9%E6%AF%94_%E4%BA%BA%E5%83%8F_%E9%95%BF%E7%9B%B8%E7%89%B9%E5%AE%9A1.png' },
        { label: '人种多样性', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1-%E5%AF%B9%E6%AF%94_%E4%BA%BA%E5%83%8F_%E4%BA%9A%E6%B4%B2%E4%BA%BA1.png' }
      ],
      conclusions: [
        '身材、肤色和人种更加符合当地人种，大幅度减少单一模板脸',
        '卷发、辫发、不同年龄感与骨相特征更稳定，人物不再局限于同一套审美模板'
      ]
    },
    {
      dimension: '人像真实感',
      note: '肢体结构、面部、眼神、环境等方面是否自然真实',
      cases: [
        { label: '肢体畸形', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2%E5%AF%B9%E6%AF%94_%E4%BA%BA%E5%83%8F_%E8%82%A2%E4%BD%932.png' },
        { label: '眼神呆滞', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2-%E5%AF%B9%E6%AF%94_%E4%BA%BA%E5%83%8F_%E7%9C%BC%E7%A5%9E1.png' },
        { label: '环境真实', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2%E5%AF%B9%E6%AF%94_%E4%BA%BA%E5%83%8F_%E7%8E%AF%E5%A2%831.png' }
      ],
      conclusions: [
        '肢体动作更加自然正确',
        '眼神减少空间 AI 感',
        '场景的光线和景深更自然，整体更接近真实拍摄质感'
      ]
    },
    {
      dimension: '海外审美适配度',
      note: '是否摆脱“白瘦幼”和网红脸，在脸型、肤色、身材、妆容与气质上贴近海外社媒审美',
      cases: [
        { label: '轻松氛围感', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/3%E5%AF%B9%E6%AF%94_%E4%BA%BA%E5%83%8F_%E5%AE%A1%E7%BE%8E%E9%80%82%E9%85%8D%E5%BA%A61.png' },
        { label: '社媒抓拍', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/3%E5%AF%B9%E6%AF%94_%E4%BA%BA%E5%83%8F_%E5%AE%A1%E7%BE%8E%E9%80%82%E9%85%8D%E5%BA%A63.png' },
        { label: '真实度', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/3%E5%AF%B9%E6%AF%94_%E4%BA%BA%E5%83%8F_%E5%AE%A1%E7%BE%8E%E9%80%82%E9%85%8D%E5%BA%A62.png' }
      ],
      conclusions: [
        '大幅度减少过度美颜和网红脸，保留不同发型、发色、年龄感、通勤抓拍等海外社媒常见表达',
        '妆容、服装和场景气质更统一自然'
      ]
    }
  ];

  const posterRows = [
    {
      dimension: '文字正确性',
      cases: [
        { label: '乱码减少', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1%E5%9B%BE%E6%96%87%E5%AF%B9%E6%AF%94_%E6%96%87%E5%AD%97%E6%AD%A3%E7%A1%AE%E6%80%A71.png' },
        { label: '重点词保留', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1%E5%9B%BE%E6%96%87%E5%AF%B9%E6%AF%94_%E6%96%87%E5%AD%97%E6%AD%A3%E7%A1%AE%E6%80%A72.png' },
        { label: '长句可拆分', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/1%E5%9B%BE%E6%96%87%E5%AF%B9%E6%AF%94_%E6%96%87%E5%AD%97%E6%AD%A3%E7%A1%AE%E6%80%A73.png' }
      ],
      conclusions: [
        '可读性：明显减少乱码、错字和无意义符号，长句能被拆成可读行组',
        '高亮信息：重点词如数字、节日、行动词被保留并突出，信息传达更有侧重点'
      ]
    },
    {
      dimension: '图文排版',
      cases: [
        { label: '标题层级', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2%E5%9B%BE%E6%96%87%E5%AF%B9%E6%AF%94_%E5%9B%BE%E6%96%87%E6%8E%92%E7%89%88-1.png' },
        { label: '关键词强调', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2%E5%9B%BE%E6%96%87%E5%AF%B9%E6%AF%94_%E5%9B%BE%E6%96%87%E6%8E%92%E7%89%88-3.png' },
        { label: '排版清晰', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/2%E5%9B%BE%E6%96%87%E5%AF%B9%E6%AF%94_%E5%9B%BE%E6%96%87%E6%8E%92%E7%89%88-2.png' }
      ],
      conclusions: [
        '文字排版：标题、关键词和主体图形的层级更明确，文字不再大面积挤压或遮挡主体',
        '海报能形成清楚的阅读顺序和视觉重心'
      ]
    },
    {
      dimension: '图文关联与整体视觉',
      cases: [
        { label: '主题贴合', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/3%E5%9B%BE%E6%96%87%E5%AF%B9%E6%AF%94_%E6%95%B4%E4%BD%93%E8%A7%86%E8%A7%891.png' },
        { label: '排版规整', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/3%E5%9B%BE%E6%96%87%E5%AF%B9%E6%AF%94_%E6%95%B4%E4%BD%93%E8%A7%86%E8%A7%892.png' },
        { label: '高关联度/画面丰富', img: 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/3%E5%9B%BE%E6%96%87%E5%AF%B9%E6%AF%94_%E6%95%B4%E4%BD%93%E8%A7%86%E8%A7%893.png' }
      ],
      conclusions: [
        '画面元素与文案主题更贴合',
        '整体更少杂乱拼贴感和破损素材'
      ]
    }
  ];

  const blindSpotRows = [
    {
      risk: '语言区域误判',
      behavior: '把“西语”直接理解为西班牙本土表达，导致口吻偏书面或不符合平台语感',
      constraint: 'Prompt / 评测集需明确标注：拉美西语、墨西哥西语、阿根廷西语等，不只写 Spanish'
    }
  ];

  const businessHeroImage = 'https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E4%BA%BA%E7%89%A9_%E6%96%87%E5%AD%97%E5%B0%81%E9%9D%A2%E5%9B%BE.png';
  const businessOverviewItems = [
    { id: '01', title: '人像', from: '从固定脸型和摆拍感', to: '更丰富的身材、骨相、人种与场景真实度。' },
    { id: '02', title: '图文', from: '从乱码、堆字和主题分散', to: '文字可读、层级清楚、画面元素与文案主题一致。' },
    { id: '03', title: '小众盲区', from: 'TikTok 西语场景', to: '优先考虑拉美西语，不宜默认西班牙本土表达。' }
  ];

  const ImprovementTable = ({ rows }) => (
    <div className="bg-white border-[1.5px] border-black/20 shadow-[4px_4px_0_0_rgba(0,0,0,0.04)] overflow-hidden">
      <div className="hidden lg:grid grid-cols-[220px_minmax(0,1.45fr)_300px] bg-slate-50 border-b-[1.5px] border-black/20 text-center font-mono text-[12px] font-black tracking-widest text-slate-700">
        <div className="p-4 border-r border-black/10">维度</div>
        <div className="p-4 border-r border-black/10">前后对比案例</div>
        <div className="p-4">提升结论</div>
      </div>
      <div className="divide-y divide-black/10">
        {rows.map((row, idx) => (
          <div key={row.dimension} className="grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1.45fr)_300px] group/impact hover:bg-slate-50/50 transition-all duration-500">
            <div className="p-6 lg:border-r border-black/10 flex flex-col justify-center bg-white/70 group-hover/impact:bg-white transition-colors duration-500">
              <div className="font-black text-slate-900 text-[15px] mb-3 flex items-center">
                <span className="w-2 h-2 mr-3 bg-black"></span>
                {row.dimension}
              </div>
              {row.note && <p className="text-[12px] text-slate-500 leading-relaxed font-medium italic">{row.note}</p>}
            </div>
            <div className="p-6 lg:border-r border-black/10 bg-[#fafafa] flex items-center">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
                {row.cases.map((item, itemIdx) => {
                  const caseLabel = typeof item === 'string' ? item : item.label;
                  const caseImg = typeof item === 'string' ? '' : item.img;
                  return (
                    <div key={caseLabel} className="min-h-[168px] border border-black/10 bg-white p-4 flex flex-col group/case hover:border-black/30 hover:-translate-y-1 hover:shadow-[6px_6px_0_0_rgba(0,0,0,0.05)] transition-all duration-300">
                      <span className="font-mono text-[10px] font-bold text-slate-400 tracking-widest">CASE 0{itemIdx + 1}</span>
                      {caseImg && (
                        <button type="button" onClick={() => onImageClick(caseImg)} className="my-3 w-full bg-white border border-black/10 p-0 cursor-zoom-in flex items-center justify-center overflow-hidden group-hover/case:border-black/20 transition-colors duration-300">
                          <img src={caseImg} alt={caseLabel} className="w-full max-w-none h-auto object-contain block mix-blend-multiply group-hover/case:scale-[1.04] transition-transform duration-500" />
                        </button>
                      )}
                      <span className="mt-auto font-black text-slate-800 text-[14px] leading-snug group-hover/case:text-black transition-colors">{caseLabel}</span>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="p-6 bg-white flex items-center">
              <ul className="space-y-3">
                {row.conclusions.map((item) => (
                  <li key={item} className="flex items-start text-[12.5px] text-slate-600 leading-relaxed font-medium">
                    <span className="w-1.5 h-1.5 rounded-full mt-2 mr-3 shrink-0 bg-slate-500"></span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  const BusinessDetailSection = ({ index, title, meta, children }) => (
    <section className="bg-white border-[1.5px] border-black/20 p-8 relative shadow-[4px_4px_0_0_rgba(0,0,0,0.05)] hover:shadow-[8px_8px_0_0_rgba(0,0,0,0.08)] transition-all duration-500">
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-3 border-b border-black/20 pb-4 mb-6">
        <h3 className="font-mono text-2xl font-black text-black uppercase flex items-center">
          <span className="border-[1.5px] border-black/30 px-2 py-0.5 mr-3 text-slate-800 shadow-sm">{index}</span>
          {title}
        </h3>
        <span className="font-mono text-[11px] font-black text-slate-400 tracking-[0.22em] uppercase">{meta}</span>
      </div>
      {children}
    </section>
  );

  return (
    <div className="space-y-10 animate-in fade-in slide-in-from-bottom-8 duration-700 ease-out text-left">
      <header className="relative border-b border-black/20 pb-4">
        <h2 className="font-mono text-4xl font-black text-black tracking-tighter uppercase">06 / 业务侧效果提升</h2>
        <p className="font-mono text-slate-500 mt-2 text-sm tracking-widest uppercase">业务侧效果提升体系</p>
      </header>

      <div className="bg-white border-[1.5px] border-black/20 p-8 min-h-[500px] relative shadow-[4px_4px_0_0_rgba(0,0,0,0.05)]">
        <div className="space-y-10 animate-in zoom-in-95 duration-500">
          <h3 className="font-mono text-3xl font-black text-black text-center uppercase">业务侧三项提升</h3>

          <div className="flex flex-col md:flex-row items-center gap-12 pt-2 text-left">
            <div className="w-full md:w-[45%] lg:w-[40%] shrink-0 group/businessimg">
              <button type="button" onClick={() => onImageClick(businessHeroImage)} className="w-full border-[1.5px] border-black/20 bg-white p-4 shadow-sm overflow-hidden cursor-zoom-in group-hover/businessimg:border-black group-hover/businessimg:shadow-[8px_8px_0_0_rgba(0,0,0,0.08)] group-hover/businessimg:-translate-y-1 transition-all duration-500">
                <img src={businessHeroImage} alt="业务侧效果提升案例" className="w-full h-auto object-contain block mix-blend-multiply group-hover/businessimg:scale-[1.03] transition-transform duration-700 ease-out" />
              </button>
            </div>
            <div className="w-full flex-1 space-y-5">
              {businessOverviewItems.map((item, idx) => (
                <div key={item.id} className="p-6 border-[1.5px] border-black/20 bg-white group/businessitem hover:border-black hover:shadow-[6px_6px_0_0_rgba(0,0,0,0.05)] hover:-translate-y-1 hover:translate-x-1 transition-all duration-300 cursor-default animate-in slide-in-from-right-4 fade-in fill-mode-both" style={{ animationDelay: `${idx * 150}ms`, animationDuration: '700ms' }}>
                  <h4 className="font-mono font-black uppercase flex items-center text-slate-800 group-hover/businessitem:text-[#4a6aa6] transition-colors duration-300">
                    <span className="border-[1.5px] border-black/30 px-2 py-0.5 mr-3 group-hover/businessitem:bg-[#4a6aa6] group-hover/businessitem:border-[#4a6aa6] group-hover/businessitem:text-white transition-all duration-300 shadow-sm">{item.id}</span>
                    {item.title}
                  </h4>
                  <p className="text-[13px] text-slate-500 mt-3 leading-relaxed font-medium">{item.from}</p>
                  <div className="mt-3 flex items-start gap-3">
                    <span className="font-mono text-lg leading-none text-slate-400 group-hover/businessitem:translate-x-1 group-hover/businessitem:text-black transition-all duration-300">→</span>
                    <p className="text-[15px] text-slate-700 leading-relaxed font-black">{item.to}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <BusinessDetailSection index="01" title="人像后训练：效果提升案例" meta="Portrait Fine-Tuning">
        <ImprovementTable rows={portraitRows} />
      </BusinessDetailSection>

      <BusinessDetailSection index="02" title="图文能力：多维度效果提升" meta="Graphic Readability">
        <ImprovementTable rows={posterRows} />
      </BusinessDetailSection>

      <BusinessDetailSection index="03" title="小众盲区" meta="Niche Blind Spots">
        <div className="space-y-6">
          <div className="bg-[#f8f8f8] border-[1.5px] border-black/10 p-6 flex gap-4 items-start shadow-[4px_4px_0_0_rgba(0,0,0,0.03)] relative overflow-hidden hover:bg-white hover:border-black/25 hover:-translate-y-1 transition-all duration-300">
            <div className="absolute left-0 top-0 h-full w-1.5 bg-black"></div>
            <div className="w-10 h-10 rounded-full bg-white border border-black/15 flex items-center justify-center shrink-0 ml-1">
              <Sparkles className="w-5 h-5 text-slate-600" />
            </div>
            <div>
              <h4 className="font-black text-slate-900 mb-2">西语小众盲区</h4>
              <p className="text-[14px] text-slate-700 leading-relaxed font-medium">
                在 TikTok 平台，面向西语用户时不能默认使用西班牙西语；项目测试中更高频、更贴近平台语感的是
                <span className="font-black text-black border-b-2 border-black/35 mx-1">拉美西语</span>。
              </p>
            </div>
          </div>

          <div className="bg-white border-[1.5px] border-black/20 overflow-hidden shadow-sm">
            <div className="grid grid-cols-[220px_1fr_1.25fr] bg-slate-50 border-b border-black/20 font-mono text-[12px] font-black text-slate-700 tracking-widest text-center">
              <div className="p-4 border-r border-black/10">风险</div>
              <div className="p-4 border-r border-black/10">表现</div>
              <div className="p-4">后续约束</div>
            </div>
            {blindSpotRows.map((row) => (
              <div key={row.risk} className="grid grid-cols-1 lg:grid-cols-[220px_1fr_1.25fr] border-b last:border-b-0 border-black/10 hover:bg-slate-50/60 transition-colors">
                <div className="p-5 lg:border-r border-black/10 flex items-center justify-center font-black text-slate-800 bg-white/70">{row.risk}</div>
                <div className="p-5 lg:border-r border-black/10 text-[13px] text-slate-600 leading-relaxed font-medium">{row.behavior}</div>
                <div className="p-5 text-[13px] text-slate-700 leading-relaxed font-medium">{row.constraint}</div>
              </div>
            ))}
          </div>
        </div>
      </BusinessDetailSection>
    </div>
  );
}

function ConclusionSection() {
  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-700 ease-out text-left">
      <header className="relative border-b border-black/20 pb-4">
        <h2 className="font-mono text-4xl font-black text-black tracking-tighter uppercase">07 / 结论</h2>
      </header>
      <div className="bg-white border-[1.5px] border-black/20 p-10 md:p-14 relative shadow-[4px_4px_0_0_rgba(0,0,0,0.05)] hover:shadow-[8px_8px_0_0_rgba(0,0,0,0.1)] transition-all duration-500 group/card">
        <div className="absolute top-0 left-0 w-1.5 h-full bg-black group-hover/card:bg-[#4a6aa6] transition-colors duration-500"></div>
        <div className="space-y-6 text-slate-700 text-base md:text-lg leading-loose tracking-wide">
          <div className="font-bold text-slate-800 transition-all duration-500 hover:-translate-y-1 hover:text-[#4a6aa6] cursor-default inline-block relative">
            全球人像审美正在告别千篇一律的“标准美”，全面走向“有叙事感的多元面孔”
          </div>
          <div className="text-slate-600 transition-colors duration-500">
            未来的人像美学打动人的永远是
            <strong className="relative inline-flex items-center text-black mx-1 cursor-default group/text transition-all duration-500 hover:text-[#4a6aa6] hover:-translate-y-0.5">
               <span className="relative z-10">真实感与文化共情</span>
               <span className="absolute bottom-0 left-0 w-full h-[2px] bg-[#4a6aa6]/40 transition-all duration-500 group-hover/text:bg-transparent"></span>
               <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-[#4a6aa6] transition-all duration-700 ease-out group-hover/text:w-full"></span>
               <span className="absolute inset-0 pointer-events-none opacity-0 group-hover/text:opacity-100 transition-opacity duration-500 block">
                 <Sparkles className="absolute -top-4 -left-2 w-3.5 h-3.5 text-[#4a6aa6]/80 animate-[softFloat_2s_ease-in-out_infinite]" />
                 <Sparkles className="absolute -top-2 -right-3 w-2.5 h-2.5 text-[#4a6aa6]/60 animate-[softFloat_2.5s_ease-in-out_infinite_0.5s]" />
               </span>
            </strong>
            ，在全球视野下，将重塑出既能保留鲜明的本土特色，
            <strong className="relative inline-flex items-center text-black mx-1 cursor-default group/text transition-all duration-500 hover:text-[#4a6aa6] hover:-translate-y-0.5">
               <span className="relative z-10">又能跨越文化引发共鸣</span>
               <span className="absolute bottom-0 left-0 w-full h-[2px] bg-[#4a6aa6]/40 transition-all duration-500 group-hover/text:bg-transparent"></span>
               <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-[#4a6aa6] transition-all duration-700 ease-out group-hover/text:w-full"></span>
               <span className="absolute inset-0 pointer-events-none opacity-0 group-hover/text:opacity-100 transition-opacity duration-500 block">
                 <Sparkles className="absolute -top-3 left-[20%] w-3 h-3 text-[#4a6aa6]/80 animate-[softFloat_2.2s_ease-in-out_infinite]" />
                 <Sparkles className="absolute -top-5 right-[10%] w-2 h-2 text-[#4a6aa6]/60 animate-[softFloat_2.8s_ease-in-out_infinite_0.3s]" />
               </span>
            </strong>
            的视觉表达
          </div>
        </div>
      </div>
      
      {/* 独立结尾区 */}
      <div className="pt-24 pb-12 text-center group/thanks cursor-default">
        <div className="w-full h-px bg-black/10 mb-12 relative flex justify-center">
           <div className="absolute top-[-1px] w-0 h-[2px] bg-black transition-all duration-1000 ease-out group-hover/thanks:w-1/2"></div>
        </div>
        <span className="font-sans font-black text-black text-2xl tracking-[0.2em] uppercase group-hover/thanks:tracking-[0.4em] group-hover/thanks:text-[#4a6aa6] transition-all duration-700 inline-block drop-shadow-sm">THANKS.</span>
        <div className="mt-4 font-mono text-[11px] font-bold tracking-[0.28em] text-slate-400 group-hover/thanks:text-slate-700 group-hover/thanks:tracking-[0.36em] group-hover/thanks:-translate-y-0.5 transition-all duration-700">
          未完待续中...
        </div>
      </div>
    </div>
  );
}

function SplashScreen({ onEnter }) {
  return (
    <div className="fixed inset-0 bg-[#f4f4f4] flex items-center justify-center overflow-hidden z-[100] animate-in fade-in duration-1000">
       <style>{`
         @keyframes textFall { 0% { transform: translateY(0px) rotate(-5deg) scale(0.8); opacity: 0; } 15% { opacity: 0.7; } 70% { opacity: 0.3; } 100% { transform: translateY(450px) rotate(15deg) scale(1); opacity: 0; } }
         @keyframes splashFloatDown {
           0% { transform: translateY(-10px) translateX(0) scale(0.4) rotate(0deg); opacity: 0; }
           20% { transform: translateY(5px) translateX(6px) scale(1.1) rotate(45deg); opacity: 1; }
           50% { transform: translateY(25px) translateX(-4px) scale(0.9) rotate(90deg); opacity: 0.7; }
           80% { transform: translateY(45px) translateX(4px) scale(0.6) rotate(135deg); opacity: 0.3; }
           100% { transform: translateY(65px) translateX(0) scale(0.3) rotate(180deg); opacity: 0; }
         }
         .outline-text { -webkit-text-stroke: 0.8px #64748b; color: transparent; letter-spacing: 0.25em; font-weight: 700; }
         .falling-text { animation: textFall 8s linear infinite; }
       `}</style>
       <div className="absolute top-10 left-16 right-16 flex justify-between font-mono text-xs text-slate-400 tracking-widest uppercase"><span>Culture</span><span>Aesthetics</span><span>Features</span></div>
       <div className="w-full max-w-7xl flex h-full items-center relative z-10">
           <div className="w-1/2 pl-16 text-left">
              <p className="font-mono text-2xl text-slate-800 mb-8">Welcome,</p>
              <p className="font-mono text-2xl text-slate-800 mb-24 leading-relaxed tracking-tighter">To The Global Diverse Portrait<br/>Aesthetics Explorer.</p>
              <button onClick={onEnter} className="relative group/btn font-mono text-lg text-slate-500 hover:text-slate-900 border-b border-black/20 hover:border-black pb-1 cursor-pointer transition-all duration-300">
                <span className="relative z-10">Begin Exploration._</span>
                <div className="absolute -inset-6 pointer-events-none opacity-0 group-hover/btn:opacity-100 transition-opacity duration-700 ease-in-out overflow-visible z-20">
                   <Sparkles className="absolute top-2 left-0 w-3.5 h-3.5 text-slate-400 animate-[splashFloatDown_3s_ease-in-out_infinite]" />
                   <Sparkles className="absolute -top-2 left-[35%] w-2.5 h-2.5 text-slate-300 animate-[splashFloatDown_2.5s_ease-in-out_infinite_0.7s]" />
                   <Sparkles className="absolute top-0 right-[20%] w-4 h-4 text-slate-400 animate-[splashFloatDown_3.2s_ease-in-out_infinite_1.2s]" />
                   <Sparkles className="absolute -top-4 right-[-5%] w-2 h-2 text-slate-300 animate-[splashFloatDown_2.8s_ease-in-out_infinite_2s]" />
                </div>
              </button>
           </div>
           <div className="w-1/2 flex items-center justify-center relative group">
              <div className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-1000">
                 <span className="absolute top-[28%] left-[25%] outline-text falling-text" style={{animationDelay:'0s'}}>CULTURE</span>
                 <span className="absolute top-[35%] left-[45%] outline-text falling-text" style={{animationDelay:'1.5s'}}>AESTHETICS</span>
              </div>
              <img src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/show%20image1.png" alt="Hero" className="w-full max-w-[500px] h-auto object-contain opacity-90 transition-all duration-1000 scale-125 -translate-x-20 mix-blend-multiply contrast-125" />
           </div>
       </div>
    </div>
  );
}

// --- 5. 主程序入口 (App) ---

function AdminApp() {
  const [token, setToken] = useState(() => localStorage.getItem('portrait_admin_token') || '');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);

  const loadAdminVotes = async (currentToken = token) => {
    if (!currentToken) return;
    setLoading(true);
    try {
      const res = await fetch('/api/admin/votes', {
        headers: { Authorization: `Bearer ${currentToken}` }
      });
      const payload = await res.json();
      if (!payload.ok) throw new Error(payload.message || '后台数据读取失败');
      setData(payload.data);
      setError('');
    } catch (err) {
      setError(err.message);
      if (err.message.includes('登录')) {
        localStorage.removeItem('portrait_admin_token');
        setToken('');
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (token) loadAdminVotes(token);
  }, [token]);

  const handleLogin = async (event) => {
    event.preventDefault();
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });
      const payload = await res.json();
      if (!payload.ok) throw new Error(payload.message || '登录失败');
      localStorage.setItem('portrait_admin_token', payload.token);
      setToken(payload.token);
      setPassword('');
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleLogout = async () => {
    if (token) {
      await fetch('/api/logout', {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}` }
      }).catch(() => {});
    }
    localStorage.removeItem('portrait_admin_token');
    setToken('');
    setData(null);
  };

  if (!token) {
    return (
      <div className="min-h-screen bg-[#f4f4f4] flex items-center justify-center p-6 font-sans text-slate-900">
        <form onSubmit={handleLogin} className="w-full max-w-sm bg-white border-[1.5px] border-black/20 p-8 shadow-[8px_8px_0_0_rgba(0,0,0,0.06)]">
          <div className="flex items-center gap-3 mb-8">
            <Globe className="w-6 h-6 text-[#4a6aa6]" />
            <div>
              <h1 className="text-2xl font-black tracking-tight">投票后台</h1>
              <p className="text-xs font-mono text-slate-500 mt-1">Portrait Aesthetic Admin</p>
            </div>
          </div>
          <label className="block mb-5">
            <span className="block text-xs font-mono font-bold tracking-widest text-slate-500 mb-2">用户名</span>
            <input value={username} onChange={(e) => setUsername(e.target.value)} className="w-full border-[1.5px] border-black/20 px-4 py-3 outline-none focus:border-black bg-white" autoComplete="username" />
          </label>
          <label className="block mb-6">
            <span className="block text-xs font-mono font-bold tracking-widest text-slate-500 mb-2">密码</span>
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full border-[1.5px] border-black/20 px-4 py-3 outline-none focus:border-black bg-white" autoComplete="current-password" />
          </label>
          {error && <div className="mb-4 text-sm text-red-600 font-bold">{error}</div>}
          <button disabled={loading} className="w-full bg-black text-white py-3 font-mono text-xs font-bold tracking-widest disabled:opacity-50">
            {loading ? '登录中...' : '登录后台'}
          </button>
          <a href="/" className="block text-center mt-5 text-xs font-mono font-bold text-slate-500 hover:text-black">返回前台</a>
        </form>
      </div>
    );
  }

  const pollGroups = data?.polls || {};
  const totalVotes = Object.values(pollGroups).reduce((sum, group) => {
    return sum + Object.values(group).reduce((inner, poll) => inner + (poll.counts?.total || 0), 0);
  }, 0);

  return (
    <div className="min-h-screen bg-[#f4f4f4] font-sans text-slate-900 p-8">
      <div className="max-w-7xl mx-auto">
        <header className="flex items-center justify-between border-b border-black/20 pb-6 mb-8">
          <div>
            <h1 className="text-4xl font-black tracking-tight">投票后台</h1>
            <p className="text-sm font-mono text-slate-500 mt-2">总票数 {totalVotes} · 最近更新 {data?.updatedAt ? new Date(data.updatedAt).toLocaleString() : '暂无'}</p>
          </div>
          <div className="flex items-center gap-3">
            <button onClick={() => loadAdminVotes()} className="border-[1.5px] border-black/20 bg-white px-4 py-2 font-mono text-xs font-bold hover:border-black">刷新</button>
            <a href="/" className="border-[1.5px] border-black/20 bg-white px-4 py-2 font-mono text-xs font-bold hover:border-black">前台</a>
            <button onClick={handleLogout} className="bg-black text-white px-4 py-2 font-mono text-xs font-bold">退出</button>
          </div>
        </header>

        {error && <div className="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 font-bold">{error}</div>}
        {loading && <div className="mb-6 text-sm font-mono text-slate-500">正在加载数据...</div>}

        <div className="grid grid-cols-1 gap-8">
          {Object.entries(pollGroups).map(([type, polls]) => (
            <section key={type} className="bg-white border-[1.5px] border-black/15 p-6">
              <div className="flex items-center gap-3 mb-6">
                {type === 'makeup' ? <Palette className="w-5 h-5" /> : <Users className="w-5 h-5 text-[#4a6aa6]" />}
                <h2 className="text-2xl font-black">{type === 'makeup' ? '盲猜美妆风格' : '多元人像'}</h2>
              </div>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
                {Object.entries(polls).map(([pollId, poll]) => {
                  const total = poll.counts?.total || 0;
                  return (
                    <div key={pollId} className="border-[1.5px] border-black/10 p-5">
                      <div className="flex items-center justify-between mb-4">
                        <h3 className="font-mono font-black">{poll.label}</h3>
                        <span className="text-xs font-mono font-bold bg-slate-100 px-2 py-1">{total} 票</span>
                      </div>
                      <div className="space-y-3">
                        {poll.options.map((option) => {
                          const count = poll.counts?.[option] || 0;
                          const percentage = total > 0 ? Math.round((count / total) * 100) : 0;
                          return (
                            <div key={option}>
                              <div className="flex items-center justify-between text-sm mb-1">
                                <span className="font-bold">{option}</span>
                                <span className="font-mono text-slate-500">{count} 票 · {percentage}%</span>
                              </div>
                              <div className="h-2 bg-slate-100 overflow-hidden">
                                <div className="h-full bg-black transition-all" style={{ width: `${percentage}%` }} />
                              </div>
                            </div>
                          );
                        })}
                      </div>
                      <div className="mt-5 border-t border-black/10 pt-4">
                        <h4 className="text-xs font-mono font-black tracking-widest text-slate-500 mb-3">最新记录</h4>
                        <div className="space-y-2 max-h-32 overflow-auto">
                          {(poll.records || []).slice(0, 5).map((record, idx) => (
                            <div key={`${record.voterId}-${idx}`} className="flex justify-between gap-3 text-xs text-slate-600">
                              <span className="font-bold text-slate-900">{record.option}</span>
                              <span className="font-mono">{new Date(record.votedAt).toLocaleString()}</span>
                            </div>
                          ))}
                          {(!poll.records || poll.records.length === 0) && <div className="text-xs text-slate-400">暂无投票</div>}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </section>
          ))}
        </div>
      </div>
    </div>
  );
}

function App() {
  const [showSplash, setShowSplash] = useState(true);
  const [activeMenu, setActiveMenu] = useState('intro');
  const [hoveredMenu, setHoveredMenu] = useState(null);
  const [fullScreenImg, setFullScreenImg] = useState(null);
  const user = { uid: getVoterId() };

  const menuItems = [
    { 
      id: 'intro', 
      label: '一：定位与背景', 
      icon: <Map className="w-5 h-5" />, 
      desc: '本章探索：建立全球主流视觉审美趋势的坐标系，聚焦核心区域与文化维度。',
      tags: ['#审美坐标系', '#文化维度', '#视觉趋势']
    },
    { 
      id: 'muslim', 
      label: '二：穆斯林文化与美感', 
      icon: <BookOpen className="w-5 h-5" />, 
      desc: '本章探索：探究穆斯林区域的人口分布、特色服装、妆容偏好及节日的视觉美学。',
      tags: ['#区域美学', '#服装特征', '#文化符号']
    },
    { 
      id: 'global', 
      label: '三：全球网感与面部特征', 
      icon: <Globe className="w-5 h-5" />, 
      desc: '本章探索：解析多元文化背景下的核心审美目标、区域网感及人像骨相皮相特征。',
      tags: ['#INS网感', '#面部特征', '#身型趋势']
    },
    {
      id: 'events',
      label: '四：赛事与活动妆造',
      icon: <Calendar className="w-5 h-5" />,
      desc: '本章探索：严格按照世界时间轴，列举全球最具社媒流量的标志性节点与活动妆造。',
      tags: ['#国际日历', '#赛事节点', '#活动妆造']
    },
    {
      id: 'future',
      label: '五：跨文化融合与未来趋势',
      icon: <Layers className="w-5 h-5" />,
      desc: '本章探索：打破单一地域刻板印象，解析跨文化审美融合、AI生成盲区及全球高奢与真实的审美趋势。',
      tags: ['#跨文化融合', '#生成盲区', '#未来趋势']
    },
    {
      id: 'business',
      label: '六：业务侧效果提升',
      icon: <Activity className="w-5 h-5" />,
      desc: '本章探索：整理人像后训练、图文海报与西语语境三类业务侧改善案例，沉淀可复用的效果提升标准。',
      tags: ['#后训练效果', '#图文可读性', '#语言适配']
    },
    {
      id: 'conclusion',
      label: '七：结论',
      icon: <Sparkles className="w-5 h-5" />,
      desc: '本章总结：全球人像审美的最终走向，从“标准美”到“有叙事感的多元面孔”的视觉重塑与文化共鸣。',
      tags: ['#审美结论', '#文化共情', '#多元面孔']
    }
  ];

  if (showSplash) return <SplashScreen onEnter={() => setShowSplash(false)} />;

  const handleNavClick = (id) => {
    setActiveMenu(id);
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div className="h-screen bg-[#f4f4f4] font-sans text-slate-800 overflow-y-auto overflow-x-hidden relative scroll-smooth selection:bg-black/10">
      <style>{`
        @keyframes floatLeafUp {
          0% { transform: translateY(15px) translateX(0) rotate(-15deg) scale(0.6); opacity: 0; }
          20% { opacity: 0.6; transform: translateY(-5px) translateX(-8px) rotate(5deg) scale(0.8); }
          50% { opacity: 0.8; transform: translateY(-25px) translateX(8px) rotate(-10deg) scale(1); }
          80% { opacity: 0.6; transform: translateY(-45px) translateX(-5px) rotate(15deg) scale(0.9); }
          100% { transform: translateY(-60px) translateX(5px) rotate(25deg) scale(0.7); opacity: 0; }
        }
        @keyframes softFloat {
          0% { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; }
          40% { transform: translateY(-6px) translateX(3px) scale(1.1); opacity: 0.9; }
          100% { transform: translateY(-12px) translateX(-2px) scale(0.9); opacity: 0; }
        }
        .floating-leaf { animation: floatLeafUp ease-in-out infinite; position: absolute; color: #94a3b8; }
        .hide-scrollbar::-webkit-scrollbar { display: none; } 
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      `}</style>
      
      <div className="fixed inset-0 pointer-events-none z-0"><img src="https://my-shemmei-website-imgs.oss-cn-shanghai.aliyuncs.com/%E5%BA%95%E5%9B%BE.png" alt="Bg" className="w-full h-full object-cover mix-blend-multiply opacity-20" /></div>
      
      {/* 顶部折叠导航区 */}
      <section className="w-full h-[80vh] min-h-[700px] bg-[#f8f8f8] flex flex-col border-b border-black/20 z-20 relative shadow-sm">
        <div className="p-8 pb-6 max-w-7xl mx-auto w-full flex flex-col items-start">
          <button onClick={() => setShowSplash(true)} className="flex items-center font-mono text-xs font-bold text-slate-400 hover:text-black mb-6 cursor-pointer group"><ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />返回主页</button>
          
          <div className="w-full flex flex-col gap-6">
            <h1 className="font-mono text-5xl font-black text-black uppercase tracking-tighter">Aesthetics.</h1>
            
            {/* 文档说明卡片 - 置于目录之前 */}
            <div className="w-full bg-white border-[1.5px] border-black/20 rounded-lg p-5 flex items-center shadow-[4px_4px_0_0_rgba(0,0,0,0.02)] relative z-20 hover:border-black/30 transition-colors">
              <div className="flex items-center justify-center pl-3 pr-6">
                <span className="text-3xl drop-shadow-sm">✍️</span>
              </div>
              <div className="w-px h-[70px] bg-black/10 shrink-0"></div>
              <div className="flex-1 pl-8 space-y-3.5 text-[14px] text-slate-700 font-medium tracking-wide">
                <div className="flex items-center">
                  <span className="w-1.5 h-1.5 rounded-full bg-[#4a6aa6] mr-3 shrink-0"></span>
                  <span className="flex items-center">文档版指路 👉： 
                    <a 
                      href="https://bytedance.sg.larkoffice.com/docx/WMWAdDEnwosAgDxwvwQleRlGgBc" 
                      target="_blank" 
                      rel="noopener noreferrer" 
                      className="font-bold text-[#4a6aa6] flex items-center inline-flex ml-1 relative group/link"
                    >
                      <span className="text-lg mr-1.5 -mt-0.5 group-hover/link:-translate-y-1 group-hover/link:rotate-[15deg] transition-all duration-500 ease-out">🍎</span>
                      <span className="relative z-10 pb-0.5">
                        全球文化审美研究
                        <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-[#4a6aa6]/80 transition-all duration-500 ease-out group-hover/link:w-full rounded-full"></span>
                      </span>
                      
                      {/* 柔和精致的悬浮光点 */}
                      <div className="absolute inset-0 pointer-events-none opacity-0 group-hover/link:opacity-100 transition-opacity duration-700 ease-in-out overflow-visible">
                        <Sparkles className="absolute -top-3 -left-3 w-3 h-3 text-[#4a6aa6]/80 animate-[softFloat_2.5s_ease-in-out_infinite]" />
                        <Sparkles className="absolute -top-5 left-[45%] w-2 h-2 text-[#4a6aa6]/60 animate-[softFloat_3s_ease-in-out_infinite_0.8s]" />
                        <Sparkles className="absolute -top-2 -right-4 w-3.5 h-3.5 text-[#4a6aa6]/70 animate-[softFloat_2.8s_ease-in-out_infinite_1.5s]" />
                      </div>
                    </a>
                  </span>
                </div>
                <div className="flex items-center">
                  <span className="w-1.5 h-1.5 rounded-full bg-[#4a6aa6] mr-3 shrink-0"></span>
                  <span><span className="font-bold text-slate-800">研究链路：</span> 桌面调研 → 审美维度拆解 → 视觉特征总结</span>
                </div>
                <div className="flex items-start">
                  <span className="w-1.5 h-1.5 rounded-full bg-[#4a6aa6] mr-3 mt-2 shrink-0"></span>
                  <span className="leading-relaxed"><span className="font-bold text-slate-800">边界声明：</span> 聚焦“视觉美学效果呈现”，不涉及任何政治因素、历史问题 或 特定文化层面的评判</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div className="flex-1 flex flex-row w-full max-w-7xl mx-auto px-8 pb-4 [perspective:2000px] min-h-[300px]">
          {menuItems.map((item) => {
            const isExpanded = hoveredMenu ? hoveredMenu === item.id : activeMenu === item.id;
            return (
              <div key={item.id} onMouseEnter={() => setHoveredMenu(item.id)} onMouseLeave={() => setHoveredMenu(null)} onClick={() => handleNavClick(item.id)} 
                className={`relative h-full cursor-pointer transition-all duration-[900ms] flex flex-col overflow-hidden origin-center group/card ${isExpanded ? 'flex-[4.5] bg-white z-10' : 'flex-[1] bg-[#f7f7f7] z-0'}`}
                style={{ 
                  boxShadow: isExpanded ? '0 20px 40px rgba(0,0,0,0.1)' : 'inset 15px 0 20px rgba(0,0,0,0.02)', 
                  transform: isExpanded ? 'translateZ(10px)' : 'scaleY(0.97)', 
                  border: '1px solid rgba(0,0,0,0.1)' 
                }}>
                <div className={`absolute inset-y-0 left-0 w-12 bg-gradient-to-r from-black/[0.04] to-transparent transition-opacity duration-700 pointer-events-none ${isExpanded ? 'opacity-0' : 'opacity-100'}`} />
                <div className={`absolute inset-y-0 right-0 w-12 bg-gradient-to-l from-black/[0.02] to-transparent transition-opacity duration-700 pointer-events-none ${isExpanded ? 'opacity-0' : 'opacity-100'}`} />
                <div className={`absolute inset-0 flex flex-col items-center pt-8 transition-all duration-700 ${isExpanded ? 'opacity-0 scale-90 -translate-x-10' : 'opacity-100 scale-100 translate-x-0'}`}>
                  <div className="text-slate-400 mb-6">{item.icon}</div>
                  <span className="[writing-mode:vertical-lr] font-mono font-bold tracking-[0.4em] uppercase text-slate-500 group-hover/card:text-black transition-colors">{item.label}</span>
                </div>
                <div className={`absolute inset-0 p-8 flex flex-col text-left transition-all duration-[900ms] ${isExpanded ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-10 pointer-events-none'}`}>
                  <div className="text-black mb-4">{item.icon}</div>
                  <h3 className="font-mono text-2xl font-black mb-3 uppercase">{item.label}</h3>
                  <div className="w-full h-px bg-black/20 mb-3 shadow-sm"></div>
                  <p className="font-mono text-[11px] font-bold text-slate-700 leading-relaxed text-justify">{item.desc}</p>
                  <div className="mt-auto flex flex-wrap gap-2 text-[10px] font-mono text-slate-400 uppercase tracking-widest">{item.tags.map(t=><span key={t}>{t}</span>)}</div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="h-20 w-full max-w-7xl mx-auto px-8 pb-6 opacity-30 hover:opacity-60 transition-all duration-1000 group relative">
           <div className="absolute inset-0 pointer-events-none overflow-hidden">
              <div className="floating-leaf bottom-[30%] left-[15%]" style={{ animationDelay: '0s', animationDuration: '4.5s' }}><Sparkles className="w-3 h-3"/></div>
              <div className="floating-leaf bottom-[10%] left-[45%]" style={{ animationDelay: '1s', animationDuration: '5.5s' }}><Sparkles className="w-2 h-2"/></div>
              <div className="floating-leaf bottom-[40%] left-[75%]" style={{ animationDelay: '2s', animationDuration: '4.2s' }}><Sparkles className="w-3 h-3"/></div>
           </div>
           <svg width="100%" height="40" viewBox="0 0 300 40" preserveAspectRatio="none" stroke="#555" fill="none" className="transform group-hover:scale-y-125 transition-transform duration-1000 origin-bottom">
              <path strokeWidth="0.5" d="M0 20 C 50 0, 100 40, 150 20 S 250 40, 300 20" />
           </svg>
        </div>
      </section>

      <main className="max-w-7xl mx-auto p-8 space-y-48 relative z-10">
        <div id="intro"><IntroSection /></div>
        <div id="muslim"><MuslimSection onImageClick={setFullScreenImg} user={user} /></div>
        <div id="global"><GlobalSection onImageClick={setFullScreenImg} user={user} /></div>
        <div id="events"><EventsSection onImageClick={setFullScreenImg} /></div>
        <div id="future"><FutureTrendSection onImageClick={setFullScreenImg} /></div>
        <div id="business"><BusinessImpactSection onImageClick={setFullScreenImg} /></div>
        <div id="conclusion"><ConclusionSection /></div>
      </main>

      {fullScreenImg && (
        <div className="fixed inset-0 z-[200] bg-black/90 backdrop-blur-sm flex items-center justify-center p-10 cursor-zoom-out animate-in fade-in duration-300" onClick={() => setFullScreenImg(null)}>
          <img src={fullScreenImg} className="max-w-full max-h-full object-contain drop-shadow-2xl animate-in zoom-in-95" alt="Preview" />
        </div>
      )}
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  window.location.pathname.startsWith('/admin') ? <AdminApp /> : <App />
);