import { api } from '@/lib/api';
import ProductCard from '@/components/ProductCard';
import Navbar from '@/components/Navbar';
import { fetchCmsBlocks, fetchSiteConfig, getCmsValue } from '@/lib/siteConfig';
import {
  ShieldCheck,
  RefreshCcw,
  Headset,
  BadgeCheck,
  TrendingUp,
  Search,
  CreditCard,
  Package,
  AlertTriangle,
  FileText,
  Lock,
  Scale
} from 'lucide-react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import SellerStartButton from '@/components/SellerStartButton';

interface Product {
  id: string;
  name: string;
  slug: string;
  price: number;
  image?: string;
  category?: { name: string };
  seller?: { name: string };
}

export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;

  const [productsRes, siteConfig, cmsBlocks] = await Promise.all([
    (async () => {
      try {
        const res = await api.get('/products?limit=10&featured=true');
        return res.data?.data || [];
      } catch {
        return [];
      }
    })(),
    fetchSiteConfig(locale),
    fetchCmsBlocks(locale),
  ]);

  const products: Product[] = productsRes;
  const heroTitle = getCmsValue(cmsBlocks, 'home.hero.title', locale === 'vi' ? 'SHOPMMO - sàn giao dịch sản phẩm, dịch vụ số' : 'SHOPMMO - digital goods and services marketplace');
  const heroSubtitle = getCmsValue(cmsBlocks, 'home.hero.subtitle', locale === 'vi'
    ? 'SHOPMMO giúp người mua tìm sản phẩm số đáng tin cậy và giúp người bán mở gian hàng để kinh doanh mã phần mềm, mã đăng ký, thẻ quà tặng, mẫu, tệp và dịch vụ số trong một quy trình giao dịch có bảo vệ.'
    : 'SHOPMMO helps buyers discover trusted digital products and lets sellers launch stores for software keys, subscriptions, gift cards, templates, files, and services with protected transactions.');
  const ctaExplore = getCmsValue(cmsBlocks, 'home.cta.explore', locale === 'vi' ? 'Khám phá ngay' : 'Explore now');
  const ctaSell = getCmsValue(cmsBlocks, 'home.cta.sell', locale === 'vi' ? 'Bán hàng cùng SHOPMMO' : 'Sell with SHOPMMO');
  const sectionProductsTitle = getCmsValue(cmsBlocks, 'home.section.products.title', locale === 'vi' ? 'Sản phẩm nổi bật' : 'Featured products');
  const sectionSellerTitle = getCmsValue(cmsBlocks, 'home.section.seller.title', locale === 'vi' ? 'Trở thành người bán cùng' : 'Become a seller with');
  const sectionBrowseTitle = getCmsValue(cmsBlocks, 'home.section.browse.title', locale === 'vi' ? 'Mua gì hôm nay?' : 'What to buy today?');
  const sectionBrowseSubtitle = getCmsValue(cmsBlocks, 'home.section.browse.subtitle', locale === 'vi' ? 'Lựa chọn danh mục phù hợp nhu cầu của bạn' : 'Choose the right category for your needs');
  const sectionSafetyTitle = getCmsValue(cmsBlocks, 'home.section.safety.title', locale === 'vi' ? 'Quy trình giao dịch an toàn' : 'Safe transaction process');
  const sectionSafetySubtitle = getCmsValue(cmsBlocks, 'home.section.safety.subtitle', locale === 'vi' ? 'Đơn giản - Nhanh chóng - Tự động 100%' : 'Simple - Fast - Fully automated');
  const siteTitle = siteConfig.siteName || 'SHOP MMO';
  const siteDescription = siteConfig.siteDescription || 'Marketplace sản phẩm số';

  const features = [
    { icon: ShieldCheck, title: '100% An toàn', desc: 'Bảo mật tuyệt đối' },
    { icon: RefreshCcw, title: 'Giao dịch tự động', desc: 'Nhận hàng ngay lập tức' },
    { icon: Headset, title: 'Hỗ trợ 24/7', desc: 'Kênh hỗ trợ nhanh' },
    { icon: BadgeCheck, title: 'Nhiều lựa chọn', desc: 'Hàng ngàn sản phẩm' },
  ];

  return (
    <div className="min-h-screen bg-background text-foreground font-sans">
      <Navbar />

      <main className="container mx-auto flex flex-col px-4 py-8 space-y-20 max-w-7xl">

        {/* HERO SECTION */}
        <section className="order-1 flex flex-col lg:flex-row items-center gap-10 mt-4 relative">
          <div className="absolute top-1/2 left-1/4 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-red-500/10 rounded-full blur-[120px] pointer-events-none" />

          <div className="flex-1 space-y-6 z-10">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-white leading-[1.1] tracking-tight max-w-2xl">
              {heroTitle}
            </h1>
            <p className="text-gray-400 text-lg md:text-xl max-w-xl leading-relaxed">
              {heroSubtitle}
            </p>
            <div className="flex flex-wrap items-center gap-4 pt-4">
              <Link href={`/${locale}/search`} className="rounded-full">
                <Button className="bg-red-500 hover:bg-red-600 text-white rounded-full px-8 py-6 text-lg font-bold shadow-[0_0_20px_rgba(239,68,68,0.3)] w-full sm:w-auto">
                  {ctaExplore}
                </Button>
              </Link>
              <Link href={`/${locale}/seller-application`} className="rounded-full">
                <Button variant="outline" className="rounded-full px-8 py-6 text-lg font-bold border-white/20 text-white hover:bg-white/5 hover:text-white w-full sm:w-auto">
                  {ctaSell}
                </Button>
              </Link>
            </div>
          </div>

          <div className="flex-1 relative z-10 hidden lg:flex items-center justify-center w-full max-w-lg min-h-[400px]">
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-red-500/20 rounded-full blur-[80px]" />

             <div className="relative w-full h-full group">
               <div className="absolute left-[20%] top-[10%] transform -rotate-12 hover:-translate-y-4 hover:scale-110 hover:-rotate-6 transition-all duration-500 shadow-[0_0_40px_rgba(229,9,20,0.3)] rounded-2xl bg-[#141414] border border-white/5 p-4 flex flex-col items-center gap-2">
                 <img src="https://cdn.simpleicons.org/netflix/E50914" alt="Netflix" className="w-16 h-16 object-contain" />
                 <span className="text-white text-xs font-bold uppercase tracking-wider">Premium</span>
               </div>
               <div className="absolute right-[15%] top-[25%] transform rotate-12 hover:-translate-y-4 hover:scale-110 hover:rotate-6 transition-all duration-500 shadow-[0_0_40px_rgba(30,215,96,0.3)] rounded-2xl bg-[#141414] border border-white/5 p-4 flex flex-col items-center gap-2">
                 <img src="https://cdn.simpleicons.org/spotify/1ED760" alt="Spotify" className="w-14 h-14 object-contain" />
                 <span className="text-white text-xs font-bold uppercase tracking-wider">Premium</span>
               </div>
               <div className="absolute left-[35%] top-[40%] z-10 transform hover:-translate-y-4 hover:scale-110 transition-all duration-500 shadow-[0_0_50px_rgba(88,101,242,0.4)] rounded-2xl bg-[#5865F2]/20 border border-[#5865F2]/50 p-6 flex flex-col items-center gap-3">
                 <img src="https://cdn.simpleicons.org/discord/white" alt="Discord" className="w-20 h-20 object-contain" />
                 <span className="text-white text-sm font-bold uppercase tracking-wider bg-white/20 px-3 py-1 rounded-full">Nitro</span>
               </div>
               <div className="absolute left-[15%] bottom-[15%] transform -rotate-6 hover:-translate-y-4 hover:scale-110 hover:-rotate-0 transition-all duration-500 shadow-[0_0_40px_rgba(36,161,222,0.3)] rounded-2xl bg-[#141414] border border-white/5 p-4 flex flex-col items-center gap-2">
                 <img src="https://cdn.simpleicons.org/telegram/24A1DE" alt="Telegram" className="w-14 h-14 object-contain" />
                 <span className="text-white text-xs font-bold uppercase tracking-wider">Premium</span>
               </div>
               <div className="absolute right-[25%] bottom-[10%] transform rotate-6 hover:-translate-y-4 hover:scale-110 hover:rotate-0 transition-all duration-500 shadow-[0_0_40px_rgba(255,255,255,0.1)] rounded-2xl bg-[#141414] border border-white/5 p-4 flex flex-col items-center gap-2">
                 <img src="https://cdn.simpleicons.org/steam/white" alt="Steam" className="w-16 h-16 object-contain" />
                 <span className="text-white text-xs font-bold uppercase tracking-wider">Wallet</span>
               </div>
             </div>
          </div>
        </section>

        {/* SECTION 1: MUA GÌ HÔM NAY */}
        <section className="order-3 space-y-8 text-center pt-10">
          <div>
            <h2 className="text-3xl font-bold text-white mb-2">{sectionBrowseTitle}</h2>
            <p className="text-gray-400">{sectionBrowseSubtitle}</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
             {/* Categories */}
             {[
               { icon: FileText, title: 'Giấy phép phần mềm', desc: 'Mã bản quyền' },
               { icon: CreditCard, title: 'Thẻ quà tặng', desc: 'Thẻ quà tặng' },
               { icon: Search, title: 'Mã giá trị', desc: 'Mã giá trị số' },
               { icon: RefreshCcw, title: 'Mã đăng ký', desc: 'Mã đăng ký dịch vụ' },
               { icon: Package, title: 'Phần mềm', desc: 'Phần mềm' },
               { icon: Headset, title: 'Dịch vụ', desc: 'Dịch vụ số' },
             ].map((cat, i) => (
               <div key={i} className="bg-[#141414] border border-white/5 hover:border-white/20 hover:bg-white/5 transition-all p-6 rounded-2xl flex flex-col items-center gap-3 cursor-pointer">
                 <cat.icon className="w-8 h-8 text-gray-300" />
                 <div className="text-center">
                   <h3 className="text-white font-bold text-sm">{cat.title}</h3>
                   <p className="text-gray-500 text-[10px] mt-1">{cat.desc}</p>
                 </div>
               </div>
             ))}
          </div>
        </section>

        {/* SECTION 2: QUY TRÌNH AN TOÀN */}
        <section className="order-4 bg-gradient-to-r from-[#141414] to-[#1a1a1a] border border-white/5 rounded-3xl p-8 relative overflow-hidden flex flex-col md:flex-row items-center justify-between">
          <div className="z-10 mb-6 md:mb-0 text-center md:text-left pr-8 border-r border-white/5 hidden md:block">
            <h2 className="text-2xl font-bold text-white">{sectionSafetyTitle}</h2>
            <p className="text-gray-400 text-sm mt-1">{sectionSafetySubtitle}</p>
          </div>
          <div className="flex-1 flex flex-wrap md:flex-nowrap items-center justify-center md:justify-around gap-4 z-10 w-full">
            {[
              { num: '1', title: 'Chọn sản phẩm', desc: 'Tìm và chọn sản phẩm ưng ý' },
              { num: '2', title: 'Thanh toán', desc: 'Thanh toán an toàn, đa dạng' },
              { num: '3', title: 'Nhận hàng', desc: 'Hệ thống gửi hàng tự động' },
              { num: '4', title: 'Đánh giá', desc: 'Xác nhận và nhận hỗ trợ' },
            ].map((step, i) => (
              <div key={i} className="flex flex-col items-center text-center gap-2 px-2">
                <div className="w-10 h-10 rounded-full bg-teal-500/10 border border-teal-500/30 text-teal-400 flex items-center justify-center font-bold text-lg">
                  {step.num}
                </div>
                <h4 className="text-white font-bold text-sm">{step.title}</h4>
                <p className="text-gray-500 text-[10px]">{step.desc}</p>
              </div>
            ))}
          </div>
          {/* Decorative faint image/lines in background */}
          <div className="absolute right-0 top-0 bottom-0 w-1/3 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 pointer-events-none" />
        </section>

        {/* PRODUCTS SECTION (SẢN PHẨM NỔI BẬT) */}
        <section className="order-2 space-y-6 pt-10">
          <div className="flex items-end justify-between border-b border-white/10 pb-4">
            <div>
              <h2 className="text-2xl font-bold text-white mb-4">{sectionProductsTitle}</h2>
              <div className="flex items-center gap-6">
                <button className="text-red-500 font-semibold text-sm pb-4 border-b-2 border-red-500 -mb-[18px]">Bán chạy</button>
                <button className="text-gray-400 font-medium text-sm pb-4 hover:text-white transition-colors">Mới cập nhật</button>
                <button className="text-gray-400 font-medium text-sm pb-4 hover:text-white transition-colors">Giá tốt</button>
                <button className="text-gray-400 font-medium text-sm pb-4 hover:text-white transition-colors">Đánh giá cao</button>
              </div>
            </div>
            <Button variant="outline" size="sm" className="rounded-full border-white/20 text-gray-300 hover:text-white hover:bg-white/10 text-xs h-8 px-4">
              Xem tất cả
            </Button>
          </div>

          {products.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-48 rounded-xl border border-dashed border-white/10 text-gray-500 bg-white/5">
              <p>{locale === 'vi' ? 'Chưa có sản phẩm nào' : 'No products yet'}</p>
            </div>
          ) : (
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
              {products.map((p) => (
                <ProductCard key={p.id} product={p} locale={locale} />
              ))}
            </div>
          )}
        </section>

        {/* SECTION 4: SELLER CTA & FILTERS */}
        <section className="order-5 grid grid-cols-1 lg:grid-cols-3 gap-6 pt-10">
           {/* Seller CTA */}
           <div className="lg:col-span-3 bg-[#141414] border border-white/5 rounded-3xl p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden">
             <div className="absolute right-0 top-0 w-1/2 h-full bg-blue-500/5 blur-[100px] pointer-events-none" />
             <div className="z-10 space-y-6 max-w-lg">
               <h2 className="text-3xl md:text-4xl font-bold text-white leading-tight">
                 {sectionSellerTitle} {siteTitle}
               </h2>
               <p className="text-gray-400 text-sm md:text-base">
                 {siteDescription}. Bắt đầu kinh doanh sản phẩm số dễ dàng. Tiếp cận hàng ngàn khách hàng mỗi ngày và gia tăng thu nhập bền vững.
               </p>
               <ul className="space-y-3">
                 <li className="flex items-center gap-2 text-teal-400 text-sm font-semibold">
                   <ShieldCheck className="w-4 h-4" /> Không phí duy trì
                 </li>
                 <li className="flex items-center gap-2 text-teal-400 text-sm font-semibold">
                   <ShieldCheck className="w-4 h-4" /> Thanh toán nhanh
                 </li>
                 <li className="flex items-center gap-2 text-teal-400 text-sm font-semibold">
                   <ShieldCheck className="w-4 h-4" /> Báo cáo minh bạch
                 </li>
               </ul>
               <SellerStartButton locale={locale} />
             </div>
             <div className="z-10 hidden md:block w-full max-w-sm rounded-xl overflow-hidden border border-white/10 shadow-2xl bg-[#0a0a0a]/50 p-4">
                {/* Fake Graph UI */}
                <div className="space-y-4">
                  <div className="flex gap-4">
                    <div className="h-2 w-16 bg-white/20 rounded"></div>
                    <div className="h-2 w-16 bg-white/20 rounded"></div>
                    <div className="h-2 w-16 bg-white/20 rounded"></div>
                  </div>
                  <div className="h-[150px] w-full border-b border-l border-white/10 flex items-end justify-between px-2 pb-2">
                    <div className="w-2 bg-teal-500 h-[30%]"></div>
                    <div className="w-2 bg-teal-500 h-[50%]"></div>
                    <div className="w-2 bg-teal-500 h-[20%]"></div>
                    <div className="w-2 bg-teal-500 h-[80%]"></div>
                    <div className="w-2 bg-teal-500 h-[60%]"></div>
                    <div className="w-2 bg-teal-500 h-[100%]"></div>
                    <div className="w-2 bg-teal-500 h-[70%]"></div>
                    <div className="w-2 bg-teal-500 h-[90%]"></div>
                  </div>
                </div>
             </div>
           </div>

           {/* Tags */}
           <div className="lg:col-span-2 bg-[#141414] border border-white/5 rounded-3xl p-8">
             <h3 className="text-white font-bold mb-4">Từ khóa phổ biến</h3>
             <div className="flex flex-wrap gap-2">
               {['Steam', 'PSN', 'Telegram Premium', 'Windows 11', 'Microsoft 365', 'Canva Pro', 'Spotify', 'Netflix', 'iTunes', 'Adobe', 'Notion', 'Discord Nitro'].map((tag) => (
                 <span key={tag} className="px-4 py-2 rounded-full bg-white/5 border border-white/5 text-gray-300 text-xs font-semibold hover:bg-white/10 cursor-pointer transition-colors">
                   {tag}
                 </span>
               ))}
             </div>
           </div>

           {/* Price filter */}
           <div className="lg:col-span-1 bg-[#141414] border border-white/5 rounded-3xl p-8">
             <h3 className="text-white font-bold mb-4">Lọc nhanh theo giá</h3>
             <div className="grid grid-cols-2 gap-2">
               {['Dưới 50k', 'Dưới 100k', '100k - 250k', '250k - 500k', 'Từ 500k', 'Còn hàng'].map((price) => (
                 <span key={price} className="px-3 py-2 rounded-lg bg-black border border-white/5 text-gray-400 text-xs font-semibold text-center hover:bg-white/5 cursor-pointer transition-colors">
                   {price}
                 </span>
               ))}
             </div>
           </div>

           {/* Trust Banner */}
           <div className="lg:col-span-3 bg-[#112a28] border border-teal-500/20 rounded-3xl p-6 flex flex-col md:flex-row items-center justify-between gap-6">
             <div className="flex items-center gap-4">
               <div className="w-12 h-12 rounded-full bg-teal-500/20 flex items-center justify-center text-teal-400">
                 <ShieldCheck className="w-6 h-6" />
               </div>
               <div>
                 <h2 className="text-xl font-bold text-white">SHOP MMO - Uy tín tạo nên thương hiệu</h2>
                 <p className="text-teal-400/80 text-sm">Hàng ngàn khách hàng tin tưởng và lựa chọn mỗi ngày.</p>
               </div>
             </div>
             <Link href={`/${locale}/search`}>
               <Button className="bg-teal-500 hover:bg-teal-600 text-black font-bold px-8">Mua sắm ngay</Button>
             </Link>
           </div>
        </section>

        {/* SECTION 5: THÔNG TIN NỀN TẢNG & PHÁP LÝ */}
        <section className="order-6 pt-10 space-y-6">
          <div className="flex flex-col lg:flex-row gap-6">
             {/* Left Text */}
             <div className="lg:w-1/2 space-y-4">
               <p className="text-teal-400 font-bold text-[10px] uppercase tracking-widest">SHOP MMO: GLOBAL COMMERCE - MODERN MARKET ONLINE</p>
               <h2 className="text-3xl md:text-4xl font-bold text-white leading-tight">Nền Tảng Giao Dịch Sản Phẩm Số & Công Nghệ</h2>
               <p className="text-gray-400 text-sm leading-relaxed text-justify">
                 SHOP MMO ra đời với sứ mệnh xây dựng một môi trường kinh doanh trực tuyến hiện đại, minh bạch và an toàn. Chúng tôi kết nối người mua với những nhà cung cấp uy tín, cung cấp các sản phẩm chất lượng cao từ không gian số (mã phần mềm, gói thuê bao, thẻ quà tặng, mẫu thiết kế...) cho đến không gian vật lý (thiết bị công nghệ, điện tử). Dù bạn là người mua đang tìm kiếm sản phẩm chính hãng hay nhà bán hàng muốn mở rộng thị trường, quy trình giao dịch được bảo vệ tuyệt đối của SHOP MMO sẽ luôn mang lại sự an tâm cho bạn.
               </p>
             </div>

             {/* Right Cards */}
             <div className="lg:w-1/2 grid grid-cols-1 md:grid-cols-3 gap-4">
               <div className="bg-[#141414] border border-white/5 rounded-2xl p-5 space-y-3">
                 <div className="w-8 h-8 rounded bg-teal-500/10 text-teal-400 flex items-center justify-center border border-teal-500/20"><Package className="w-4 h-4" /></div>
                 <h4 className="text-white font-bold text-sm">Mua sản phẩm số</h4>
                 <p className="text-gray-500 text-[10px] leading-relaxed">Tìm mã phần mềm, thẻ quà tặng và dịch vụ số từ các gian hàng trên SHOP MMO.</p>
               </div>
               <div className="bg-[#141414] border border-white/5 rounded-2xl p-5 space-y-3">
                 <div className="w-8 h-8 rounded bg-teal-500/10 text-teal-400 flex items-center justify-center border border-teal-500/20"><TrendingUp className="w-4 h-4" /></div>
                 <h4 className="text-white font-bold text-sm">Bán qua gian hàng</h4>
                 <p className="text-gray-500 text-[10px] leading-relaxed">Tạo hồ sơ người bán, đăng sản phẩm, quản lý đơn hàng và theo dõi doanh thu tại một nơi.</p>
               </div>
               <div className="bg-[#141414] border border-white/5 rounded-2xl p-5 space-y-3">
                 <div className="w-8 h-8 rounded bg-teal-500/10 text-teal-400 flex items-center justify-center border border-teal-500/20"><ShieldCheck className="w-4 h-4" /></div>
                 <h4 className="text-white font-bold text-sm">Giao dịch có bảo vệ</h4>
                 <p className="text-gray-500 text-[10px] leading-relaxed">Theo dõi quy trình đơn hàng rõ ràng với thanh toán, trạng thái giao hàng, kênh hỗ trợ và xử lý tranh chấp khi cần.</p>
               </div>
             </div>
          </div>

          {/* Privacy Box */}
          <div className="bg-[#111a18] border border-teal-500/20 rounded-2xl p-6 md:p-8 flex flex-col md:flex-row gap-6 items-start">
             <div className="w-12 h-12 rounded-full bg-teal-500/20 text-teal-400 flex items-center justify-center shrink-0 border border-teal-500/30">
               <ShieldCheck className="w-6 h-6" />
             </div>
             <div className="space-y-4">
               <div>
                 <p className="text-teal-400 font-bold text-[10px] uppercase tracking-widest mb-1">MINH BẠCH DỮ LIỆU NGƯỜI DÙNG</p>
                 <h3 className="text-2xl font-bold text-white">Vì sao SHOP MMO cần dữ liệu người dùng?</h3>
               </div>
               <p className="text-gray-400 text-sm leading-relaxed">
                 SHOP MMO yêu cầu thông tin tài khoản, liên hệ, đơn hàng, thanh toán, giao hàng và nội dung hỗ trợ cần thiết cho hoạt động mua bán. SHOP MMO chỉ dùng dữ liệu này để xác thực người dùng, xử lý giao dịch, giao sản phẩm số, chống gian lận, hỗ trợ tranh chấp và vận hành gian hàng.
               </p>
               <Link href={`/${locale}/terms`}>
                 <Button variant="outline" className="border-white/10 text-gray-300 hover:text-white hover:bg-white/5 h-10 px-6 rounded-lg text-sm">
                   Xem Chính sách quyền riêng tư
                 </Button>
               </Link>
             </div>
          </div>

          {/* Legal Box */}
          <div className="bg-[#1a150e] border border-orange-500/20 rounded-2xl p-6 md:p-8 space-y-8">
             <div className="flex items-center justify-between border-b border-white/5 pb-6">
               <div className="flex items-center gap-4">
                 <div className="w-12 h-12 rounded-full bg-orange-500/20 text-orange-500 flex items-center justify-center shrink-0 border border-orange-500/30">
                   <AlertTriangle className="w-6 h-6" />
                 </div>
                 <div>
                   <p className="text-orange-500 font-bold text-[10px] uppercase tracking-widest mb-1">THÔNG BÁO PHÁP LÝ</p>
                   <h3 className="text-2xl font-bold text-white">Tuyên bố miễn trừ trách nhiệm</h3>
                 </div>
               </div>
               <span className="hidden md:inline-block border border-orange-500/30 text-orange-500 text-xs font-bold px-3 py-1 rounded">⚠ Quan trọng</span>
             </div>

             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
               <div className="space-y-4">
                 <h4 className="text-orange-500 font-bold text-sm flex items-center gap-2 uppercase">
                   <FileText className="w-4 h-4" /> NGƯỜI BÁN - QUY ĐỊNH
                 </h4>
                 <ul className="space-y-3 text-xs text-gray-400">
                   <li className="flex gap-2"><span className="text-orange-500">⊙</span> Chỉ được bán tài khoản tự tạo, tự sở hữu hợp pháp.</li>
                   <li className="flex gap-2"><span className="text-orange-500">⊙</span> Không được bán cùng một tài khoản, thông tin đăng nhập cho nhiều người.</li>
                   <li className="flex gap-2"><span className="text-orange-500">⊙</span> Nghiêm cấm bán tài khoản ngân hàng, ví điện tử, thẻ tín dụng.</li>
                   <li className="flex gap-2"><span className="text-orange-500">⊙</span> Người bán chịu hoàn toàn trách nhiệm pháp lý về nguồn gốc hợp pháp.</li>
                 </ul>
               </div>
               <div className="space-y-4">
                 <h4 className="text-orange-500 font-bold text-sm flex items-center gap-2 uppercase">
                   <Lock className="w-4 h-4" /> NGƯỜI MUA - CAM KẾT
                 </h4>
                 <ul className="space-y-3 text-xs text-gray-400">
                   <li className="flex gap-2"><span className="text-orange-500">⊙</span> Chỉ sử dụng sản phẩm mua cho mục đích hợp pháp và tuân thủ pháp luật.</li>
                   <li className="flex gap-2"><span className="text-orange-500">⊙</span> Nghiêm cấm dùng sản phẩm để lừa đảo, chiếm đoạt tài sản.</li>
                   <li className="flex gap-2"><span className="text-orange-500">⊙</span> Không dùng tài khoản tấn công hệ thống, vượt quyền truy cập.</li>
                   <li className="flex gap-2"><span className="text-orange-500">⊙</span> Không được bán lại, chia sẻ hoặc chuyển giao sản phẩm đã mua.</li>
                 </ul>
               </div>
             </div>

             <div className="border-t border-white/5 pt-6 space-y-4 text-xs text-gray-400">
               <p className="flex gap-2"><Scale className="w-4 h-4 text-orange-500 shrink-0" /> SHOP MMO là nền tảng trung gian kết nối người mua và người bán - không phải bên bán hàng. SHOP MMO không kiểm duyệt trước mọi sản phẩm trước khi đăng, nhưng có quyền gỡ vi phạm và phối hợp với cơ quan chức năng khi có yêu cầu hợp pháp.</p>
               <p className="flex gap-2"><AlertTriangle className="w-4 h-4 text-orange-500 shrink-0" /> Mọi vi phạm có thể dẫn đến khóa tài khoản vĩnh viễn, đóng băng giao dịch liên quan, xử phạt, thưa khiếu nại và bị truy cứu trách nhiệm hình sự theo pháp luật áp dụng.</p>
             </div>

             <div className="flex flex-wrap gap-4 pt-4">
               <Link href={`/${locale}/banned`}><Button variant="outline" className="border-orange-500/20 text-orange-500 hover:bg-orange-500/10 h-8 text-xs">Sản phẩm bị cấm bán ↗</Button></Link>
               <Link href={`/${locale}/terms`}><Button variant="outline" className="border-orange-500/20 text-orange-500 hover:bg-orange-500/10 h-8 text-xs">Điều khoản sử dụng ↗</Button></Link>
               <Link href={`/${locale}/terms`}><Button variant="outline" className="border-orange-500/20 text-orange-500 hover:bg-orange-500/10 h-8 text-xs">Chính sách bảo mật ↗</Button></Link>
             </div>
          </div>
        </section>

      </main>
    </div>
  );
}