import React from 'react';
import { CONTENT, PHONE_NUMBER } from '../constants.ts';
import { Instagram, Facebook, Twitter, Youtube } from 'lucide-react';
import VistaLogo from './VistaLogo.tsx';
import { useLanguage } from '../contexts/LanguageContext.tsx';
import { useTheme } from '../contexts/ThemeContext.tsx';

const Footer: React.FC = () => {
  const { language } = useLanguage();
  const { customFooterLogo } = useTheme();
  const t = CONTENT[language];

  return (
    <footer className="bg-white text-vista-darkblue pt-16 pb-12 border-t border-vista-darkblue/5">
      <div className="max-w-7xl mx-auto px-6">
        
        {/* Top Section: Flex Layout for tighter control over spacing */}
        <div className="flex flex-col lg:flex-row flex-wrap justify-center items-start gap-10 lg:gap-16 mb-12">
            
            {/* Logo Column */}
            <div className="w-full lg:w-auto flex flex-col items-center lg:items-start text-center lg:text-left">
                <div className="mb-6">
                   <VistaLogo color="#0a1f35" src={customFooterLogo} />
                </div>
                {/* Description with whitespace-nowrap to prevent wrapping as requested */}
                <p className="text-vista-darkblue/80 text-sm leading-relaxed mb-6 font-medium whitespace-nowrap">
                    {t.footer.desc}
                </p>
                <div className="flex space-x-4 justify-center lg:justify-start">
                    <Instagram size={20} className="text-vista-darkblue/80 hover:text-vista-gold cursor-pointer transition-colors" />
                    <Facebook size={20} className="text-vista-darkblue/80 hover:text-vista-gold cursor-pointer transition-colors" />
                    <Twitter size={20} className="text-vista-darkblue/80 hover:text-vista-gold cursor-pointer transition-colors" />
                    <Youtube size={20} className="text-vista-darkblue/80 hover:text-vista-gold cursor-pointer transition-colors" />
                </div>
            </div>

            {/* Menu Columns - Flex items */}
            {t.nav.menu.slice(1, 5).map((item) => (
                <div key={item.title} className="w-1/2 md:w-auto flex flex-col items-center min-w-[100px]">
                    <h4 className="font-serif text-lg font-bold mb-4 border-b border-vista-darkblue/10 pb-2 inline-block text-center whitespace-nowrap">{item.title}</h4>
                    <ul className="space-y-2 text-center">
                        {item.submenu?.map((sub) => (
                            <li key={sub.title}>
                                <a href={sub.link} className="text-sm text-vista-darkblue/80 hover:text-vista-gold transition-colors font-medium whitespace-nowrap">
                                    {sub.title}
                                </a>
                            </li>
                        ))}
                    </ul>
                </div>
            ))}
        </div>

        {/* Contact Strip */}
        <div className="border-t border-vista-darkblue/10 pt-8 flex flex-col md:flex-row justify-between items-center">
             <div className="mb-6 md:mb-0 text-center md:text-left">
                 <p className="text-xs tracking-widest text-vista-darkblue/70 uppercase mb-2 font-bold">{t.footer.hotline}</p>
                 <a href={`tel:${PHONE_NUMBER}`} className="text-3xl md:text-4xl font-serif font-bold text-vista-darkblue hover:text-vista-gold transition-colors">
                     {PHONE_NUMBER}
                 </a>
             </div>
             
             <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-xs text-vista-darkblue/60 font-medium items-center">
                 <a href="#" className="hover:text-vista-darkblue transition-colors">{t.footer.privacy}</a>
                 <a href="#" className="hover:text-vista-darkblue transition-colors">{t.footer.terms}</a>
                 <a href="#" className="hover:text-vista-darkblue transition-colors">{t.footer.cookies}</a>
                 <span>© {new Date().getFullYear()} {t.footer.rights}</span>
             </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;