'use client';

import React from 'react';
import { 
    ArrowLeft, 
    Box, 
    Share2, 
    MessageCircle, 
    Mail, 
    Send,
    Activity,
    Globe,
    ShieldCheck,
    Headphones,
    Sun,
    ChevronDown
  } from 'lucide-react';
  
import Link from 'next/link';
import { useI18n } from '../../i18n/provider';
import { useTheme } from 'next-themes';
import { usePathname, useRouter } from 'next/navigation';

export const Footer = () => {
  const { locale, t } = useI18n();
  const dir = locale === 'en' ? 'ltr' : 'rtl';
  const { theme, setTheme } = useTheme();
  const router = useRouter();
  const pathname = usePathname();

  return (
    <footer className="footer-bg text-[color:var(--text-muted)] pt-8 pb-6 px-4 sm:px-6 lg:px-8 font-sans" dir={dir}>
      <div className="max-w-7xl mx-auto space-y-8">
        
        {/* CTA Banner */}
        <div className="relative rounded-3xl overflow-hidden border border-[color:var(--border-10)] bg-gradient-to-r from-[var(--footer-cta-from)] via-[var(--footer-cta-via)] to-[var(--footer-cta-to)] p-10 flex flex-col items-center text-center">
          {/* افکت‌های نوری پس‌زمینه */}
          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent pointer-events-none" />
          <div className="absolute bottom-0 right-0 w-1/2 h-1/2 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-teal-900/20 via-transparent to-transparent pointer-events-none" />
          
          <h2 className="text-3xl md:text-4xl font-bold text-[color:var(--text-primary)] mb-4 relative z-10">
            {t('footer_cta_title')}
          </h2>
          <p className="text-[color:var(--text-muted-2)] mb-8 max-w-2xl relative z-10">
            {t('footer_cta_desc')}
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 relative z-10">
            <button className="flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-teal-400 text-white px-8 py-3 rounded-xl font-medium hover:opacity-90 transition-opacity">
              {t('footer_cta_start')}
              <ArrowLeft className="w-5 h-5" />
            </button>
            <button className="flex items-center justify-center gap-2 bg-[color:var(--glass-05)] border border-[color:var(--border-10)] text-[color:var(--text-primary)] px-8 py-3 rounded-xl font-medium hover:bg-[color:var(--glass-10)] transition-colors">
              <Box className="w-5 h-5" />
              {t('footer_cta_view_services')}
            </button>
          </div>
        </div>

        {/* Main Footer Content */}
        <div className="bg-[color:var(--footer-surface-bg)] border border-[color:var(--border-05)] rounded-3xl p-8 lg:p-12 backdrop-blur-md en-shadow-left">
          <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-8 mb-12">
            
            {/* Logo and About */}
            <div className="lg:col-span-1">
              <div className="flex items-center gap-2 mb-6">
                <div className="w-8 h-8 rounded-lg bg-blue-500 flex items-center justify-center">
                  <Activity className="w-5 h-5 text-white" /> {/* جایگزین لوگوی موقت */}
                </div>
                <span className="text-xl font-bold text-[color:var(--text-primary)] tracking-wide">MugCloud</span>
              </div>
              <p className="text-sm text-[color:var(--text-muted-2)] leading-relaxed mb-8">
                {t('footer_about')}
              </p>
              <div className="flex gap-4">
                {[Share2, MessageCircle, Mail, Send].map((Icon, i) => (
                  <a key={i} href="#" className="w-10 h-10 rounded-full bg-[color:var(--footer-icon-bg)] flex items-center justify-center hover:bg-blue-500/20 hover:text-blue-400 transition-colors">
                    <Icon className="w-4 h-4" />
                  </a>
                ))}
              </div>

            </div>

            {/* Links Columns */}
            <div className="lg:col-span-4 grid grid-cols-2 md:grid-cols-4 gap-8">
              {[
                { title: t('footer_col_products'), links: [t('footer_link_cloud_hosting'), t('footer_link_vps'), t('footer_link_dedicated'), t('footer_link_ssl'), t('footer_link_domain')] },
                { title: t('footer_col_resources'), links: [t('footer_link_docs'), t('footer_link_blog'), t('footer_link_guides'), t('footer_link_api'), t('footer_link_status')] },
                { title: t('footer_col_company'), links: [t('footer_link_about'), t('footer_link_contact'), t('footer_link_careers'), t('footer_link_partners')] },
                { title: t('footer_col_legal'), links: [t('footer_link_terms'), t('footer_link_privacy'), t('footer_link_refund'), t('footer_link_rules')] },
              ].map((col, idx) => (
                <div key={idx}>
                  <h3 className="text-teal-400 font-semibold mb-6 border-b border-[color:var(--border-05)] pb-4 inline-block">{col.title}</h3>
                  <ul className="space-y-4">
                    {col.links.map((link, i) => (
                      <li key={i}>
                        <Link href="#" className="text-sm text-[color:var(--text-muted-2)] hover:text-[color:var(--text-primary)] transition-colors">
                          {link}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>

          {/* Features / Trust Badges */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            {[
              { icon: Activity, title: t('footer_feature_uptime'), desc: '99.99%' },
              { icon: Globe, title: t('footer_feature_dc'), desc: locale === 'en' ? '3 continents' : 'در ۳ قاره' },
              { icon: ShieldCheck, title: t('footer_feature_security'), desc: 'DDoS Protection' },
              { icon: Headphones, title: t('footer_feature_support'), desc: locale === 'en' ? 'Always with you' : 'همیشه در کنار شما' },
            ].map((feature, idx) => (
              <div key={idx} className="flex items-center gap-4 bg-[color:var(--footer-chip-bg)] border border-[color:var(--border-05)] rounded-2xl p-5 backdrop-blur-md">
                <div className="w-12 h-12 rounded-xl bg-[color:var(--footer-chip-inner-bg)] border border-[color:var(--border-05)] flex items-center justify-center">
                  <feature.icon className="w-6 h-6 text-[color:var(--text-muted)]" />
                </div>
                <div>
                  <h4 className="text-[color:var(--text-primary)] text-sm font-medium">{feature.title}</h4>
                  <p className="text-[color:var(--text-muted-3)] text-xs mt-1">{feature.desc}</p>
                </div>
              </div>
            ))}
          </div>

          {/* Bottom Bar */}
          <div className="flex flex-col md:flex-row items-center justify-between pt-6 border-t border-[color:var(--border-05)] gap-6">
            <div className="flex items-center gap-3">
              <button
                type="button"
                onClick={() => {
                  const target = locale === 'fa' ? 'en' : 'fa';
                  const next = pathname.replace(/^\/(fa|en)(\/|$)/, `/${target}$2`);
                  router.push(next === pathname ? `/${target}` : next);
                }}
                className="flex items-center gap-2 bg-[color:var(--footer-chip-bg)] border border-[color:var(--border-05)] rounded-xl px-4 py-2 text-sm backdrop-blur-md"
              >
                <span>{locale === 'fa' ? t('footer_lang_fa') : t('nav_lang_en')}</span>
                <span className="text-lg">{locale === 'fa' ? '🇮🇷' : '🇺🇸'}</span>
              </button>
              <button
                type="button"
                onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
                className="flex items-center gap-2 bg-[color:var(--footer-chip-bg)] border border-[color:var(--border-05)] rounded-xl px-3 py-2 backdrop-blur-md"
              >
                <Sun className="w-4 h-4 text-[color:var(--text-muted-2)]" />
                <ChevronDown className="w-3 h-3 text-[color:var(--text-muted-3)]" />
              </button>
            </div>

            <p className="text-xs text-[color:var(--text-muted-3)]">
              {t('footer_rights')}
            </p>

            <div className="flex items-center gap-6 opacity-60 grayscale hover:grayscale-0 transition-all duration-300">
              {/* جایگزین تصاویر مجوزها با متن برای دمو */}
              <span className="text-xs font-bold font-serif">PCI DSS</span>
              <span className="text-xs font-bold font-serif">ISO 27001</span>
              <span className="text-xs font-bold font-serif flex items-center gap-1"><ShieldCheck className="w-3 h-3"/> SecureTrust</span>
            </div>
          </div>
        </div>

      </div>
    </footer>
  );
};
