src/components/Footer.jsx

import { Film, Heart } from 'lucide-react';

export default function Footer({ settings = {} }) {
  const currentYear = new Date().getFullYear();
  const copyrightYear = currentYear > 2026 ? `2026 - ${currentYear}` : '2026';

  const socials = [
    {
      key: 'social_fb',
      label: 'Theo dõi DPTXA trên Facebook',
      hoverColor: '#1877F2',
      trackingName: 'facebook',
      svg: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z"/>
        </svg>
      )
    },
    {
      key: 'social_fb_group',
      label: 'Tham gia Cộng đồng Facebook',
      hoverColor: '#1877F2',
      trackingName: 'facebook_group',
      svg: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
        </svg>
      )
    },
    {
      key: 'social_zalo_group',
      label: 'Tham gia Nhóm Zalo hỗ trợ',
      hoverColor: '#0068FF',
      trackingName: 'zalo',
      svg: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 5.58 2 10c0 1.95.86 3.73 2.3 5.09L3.5 19.5c-.13.34.19.68.52.54l4.58-1.99c1.17.34 2.27.45 3.4.45 5.52 0 10-3.58 10-8s-4.48-8-10-8zm2.5 11h-4.24l2.94-3.53H10.5V8.5h4.24L11.8 12.03h2.7v1.47z"/>
        </svg>
      )
    },
    {
      key: 'social_telegram',
      label: 'Kênh Telegram DPTXA',
      hoverColor: '#24A1DE',
      trackingName: 'telegram',
      svg: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-1-.65-.35-1 .22-1.58.15-.15 2.72-2.5 2.77-2.71.01-.03.01-.13-.05-.18-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .24z"/>
        </svg>
      )
    },
    {
      key: 'social_tiktok',
      label: 'Theo dõi DPTXA trên TikTok',
      hoverColor: '#FE2C55',
      trackingName: 'tiktok',
      svg: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.17-2.86-.74-3.95-1.72-.1-.09-.17-.13-.27-.24v6.07c.07 2.13-.53 4.36-2.02 5.92-1.49 1.62-3.8 2.47-5.97 2.4-2.18-.04-4.42-.9-5.74-2.65-1.43-1.84-1.75-4.52-1.01-6.73.68-2.11 2.58-3.79 4.77-4.19 1.12-.22 2.3-.1 3.38.31.02-2.31.01-4.63.01-6.95.03-.45.02-.91.03-1.36-.08-2.34-.05-4.69-.07-7.04z" />
        </svg>
      )
    },
    {
      key: 'social_instagram',
      label: 'Kênh Instagram DPTXA',
      hoverColor: '#E1306C',
      trackingName: 'instagram',
      svg: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
        </svg>
      )
    }
  ];

  return (
    <footer className="relative z-10 border-t border-white/10 bg-[#0f0f0f] mt-auto">
      {/* Dynamic Stagger Fade-Up styles for Premium Aesthetics & Accessibility */}
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes footerSocialFadeUp {
          from {
            opacity: 0;
            transform: translateY(12px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .social-link-item {
          opacity: 0;
          animation: footerSocialFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @media (prefers-reduced-motion: reduce) {
          .social-link-item {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
          }
        }
      `}} />

      <div className="mx-auto max-w-7xl px-4 py-10">
        <div className="grid gap-8 md:grid-cols-4">
          <div>
            <div className="mb-4">
              <a href="/" className="flex items-center shrink-0 transition-transform hover:scale-[1.02] active:scale-95 group">
                <svg className="h-8 w-8" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="50" cy="50" r="44" stroke="url(#footer-purple-grad)" strokeWidth="5" fill="black" fillOpacity="0.3"/>
                  <circle cx="50" cy="50" r="36" stroke="url(#footer-purple-grad)" strokeWidth="1.5" strokeDasharray="3 3" opacity="0.8"/>
                  <path d="M44 32.5L68 50L44 67.5V32.5Z" fill="url(#footer-purple-grad)" stroke="url(#footer-purple-grad)" strokeWidth="1" strokeLinejoin="round"/>
                  <defs>
                    <linearGradient id="footer-purple-grad" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" stopColor="#a78bfa"/>
                      <stop offset="50%" stopColor="#7c3aed"/>
                      <stop offset="100%" stopColor="#4c1d95"/>
                    </linearGradient>
                  </defs>
                </svg>
                <div className="flex flex-col ml-2 justify-center leading-none">
                  <span className="text-lg font-black tracking-tight text-white flex items-center leading-none">
                    D<span className="text-primary">P</span>TXA
                  </span>
                  <span className="text-[8px] font-bold text-gray-400 mt-1 tracking-wider whitespace-nowrap leading-none">Động Phim Đỉnh Cao</span>
                </div>
              </a>
            </div>
            <p className="text-[10px] font-black uppercase tracking-[0.4em] text-primary mb-3">Động Phim Đỉnh Cao</p>
            <p className="text-sm leading-relaxed text-gray-400">
              Nền tảng xem phim trực tuyến miễn phí với kho phim khổng lồ, cập nhật liên tục mỗi ngày. Trải nghiệm đường truyền siêu tốc, chất lượng Full HD.
            </p>
          </div>

          <div>
            <h3 className="mb-4 text-xs font-black uppercase tracking-widest text-white">Thể loại</h3>
            <ul className="space-y-3 text-sm text-gray-400">
              <li><a href="/danh-sach/phim-le" className="hover:text-primary transition-colors">Phim lẻ</a></li>
              <li><a href="/danh-sach/phim-bo" className="hover:text-primary transition-colors">Phim bộ</a></li>
              <li><a href="/danh-sach/hoat-hinh" className="hover:text-primary transition-colors">Hoạt hình</a></li>
            </ul>
          </div>

          <div>
            <h3 className="mb-4 text-xs font-black uppercase tracking-widest text-white">Chính sách</h3>
            <ul className="space-y-3 text-sm text-gray-400">
              <li><a href="/dieu-khoan" className="hover:text-primary transition-colors">Điều khoản sử dụng</a></li>
              <li><a href="/chinh-sach" className="hover:text-primary transition-colors">Chính sách bảo mật</a></li>
              <li><a href="#" className="hover:text-primary transition-colors">DMCA</a></li>
            </ul>
          </div>

          <div>
            <h3 className="mb-4 text-xs font-black uppercase tracking-widest text-white">Liên hệ</h3>
            <p className="mb-2 text-sm text-gray-400 font-medium">Email: contact@tphimx.com</p>
            <div className="flex flex-wrap gap-4 mt-4">
              {socials
                .filter(social => settings[`${social.key}_enable`] && settings[`${social.key}_url`])
                .map((social, index) => {
                  const url = settings[`${social.key}_url`];
                  return (
                    <a
                      key={social.key}
                      href={url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="social-link-item text-gray-400 transition-all duration-300 hover:scale-115 active:scale-90 flex items-center justify-center p-2 rounded-xl bg-white/[0.02] border border-white/5"
                      style={{
                        '--hover-color': social.hoverColor,
                        animationDelay: `${index * 80}ms`
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.color = social.hoverColor;
                        e.currentTarget.style.borderColor = `${social.hoverColor}33`;
                        e.currentTarget.style.backgroundColor = `${social.hoverColor}10`;
                        e.currentTarget.style.boxShadow = `0 0 15px ${social.hoverColor}22`;
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.color = '';
                        e.currentTarget.style.borderColor = '';
                        e.currentTarget.style.backgroundColor = '';
                        e.currentTarget.style.boxShadow = '';
                      }}
                      data-txatooltip={social.label}
                      data-social={social.trackingName}
                    >
                      {social.svg}
                    </a>
                  );
                })}
            </div>
          </div>
        </div>

        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-white/5 pt-8 text-[10px] font-black uppercase tracking-widest text-gray-600 md:flex-row">
          <p className="flex items-center gap-2">
            <Film size={14} /> &copy; {copyrightYear} DPTXA - Động Phim Đỉnh Cao
          </p>
          <p className="flex items-center gap-2">
            Made with <Heart size={12} className="text-primary animate-pulse" /> by DPTXA Team
          </p>
        </div>
      </div>
    </footer>
  );
}