"use client";

import { useRef, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import gsap from "gsap";
import { useLanguage } from "@/lib/i18n/context";

export default function About() {
  const { t } = useLanguage();
  const stats = [
    { n: "2013", l: t.about.stats.founded    },
    { n: "6",    l: t.about.stats.categories },
    { n: "100%", l: t.about.stats.local      },
  ];
  const sectionRef = useRef<HTMLElement>(null);

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

    const img     = section.querySelector<HTMLElement>('[data-r="img"]');
    const badge   = section.querySelector<HTMLElement>('[data-r="badge"]');
    const heading = section.querySelector<HTMLElement>('[data-r="heading"]');
    const body    = section.querySelector<HTMLElement>('[data-r="body"]');
    const stats   = section.querySelector<HTMLElement>('[data-r="stats"]');
    const btn     = section.querySelector<HTMLElement>('[data-r="btn"]');

    if (!badge) return;

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

    const enterObs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      tl?.kill();
      tl = gsap.timeline();
      if (img)     tl.fromTo(img,     { opacity: 0, x: -52 }, { opacity: 1, x: 0, duration: 1.1, ease: "power3.out" }, 0);
      tl.fromTo(badge,               { opacity: 0, y: 28  }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 0.08);
      if (heading) tl.fromTo(heading, { opacity: 0, y: 28  }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 0.18);
      if (body)    tl.fromTo(body,    { opacity: 0, y: 28  }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 0.28);
      if (stats)   tl.fromTo(stats,   { opacity: 0, y: 28  }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 0.36);
      if (btn)     tl.fromTo(btn,     { opacity: 0, y: 28  }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 0.44);
      enterObs.disconnect();
    }, { threshold: 0, rootMargin: "0px 0px -80px 0px" });

    enterObs.observe(badge);

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

  return (
    <section ref={sectionRef} id="about" className="py-28 lg:py-40 bg-brand-off-white overflow-hidden">
      <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-20 lg:gap-28 items-center">

        <div data-r="img" style={{ opacity: 0 }} className="relative">
          <div className="absolute -top-5 -left-5 w-full h-full bg-brand-peach rounded-3xl -z-10" />
          <div className="rounded-3xl overflow-hidden shadow-2xl bg-brand-sand-light flex items-center justify-center p-12">
            <Image src="/logo.png" alt="Asli Food — Produits authentiques de Mauritanie" width={640} height={640} className="w-full object-contain" />
          </div>
          <div className="absolute -bottom-6 -right-6 bg-brand-dark text-brand-yellow rounded-2xl p-5 shadow-xl">
            <div className="text-4xl font-bold leading-none" style={{ fontFamily: "var(--font-space, sans-serif)" }}>2013</div>
            <div className="text-[10px] font-bold tracking-[0.2em] uppercase text-brand-yellow/60 mt-1.5">{t.about.stats.founded}</div>
          </div>
        </div>

        <div className="space-y-7">
          <Link data-r="badge" href="/a-propos" style={{ opacity: 0 }} className="inline-block bg-brand-yellow text-brand-dark px-4 py-2 rounded-full text-[11px] font-bold tracking-[0.22em] uppercase hover:bg-brand-dark hover:text-brand-yellow transition-colors duration-300">
            {t.about.badge}
          </Link>
          <h2 data-r="heading" style={{ fontFamily: "var(--font-space, sans-serif)", opacity: 0 }} className="text-5xl lg:text-[4.5rem] font-bold leading-none tracking-tight text-brand-dark">
            ANID AGRO
            <span className="block text-stroke">Mauritanie</span>
          </h2>
          <div data-r="body" style={{ opacity: 0 }} className="space-y-4 text-brand-dark/65 leading-relaxed text-[15px]">
            <p>{t.about.p1}</p>
            <p>{t.about.p2}</p>
            <p>{t.about.p3}</p>
          </div>
          <div data-r="stats" style={{ opacity: 0 }} className="flex gap-8 pt-2">
            {stats.map((s) => (
              <div key={s.l}>
                <div className="text-2xl font-bold text-brand-dark" style={{ fontFamily: "var(--font-space, sans-serif)" }}>{s.n}</div>
                <div className="text-[10px] font-bold tracking-[0.2em] uppercase text-brand-dark/50 mt-0.5">{s.l}</div>
              </div>
            ))}
          </div>
          <a data-r="btn" href="#products" style={{ opacity: 0 }} className="inline-flex items-center gap-2 bg-brand-dark text-brand-yellow font-bold px-8 py-4 rounded-full text-sm tracking-wide hover:scale-105 transition-transform duration-300">
            {t.about.cta}
          </a>
        </div>
      </div>
    </section>
  );
}