import { Link } from "react-router-dom";
import { Mail } from "lucide-react";
import chatskuLogo from "@/assets/chatsku-logo.png";
import virtinaLogo from "@/assets/virtina-logo.png";
import impelhubLogo from "@/assets/impelhub-logo.png";

const Footer = () => {
  return (
    <footer className="border-t border-border bg-card">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
          {/* Brand */}
          <div className="flex flex-col gap-3">
            <Link to="/" className="flex items-center gap-2">
              <img src={chatskuLogo} alt="ChatSKU" className="h-8" />
            </Link>
            <p className="text-sm text-muted-foreground font-medium">
              One line of code, one day.
            </p>
            <p className="text-xs text-muted-foreground max-w-xs">
              AI-powered chat commerce for B2B businesses. Turn your catalog into a buying experience.
            </p>
          </div>

          {/* Nav Links */}
          <div className="flex flex-col gap-3">
            <h4 className="text-sm font-semibold text-foreground font-display">Product</h4>
            <nav className="flex flex-col gap-2">
            {[
                { label: "Home", to: "/" },
                { label: "Demo", to: "/demo" },
                { label: "Features", to: "/features" },
                { label: "Problems", to: "/problems" },
                { label: "Pricing", to: "/pricing" },
                { label: "Blog", to: "/blog" },
                { label: "FAQ", to: "/faq" },
                { label: "Contact", to: "/contact" },
                { label: "Privacy Policy", to: "/privacy" },
                { label: "Terms of Service", to: "/terms" },
              ].map((link) => (
                <Link
                  key={link.to}
                  to={link.to}
                  className="text-sm text-muted-foreground hover:text-primary transition-colors w-fit"
                >
                  {link.label}
                </Link>
              ))}
            </nav>
          </div>

          {/* Contact */}
          <div className="flex flex-col gap-3">
            <h4 className="text-sm font-semibold text-foreground font-display">Contact</h4>
            <a
              href="mailto:hello@chatsku.com"
              className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors w-fit"
            >
              <Mail className="w-4 h-4" />
              hello@chatsku.com
            </a>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="pt-6 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-muted-foreground">
            © 2025 ChatSKU. All rights reserved.
          </p>

          {/* Built by / Intelligence by */}
          <div className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
            <div className="flex items-center gap-2">
              <span className="text-xs font-medium text-foreground whitespace-nowrap">Built by</span>
              <a
                href="https://virtina.com?src=ChatSku"
                target="_blank"
                rel="noopener noreferrer"
                className="opacity-80 hover:opacity-100 transition-opacity"
              >
                <img src={virtinaLogo} alt="Virtina" className="h-5 w-auto brightness-0 invert" />
              </a>
            </div>
            <span className="text-muted-foreground/50 text-xs hidden sm:inline">·</span>
            <div className="flex items-center gap-2">
              <span className="text-xs font-medium text-foreground whitespace-nowrap">Intelligence by</span>
              <a
                href="https://impelhub.com?src=ChatSku"
                target="_blank"
                rel="noopener noreferrer"
                className="opacity-80 hover:opacity-100 transition-opacity"
              >
                <img src={impelhubLogo} alt="ImpelHub" className="h-5 w-auto" />
              </a>
            </div>
          </div>

          <p className="text-xs text-muted-foreground hidden sm:block">
            Built for B2B commerce
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
