import { useState, useEffect } from "react";
import { Link } from "wouter";
import { ArrowRight, Award, Globe, Handshake, FileText } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";
import { trackCTAClick } from "@/lib/analytics";

const HERO_IMG = "/images/hero-new.jpg";

function Counter({ target, suffix }: { target: number; suffix: string }) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    let start = 0;
    const duration = 2000;
    const step = Math.ceil(target / (duration / 30));
    const timer = setInterval(() => {
      start += step;
      if (start >= target) { setCount(target); clearInterval(timer); }
      else setCount(start);
    }, 30);
    return () => clearInterval(timer);
  }, [target]);
  return <span dir="ltr">{count}{suffix}</span>;
}

export default function HeroSection() {
  const [visible, setVisible] = useState(false);
  const { t, lang } = useLanguage();

  useEffect(() => {
    const timer = setTimeout(() => setVisible(true), 100);
    return () => clearTimeout(timer);
  }, []);

  return (
    <section id="home" className="relative min-h-[85vh] flex items-center overflow-hidden">
      <div className="absolute inset-0">
        <img src={HERO_IMG} alt="Industrial engineering facility" className="w-full h-full object-cover" loading="eager" />
        <div className="absolute inset-0 bg-gradient-to-r from-navy/95 via-navy/80 to-navy/50" />
      </div>

      <div className="container relative z-10 py-20 lg:py-28">
        <div className="max-w-2xl">
          <div className={`inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm text-white/90 rounded-full px-4 py-1.5 mb-6 transition-all duration-700 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"}`}>
            <span className="w-2 h-2 bg-teal rounded-full animate-pulse" />
            <span className="text-sm font-medium">{t("hero.since")}</span>
          </div>

          <h1 className={`font-heading font-bold text-4xl lg:text-6xl text-white leading-tight mb-6 transition-all duration-700 delay-150 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"}`}>
            {t("hero.title1")}{" "}
            <span className="text-teal">{t("hero.title2")}</span>
          </h1>

          <p className={`text-lg lg:text-xl text-white/75 leading-relaxed mb-8 max-w-xl transition-all duration-700 delay-300 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"}`}>
            {t("hero.subtitle")}
          </p>

          <div className={`flex flex-wrap gap-4 mb-12 transition-all duration-700 delay-500 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"}`}>
            <Link href="/industries/ceramics" onClick={() => trackCTAClick("Explore Services", "hero")} className="inline-flex items-center gap-2 bg-teal hover:bg-teal-dark text-white font-semibold px-7 py-3.5 rounded-md transition-all duration-200 hover:shadow-lg hover:shadow-teal/20 group">
              {t("hero.cta1")}
              <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </Link>
            <button
              onClick={() => {
                trackCTAClick("Request Quote", "hero");
                window.dispatchEvent(new CustomEvent("open-quote-modal"));
              }}
              className="inline-flex items-center gap-2 bg-white text-navy font-semibold px-7 py-3.5 rounded-md transition-all duration-200 hover:bg-white/90 hover:shadow-lg group"
            >
              <FileText className="w-4 h-4" />
              {lang === "ar" ? "طلب عرض أسعار" : "Request a Quote"}
            </button>
            <Link href="/about" onClick={() => trackCTAClick("Learn More", "hero")} className="inline-flex items-center gap-2 border border-white/30 text-white hover:bg-white/10 font-semibold px-7 py-3.5 rounded-md transition-all duration-200">
              {t("hero.cta2")}
            </Link>
          </div>
        </div>

        <div className={`grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8 transition-all duration-700 delay-700 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"}`}>
          {[
            { icon: Award, value: 25, suffix: "+", label: t("hero.stat.years") },
            { icon: Globe, value: 13, suffix: "+", label: t("hero.stat.partners") },
            { icon: Handshake, value: 4, suffix: "+", label: t("hero.stat.industries") },
            { icon: Globe, value: 10, suffix: "+", label: t("hero.stat.countries") },
          ].map((stat, i) => (
            <div key={i} className="flex items-start gap-3">
              <div className="p-2 bg-teal/20 rounded-lg shrink-0">
                <stat.icon className="w-5 h-5 text-teal" />
              </div>
              <div>
                <div className="font-heading font-bold text-2xl lg:text-3xl text-teal">
                  <Counter target={stat.value} suffix={stat.suffix} />
                </div>
                <div className="text-xs text-white/60 mt-0.5">{stat.label}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
