"use client";

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

export default function AProposClient({ content }: { content: AboutContent }) {
  const { t } = useLanguage();
  const sectionRef = useRef<HTMLElement>(null);

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

    const els = {
      badge:   section.querySelector<HTMLElement>('[data-r="badge"]'),
      heading: section.querySelector<HTMLElement>('[data-r="heading"]'),
      body:    section.querySelector<HTMLElement>('[data-r="body"]'),
      stats:   section.querySelector<HTMLElement>('[data-r="stats"]'),
    };

    if (!els.badge) return;

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

    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      tl?.kill();
      tl = gsap.timeline();
      tl.fromTo(els.badge,   { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 1,   ease: "power3.out" }, 0);
      if (els.heading) tl.fromTo(els.heading, { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 1,   ease: "power3.out" }, 0.1);
      if (els.body)    tl.fromTo(els.body,    { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 1,   ease: "power3.out" }, 0.22);
      if (els.stats)   tl.fromTo(els.stats,   { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 1,   ease: "power3.out" }, 0.34);
      obs.disconnect();
    }, { threshold: 0, rootMargin: "0px 0px -60px 0px" });

    obs.observe(els.badge);
    return () => obs.disconnect();
  }, []);

  return (
    <main className="bg-brand-sand-light min-h-screen">
      <section
        ref={sectionRef}
        className="max-w-3xl mx-auto px-6 pt-36 pb-28 lg:pt-44 lg:pb-36"
      >
        <div className="space-y-7 bg-brand-sand-light rounded-3xl p-8 lg:p-12">
          <span
            data-r="badge"
            style={{ opacity: 0 }}
            className="inline-block bg-brand-peach text-brand-dark px-4 py-2 rounded-full text-[11px] font-bold tracking-[0.22em] uppercase"
          >
            {content.badge}
          </span>

          <h1
            data-r="heading"
            style={{ opacity: 0, fontFamily: "var(--font-space, sans-serif)" }}
            className="text-5xl lg:text-[4.5rem] font-bold leading-none tracking-tight text-brand-dark"
          >
            {content.title}
            <span className="block text-brand-terracotta">{content.sub}</span>
          </h1>

          <div
            data-r="body"
            style={{ opacity: 0 }}
            className="space-y-4 text-brand-dark/80 leading-relaxed text-[15px]"
          >
            {content.paragraphs.map((p, i) => p && <p key={i}>{p}</p>)}
          </div>

          {/* Stats cards */}
          <div data-r="stats" style={{ opacity: 0 }} className="flex gap-6 pt-2 flex-wrap">
            {content.stats.map((s, i) => (
              <div key={i} className="bg-brand-peach rounded-2xl px-4 py-3">
                <div
                  className="text-2xl font-bold text-brand-dark"
                  style={{ fontFamily: "var(--font-space, sans-serif)" }}
                >
                  {s.value}
                </div>
                <div className="text-[10px] font-bold tracking-[0.2em] uppercase text-brand-dark/60 mt-0.5">
                  {s.label}
                </div>
              </div>
            ))}
          </div>

          <Link
            href="/produits"
            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.apropos.cta}
          </Link>
        </div>
      </section>
    </main>
  );
}