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

export default function WhatsAppPower({ lang }: { lang: Lang }) {
  const isAr = lang === "ar";
  const [activeFeature, setActiveFeature] = useState(0);
  const [isVisible, setIsVisible] = useState(false);
  const prefersReducedMotion = useReducedMotion();

  const features = [
    {
      icon: "💬",
      titleEn: "Everyone Uses WhatsApp Daily",
      titleAr: "الجميع يستخدم واتساب يومياً",
      descEn: "98% of your customers already have WhatsApp open right now",
      descAr: "98% من عملائك لديهم واتساب مفتوح الآن",
      statsEn: "2B+ users worldwide",
      statsAr: "2+ مليار مستخدم عالمياً",
    },
    {
      icon: "🤖",
      titleEn: "AI That Never Sleeps",
      titleAr: "ذكاء اصطناعي لا ينام أبداً",
      descEn: "Instant responses to FAQs, bookings, and inquiries 24/7",
      descAr: "ردود فورية على الأسئلة والحجوزات والاستفسارات 24/7",
      statsEn: "<10 sec response time",
      statsAr: "<10 ثانية وقت الرد",
    },
    {
      icon: "📞",
      titleEn: "AI Voice Agents That Speak",
      titleAr: "وكلاء صوتيون بالذكاء الاصطناعي",
      descEn:
        "Make follow-up calls, confirm appointments, handle queries in perfect Arabic/English",
      descAr:
        "مكالمات متابعة، تأكيد مواعيد، معالجة استفسارات بالعربية والإنجليزية",
      statsEn: "40% fewer no-shows",
      statsAr: "40% أقل عدم حضور",
    },
    {
      icon: "📅",
      titleEn: "Smart Calendar Management",
      titleAr: "إدارة ذكية للتقويم",
      descEn:
        "Automatically sync bookings, prevent double-booking, optimize your schedule",
      descAr: "مزامنة تلقائية للحجوزات، منع الحجز المزدوج، تحسين جدولك",
      statsEn: "3x more bookings",
      statsAr: "3x حجوزات أكثر",
    },
  ];

  useEffect(() => {
    setIsVisible(true);
    const interval = setInterval(() => {
      setActiveFeature((prev) => (prev + 1) % features.length);
    }, 3000);
    return () => clearInterval(interval);
  }, [features.length]);

  return (
    <section className="py-20 px-4 bg-gradient-to-b from-slate-50 to-white dark:from-slate-800 dark:to-slate-900 overflow-hidden">
      <div className="max-w-7xl mx-auto">
        {/* Main 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-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 px-4 py-2 rounded-full mb-4">
            <span className="text-xl">💬</span>
            <span className="font-semibold">
              {isAr ? "قوة واتساب" : "The WhatsApp Advantage"}
            </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 text-green-500">الجميع كل يوم</span>
              </>
            ) : (
              <>
                <span className="block">The One App</span>
                <span className="block text-green-500">
                  Everyone Uses Daily
                </span>
              </>
            )}
          </h2>
          <p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
            {isAr
              ? "لماذا تجبر عملائك على تحميل تطبيق جديد؟ استخدم التطبيق الذي يحبونه بالفعل"
              : "Why force customers to download another app? Use the one they already love"}
          </p>
        </motion.div>

        {/* Interactive Feature Grid */}
        <div className="grid lg:grid-cols-2 gap-8 items-center">
          {/* Left: Feature Cards */}
          <div className="space-y-4">
            {features.map((feature, index) => (
              <div
                key={index}
                className={`relative p-6 rounded-xl transition-[background-color,color,box-shadow,transform] duration-500 cursor-pointer ${
                  activeFeature === index
                    ? "bg-gradient-to-r from-green-500 to-emerald-500 text-white shadow-2xl scale-105"
                    : "bg-white dark:bg-slate-800 hover:shadow-lg"
                }`}
                onClick={() => setActiveFeature(index)}
                style={{
                  animationDelay: `${index * 100}ms`,
                }}
              >
                <div className="flex items-start gap-4">
                  <div
                    className={`text-4xl ${activeFeature === index ? "animate-pulse" : ""}`}
                  >
                    {feature.icon}
                  </div>
                  <div className="flex-1">
                    <h3
                      className={`text-lg font-bold mb-1 ${
                        activeFeature === index
                          ? "text-white"
                          : "text-brand-ink dark:text-white"
                      }`}
                    >
                      {isAr ? feature.titleAr : feature.titleEn}
                    </h3>
                    <p
                      className={`text-sm mb-2 ${
                        activeFeature === index
                          ? "text-white/90"
                          : "text-slate-600 dark:text-slate-300"
                      }`}
                    >
                      {isAr ? feature.descAr : feature.descEn}
                    </p>
                    <div
                      className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold ${
                        activeFeature === index
                          ? "bg-white/20 text-white"
                          : "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300"
                      }`}
                    >
                      <span>📊</span>
                      <span>{isAr ? feature.statsAr : feature.statsEn}</span>
                    </div>
                  </div>
                </div>
                {activeFeature === index && (
                  <div className="absolute -inset-0.5 bg-gradient-to-r from-green-400 to-emerald-400 rounded-xl blur opacity-30 animate-pulse" />
                )}
              </div>
            ))}
          </div>

          {/* Right: Animated Visual */}
          <div className="relative">
            <div className="relative mx-auto max-w-md">
              {/* Central WhatsApp Icon */}
              <div className="relative z-10 mx-auto w-32 h-32 bg-gradient-to-br from-green-400 to-green-600 rounded-3xl flex items-center justify-center shadow-2xl animate-float">
                <span className="text-6xl text-white">💬</span>
              </div>

              {/* Orbiting Features */}
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="relative w-80 h-80">
                  {/* FAQ Bot */}
                  <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-4 animate-float">
                    <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-3">
                      <span className="text-2xl">🤖</span>
                      <p className="text-xs font-semibold text-slate-700 dark:text-slate-300">
                        {isAr ? "رد على الأسئلة" : "FAQ Bot"}
                      </p>
                    </div>
                  </div>

                  {/* Voice Agent */}
                  <div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 animate-float animation-delay-1000">
                    <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-3">
                      <span className="text-2xl">📞</span>
                      <p className="text-xs font-semibold text-slate-700 dark:text-slate-300">
                        {isAr ? "مكالمات آلية" : "Voice Agent"}
                      </p>
                    </div>
                  </div>

                  {/* Calendar Sync */}
                  <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-4 animate-float animation-delay-2000">
                    <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-3">
                      <span className="text-2xl">📅</span>
                      <p className="text-xs font-semibold text-slate-700 dark:text-slate-300">
                        {isAr ? "مزامنة التقويم" : "Calendar Sync"}
                      </p>
                    </div>
                  </div>

                  {/* Booking Manager */}
                  <div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 animate-float delay-1000">
                    <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-3">
                      <span className="text-2xl">✅</span>
                      <p className="text-xs font-semibold text-slate-700 dark:text-slate-300">
                        {isAr ? "إدارة الحجوزات" : "Bookings"}
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Animated Connection Lines */}
              <svg
                className="absolute inset-0 w-full h-full pointer-events-none"
                style={{ zIndex: 0 }}
              >
                <circle
                  cx="50%"
                  cy="50%"
                  r="120"
                  fill="none"
                  stroke="url(#gradient)"
                  strokeWidth="2"
                  strokeDasharray="10,5"
                  opacity="0.3"
                  className="animate-spin"
                  style={{ animationDuration: "20s" }}
                />
                <defs>
                  <linearGradient
                    id="gradient"
                    x1="0%"
                    y1="0%"
                    x2="100%"
                    y2="100%"
                  >
                    <stop offset="0%" stopColor="#10b981" />
                    <stop offset="100%" stopColor="#059669" />
                  </linearGradient>
                </defs>
              </svg>
            </div>

            {/* Bottom Stats */}
            <div className="grid grid-cols-3 gap-4 mt-12">
              {[
                { value: "2B+", label: isAr ? "مستخدم نشط" : "Active Users" },
                {
                  value: "100B",
                  label: isAr ? "رسالة يومياً" : "Daily Messages",
                },
                { value: "180+", label: isAr ? "دولة" : "Countries" },
              ].map((stat, i) => (
                <div
                  key={i}
                  className="text-center p-4 bg-white dark:bg-slate-800 rounded-xl shadow-sm animate-slideIn"
                  style={{ animationDelay: `${i * 200 + 500}ms` }}
                >
                  <div className="text-2xl font-bold text-green-500">
                    {stat.value}
                  </div>
                  <div className="text-xs text-slate-600 dark:text-slate-400">
                    {stat.label}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
