import { Link } from "wouter";
import { ArrowRight } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";
import { trackPartnerClick } from "@/lib/analytics";

// Partner logos uploaded to CDN
const partners = [
  {
    name: "Schäffer",
    country: { en: "Germany", ar: "ألمانيا" },
    url: "https://www.schaeffer.de/en/",
    logo: "/images/QXFYaXZddEILjsJI.png",
  },
  {
    name: "BvL",
    country: { en: "Germany", ar: "ألمانيا" },
    url: "https://www.bvl-farmtechnology.com/en/",
    logo: "/images/wHxybHbSaXlfPfRZ.jpg",
  },
  {
    name: "Bucher Automation",
    country: { en: "Germany", ar: "ألمانيا" },
    url: "https://www.bucherautomation.com/en/",
    logo: "/images/QUwIJMNyvpQbxbVa.png",
  },
  {
    name: "UAS Messtechnik",
    country: { en: "Germany", ar: "ألمانيا" },
    url: "https://www.uas.de/en/",
    logo: null, // Text fallback
  },
  {
    name: "Hotwork International",
    country: { en: "Switzerland", ar: "سويسرا" },
    url: "https://www.hotwork.ag/",
    logo: "/images/EaMNSfdMVQbyKTHN.jpg",
  },
  {
    name: "Accuramech",
    country: { en: "India", ar: "الهند" },
    url: "https://www.accuramech.com/",
    logo: "/images/ONYHrjKjgWdNSlZQ.png",
  },
  {
    name: "Refmon",
    country: { en: "Hungary", ar: "المجر" },
    url: "https://www.refmon.hu/",
    logo: "/images/VJiUyzdIPbGtfXAq.png",
  },
  {
    name: "Heat Applications India",
    country: { en: "India", ar: "الهند" },
    url: "https://www.heatapp.in/",
    logo: "/images/xqBMXhGfJFAePMXt.jpg",
  },
  {
    name: "Interglass",
    country: { en: "Mexico", ar: "المكسيك" },
    url: "https://interglass.global/",
    logo: "/images/foLXlrTWaQuMlaLZ.png",
  },
  {
    name: "WBT Srl",
    country: { en: "Italy", ar: "إيطاليا" },
    url: "https://www.wbtsrl.com/",
    logo: "/images/QyFcnPOOUUACNCuD.jpg",
  },
  {
    name: "Interlub Group",
    country: { en: "Mexico", ar: "المكسيك" },
    url: "https://interlub.com/en/",
    logo: "/images/GvQUxobnOAmxCBOR.jpg",
  },
  {
    name: "Lingnan Refractory",
    country: { en: "China", ar: "الصين" },
    url: "http://www.lnref.com/",
    logo: "/images/qiHjnszdbHGrWAQg.png",
  },
  {
    name: "Zhongfu-Silica",
    country: { en: "China", ar: "الصين" },
    url: "",
    logo: null, // Text fallback
  },
];

function PartnerCard({ partner, lang }: { partner: typeof partners[0]; lang: "en" | "ar" }) {
  const content = (
    <div className="flex flex-col items-center justify-center h-28 px-4 bg-white rounded-lg border border-navy/5 hover:border-teal/30 hover:shadow-md hover:shadow-teal/5 transition-all duration-300 group">
      {partner.logo ? (
        <img
          src={partner.logo}
          alt={`${partner.name} logo`}
          className="max-h-12 max-w-[140px] object-contain grayscale group-hover:grayscale-0 transition-all duration-300 opacity-70 group-hover:opacity-100"
          loading="lazy"
        />
      ) : (
        <span className="font-heading font-bold text-lg text-navy/50 group-hover:text-navy transition-colors">
          {partner.name}
        </span>
      )}
      <span className="text-[10px] text-navy/30 mt-2 group-hover:text-navy/50 transition-colors">
        {partner.country[lang]}
      </span>
    </div>
  );

  if (partner.url) {
    return (
      <a
        href={partner.url}
        target="_blank"
        rel="noopener noreferrer"
        onClick={() => trackPartnerClick(partner.name, partner.url)}
        className="block shrink-0 w-[180px]"
        title={partner.name}
      >
        {content}
      </a>
    );
  }

  return (
    <div className="block shrink-0 w-[180px]" title={partner.name}>
      {content}
    </div>
  );
}

export default function HomePartners() {
  const { t, lang } = useLanguage();

  // Duplicate partners for seamless infinite scroll
  const duplicatedPartners = [...partners, ...partners];

  return (
    <section className="py-16 lg:py-24 overflow-hidden">
      <div className="container">
        <div className="text-center max-w-2xl mx-auto mb-12">
          <div className="inline-flex items-center gap-2 bg-teal/10 text-teal rounded-full px-4 py-1.5 mb-4">
            <span className="text-sm font-semibold tracking-wide uppercase">{t("partners.tag")}</span>
          </div>
          <h2 className="font-heading font-bold text-3xl lg:text-4xl text-navy mb-4">
            {t("partners.title")}
          </h2>
          <p className="text-slate-dark/70 leading-relaxed">
            {t("partners.subtitle")}
          </p>
        </div>
      </div>

      {/* Infinite scrolling carousel */}
      <div className="relative">
        {/* Gradient fade edges */}
        <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-warm-white to-transparent z-10 pointer-events-none" />
        <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-warm-white to-transparent z-10 pointer-events-none" />

        {/* Row 1: scrolls left */}
        <div className="flex gap-4 mb-4 animate-scroll-left">
          {duplicatedPartners.map((partner, i) => (
            <PartnerCard key={`row1-${i}`} partner={partner} lang={lang} />
          ))}
        </div>

        {/* Row 2: scrolls right (reversed order) */}
        <div className="flex gap-4 animate-scroll-right">
          {[...duplicatedPartners].reverse().map((partner, i) => (
            <PartnerCard key={`row2-${i}`} partner={partner} lang={lang} />
          ))}
        </div>
      </div>

      <div className="container">
        <div className="text-center mt-10">
          <Link href="/partners" className="inline-flex items-center gap-2 text-teal hover:text-teal-dark font-semibold transition-colors group">
            {t("partners.viewAll")}
            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 rtl:-translate-x-1 transition-transform rtl:rotate-180" />
          </Link>
        </div>
      </div>
    </section>
  );
}
