"use client";

import React, { useRef, useEffect } from "react";
import { Leaf, Handshake, Storefront, ArrowRight } from "@phosphor-icons/react";
import { MdFamilyRestroom } from "react-icons/md";

const FamilyIcon = ({ size, className }: { size?: number; weight?: string; className?: string }) => (
  <MdFamilyRestroom size={size} className={className} />
);
import gsap from "gsap";
import { useLanguage } from "@/lib/i18n/context";

const ICONS = [Leaf, FamilyIcon, Handshake, Storefront];

export default function Features() {
  const { t } = useLanguage();
  const FEATURES = t.features.cards.map((card, i) => ({
    Icon: ICONS[i],
    title: card.title,
    desc:  card.desc,
    cta:   "cta" in card && card.cta ? { label: card.cta, href: "#boutiques" } : undefined,
  }));

  const badgeRef = useRef<HTMLSpanElement>(null);
  const line1Ref = useRef<HTMLDivElement>(null);
  const line2Ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const badge = badgeRef.current;
    const line1 = line1Ref.current;
    const line2 = line2Ref.current;
    if (!badge) return;

    gsap.set(badge,          { opacity: 0, y: 16 });
    gsap.set([line1, line2], { y: "108%" });

    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      const tl = gsap.timeline();
      tl.to(badge, { opacity: 1, y: 0,  duration: 0.7, ease: "power3.out" }, 0);
      tl.to(line1, { y: "0%",           duration: 0.9, ease: "power4.out" }, 0.18);
      tl.to(line2, { y: "0%",           duration: 0.9, ease: "power4.out" }, 0.32);
      obs.disconnect();
    }, { rootMargin: "0px 0px -25% 0px", threshold: 0 });

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

  return (
    <section className="py-28 lg:py-40 bg-brand-off-white">
      <div className="max-w-7xl mx-auto px-6">

        {/* Header */}
        <div className="text-center mb-20 space-y-5">
          <span
            ref={badgeRef}
            className="inline-block bg-brand-yellow text-brand-dark px-4 py-2 rounded-full text-[11px] font-bold tracking-[0.22em] uppercase"
          >
            {t.features.badge}
          </span>

          <h2
            className="text-5xl lg:text-6xl font-bold leading-none tracking-tight text-brand-dark"
            style={{ fontFamily: "var(--font-space, sans-serif)" }}
          >
            <span className="block overflow-hidden">
              <div ref={line1Ref}>{t.features.line1}</div>
            </span>
            <span className="block overflow-hidden">
              <div ref={line2Ref} className="text-brand-dark/40">{t.features.line2}</div>
            </span>
          </h2>
        </div>

        {/* Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
          {FEATURES.map((feat, i) => (
            <FeatureCard key={feat.title} feature={feat} index={i} />
          ))}
        </div>

      </div>
    </section>
  );
}

interface FeatureItem {
  Icon: React.ElementType;
  title: string;
  desc: string;
  cta?: { label: string; href: string };
}

function FeatureCard({ feature, index }: { feature: FeatureItem; index: number }) {
  const cardRef = useRef<HTMLDivElement>(null);
  const { locale } = useLanguage();
  const isRTL = locale === "ar";

  useEffect(() => {
    const card = cardRef.current;
    if (!card) return;

    gsap.set(card, { opacity: 0, y: 40 });

    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      gsap.to(card, {
        opacity:  1,
        y:        0,
        duration: 0.75,
        delay:    index * 0.12,
        ease:     "power3.out",
      });
      obs.disconnect();
    }, { rootMargin: "0px 0px -10% 0px", threshold: 0 });

    obs.observe(card);
    return () => obs.disconnect();
  }, [index]);

  return (
    <div
      ref={cardRef}
      className="group bg-brand-sand-light rounded-3xl p-8 border border-brand-dark/6 hover:border-brand-yellow hover:shadow-lg hover:shadow-brand-yellow/10 transition-all duration-400 cursor-default"
    >
      {/* Icon */}
      <div className="mb-6 w-12 h-12 rounded-2xl bg-brand-yellow flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
        <feature.Icon size={22} weight="bold" className="text-brand-dark" />
      </div>

      {/* Number */}
      <p className="text-brand-dark/15 text-xs font-black tracking-widest uppercase mb-2">
        0{index + 1}
      </p>

      {/* Title */}
      <h3
        className="text-brand-dark font-black text-lg mb-3 leading-snug"
        style={{ fontFamily: "var(--font-space, sans-serif)" }}
      >
        {feature.title}
      </h3>

      {/* Divider */}
      <div className="w-8 h-0.5 bg-brand-yellow mb-4 group-hover:w-full transition-all duration-500" />

      {/* Desc */}
      <p className="text-brand-dark/70 text-sm leading-relaxed font-semibold">
        {feature.desc}
      </p>

      {/* CTA */}
      {feature.cta && (
        <a
          href={feature.cta.href}
          className="inline-flex items-center gap-1.5 mt-5 text-brand-dark text-xs font-bold tracking-wide hover:gap-3 transition-all duration-300"
        >
          {feature.cta.label} <ArrowRight size={13} weight="bold" className={isRTL ? "rtl-flip" : ""} />
        </a>
      )}
    </div>
  );
}