import { useLanguage } from "@/contexts/LanguageContext";
import { Globe } from "lucide-react";
import logoWhite from "@/assets/logo-white.png";

const FooterSection = () => {
  const { lang, setLang, t } = useLanguage();

  const serviceLinks = [
    "svc.largeFormat.title",
    "svc.wraps.title",
    "svc.ppf.title",
    "svc.vinyl.title",
    "svc.signs.title",
    "svc.wallpaper.title",
    "svc.installation.title",
    "svc.subcontract.title",
  ];

  return (
    <footer className="relative border-t border-foreground/[0.06] py-20">
      {/* Subtle top glow */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[400px] h-[100px] pointer-events-none" style={{
        background: "radial-gradient(ellipse, hsl(0 100% 50% / 0.03) 0%, transparent 70%)",
      }} />

      <div className="container mx-auto px-6 relative z-10">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
          {/* Brand */}
          <div className="md:col-span-1">
            <img src={logoWhite} alt="I Love Printing Corp" className="h-8 w-auto mb-4 opacity-90" />
            <p className="font-body text-sm text-muted-foreground leading-relaxed">
              {t("footer.tagline")}
            </p>
          </div>

          {/* Services */}
          <div>
            <h4 className="font-display text-sm text-foreground mb-4 uppercase tracking-[0.2em]">{t("footer.services")}</h4>
            <ul className="space-y-2.5">
              {serviceLinks.map((key) => (
                <li key={key}>
                  <a href="#services" className="font-body text-sm text-muted-foreground hover:text-primary transition-colors duration-300">
                    {t(key)}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Company */}
          <div>
            <h4 className="font-display text-sm text-foreground mb-4 uppercase tracking-[0.2em]">{t("footer.company")}</h4>
            <ul className="space-y-2.5">
              <li><a href="#about" className="font-body text-sm text-muted-foreground hover:text-primary transition-colors duration-300">{t("nav.about")}</a></li>
              <li><a href="#portfolio" className="font-body text-sm text-muted-foreground hover:text-primary transition-colors duration-300">{t("nav.portfolio")}</a></li>
              <li><a href="#contact" className="font-body text-sm text-muted-foreground hover:text-primary transition-colors duration-300">{t("nav.contact")}</a></li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="font-display text-sm text-foreground mb-4 uppercase tracking-[0.2em]">{t("footer.contact")}</h4>
            <ul className="space-y-2.5 font-body text-sm text-muted-foreground">
              <li><a href="tel:+15162721560" className="hover:text-primary transition-colors duration-300">+1 (516) 272-1560</a></li>
              <li><a href="mailto:iloveprintingny@gmail.com" className="hover:text-primary transition-colors duration-300">iloveprintingny@gmail.com</a></li>
              <li>New York, NY</li>
            </ul>
          </div>
        </div>

        <div className="section-divider-glow w-full mb-8" />

        <div className="flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-muted-foreground font-body tracking-wider">
          <p>&copy; {new Date().getFullYear()} I Love Printing Corp. {t("footer.rights")}</p>
          <button
            onClick={() => setLang(lang === "en" ? "es" : "en")}
            className="flex items-center gap-1.5 hover:text-foreground transition-colors duration-300"
          >
            <Globe className="w-3.5 h-3.5" />
            {lang === "en" ? "Español" : "English"}
          </button>
        </div>
      </div>
    </footer>
  );
};

export default FooterSection;
