import Link from 'next/link';
import en from '@/i18n/en.json';

interface FooterProps {
  variant?: 'marketing' | 'dashboard';
  t?: typeof en; // Optional translation object
}

export function Footer({ variant = 'marketing', t }: FooterProps) {
  const isDashboard = variant === 'dashboard';
  // Fallback to English if no translation is provided or if keys are missing
  const translations = t?.footer || en.footer;

  return (
    <footer className={`${isDashboard ? 'bg-gray-50 text-gray-600 border-t border-gray-200 mt-12' : 'bg-gray-900 text-white mt-20'} py-12`}>
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
        <div className="grid md:grid-cols-4 gap-8">
          <div>
            <Link href="/" className="flex items-center space-x-2 mb-4 hover:opacity-80 transition-opacity">
              <img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
              <span className={`text-xl font-bold ${isDashboard ? 'text-gray-900' : ''}`}>QR Master</span>
            </Link>
            <p className={isDashboard ? 'text-gray-500' : 'text-gray-400'}>
              {translations.tagline}
            </p>
          </div>

          <div>
            <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>{translations.product}</h3>
            <ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
              <li><Link href="/#features" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.features}</Link></li>
              <li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.pricing}</Link></li>
              <li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.faq}</Link></li>
              <li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.blog}</Link></li>
            </ul>
          </div>

          <div>
            <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>{translations.resources}</h3>
            <ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
              <li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.full_pricing}</Link></li>
              <li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.all_questions}</Link></li>
              <li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.all_articles}</Link></li>
              <li><Link href="/signup" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.get_started}</Link></li>
            </ul>
          </div>

          <div>
            <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>{translations.legal}</h3>
            <ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
              <li><Link href="/privacy" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.privacy_policy}</Link></li>
              <li><Link href="/qr-code-erstellen" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>QR Code Erstellen (DE)</Link></li>
            </ul>
          </div>

        </div>

        <div className={`border-t mt-8 pt-8 flex items-center justify-between ${isDashboard ? 'border-gray-200 text-gray-500' : 'border-gray-800 text-gray-400'}`}>
          {!isDashboard ? (
            <Link
              href="/newsletter"
              className="text-[6px] text-gray-700 opacity-[0.03] hover:opacity-100 hover:text-white transition-opacity duration-300"
            >
              <span className="sr-only">{translations.newsletter}</span>
              •
            </Link>
          ) : (
            <div></div>
          )}
          <p>&copy; 2025 {translations.rights_reserved}</p>
          <div className="w-12"></div>
        </div>
      </div>
    </footer>
  );
}