import { useRef, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useLanguage } from "@/context/LanguageContext";

const Footer = () => {
  const { t } = useTranslation();
  const { isRTL } = useLanguage();
  const footerRef = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setIsVisible(true); },
      { threshold: 0.1 }
    );
    if (footerRef.current) observer.observe(footerRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <footer className="border-t">
      {/* Newsletter */}
      <div ref={footerRef} className="border-b py-10" dir={isRTL ? 'rtl' : 'ltr'}>
        <div className="container">
          <div className={`max-w-md mx-auto text-center transition-all duration-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}`}>
            <h3 className="font-semibold text-foreground mb-2">
              {isRTL ? 'הישארו מעודכנים' : 'Stay Updated'}
            </h3>
            <p className="text-sm text-muted-foreground mb-4">
              {isRTL ? 'קבלו תובנות ישירות למייל' : 'Get the latest insights delivered to your inbox.'}
            </p>
            <form onSubmit={(e) => { e.preventDefault(); const email = (e.target as HTMLFormElement).email.value; fetch('https://lead-capture.mcpdefense.workers.dev/lead', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, source: "mateviewer.com/newsletter", source_page: window.location.pathname }) }).then(() => alert('Subscribed!')).catch(() => alert('Error')); }} className="flex gap-2">
              <input name="email" type="email" placeholder="info@mateviewer.com" required className="flex-1 px-3 py-2 bg-background border border-border rounded-lg text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary transition-all duration-200" />
              <button type="submit" className="px-4 py-2 bg-primary text-primary-foreground text-sm font-medium rounded-lg hover:bg-primary/90 transition-all duration-300 hover:translate-y-[-1px]">
                {isRTL ? 'הירשמו' : 'Subscribe'}
              </button>
            </form>
            <p className="text-xs text-muted-foreground mt-2">
              {isRTL ? 'ללא ספאם. ניתן לבטל בכל עת.' : 'No spam. Unsubscribe anytime.'}
            </p>
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="py-6 md:py-8">
        <div className={`container flex flex-col items-center justify-between gap-4 md:flex-row ${isRTL ? 'md:flex-row-reverse' : ''}`}>
          <p className={`text-center text-sm text-muted-foreground ${isRTL ? 'md:text-right' : 'md:text-left'}`}>
            {t('footer.copyright')}
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Button variant="ghost" size="sm" asChild>
              <Link to="/about">{t('nav.about')}</Link>
            </Button>
            <Button variant="ghost" size="sm" asChild>
              <Link to="/privacy-policy">{t('footer.privacy')}</Link>
            </Button>
            <Button variant="ghost" size="sm" asChild>
              <Link to="/terms">{isRTL ? "תנאי שימוש" : "Terms"}</Link>
            </Button>
            <Button variant="ghost" size="sm" asChild>
              <Link to="/cookies">{isRTL ? "עוגיות" : "Cookies"}</Link>
            </Button>
            <Button variant="ghost" size="sm" asChild>
              <Link to="/accessibility">{isRTL ? "נגישות" : "Accessibility"}</Link>
            </Button>
            <Button variant="ghost" size="sm" asChild>
              <Link to="/contact">{t('nav.contact')}</Link>
            </Button>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;