"use client";
import { useState } from "react";
import Link from "next/link";
import { motion, useReducedMotion } from "framer-motion";
import { type Lang } from "@/lib/config";

export default function IndustrySolutions({ lang }: { lang: Lang }) {
  const isAr = lang === "ar";
  const [hoveredIndustry, setHoveredIndustry] = useState<number | null>(null);
  const prefersReducedMotion = useReducedMotion();

  const cardVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: { opacity: 1, y: 0 },
  };

  const industries = [
    {
      icon: "💇‍♀️",
      nameEn: "Beauty & Hair Salons",
      nameAr: "صالونات التجميل والشعر",
      descEn: "Manage stylists, services, and client preferences",
      descAr: "إدارة المصففين والخدمات وتفضيلات العملاء",
      features: [
        { en: "Multi-service bookings", ar: "حجوزات متعددة الخدمات" },
        { en: "Stylist scheduling", ar: "جدولة المصففين" },
        { en: "Color formulas saved", ar: "حفظ تركيبات الألوان" },
      ],
      stats: {
        value: "45%",
        label: { en: "More bookings", ar: "حجوزات أكثر" },
      },
      gradient: "from-pink-500 to-rose-500",
      bgPattern:
        "radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%)",
    },
    {
      icon: "🏋️",
      nameEn: "Fitness & Gyms",
      nameAr: "مراكز اللياقة والجيم",
      descEn: "PT sessions, group classes, and member management",
      descAr: "جلسات تدريب شخصي وحصص جماعية وإدارة الأعضاء",
      features: [
        { en: "Class capacity management", ar: "إدارة سعة الحصص" },
        { en: "Trainer availability", ar: "توفر المدربين" },
        { en: "Waitlist automation", ar: "أتمتة قائمة الانتظار" },
      ],
      stats: {
        value: "85%",
        label: { en: "Class attendance", ar: "حضور الحصص" },
      },
      gradient: "from-orange-500 to-red-500",
      bgPattern:
        "radial-gradient(circle at 20% 80%, rgba(249, 115, 22, 0.1) 0%, transparent 50%)",
    },
    {
      icon: "🚗",
      nameEn: "Auto Service Centers",
      nameAr: "مراكز خدمة السيارات",
      descEn: "Service appointments, maintenance reminders, parts tracking",
      descAr: "مواعيد الخدمة وتذكيرات الصيانة وتتبع القطع",
      features: [
        { en: "Service history tracking", ar: "تتبع تاريخ الخدمة" },
        { en: "Parts availability check", ar: "فحص توفر القطع" },
        { en: "Pick-up/delivery slots", ar: "مواعيد الاستلام والتوصيل" },
      ],
      stats: {
        value: "60%",
        label: { en: "Workshop efficiency", ar: "كفاءة الورشة" },
      },
      gradient: "from-gray-600 to-slate-700",
      bgPattern:
        "radial-gradient(circle at 50% 50%, rgba(75, 85, 99, 0.1) 0%, transparent 50%)",
    },
    {
      icon: "🎓",
      nameEn: "Education Centers",
      nameAr: "المراكز التعليمية",
      descEn: "Tutoring sessions, courses, and parent communication",
      descAr: "جلسات دروس خصوصية ودورات وتواصل مع أولياء الأمور",
      features: [
        { en: "Parent notifications", ar: "إشعارات أولياء الأمور" },
        { en: "Progress tracking", ar: "تتبع التقدم" },
        { en: "Online/offline options", ar: "خيارات حضورية/أونلاين" },
      ],
      stats: {
        value: "95%",
        label: { en: "Attendance rate", ar: "معدل الحضور" },
      },
      gradient: "from-blue-500 to-indigo-500",
      bgPattern:
        "radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%)",
    },
    {
      icon: "📸",
      nameEn: "Photography Studios",
      nameAr: "استوديوهات التصوير",
      descEn: "Photoshoots, events coverage, and package deals",
      descAr: "جلسات تصوير وتغطية مناسبات وعروض الباقات",
      features: [
        { en: "Location coordination", ar: "تنسيق المواقع" },
        { en: "Equipment scheduling", ar: "جدولة المعدات" },
        { en: "Digital gallery delivery", ar: "تسليم المعرض الرقمي" },
      ],
      stats: {
        value: "2x",
        label: { en: "Booking efficiency", ar: "كفاءة الحجز" },
      },
      gradient: "from-purple-500 to-pink-500",
      bgPattern:
        "radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 50%)",
    },
    {
      icon: "🐕",
      nameEn: "Pet Care & Veterinary",
      nameAr: "رعاية الحيوانات والبيطرة",
      descEn: "Grooming, checkups, vaccinations, and treatments",
      descAr: "العناية والفحوصات والتطعيمات والعلاجات",
      features: [
        { en: "Pet medical records", ar: "السجلات الطبية للحيوانات" },
        { en: "Vaccination reminders", ar: "تذكيرات التطعيم" },
        { en: "Emergency appointments", ar: "مواعيد الطوارئ" },
      ],
      stats: {
        value: "98%",
        label: { en: "Owner satisfaction", ar: "رضا المالكين" },
      },
      gradient: "from-green-500 to-emerald-500",
      bgPattern:
        "radial-gradient(circle at 50% 80%, rgba(34, 197, 94, 0.1) 0%, transparent 50%)",
    },
  ];

  return (
    <section className="py-20 px-4 bg-gradient-to-b from-slate-50 to-white dark:from-slate-800 dark:to-slate-900">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <motion.div
          className="text-center mb-12"
          initial={prefersReducedMotion ? false : { opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-60px" }}
          transition={{ duration: 0.6 }}
        >
          <div className="inline-flex items-center gap-2 bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300 px-4 py-2 rounded-full mb-4">
            <span>🏢</span>
            <span className="font-semibold">
              {isAr ? "حلول القطاعات" : "Industry Solutions"}
            </span>
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-brand-ink dark:text-white mb-4">
            {isAr ? (
              <>
                <span className="block">مصمم خصيصاً</span>
                <span className="block bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
                  لقطاعك
                </span>
              </>
            ) : (
              <>
                <span className="block">Tailored For</span>
                <span className="block bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
                  Your Industry
                </span>
              </>
            )}
          </h2>
          <p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
            {isAr
              ? "حلول متخصصة تفهم احتياجات عملك الفريدة وتحدياته"
              : "Specialized solutions that understand your unique business needs and challenges"}
          </p>
        </motion.div>

        {/* Industry Grid */}
        <motion.div
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-60px" }}
          transition={{ staggerChildren: prefersReducedMotion ? 0 : 0.08 }}
        >
          {industries.map((industry, index) => (
            <motion.div
              key={index}
              className="group relative"
              variants={prefersReducedMotion ? undefined : cardVariants}
              transition={{ duration: 0.5 }}
              onMouseEnter={() => setHoveredIndustry(index)}
              onMouseLeave={() => setHoveredIndustry(null)}
            >
              <div
                className="relative h-full p-6 bg-white dark:bg-slate-800 rounded-2xl shadow-lg transition-[box-shadow,transform] duration-500 transform hover:scale-105 hover:shadow-2xl overflow-hidden"
                style={{
                  background:
                    hoveredIndustry === index
                      ? industry.bgPattern
                      : "transparent",
                }}
              >
                {/* Gradient Border on Hover */}
                {hoveredIndustry === index && (
                  <div
                    className={`absolute inset-0 bg-gradient-to-br ${industry.gradient} opacity-5 animate-pulse`}
                  />
                )}

                {/* Icon */}
                <div
                  className={`inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br ${industry.gradient} mb-4 transform transition-transform duration-300 ${
                    hoveredIndustry === index ? "scale-110 rotate-3" : ""
                  }`}
                >
                  <span className="text-3xl text-white">{industry.icon}</span>
                </div>

                {/* Title & Description */}
                <h3 className="text-xl font-bold text-brand-ink dark:text-white mb-2">
                  {isAr ? industry.nameAr : industry.nameEn}
                </h3>
                <p className="text-slate-600 dark:text-slate-300 mb-4">
                  {isAr ? industry.descAr : industry.descEn}
                </p>

                {/* Features */}
                <ul className="space-y-2 mb-4">
                  {industry.features.map((feature, i) => (
                    <li
                      key={i}
                      className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400"
                      style={{
                        opacity: hoveredIndustry === index ? 1 : 0.8,
                        transform:
                          hoveredIndustry === index
                            ? "translateX(5px)"
                            : "translateX(0)",
                        transition: `all 0.3s ease ${i * 0.1}s`,
                      }}
                    >
                      <svg
                        className={`w-4 h-4 ${hoveredIndustry === index ? "text-green-500" : "text-slate-400"} transition-colors`}
                        fill="currentColor"
                        viewBox="0 0 20 20"
                      >
                        <path
                          fillRule="evenodd"
                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                          clipRule="evenodd"
                        />
                      </svg>
                      <span>{isAr ? feature.ar : feature.en}</span>
                    </li>
                  ))}
                </ul>

                {/* Stats Badge */}
                <div
                  className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${industry.gradient} text-white font-semibold transition-[box-shadow,transform,opacity] duration-300 ${
                    hoveredIndustry === index
                      ? "shadow-lg scale-105"
                      : "opacity-90"
                  }`}
                >
                  <span className="text-xl">{industry.stats.value}</span>
                  <span className="text-sm">
                    {isAr ? industry.stats.label.ar : industry.stats.label.en}
                  </span>
                </div>

                {/* Hover Effect Corner */}
                <div
                  className={`absolute -top-20 -right-20 w-40 h-40 bg-gradient-to-br ${industry.gradient} rounded-full opacity-10 blur-3xl transition-[transform,opacity] duration-500 ${
                    hoveredIndustry === index
                      ? "scale-150 opacity-20"
                      : "scale-100"
                  }`}
                />
              </div>
            </motion.div>
          ))}
        </motion.div>

        {/* CTA Section */}
        <div className="mt-12 text-center">
          <p className="text-lg text-slate-600 dark:text-slate-300 mb-6">
            {isAr
              ? "لا ترى قطاعك؟ نحن نخدم جميع أنواع الأعمال القائمة على المواعيد!"
              : "Don't see your industry? We serve all appointment-based businesses!"}
          </p>
          <Link
            href={`/${lang}/industries`}
            className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:shadow-xl transform transition-[box-shadow,transform] duration-200 hover:scale-105"
          >
            {isAr ? "استكشف جميع القطاعات" : "Explore All Industries"}
            <svg
              className="w-5 h-5 ml-2"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M13 7l5 5m0 0l-5 5m5-5H6"
              />
            </svg>
          </Link>
        </div>
      </div>
    </section>
  );
}