'use client';

import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';
import { getSocialLinks, socialIcons } from '@/lib/socialLinks';

const legalLinks = [
  { slug: 'terms-policy', en: 'Terms & Conditions', es: 'Términos y Condiciones' },
  { slug: 'privacy-policy', en: 'Privacy Policy', es: 'Política de Privacidad' },
  { slug: 'refund-cancelation-policy', en: 'Refund Policy', es: 'Política de Reembolso' },
];

export default function Footer() {
  const { t, locale } = useLanguage();
  const currentYear = new Date().getFullYear();
  const socialLinks = getSocialLinks();

  return (
    <footer className="bg-secondary-gray border-t border-secondary-light-gray">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Brand */}
          <div className="col-span-1 md:col-span-2">
            <Link href="/" className="inline-block">
              <span className="text-2xl font-bold font-heading text-primary-dark">
                Span<span className="text-primary-yellow">glish</span>
              </span>
            </Link>
            <p className="mt-3 text-gray-600 max-w-md">
              {t('footer.tagline')}
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="font-semibold text-primary-dark mb-4">
              {t('footer.links')}
            </h3>
            <ul className="space-y-2">
              <li>
                <Link 
                  href="/events" 
                  className="text-gray-600 hover:text-primary-dark transition-colors"
                >
                  {t('nav.events')}
                </Link>
              </li>
              <li>
                <Link 
                  href="/community" 
                  className="text-gray-600 hover:text-primary-dark transition-colors"
                >
                  {t('nav.community')}
                </Link>
              </li>
              <li>
                <Link 
                  href="/contact" 
                  className="text-gray-600 hover:text-primary-dark transition-colors"
                >
                  {t('nav.contact')}
                </Link>
              </li>
              <li>
                <Link 
                  href="/faq" 
                  className="text-gray-600 hover:text-primary-dark transition-colors"
                >
                  {t('nav.faq')}
                </Link>
              </li>
            </ul>
          </div>

          {/* Social */}
          {socialLinks.length > 0 && (
            <div>
              <h3 className="font-semibold text-primary-dark mb-4">
                {t('footer.social')}
              </h3>
              <div className="flex flex-wrap gap-3">
                {socialLinks.map((link) => (
                  <a
                    key={link.type}
                    href={link.url}
                    target={link.type === 'email' ? undefined : '_blank'}
                    rel={link.type === 'email' ? undefined : 'noopener noreferrer'}
                    className="w-10 h-10 flex items-center justify-center rounded-full bg-white shadow-sm hover:shadow-md hover:bg-primary-yellow/10 transition-all"
                    title={link.label}
                  >
                    {socialIcons[link.type]}
                  </a>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Legal Links */}
        <div className="border-t border-secondary-light-gray mt-10 pt-8">
          <div className="flex flex-wrap justify-center gap-4 md:gap-6 mb-4">
            {legalLinks.map((link) => (
              <Link
                key={link.slug}
                href={`/legal/${link.slug}`}
                className="text-gray-500 hover:text-primary-dark transition-colors text-sm"
              >
                {locale === 'es' ? link.es : link.en}
              </Link>
            ))}
          </div>
          <div className="text-center text-gray-500 text-sm">
            {t('footer.copyright', { year: currentYear })}
          </div>
        </div>
      </div>
    </footer>
  );
}