import React from 'react';

export default function Home() {
  return (
    <div className="min-h-screen bg-[#F9F6F0] text-[#221215] font-sans selection:bg-[#C5A059] selection:text-white">
      {/* 顶部导航栏 */}
      <header className="sticky top-0 z-50 bg-[#F9F6F0]/90 backdrop-blur-md border-b border-[#C5A059]/20 px-6 py-4 flex justify-between items-center">
        <div className="flex flex-col">
          <span className="text-xl font-bold tracking-[0.2em] text-[#221215] font-serif">YUZI</span>
          <span className="text-[10px] tracking-[0.3em] text-[#C5A059] -mt-1">ATELIER</span>
        </div>
        <nav className="hidden md:flex space-x-8 text-sm tracking-widest font-medium">
          <a href="#" className="hover:text-[#D62828] transition-colors">首页 / HOME</a>
          <a href="#" className="hover:text-[#D62828] transition-colors">线上商店 / SHOP</a>
          <a href="#" className="hover:text-[#D62828] transition-colors">关于我们 / ABOUT</a>
          <a href="#" className="hover:text-[#D62828] transition-colors">定制预约 / CONTACT</a>
        </nav>
        <div className="flex items-center space-x-4 text-sm font-medium">
          <span className="cursor-pointer hover:text-[#D62828]">🔍</span>
          <span className="cursor-pointer hover:text-[#D62828]">🛒</span>
        </div>
      </header>

      {/* 巨幕主横幅 (Hero Section) - 融入你第四张图的华丽暗红金风格 */}
      <section className="relative bg-[#1A0F11] text-[#F9F6F0] py-24 px-6 md:py-36 text-center overflow-hidden border-b-4 border-[#C5A059]">
        {/* 祥云氛围装饰元素 */}
        <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#C5A059_1px,transparent_1px)] [background-size:16px_16px]"></div>
        
        <div className="relative max-w-3xl mx-auto z-10 flex flex-col items-center">
          {/* 模拟你的金色如意祥云 LOGO 占位 */}
          <div className="w-16 h-16 border-2 border-[#C5A059] rounded-full flex items-center justify-center text-[#C5A059] mb-6 text-xl tracking-widest font-serif animate-pulse">
            卐
          </div>
          <h1 className="text-4xl md:text-6xl font-bold tracking-[0.25em] mb-4 font-serif text-[#C5A059]">
            YUZI ATELIER
          </h1>
          <p className="text-xs md:text-sm tracking-[0.4em] uppercase text-[#F9F6F0]/80 mb-8">
            Handmade with Love • Fine Jewelry & Objects
          </p>
          <div className="h-[1px] w-24 bg-[#C5A059] mb-8"></div>
          <p className="text-sm md:text-base tracking-widest leading-loose max-w-xl text-[#F9F6F0]/90 mb-10 font-light">
            以东方美学为底蕴，融合现代独立设计。每一件首饰，均由独到匠心手工雕琢，赋予器物独特的生命温度与不朽风华。
          </p>
          <button className="bg-[#D62828] text-white hover:bg-[#b71c1c] font-medium tracking-widest text-xs px-8 py-3 rounded-sm shadow-lg border border-[#C5A059]/40 transition-all duration-300 transform hover:-translate-y-0.5">
            探索全新系列 / EXPLORE NOW
          </button>
        </div>
      </section>

      {/* 核心四大品牌品类展示 (014, 018, 020, 025类) */}
      <section className="max-w-7xl mx-auto py-20 px-6">
        <div className="text-center mb-16">
          <h2 className="text-2xl md:text-3xl font-serif tracking-[0.2em] text-[#221215]">主营品类 / COLLECTIONS</h2>
          <div className="h-[2px] w-12 bg-[#D62828] mx-auto mt-3"></div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* 品类1：手工首饰 */}
          <div className="bg-white border border-[#C5A059]/10 rounded-sm overflow-hidden shadow-sm hover:shadow-md transition-all group">
            <div className="h-72 bg-[#EFECE6] flex items-center justify-center text-sm text-gray-400 group-hover:bg-[#EAE6DD] transition-colors relative">
              {/* 这里未来放你手作首饰或第三张封口贴的美图 */}
              <span className="tracking-widest">[ 014 高级手工首饰图片 ]</span>
              <div className="absolute top-4 left-4 bg-[#D62828] text-white text-[10px] tracking-widest px-2 py-0.5">MAIN</div>
            </div>
            <div className="p-6 text-center border-t border-[#C5A059]/10">
              <h3 className="font-serif tracking-widest text-base font-bold text-[#221215]">HANDMADE JEWELRY</h3>
              <p className="text-xs text-[#C5A059] tracking-widest mt-1">匠心手作配饰</p>
            </div>
          </div>

          {/* 品类2：皮具包袋 */}
          <div className="bg-white border border-[#C5A059]/10 rounded-sm overflow-hidden shadow-sm hover:shadow-md transition-all group">
            <div className="h-72 bg-[#EFECE6] flex items-center justify-center text-sm text-gray-400 group-hover:bg-[#EAE6DD] transition-colors">
              {/* 这里放你提到准备定做的小拎包、手拎袋、包装盒实物图 */}
              <span className="tracking-widest">[ 018 设计师包袋/包装袋图片 ]</span>
            </div>
            <div className="p-6 text-center border-t border-[#C5A059]/10">
              <h3 className="font-serif tracking-widest text-base font-bold text-[#221215]">BAGS & LEATHER</h3>
              <p className="text-xs text-[#C5A059] tracking-widest mt-1">美学帆布袋与皮具</p>
            </div>
          </div>

          {/* 品类3：美学成衣 */}
          <div className="bg-white border border-[#C5A059]/10 rounded-sm overflow-hidden shadow-sm hover:shadow-md transition-all group">
            <div className="h-72 bg-[#EFECE6] flex items-center justify-center text-sm text-gray-400 group-hover:bg-[#EAE6DD] transition-colors">
              <span className="tracking-widest">[ 025 独立设计成衣图片 ]</span>
            </div>
            <div className="p-6 text-center border-t border-[#C5A059]/10">
              <h3 className="font-serif tracking-widest text-base font-bold text-[#221215]">READY TO WEAR</h3>
              <p className="text-xs text-[#C5A059] tracking-widest mt-1">极简高格调服饰</p>
            </div>
          </div>

          {/* 品类4：家居艺术 */}
          <div className="bg-white border border-[#C5A059]/10 rounded-sm overflow-hidden shadow-sm hover:shadow-md transition-all group">
            <div className="h-72 bg-[#EFECE6] flex items-center justify-center text-sm text-gray-400 group-hover:bg-[#EAE6DD] transition-colors">
              <span className="tracking-widest">[ 020 家居艺术摆件图片 ]</span>
            </div>
            <div className="p-6 text-center border-t border-[#C5A059]/10">
              <h3 className="font-serif tracking-widest text-base font-bold text-[#221215]">HOME OBJECTS</h3>
              <p className="text-xs text-[#C5A059] tracking-widest mt-1">空间软装与生活器物</p>
            </div>
          </div>
        </div>
      </section>

      {/* 包装与匠心故事区 (035网购体验的核心升级) */}
      <section className="bg-[#D62828] text-white py-16 px-6 border-y border-[#C5A059]/30">
        <div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center gap-12">
          <div className="w-full md:w-1/2 text-center md:text-left">
            <span className="text-[10px] tracking-[0.4em] text-[#C5A059] bg-[#1A0F11] px-3 py-1 font-bold">THE ART OF PACKAGING</span>
            <h2 className="text-3xl font-serif tracking-widest mt-4 mb-6 text-[#F9F6F0]">独家美学包装 • 传递手作温度</h2>
            <p className="text-sm tracking-widest leading-loose font-light opacity-95">
              在 Yuzi Atelier，网络销售（035）不仅是一次交易，更是一场完整的美学仪式。我们特别为您定制了朱红与烫金交织的珠宝匣，以及高密麻砂帆布手拎袋。从封口贴的落墨到丝带的系结，皆由主理人亲手完成，让您开箱的每一个瞬间，都能感受到手工定制的崇高敬意。
            </p>
          </div>
          <div className="w-full md:w-1/2 grid grid-cols-2 gap-4">
            {/* 这里用于展示你的红色手拎小盒子和设计图 */}
            <div className="bg-[#1A0F11]/40 aspect-square rounded-sm border border-[#C5A059]/20 flex items-center justify-center text-xs tracking-widest text-center p-2 text-[#C5A059]">[ 红色手拎珠宝盒 ]</div>
            <div className="bg-[#1A0F11]/40 aspect-square rounded-sm border border-[#C5A059]/20 flex items-center justify-center text-xs tracking-widest text-center p-2 text-[#C5A059]">[ 烫金封口贴设计 ]</div>
          </div>
        </div>
      </section>

      {/* 页脚 / FOOTER */}
      <footer className="bg-[#1A0F11] text-[#F9F6F0]/60 text-xs py-12 px-6 border-t border-[#C5A059]/20 tracking-widest text-center">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="text-center md:text-left">
            <p className="font-serif font-bold text-[#C5A059] text-sm tracking-widest">YUZI ATELIER</p>
            <p className="mt-1 text-[10px]">© 2026 Yuzi Atelier. All Rights Reserved.</p>
          </div>
          <div className="flex space-x-6 text-[10px]">
            <a href="#" className="hover:text-[#C5A059]">使用条款</a>
            <a href="#" className="hover:text-[#C5A059]">隐私政策</a>
            <a href="#" className="hover:text-[#C5A059]">退换货政策 (035类保障)</a>
          </div>
        </div>
      </footer>
    </div>
  );
}