Footer

import React, { useState, useEffect } from "react";
import { useLanguage } from "../context/LanguageContext";

type ModalType = "legal" | "privacy" | "cookies" | null;

export default function Footer() {
  const { language, t } = useLanguage();
  const [activeModal, setActiveModal] = useState<ModalType>(null);

  // Listen for cookie banner events
  useEffect(() => {
    const handleOpenCookies = () => setActiveModal("cookies");
    window.addEventListener("open-cookies-modal", handleOpenCookies);
    return () => {
      window.removeEventListener("open-cookies-modal", handleOpenCookies);
    };
  }, []);

  const legalContent = {
    es: { /* Spanish content */ },
    en: { /* English content */ },
    eu: { /* Basque content */ }
  };

  const currentContent = legalContent[language as keyof typeof legalContent] || legalContent.es;

  return (
    <>
      <footer className="w-full py-8 px-6 md:px-12 border-t border-black/10 bg-white text-black relative z-10">
        {/* Footer content */}
      </footer>
      
      {activeModal && (
        <div className="fixed inset-0 z-[1000] flex items-center justify-center p-4 md:p-12 animate-fade-in">
          {/* Modal content */}
        </div>
      )}
    </>
  );
}

useEffect(() => {
  const handleOpenCookies = () => setActiveModal("cookies");
  
  window.addEventListener("open-cookies-modal", handleOpenCookies);
  
  return () => {
    window.removeEventListener("open-cookies-modal", handleOpenCookies);
  };
}, []);

{activeModal && (
  <div className="fixed inset-0 z-[1000] flex items-center justify-center p-4 md:p-12 animate-fade-in">
    <div 
      className="absolute inset-0 bg-black/40 backdrop-blur-sm cursor-pointer" 
      onClick={() => setActiveModal(null)}
    ></div>
    <div className="relative w-full max-w-2xl max-h-[80vh] bg-white border border-black/10 rounded-2xl shadow-2xl flex flex-col overflow-hidden animate-scale-up">
      <div className="flex justify-between items-center p-6 border-b border-black/10">
        <h2 className="font-wide text-xl text-black font-bold">
          {currentContent.modalContent[activeModal].title}
        </h2>
        <button onClick={() => setActiveModal(null)} className="...">
          {/* Close icon */}
        </button>
      </div>
      <div className="p-6 overflow-y-auto modal-scroll" data-lenis-prevent="true">
        <p className="font-sans text-black/70 text-sm md:text-base leading-relaxed whitespace-pre-line font-medium text-justify">
          {currentContent.modalContent[activeModal].body}
        </p>
      </div>
    </div>
  </div>
)}