import { Button } from "@/components/ui/button";
import { Facebook, Twitter } from "lucide-react";
import logoBlack from "@assets/logo_black_1759165229646.png";

export default function Footer() {
  const footerLinks = {
    column1: [
      { name: "Blog", href: "#" },
      { name: "Mobile", href: "#" },
      { name: "Portfolio", href: "#" },
      { name: "Widgets", href: "#" }
    ],
    column2: [
      { name: "About Us", href: "#" },
      { name: "Advertise", href: "#" },
      { name: "Help & Support", href: "#" },
      { name: "Authors", href: "#" }
    ]
  };

  return (
    <footer className="bg-white border-t border-gray-200 mt-16">
      {/* App Download Section */}
      <div className="max-w-7xl mx-auto px-6 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
          {/* Install Our App Section */}
          <div className="lg:col-span-4">
            <h3 className="text-lg font-semibold text-gray-900 mb-2">Install Our App</h3>
            <p className="text-sm text-gray-600 mb-6">Scan QR code to install app</p>
            
            <div className="flex items-center space-x-6">
              {/* QR Code placeholder */}
              <div className="w-24 h-24 bg-black flex items-center justify-center">
                <div className="w-20 h-20 bg-white p-1">
                  <div className="w-full h-full bg-black relative">
                    {/* Simple QR code pattern */}
                    <div className="absolute inset-1 bg-white"></div>
                    <div className="absolute top-1 left-1 w-6 h-6 bg-black"></div>
                    <div className="absolute top-1 right-1 w-6 h-6 bg-black"></div>
                    <div className="absolute bottom-1 left-1 w-6 h-6 bg-black"></div>
                    <div className="absolute top-3 left-3 w-2 h-2 bg-white"></div>
                    <div className="absolute top-3 right-3 w-2 h-2 bg-white"></div>
                    <div className="absolute bottom-3 left-3 w-2 h-2 bg-white"></div>
                    {/* QR pattern dots */}
                    <div className="absolute top-8 left-8 w-1 h-1 bg-black"></div>
                    <div className="absolute top-10 left-6 w-1 h-1 bg-black"></div>
                    <div className="absolute top-6 left-10 w-1 h-1 bg-black"></div>
                    <div className="absolute top-12 left-12 w-1 h-1 bg-black"></div>
                    <div className="absolute top-14 left-8 w-1 h-1 bg-black"></div>
                    <div className="absolute top-8 left-14 w-1 h-1 bg-black"></div>
                  </div>
                </div>
              </div>
              
              {/* Download Buttons */}
              <div className="space-y-3">
                <Button 
                  variant="outline" 
                  className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg w-40 justify-start"
                >
                  <div className="w-5 h-5 text-blue-500">▶</div>
                  <span className="text-sm font-medium">Google Play</span>
                </Button>
                
                <Button 
                  variant="outline" 
                  className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg w-40 justify-start"
                >
                  <div className="w-5 h-5 text-gray-700">🍎</div>
                  <span className="text-sm font-medium">App Store</span>
                </Button>
              </div>
            </div>
          </div>

          {/* Navigation Links */}
          <div className="lg:col-span-4 grid grid-cols-2 gap-8">
            <div>
              {footerLinks.column1.map((link) => (
                <a 
                  key={link.name}
                  href={link.href}
                  className="block text-sm text-gray-600 hover:text-gray-900 mb-3"
                >
                  {link.name}
                </a>
              ))}
            </div>
            <div>
              {footerLinks.column2.map((link) => (
                <a 
                  key={link.name}
                  href={link.href}
                  className="block text-sm text-gray-600 hover:text-gray-900 mb-3"
                >
                  {link.name}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Section with SAPIENS branding */}
      <div className="bg-gray-50 border-t border-gray-200">
        <div className="max-w-7xl mx-auto px-6 py-8">
          {/* Logo and Social Icons */}
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center">
              <img 
                src={logoBlack} 
                alt="SAPIENS" 
                className="h-8"
                data-testid="footer-logo"
              />
            </div>
            <div className="flex items-center space-x-4">
              <Facebook className="w-5 h-5 text-gray-600 hover:text-gray-900 cursor-pointer" data-testid="social-facebook" />
              <Twitter className="w-5 h-5 text-gray-600 hover:text-gray-900 cursor-pointer" data-testid="social-twitter" />
            </div>
          </div>

          {/* Copyright and Links */}
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center pt-6 border-t border-gray-200">
            <p className="text-xs text-gray-600 mb-4 md:mb-0" data-testid="copyright-text">
              © 2007-2025 - SAPIENS Media Limited. All Rights Reserved.
            </p>
            <div className="flex space-x-6">
              <a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-terms">Terms And Conditions</a>
              <a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-privacy">Privacy Policy</a>
              <a href="#" className="text-xs text-gray-600 hover:text-gray-900" data-testid="link-risk">Risk Warning</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}