"use client"


import { Factory, Shield, FlaskConical, Droplet } from "lucide-react"
import { motion } from "framer-motion"
import { useInView } from "react-intersection-observer"
import { useTranslations, useLocale } from 'next-intl'
import SectionLabel from "@/components/section-label"
import Image from "next/image"
import Link from "next/link"

interface Activity {
  icon: typeof Factory
  titleKey: string
  statsKey: string
  color: string
  bgColor: string
  image: string
  sectionId: string
}

function CircularActivityCard({ activity, index, t, locale }: { activity: Activity; index: number; t: any; locale: string }) {
  const Icon = activity.icon

  return (
    <Link
      href={`/${locale}/activites#${activity.sectionId}`}
      className="flex flex-col items-center group/card"
    >
      <motion.div
        className="flex flex-col items-center w-full cursor-pointer"
        initial={{ opacity: 0, scale: 0.5, y: 50, rotateY: -15 }}
        whileInView={{ opacity: 1, scale: 1, y: 0, rotateY: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 2, delay: index * 0.3, type: "spring", bounce: 0.08 }}
        whileHover={{ y: -8 }}
      >
      <motion.div
        className="text-center w-48 sm:w-56 md:w-64 mb-4 sm:mb-5"
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ delay: index * 0.15 + 0.2 }}
      >
        <motion.h3
          className="text-lg sm:text-xl md:text-2xl font-bold relative inline-block group-hover/card:text-primary transition-colors duration-300"
          whileHover={{ scale: 1.05 }}
        >
          {t(activity.titleKey)}
        </motion.h3>
      </motion.div>

      <motion.div
        className="relative w-48 h-48 sm:w-56 sm:h-56 md:w-64 md:h-64 mb-3 sm:mb-4 group"
        whileHover={{ scale: 1.1, rotate: 5 }}
        transition={{ type: "spring", stiffness: 300, damping: 20 }}
      >
        <div className="absolute inset-0 rounded-full bg-white border sm:border-2 border-primary shadow-xl transition-all duration-300" />

        <div className={`absolute inset-4 rounded-full ${activity.bgColor} overflow-hidden shadow-2xl transition-all duration-500`}>
          {activity.image ? (
            <>
              <div className="absolute inset-0 opacity-20 z-0"
                style={{
                  background: `radial-gradient(circle at center, transparent 0%, rgba(255,255,255,0.3) 100%)`,
                }}
              />
              <motion.div 
                className="absolute inset-0 rounded-full overflow-hidden z-10"
                whileHover={{ scale: 1.1 }}
                transition={{ duration: 0.3 }}
              >
                <Image
                  src={activity.image}
                  alt={t(activity.titleKey)}
                  fill
                  className="object-cover rounded-full group-hover:brightness-110 transition-all duration-500"
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                />
              </motion.div>
            </>
          ) : (
            <>
              <motion.div
                className="absolute inset-0 opacity-30"
                style={{
                  background: `radial-gradient(circle at center, transparent 0%, rgba(255,255,255,0.3) 100%)`,
                }}
                animate={{
                  scale: [1, 1.2, 1],
                }}
                transition={{
                  duration: 2,
                  repeat: Number.POSITIVE_INFINITY,
                }}
              />
              <motion.div 
                className="relative z-10 flex items-center justify-center w-full h-full"
                whileHover={{ rotate: 360, scale: 1.2 }}
                transition={{ duration: 0.6 }}
              >
                <Icon className="text-white w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20 drop-shadow-lg" strokeWidth={1.5} />
              </motion.div>
            </>
          )}

        </div>
      </motion.div>

      {/* Invite au clic : le libellé reste lisible sans survol (tactile), et le
          filet s'étire au survol pour signaler que la carte est un lien. */}
      <motion.div
        className="flex flex-col items-center w-48 sm:w-56 md:w-64 mt-1"
        initial={{ opacity: 0, y: -10 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.6, delay: index * 0.15 + 0.3, ease: "easeOut" }}
      >
        <span className="text-[11px] sm:text-xs font-semibold uppercase tracking-widest text-gray-500 group-hover/card:text-primary transition-colors duration-300">
          {locale === "en" ? "View details" : "Voir le détail"}
        </span>
        <span
          className="mt-1.5 h-0.5 w-6 bg-primary/40 transition-all duration-300 group-hover/card:w-20 group-hover/card:bg-primary"
          aria-hidden
        />
      </motion.div>
      </motion.div>
    </Link>
  )
}

export default function ActivitiesGrid() {
  const t = useTranslations('activities')
  const locale = useLocale()
  const [ref] = useInView({ triggerOnce: true, threshold: 0.1 })

  const activities: Activity[] = [
    {
      icon: Factory,
      titleKey: "refining.title",
      statsKey: "refining.stats",
      color: "from-[#E52621] to-[#ff4d47]",
      bgColor: "bg-[#E52621]",
      image: "/rafinage.jpeg",
      sectionId: "refining",
    },
    {
      icon: Droplet,
      titleKey: "products.title",
      statsKey: "products.stats",
      color: "from-[#ff4d47] to-[#E52621]",
      bgColor: "bg-[#ff4d47]",
      image: "/produit-illustration.jpeg",
      sectionId: "products",
    },
    {
      icon: FlaskConical,
      titleKey: "laboratory.title",
      statsKey: "laboratory.stats",
      color: "from-[#E52621] to-[#c41e1a]",
      bgColor: "bg-[#E52621]",
      image: "/labo.jpg",
      sectionId: "laboratory",
    },
    {
      icon: Shield,
      titleKey: "safety.title",
      statsKey: "safety.stats",
      color: "from-[#1D1D1B] to-[#4a4a48]",
      bgColor: "bg-[#1D1D1B]",
      image: "/secu.png",
      sectionId: "safety",
    },
  ]

  return (
    <section className="pt-12 pb-12 bg-slate-100 overflow-hidden relative">
      <motion.div
        className="absolute bottom-0 right-0 w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 bg-primary/5 rounded-full blur-3xl"
        animate={{
          x: [0, -100, 0],
          y: [0, -50, 0],
        }}
        transition={{
          duration: 15,
          repeat: Number.POSITIVE_INFINITY,
          ease: "linear",
        }}
      />

      <div className="px-2 sm:px-4 lg:px-6">
        <div className="max-w-[98%] mx-auto relative z-10">
          <SectionLabel title={t('title')} size="small" variant="overline" />
        </div>
      </div>
      <div className="w-full px-2 sm:px-4 lg:px-6 relative z-10">
        <div ref={ref} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 md:gap-12 mt-8 sm:mt-12 md:mt-16">
          {activities.map((activity, index) => (
            <CircularActivityCard key={index} activity={activity} index={index} t={t} locale={locale} />
          ))}
        </div>
      </div>
    </section>
  )
}