import React, { useState, useEffect, useRef } from 'react';
import { motion, useScroll, useTransform, AnimatePresence, useSpring, useMotionValue } from 'framer-motion';
import { 
  Mail, 
  Phone, 
  MapPin, 
  GraduationCap, 
  Award,
  ChevronLeft,
  ChevronRight,
  X,
  Globe,
  Compass,
  Cpu,
  Maximize2,
  ChevronDown
} from 'lucide-react';

/**
 * 最终版设计师 UI 界面 - 黄文曦 (WENXI HUANG)
 */

// --- 静态资源配置 ---
const PROFILE_IMAGE = "https://raw.githubusercontent.com/bidxi/bidxi/7d86ae79b12394ac61b5dbb0ad77af894f723326/3.png";

const COMPANY_IMAGES = [
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/1.jpg",
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/2.jpg",
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/4.png",
];

const WORK_RESULT_IMAGES = [
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/5.jpg",
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/39c125707825417fa043f0cc051ccd6e.jpg",
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/6.png",
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/7.jpg",
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/8.jpg",
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/9cdc6f83362385b452388f87376e39a6.jpg",
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/f81d7727d8229e6812764edefd96aa2.jpg",
  "https://raw.githubusercontent.com/bidxi/bidxi/fd71a1b0f7aea2c98d7bca796cf543e61d6e78d6/%E5%9B%BE%E7%89%871.jpg",
];

const AWARDS = [
  { id: 1, title: "第六届金芦苇工业设计奖", detail: "提名奖、入围奖", important: true, tag: "Top Honor" },
  { id: 2, title: "2025年广东省大学生工业设计大赛", detail: "二等奖", important: true, tag: "Provincial" },
  { id: 3, title: "紫金奖·中国(南京)大学生设计展", detail: "最具人气奖三等奖、最佳展品奖优秀奖", important: true, tag: "Creative" },
  { id: 4, title: "第六届东方创意之星创新设计大赛", detail: "国赛铜奖、粤港澳赛区金奖" },
  { id: 5, title: "第27届“河南之星“设计艺术大赛", detail: "学生组银奖、佳作奖" },
  { id: 6, title: "第18届中国好创意暨全国数字艺术设计大赛", detail: "广东赛区一等奖、三等奖" },
  { id: 7, title: "第九届两岸新锐设计竞赛·华灿奖", detail: "广东赛区 产品设计组三等奖" },
  { id: 8, title: "第八届佛山”市长杯“工业设计大赛", detail: "概念设计组 入围奖" },
  { id: 9, title: "第11届未来设计师·全国高校数字艺术设计大赛", detail: "广东赛区 二等奖 * 2" },
  { id: 10, title: "第十届东方设计奖·全国高校创新设计大赛", detail: "广东赛区 三等奖 * 2" },
  { id: 11, title: "第17届全国三维数字化创新设计大赛", detail: "广东赛区 三等奖" },
  { id: 12, title: "第16届全国大学生广告艺术大赛", detail: "广东赛区 三等奖" },
  { id: 13, title: "第七届中华设计奖设计大赛", detail: "概念组 入围奖" },
  { id: 14, title: "第六届”憧憬·美丽中国“艺术设计大赛", detail: "优秀奖" },
];

// --- 常用子组件 ---

const ImageSlider = ({ images, onImageClick }) => {
  const [index, setIndex] = useState(0);
  const next = (e) => { e.stopPropagation(); setIndex((i) => (i + 1) % images.length); };
  const prev = (e) => { e.stopPropagation(); setIndex((i) => (i - 1 + images.length) % images.length); };

  return (
    <div className="relative group overflow-hidden rounded-2xl aspect-[4/3] bg-zinc-50 border border-zinc-100 cursor-zoom-in shadow-sm transition-transform active:scale-[0.98]" onClick={() => onImageClick(images[index])}>
      <AnimatePresence mode="wait">
        <motion.img key={index} src={images[index]} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }} className="w-full h-full object-cover pointer-events-none" />
      </AnimatePresence>
      <div className="absolute inset-0 flex items-center justify-between px-4 opacity-0 group-hover:opacity-100 transition-opacity">
        <button onClick={prev} className="p-2 bg-white/95 text-black rounded-full hover:bg-black hover:text-white transition-all shadow-lg active:scale-90 pointer-events-auto"><ChevronLeft size={20} /></button>
        <button onClick={next} className="p-2 bg-white/95 text-black rounded-full hover:bg-black hover:text-white transition-all shadow-lg active:scale-90 pointer-events-auto"><ChevronRight size={20} /></button>
      </div>
      <div className="absolute bottom-4 right-4 flex gap-2 items-center pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-full text-white">
        <Maximize2 size={12} /><span className="text-[10px] uppercase font-bold tracking-widest">全屏预览</span>
      </div>
    </div>
  );
};

const ContactItem = ({ icon, label, value }) => (
  <div className="group">
    <div className="flex items-center gap-3 mb-3">
       <div className="text-zinc-300 group-hover:text-amber-600 transition-colors duration-500">{icon}</div>
       <span className="text-[9px] uppercase tracking-[0.3em] text-zinc-400 font-bold font-mono">{label}</span>
    </div>
    <div className="text-[13px] font-medium pl-6 border-l border-zinc-100 group-hover:border-zinc-300 transition-all duration-700 text-zinc-600 leading-relaxed">{value}</div>
  </div>
);

const WorkBullet = ({ num, text }) => (
  <li className="flex gap-6 group cursor-default">
    <span className="font-mono text-[10px] text-zinc-300 group-hover:text-amber-500 transition-all duration-500 pt-1 font-bold">{num}</span>
    <span className="text-[14px] text-zinc-500 leading-relaxed group-hover:text-zinc-800 transition-all duration-500 font-medium">{text}</span>
  </li>
);

export default function App() {
  const [highlightedAward, setHighlightedAward] = useState(null);
  const [isScanning, setIsScanning] = useState(true);
  const [selectedImage, setSelectedImage] = useState(null);
  
  const { scrollYProgress } = useScroll();
  const smoothScroll = useSpring(scrollYProgress, { stiffness: 45, damping: 25, restDelta: 0.001 });

  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
  const handleMouseMove = (e) => {
    const { clientX, clientY } = e;
    mouseX.set(clientX / window.innerWidth - 0.5);
    mouseY.set(clientY / window.innerHeight - 0.5);
  };

  const heroY = useTransform(smoothScroll, [0, 0.3], [0, -120]);
  const heroOpacity = useTransform(smoothScroll, [0, 0.15], [1, 0]);
  const awardBgRotate = useTransform(smoothScroll, [0.3, 0.6], [0, 15]);

  useEffect(() => {
    let interval;
    if (isScanning) {
      interval = setInterval(() => {
        setHighlightedAward(Math.floor(Math.random() * AWARDS.length));
      }, 900);
      const timer = setTimeout(() => {
        setIsScanning(false);
        setHighlightedAward(Math.floor(Math.random() * 4));
        setTimeout(() => setIsScanning(true), 7000);
      }, 4500);
      return () => { clearInterval(interval); clearTimeout(timer); };
    }
  }, [isScanning]);

  return (
    <div className="bg-white text-zinc-900 selection:bg-black selection:text-white overflow-x-hidden font-sans antialiased" onMouseMove={handleMouseMove}>
      
      {/* 导航栏 */}
      <nav className="fixed top-0 left-0 w-full z-[100] px-12 py-8 flex justify-between items-center mix-blend-difference pointer-events-none">
        <motion.div initial={{ y: -20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="text-xl font-black tracking-tighter text-white pointer-events-auto cursor-default">W.X</motion.div>
        <div className="hidden md:flex gap-12 text-[10px] uppercase tracking-[0.3em] text-white/60 pointer-events-auto font-bold">
          <a href="#vision" className="hover:text-white transition-colors">Vision</a>
          <a href="#achievements" className="hover:text-white transition-colors">Achievements</a>
          <a href="#archive" className="hover:text-white transition-colors">Archive</a>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative h-screen flex items-center justify-center bg-[#fafafa] overflow-hidden">
        <motion.div initial={{ scaleY: 0 }} animate={{ scaleY: 1 }} transition={{ duration: 1.5 }} className="absolute top-0 right-1/4 w-px h-full bg-zinc-100 origin-top" />
        <motion.div style={{ y: heroY, opacity: heroOpacity }} className="relative z-10 w-full max-w-7xl px-8 select-none text-center">
            <div className="flex flex-col md:flex-row items-end justify-center">
                <motion.h1 initial={{ x: -60, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ duration: 1.6 }} className="text-[18vw] font-black tracking-tighter text-transparent" style={{ WebkitTextStroke: "1.5px #111" }}>WENXI</motion.h1>
                <motion.h1 initial={{ x: 60, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ duration: 1.6, delay: 0.15 }} className="text-[18vw] font-black tracking-tighter md:-ml-12 text-zinc-900">HUANG</motion.h1>
            </div>
        </motion.div>
        <div className="absolute bottom-16 left-0 w-full flex flex-col items-center pointer-events-none">
          <motion.div initial={{ scaleX: 0 }} animate={{ scaleX: 1 }} transition={{ delay: 1.2, duration: 1.8 }} className="w-32 h-px bg-zinc-200 mb-6" />
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.5 }} className="text-[8px] uppercase text-zinc-400 tracking-[1em]">Industrial Design Portfolio 2026</motion.div>
          <motion.div animate={{ y: [0, 10, 0] }} transition={{ repeat: Infinity, duration: 2 }} className="mt-8 text-zinc-300">
             <ChevronDown size={16} />
          </motion.div>
        </div>
      </section>

      {/* About Section - 比例与大气感核心优化 */}
      <section id="vision" className="py-64 px-8 md:px-24 bg-white relative">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col gap-28">
            
            {/* 核心标题与头像并置布局 */}
            <div className="flex flex-col lg:flex-row items-end justify-start gap-8 lg:gap-16 pb-20 border-b border-zinc-100">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
                viewport={{ once: true }}
                className="flex-shrink-0"
              >
                <div className="flex items-center gap-4 mb-10">
                  <span className="text-[10px] font-mono text-zinc-400 uppercase tracking-[0.4em]">Section 02 / Vision</span>
                </div>
                <h2 className="text-5xl md:text-8xl lg:text-[90px] font-serif italic leading-[1] text-zinc-900 tracking-tighter">
                  跨越边界，<br/>
                  <span className="text-zinc-300 whitespace-nowrap">以逻辑驱动美学。</span>
                </h2>
              </motion.div>

              {/* 适中比例的头像 */}
              <motion.div
                initial={{ opacity: 0, scale: 0.95 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ duration: 1.2 }}
                viewport={{ once: true }}
                className="w-full md:w-[320px] flex-shrink-0 mb-4 lg:mb-2"
              >
                <div 
                  className="aspect-[3.5/4] rounded-2xl overflow-hidden shadow-2xl border border-zinc-50 cursor-zoom-in group relative"
                  onClick={() => setSelectedImage(PROFILE_IMAGE)}
                >
                  <motion.img 
                    src={PROFILE_IMAGE} 
                    alt="Huang Wenxi Portrait" 
                    className="w-full h-full object-cover"
                    style={{
                      x: useTransform(mouseX, [-0.5, 0.5], [-10, 10]),
                      y: useTransform(mouseY, [-0.5, 0.5], [-10, 10]),
                      scale: 1.1
                    }}
                  />
                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-center justify-center">
                    <Maximize2 className="text-white opacity-0 group-hover:opacity-100 transition-opacity" size={24} />
                  </div>
                </div>
                <div className="mt-4 flex justify-between items-center px-1">
                  <span className="text-[9px] font-mono text-zinc-400 uppercase tracking-widest italic">Huang Wenxi / Studio Portrait</span>
                </div>
              </motion.div>
            </div>

            {/* 正文排版 */}
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
              <motion.div 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2, duration: 1 }}
                viewport={{ once: true }}
                className="lg:col-span-7"
              >
                <p className="text-2xl md:text-3xl text-zinc-600 leading-snug font-light mb-12 italic">
                  我是黄文曦，专注于工业设计与项目整合的研究者。
                  <span className="text-zinc-400"> 坚信优秀的设计不仅是视觉的愉悦，更是对复杂问题的深刻洞察与精准平衡。</span>
                </p>
                <div className="max-w-xl">
                  <p className="text-[15px] text-zinc-500 leading-relaxed font-medium">
                    具备从概念构思、用户研究到量产落地的全链路执行能力。善于在跨部门协作中寻找最优解，以抗压与创新的双重特质应对行业挑战。致力于通过设计连接技术与生活美学，创造具有持久价值的产品体验。
                  </p>
                </div>
              </motion.div>

              <div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-2 gap-y-12">
                <ContactItem icon={<Globe size={18}/>} label="教育背景" value="岭南师范学院 · 工业设计" />
                <ContactItem icon={<Cpu size={18}/>} label="专业特长" value="产品语义 / 结构创新 / 整合研发" />
                <ContactItem icon={<Mail size={18}/>} label="电子邮箱" value="13211053092@163.com" />
                <ContactItem icon={<Phone size={18}/>} label="联络电话" value="+86 13211053092" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Awards Section - 暗黑扫描风格 */}
      <section id="achievements" className="py-40 bg-[#0a0a0a] text-white relative overflow-hidden">
        <motion.div style={{ rotate: awardBgRotate }} className="absolute top-0 right-0 w-[800px] h-[800px] bg-gradient-to-bl from-zinc-800/10 to-transparent rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2" />
        <div className="max-w-7xl mx-auto px-12 relative z-10">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-24 gap-8">
            <motion.div initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
              <span className="text-[10px] uppercase tracking-[0.5em] text-zinc-500 mb-4 block">Archive of Honors</span>
              <h2 className="text-6xl font-serif italic leading-none">荣获奖项</h2>
            </motion.div>
            <div className="bg-zinc-900 border border-zinc-800 rounded-full px-6 py-3 flex items-center gap-4">
               <div className="flex gap-1.5"><span className={`w-1.5 h-1.5 rounded-full ${isScanning ? 'bg-amber-400 animate-pulse' : 'bg-zinc-600'}`}></span><span className={`w-1.5 h-1.5 rounded-full ${isScanning ? 'bg-amber-400 animate-pulse delay-150' : 'bg-zinc-600'}`}></span></div>
               <span className="text-[10px] font-mono tracking-widest text-zinc-400 uppercase">{isScanning ? '正在同步获奖数据库...' : '扫描已完成'}</span>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {AWARDS.map((award, idx) => (
              <motion.div key={award.id} className={`group relative p-8 rounded-3xl transition-all duration-700 h-full flex flex-col justify-between ${highlightedAward === idx ? 'bg-white text-black scale-105 z-20 shadow-2xl shadow-white/5' : 'bg-zinc-900/40 border border-zinc-800 text-zinc-400'}`}>
                <div>
                   <div className="flex justify-between items-start mb-8">
                     <div className={`p-2 rounded-xl transition-colors ${highlightedAward === idx ? 'bg-zinc-100 text-black' : 'bg-zinc-800 text-zinc-500'}`}><Award size={18} /></div>
                     {award.tag && (<span className={`text-[8px] font-bold uppercase tracking-widest px-2 py-0.5 rounded ${highlightedAward === idx ? 'bg-black text-white' : 'bg-zinc-800 text-zinc-400'}`}>{award.tag}</span>)}
                   </div>
                   <h3 className={`text-lg font-bold leading-tight mb-2 transition-colors ${highlightedAward === idx ? 'text-black' : 'text-zinc-100'}`}>{award.title}</h3>
                </div>
                <p className={`text-xs mt-6 leading-relaxed transition-colors ${highlightedAward === idx ? 'text-zinc-600' : 'text-zinc-500'}`}>{award.detail}</p>
                <div className={`absolute bottom-4 right-6 text-4xl font-black opacity-[0.02] select-none transition-opacity ${highlightedAward === idx ? 'opacity-[0.08]' : ''}`}>{String(idx + 1).padStart(2, '0')}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Archive Section - 工作经历 */}
      <section id="archive" className="py-40 px-8 md:px-24 bg-white max-w-7xl mx-auto border-b border-zinc-50">
        <div className="flex flex-col md:flex-row justify-between items-baseline mb-24 border-b border-zinc-100 pb-12">
            <h2 className="text-5xl font-serif italic leading-none">经验归档</h2>
            <p className="text-zinc-400 text-[10px] mt-4 md:mt-0 uppercase tracking-[0.4em] font-mono">2025 - 2026 Professional Archive</p>
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-20">
            <div className="lg:col-span-4 space-y-10">
                <div className="bg-zinc-50 p-10 rounded-[2.5rem] border border-zinc-100 group overflow-hidden relative shadow-sm">
                    <div className="relative z-10">
                        <span className="text-amber-600 font-mono text-xs font-bold mb-4 block uppercase tracking-widest text-[10px]">2025.03 — 2026.03</span>
                        <h3 className="text-2xl font-bold mb-6 leading-tight group-hover:text-amber-700 transition-colors">广东凌丰家居用品<br/>股份有限公司</h3>
                        <p className="text-xs text-zinc-500 font-medium border-l-2 border-zinc-200 pl-4 py-1 italic mb-10 text-[11px]">担任职位：项目经理 (国家级工业设计中心)</p>
                        <ImageSlider images={COMPANY_IMAGES} onImageClick={setSelectedImage} />
                    </div>
                </div>
                <div className="p-10 text-xs text-zinc-400 leading-relaxed bg-zinc-50/30 rounded-3xl border border-dashed border-zinc-200 uppercase tracking-widest">
                    <span className="font-bold text-zinc-800 block mb-4">Background</span>专注于餐厨制品领域持续深耕, 构建规模化, 专业化, 国际化新发展格局。
                </div>
            </div>
            <div className="lg:col-span-8">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-16 bg-white border border-zinc-100 p-14 rounded-[4rem] shadow-xl shadow-zinc-100/30">
                    <div className="space-y-10 order-2 md:order-1">
                        <h4 className="font-bold text-[10px] uppercase tracking-[0.4em] text-zinc-300 flex items-center gap-4 font-mono"><span className="w-12 h-px bg-zinc-100"></span>Core Missions</h4>
                        <ul className="space-y-8">
                            <WorkBullet num="01" text="主导品牌内销渠道, 协同研发与供应链推动产品量产落地。" />
                            <WorkBullet num="02" text="负责项目全生命周期管理, 统筹进度与成本核算。" />
                            <WorkBullet num="03" text="解决设计工程化难题, 实现美学与工艺的最优平衡。" />
                            <WorkBullet num="04" text="深度洞察趋势, 以数据为导向驱动产品迭代升级。" />
                        </ul>
                        <div className="bg-zinc-900 text-white p-8 rounded-[2rem] group relative overflow-hidden shadow-2xl mt-12">
                           <p className="text-sm leading-relaxed text-zinc-400 italic">“成功主导完成14款新品落地, 累计开发产值突破 ¥4,000,000+。”</p>
                           <Compass className="absolute -bottom-8 -right-8 w-32 h-32 text-white/5 rotate-12 transition-transform duration-1000 group-hover:rotate-45" />
                        </div>
                    </div>
                    <div className="order-1 md:order-2 flex flex-col gap-6">
                        <ImageSlider images={WORK_RESULT_IMAGES} onImageClick={setSelectedImage} />
                        <p className="text-center text-[10px] text-zinc-400 uppercase tracking-widest font-bold italic">视觉成果展示图</p>
                    </div>
                </div>
            </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-white py-32 px-12 flex flex-col md:flex-row justify-between items-center gap-8 text-[9px] uppercase tracking-[0.5em] text-zinc-300 font-medium font-mono border-t border-zinc-50">
        <div>Huang Wenxi &copy; 2026 / Industrial Designer</div>
        <div className="flex gap-16">
            <span className="text-zinc-200">Lat: 23.0511&deg; N</span>
            <span className="text-zinc-200">Lng: 112.4646&deg; E</span>
        </div>
      </footer>

      {/* 高清图片灯箱 */}
      <AnimatePresence>
        {selectedImage && (
          <motion.div 
            initial={{ opacity: 0 }} 
            animate={{ opacity: 1 }} 
            exit={{ opacity: 0 }} 
            className="fixed inset-0 z-[2000] bg-black/95 flex items-center justify-center p-4 md:p-12 cursor-zoom-out" 
            onClick={() => setSelectedImage(null)}
          >
            <motion.div 
              initial={{ scale: 0.9, opacity: 0 }} 
              animate={{ scale: 1, opacity: 1 }} 
              exit={{ scale: 0.9, opacity: 0 }} 
              transition={{ type: "spring", damping: 30, stiffness: 300 }} 
              className="relative max-w-full max-h-full flex items-center justify-center pointer-events-none"
            >
              <img 
                src={selectedImage} 
                className="rounded-xl shadow-2xl max-w-full max-h-[90vh] object-contain pointer-events-auto border border-white/5 bg-white" 
                alt="作品高清大图" 
                onClick={(e) => e.stopPropagation()} 
              />
              <button 
                className="absolute -top-14 right-0 md:-right-14 p-4 bg-white text-black rounded-full hover:scale-110 shadow-2xl pointer-events-auto active:scale-95 transition-transform" 
                onClick={() => setSelectedImage(null)}
              >
                <X size={24} />
              </button>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,900;1,400;1,900&family=Inter:wght@300;400;500;700;900&display=swap');
        
        body { 
          font-family: 'Inter', sans-serif; 
          scroll-behavior: smooth; 
          -webkit-font-smoothing: antialiased; 
          overflow-x: hidden; 
        }
        
        h1, h2, h3, .font-serif { 
          font-family: 'Playfair Display', serif; 
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: #ffffff; }
        ::-webkit-scrollbar-thumb { background: #e5e5e5; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #000000; }

        /* 交互提示微调 */
        .cursor-zoom-in { cursor: zoom-in; }
      `}</style>
    </div>
  );
}