'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Server, Cloud, Shield, Lock } from 'lucide-react';
import { useI18n } from '../../i18n/provider';

export const Services = () => {
  const { locale, t } = useI18n();
  const dir = locale === 'en' ? 'ltr' : 'rtl';

  const services = [
    {
      icon: Server,
      title: t('service_hosting_title'),
      desc: t('service_hosting_desc'),
      gradient: 'from-blue-500/20 to-cyan-500/20',
      iconColor: 'text-blue-400',
    },
    {
      icon: Cloud,
      title: t('service_vps_title'),
      desc: t('service_vps_desc'),
      gradient: 'from-indigo-500/20 to-purple-500/20',
      iconColor: 'text-indigo-400',
    },
    {
      icon: Shield,
      title: t('service_dedicated_title'),
      desc: t('service_dedicated_desc'),
      gradient: 'from-teal-500/20 to-emerald-500/20',
      iconColor: 'text-teal-400',
    },
    {
      icon: Lock,
      title: t('service_ssl_title'),
      desc: t('service_ssl_desc'),
      gradient: 'from-purple-500/20 to-pink-500/20',
      iconColor: 'text-purple-400',
    },
  ];

  return (
    <section id="services" className="py-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden" dir={dir}>
      {/* هاله نور پس‌زمینه */}
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#1e3a8a]/10 to-transparent pointer-events-none" />

      <div className="max-w-7xl mx-auto relative z-10">
        {/* بخش عنوان */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl sm:text-5xl font-bold text-[color:var(--text-primary)] mb-4">
            {t('services_title')}
          </h2>
          <p className="text-lg text-[color:var(--text-muted-2)] max-w-2xl mx-auto">
            {t('services_subtitle')}
          </p>
        </motion.div>

        {/* گرید کارت‌های خدمات */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {services.map((service, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              whileHover={{ y: -8, scale: 1.02 }}
              className="group"
            >
              {/* بدنه کارت شیشه‌ای */}
              <div className="relative h-full p-8 rounded-2xl bg-[color:var(--glass-05)] border border-[color:var(--border-10)] shadow-xl hover:shadow-2xl hover:border-[color:var(--border-20)] transition-all duration-500 overflow-hidden">
                
                {/* گرادینت پس‌زمینه در حالت Hover */}
                <motion.div
                  className={`absolute inset-0 bg-gradient-to-br ${service.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-500`}
                />

                <div className="relative z-10">
                  {/* آیکون با انیمیشن چرخش */}
                  <motion.div
                    whileHover={{ rotate: 360, scale: 1.1 }}
                    transition={{ duration: 0.6, type: "spring" }}
                    className={`w-14 h-14 rounded-xl bg-[color:var(--glass-05)] border border-[color:var(--border-10)] flex items-center justify-center mb-6 shadow-lg`}
                  >
                    <service.icon className={`w-7 h-7 ${service.iconColor}`} />
                  </motion.div>

                  {/* متون کارت */}
                  <h3 className="text-xl font-semibold text-[color:var(--text-primary)] mb-3">
                    {service.title}
                  </h3>
                  <p className="text-[color:var(--text-muted-2)] text-[15px] leading-relaxed">
                    {service.desc}
                  </p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};
