'use client';

import { motion } from 'framer-motion';
import {
  ArrowLeft, Server, Cloud, Database, Shield,
  Globe, Clock, MapPin, Users, Star
} from 'lucide-react';
import Image from 'next/image';
import GlobalInfrastructure from './global';
import { Services } from './services';
import { useI18n } from '../../i18n/provider';


const fadeIn = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
};

const staggerContainer = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

export default function MainContent() {
  const { locale, t } = useI18n();
  const dir = locale === 'en' ? 'ltr' : 'rtl';
  const [productsTitleLine1, productsTitleLine2] = t('main_products_title').split('\n');

  return (
    // بخش اصلی با z-index بالاتر برای قرار گرفتن روی Hero
    <section className="w-full px-4 md:px-8 relative z-20 pb-20 font-sans text-[color:var(--text-primary)]" dir={dir}>

      {/* 
        کادر اصلی دربرگیرنده کل محتوا
        استفاده از mt-32- برای کشیدن کادر به بالا و ادغام با هیرو
      */}
      <div className="max-w-[1400px] mx-auto -mt-32 bg-[color:var(--surface-main-wrap)] border border-[color:var(--border-10)] rounded-[2.5rem] p-8 md:p-12 lg:p-16 space-y-16 en-shadow-left">

        {/* بخش محصولات */}
        <motion.div
          variants={staggerContainer}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          className="grid grid-cols-1 lg:grid-cols-12 gap-8"
        >
          {/* توضیحات محصولات */}
          <motion.div variants={fadeIn} className="lg:col-span-4 flex flex-col justify-center space-y-4 text-right pr-4 en-text-left">
            <span className="text-[#38bdf8] text-sm font-medium">{t('main_products_badge')}</span>
            <h2 className="text-3xl font-bold leading-tight">
              {productsTitleLine1}
              <br />
              {productsTitleLine2}
            </h2>
            <p className="text-[color:var(--text-muted-2)] text-sm leading-relaxed">
              {t('main_products_desc')
                .split('\n')
                .map((line, idx) => (
                  <span key={idx}>
                    {line}
                    {idx === 0 ? <br /> : null}
                  </span>
                ))}
            </p>
            <button className="flex items-center justify-between w-fit gap-4 mt-4 px-6 py-3 rounded-xl bg-[color:var(--glass-05)] border border-[color:var(--border-10)] hover:bg-[color:var(--glass-10)] transition-colors">
              <span className="text-sm">{t('main_products_all')}</span>
              <ArrowLeft className="w-4 h-4" />
            </button>
          </motion.div>

          {/* کارت‌های محصولات */}
          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {[
              { title: t('product_ssl_title'), desc: t('product_ssl_desc'), price: '۱۹۹,۰۰۰', icon: Shield, color: 'text-purple-400', bg: 'bg-purple-500/10' },
              { title: t('product_dedicated_title'), desc: t('product_dedicated_desc'), price: '۶,۹۹۰,۰۰۰', icon: Database, color: 'text-emerald-400', bg: 'bg-emerald-500/10' },
              { title: t('product_vps_title'), desc: t('product_vps_desc'), price: '۱,۹۹۰,۰۰۰', icon: Cloud, color: 'text-blue-400', bg: 'bg-blue-500/10' },
              { title: t('product_host_title'), desc: t('product_host_desc'), price: '۴۹۹,۰۰۰', icon: Server, color: 'text-sky-400', bg: 'bg-sky-500/10' },
            ].map((item, i) => (
              <motion.div key={i} variants={fadeIn} className="bg-[color:var(--glass-02)] border border-[color:var(--border-05)] p-6 rounded-3xl flex flex-col items-center text-center hover:bg-[color:var(--glass-04)] hover:border-[color:var(--border-10)] transition-all">
                <div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-6 ${item.bg} ${item.color}`}>
                  <item.icon className="w-7 h-7" />
                </div>
                <h3 className="font-semibold mb-3">{item.title}</h3>
                <p className="text-xs text-[color:var(--text-muted-2)] mb-8 flex-grow leading-relaxed">{item.desc}</p>
                <div className="text-xs text-[color:var(--text-muted-3)] mt-auto">
                  {t('price_from')} <span className="text-[color:var(--text-primary)] text-sm">{item.price}</span> {t('toman')}
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>

        <Services />

        {/* بخش زیرساخت جهانی */}
        <GlobalInfrastructure />

        {/* نوار آمار و ارقام */}
        <motion.div
          initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeIn}
          className="grid grid-cols-2 md:grid-cols-4 gap-6 bg-[color:var(--glass-02)] border border-[color:var(--border-05)] rounded-3xl p-8"
        >
          {[
            { label: t('stats_uptime'), value: '۹۹.۹۹٪', icon: Clock },
            { label: t('stats_dc'), value: '+ ۱۴', icon: Globe },
            { label: t('stats_servers'), value: '+ ۲۴,۰۰۰', icon: Server },
            { label: t('stats_customers'), value: '+ ۱۲۸,۰۰۰', icon: Users },
          ].map((stat, i) => (
            <div key={i} className="flex flex-row items-center justify-end gap-5 text-right border-l border-[color:var(--border-05)] pl-6 last:border-0 last:pl-0">
              <div className="flex flex-col">
                <div className="text-2xl font-bold">{stat.value}</div>
                <div className="text-xs text-[color:var(--text-muted-2)] mt-1">{stat.label}</div>
              </div>
              <div className="p-0 text-[color:var(--text-muted-2)]">
                <stat.icon className="w-8 h-8 stroke-[1.5]" />
              </div>
            </div>
          ))}
        </motion.div>

        {/* بخش نظرات و اعتماد */}
        <motion.div
          initial="hidden" whileInView="visible" viewport={{ once: true }} variants={staggerContainer}
          className="grid grid-cols-1 lg:grid-cols-3 gap-8"
        >
          <motion.div variants={fadeIn} className="lg:col-span-1 flex flex-col justify-center space-y-4 text-right pr-4">
            <span className="text-emerald-400 text-sm font-medium">{t('trust_badge')}</span>
            <h2 className="text-2xl font-bold leading-tight">{t('trust_title')}</h2>
            <p className="text-[color:var(--text-muted-2)] text-sm mb-6">{t('trust_desc')}</p>
            <div className="flex flex-wrap gap-6 items-center text-xl font-bold text-[color:var(--text-muted-3)] opacity-60">
              <span>digikala</span>
              <span>TAPSI</span>
              <span>Snapp!</span>
              <span>دیوار</span>
            </div>
          </motion.div>

          {/* کارت‌های نظرات */}
          <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
            {[
              { text: t('testimonial_1_text'), name: t('testimonial_1_name'), role: t('testimonial_1_role') },
              { text: t('testimonial_2_text'), name: t('testimonial_2_name'), role: t('testimonial_2_role') }
            ].map((testimonial, i) => (
              <motion.div key={i} variants={fadeIn} className="bg-[color:var(--glass-02)] border border-[color:var(--border-05)] p-8 rounded-3xl flex flex-col justify-between hover:bg-[color:var(--glass-04)] transition-colors">
                <div>
                  <div className="flex gap-1 text-emerald-400 mb-6 justify-end">
                    {[...Array(5)].map((_, j) => <Star key={j} className="w-4 h-4 fill-current" />)}
                  </div>
                  <p className="text-sm leading-loose text-[color:var(--text-muted)] mb-8 text-right">{testimonial.text}</p>
                </div>
                <div className="flex items-center justify-end gap-4">
                  <div className="text-right">
                    <div className="font-semibold text-sm">{testimonial.name}</div>
                    <div className="text-xs text-[color:var(--text-muted-2)] mt-1">{testimonial.role}</div>
                  </div>
                  <div className="w-12 h-12 rounded-full bg-gray-700 border border-[color:var(--border-10)] overflow-hidden shrink-0">
                    <div className="w-full h-full bg-gradient-to-tr from-gray-600 to-gray-400"></div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>

      </div>
    </section>
  );
}
