// components/Products.tsx
'use client';
import { motion } from 'framer-motion';
import { Server, Cloud, Shield, HardDrive, ArrowLeft } from 'lucide-react';

const products = [
  { id: 1, title: 'گواهی SSL', desc: 'امنیت وب‌سایت خود را با SSL تضمین کنید', price: '۱۹۹,۰۰۰', icon: Shield, color: 'bg-purple-500/20 text-purple-400' },
  { id: 2, title: 'سرور اختصاصی', desc: 'سرورهای فیزیکی قدرتمند با بالاترین عملکرد', price: '۶,۹۹۰,۰۰۰', icon: HardDrive, color: 'bg-teal-500/20 text-teal-400' },
  { id: 3, title: 'سرور مجازی (VPS)', desc: 'سرورهای مجازی قدرتمند با منابع اختصاصی', price: '۱,۹۹۰,۰۰۰', icon: Cloud, color: 'bg-blue-500/20 text-blue-400' },
  { id: 4, title: 'هاست وب', desc: 'هاست سریع و پایدار برای وب‌سایت‌های شخصی و شرکتی', price: '۴۹۹,۰۰۰', icon: Server, color: 'bg-indigo-500/20 text-indigo-400' },
];

export default function Products() {
  return (
    <section className="py-20 px-8 max-w-7xl mx-auto border-t border-gray-200 dark:border-gray-800/50">
      <div className="flex flex-col md:flex-row justify-between items-end mb-12">
        <div className="text-right">
          <p className="text-sm text-teal-500 mb-2 font-medium">محصولات ما</p>
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">هر آنچه برای رشد<br/>پروژه‌ی شما نیاز دارید</h2>
          <p className="text-gray-500 dark:text-gray-400 max-w-md">از هاست اشتراکی تا سرورهای اختصاصی قدرتمند. همه چیز برای عملکرد بهتر وب‌سایت و اپلیکیشن شما</p>
        </div>
        <button className="mt-6 md:mt-0 flex items-center gap-2 text-gray-800 dark:text-white border border-gray-300 dark:border-gray-700 px-5 py-2.5 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
          مشاهده همه محصولات <ArrowLeft size={16} />
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {products.map((p, i) => (
          <motion.div 
            key={p.id}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.1, duration: 0.5 }}
            viewport={{ once: true }}
            className="bg-gray-50 dark:bg-[#111827] border border-gray-200 dark:border-gray-800 rounded-2xl p-6 text-right hover:border-teal-500/50 transition-colors group cursor-pointer"
          >
            <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-6 ml-auto ${p.color}`}>
              <p.icon size={24} />
            </div>
            <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">{p.title}</h3>
            <p className="text-sm text-gray-500 dark:text-gray-400 mb-6 h-10">{p.desc}</p>
            <p className="text-sm text-gray-400">شروع از <span className="text-teal-500 font-bold mx-1">{p.price}</span> تومان</p>
          </motion.div>
        ))}
      </div>
    </section>
  );
}
