"use client";

import { useRef, useEffect } from "react";
import { WhatsappLogo } from "@phosphor-icons/react";
import { ArrowRight } from "lucide-react";
import gsap from "gsap";
import { useLanguage } from "@/lib/i18n/context";

export default function CTASection() {
  const { t } = useLanguage();
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const section = sectionRef.current;
    if (!section) return;

    const badge   = section.querySelector<HTMLElement>('[data-r="badge"]');
    const heading = section.querySelector<HTMLElement>('[data-r="heading"]');
    const desc    = section.querySelector<HTMLElement>('[data-r="desc"]');
    const cta     = section.querySelector<HTMLElement>('[data-r="cta"]');

    if (!badge) return;

    let tl: gsap.core.Timeline | null = null;

    const enterObs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      tl?.kill();
      tl = gsap.timeline();
      tl.fromTo(badge,  { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 0);
      if (heading) tl.fromTo(heading, { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 0.12);
      if (desc)    tl.fromTo(desc,    { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 0.22);
      if (cta)     tl.fromTo(cta,     { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 0.32);
      enterObs.disconnect();
    }, { threshold: 0, rootMargin: "0px 0px -80px 0px" });

    enterObs.observe(badge);

    return () => { enterObs.disconnect(); };
  }, []);

  return (
    <section ref={sectionRef} id="contact" className="py-28 lg:py-40 bg-brand-blue overflow-hidden relative">
      <div className="absolute inset-0 pointer-events-none select-none" aria-hidden>
        <div className="absolute top-[-35%] right-[-12%] w-[650px] h-[650px] rounded-full border border-brand-dark/10 animate-spin-slow" />
        <div className="absolute bottom-[-35%] left-[-12%] w-[450px] h-[450px] rounded-full border border-brand-dark/10 animate-spin-slow" style={{ animationDirection: "reverse" }} />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full border border-brand-dark/05" />
      </div>

      <div className="relative z-10 max-w-4xl mx-auto px-6 text-center space-y-8">
        <span data-r="badge" style={{ opacity: 0 }} className="inline-block bg-brand-dark text-brand-yellow px-5 py-2.5 rounded-full text-[11px] font-bold tracking-[0.22em] uppercase">
          {t.cta.badge}
        </span>
        <h2 data-r="heading" style={{ fontFamily: "var(--font-space, sans-serif)", opacity: 0 }} className="text-5xl lg:text-8xl font-bold leading-none tracking-tight text-brand-dark">
          {t.cta.line1}
          <span className="block text-stroke">{t.cta.line2}</span>
        </h2>
        <p data-r="desc" style={{ opacity: 0 }} className="text-brand-dark/65 text-lg leading-relaxed max-w-2xl mx-auto">
          {t.cta.desc}
        </p>
        <div data-r="cta" style={{ opacity: 0 }} className="flex flex-wrap gap-4 justify-center pt-2">
          <a
            href="https://wa.me/22241284479?text=Bonjour%2C%20je%20souhaite%20commander%20vos%20produits."
            target="_blank" rel="noopener noreferrer"
            className="group bg-brand-dark text-brand-yellow font-bold px-10 py-5 rounded-full text-base tracking-wide hover:scale-105 transition-transform duration-300 flex items-center gap-2"
          >
            <WhatsappLogo size={20} weight="fill" />
            {t.cta.whatsapp}
            <ArrowRight size={18} strokeWidth={2.5} className="transition-transform duration-300 group-hover:translate-x-1.5" />
          </a>
          <a
            href="https://www.facebook.com/p/Asli-Food-61578120753965/"
            target="_blank" rel="noopener noreferrer"
            className="border-2 border-brand-dark text-brand-dark font-bold px-10 py-5 rounded-full text-base tracking-wide hover:bg-brand-dark hover:text-brand-yellow transition-all duration-300 inline-block"
          >
            {t.cta.facebook}
          </a>
        </div>
      </div>
    </section>
  );
}