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

export default function HeroEnhanced({ lang }: { lang: Lang }) {
  const isAr = lang === "ar";
  const [currentWord, setCurrentWord] = useState(0);
  const [isVisible, setIsVisible] = useState(false);

  const rotatingWords = isAr
    ? [
        { text: "المطاعم والمقاهي", color: "text-orange-500" },
        { text: "العيادات الطبية", color: "text-blue-500" },
        { text: "الفنادق والمنتجعات", color: "text-indigo-500" },
        { text: "مراكز التجميل", color: "text-pink-500" },
        { text: "صالونات الشعر", color: "text-purple-500" },
        { text: "المراكز الرياضية", color: "text-green-500" },
        { text: "عيادات الأسنان", color: "text-cyan-500" },
        { text: "مراكز السبا", color: "text-rose-500" },
        { text: "الخدمات المنزلية", color: "text-yellow-500" },
        { text: "مراكز الصيانة", color: "text-gray-500" },
      ]
    : [
        { text: "Restaurants & Cafes", color: "text-orange-500" },
        { text: "Medical Clinics", color: "text-blue-500" },
        { text: "Hotels & Resorts", color: "text-indigo-500" },
        { text: "Beauty Centers", color: "text-pink-500" },
        { text: "Hair Salons", color: "text-purple-500" },
        { text: "Fitness Centers", color: "text-green-500" },
        { text: "Dental Practices", color: "text-cyan-500" },
        { text: "Spa & Wellness", color: "text-rose-500" },
        { text: "Home Services", color: "text-yellow-500" },
        { text: "Service Centers", color: "text-gray-500" },
      ];

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

  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-brand-green/5 via-white to-brand-sand/10 dark:from-brand-green/10 dark:via-slate-900 dark:to-brand-sand/5">
      {/* Animated Background Shapes */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-brand-green/10 blur-3xl animate-pulse" />
        <div className="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-brand-sand/20 blur-3xl animate-pulse delay-1000" />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-96 w-96 rounded-full bg-brand-green/5 blur-3xl animate-pulse delay-2000" />
      </div>

      <div className="relative mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">
        <div className="grid gap-12 lg:grid-cols-2 lg:gap-8 items-center">
          {/* Text Content */}
          <div
            className={`space-y-8 ${isVisible ? "animate-slideInLeft" : "opacity-0"}`}
          >
            <div className="space-y-4">
              <h1 className="text-4xl font-bold tracking-tight text-brand-ink dark:text-white sm:text-5xl xl:text-6xl">
                {isAr ? (
                  <>
                    <span className="block">نظام الحجز الذكي الشامل</span>
                    <span className="block">
                      لـ
                      <span
                        className={`inline-block min-w-[280px] text-center transition-all duration-500 font-bold ${rotatingWords[currentWord]?.color || "text-blue-500"}`}
                      >
                        {rotatingWords[currentWord]?.text || ""}
                      </span>
                    </span>
                  </>
                ) : (
                  <>
                    <span className="block">All-in-One Smart Booking</span>
                    <span className="block">
                      for{" "}
                      <span
                        className={`inline-block min-w-[280px] text-center transition-all duration-500 font-bold ${rotatingWords[currentWord]?.color || "text-blue-500"}`}
                      >
                        {rotatingWords[currentWord]?.text || ""}
                      </span>
                    </span>
                  </>
                )}
              </h1>
              <p className="text-xl text-slate-600 dark:text-slate-300">
                {isAr
                  ? "حلول حجز متكاملة لجميع الأعمال الخدمية - من المطاعم إلى العيادات، ومن الفنادق إلى مراكز الخدمات"
                  : "Complete booking solutions for all service businesses - from restaurants to clinics, hotels to service centers"}
              </p>
            </div>

            {/* Stats Pills */}
            <div className="flex flex-wrap gap-4">
              {[
                {
                  value: "500+",
                  label: isAr ? "عيادة نشطة" : "Active Clinics",
                },
                { value: "2M+", label: isAr ? "حجز معالج" : "Bookings" },
                { value: "<10s", label: isAr ? "وقت الرد" : "Response Time" },
              ].map((stat, i) => (
                <div
                  key={i}
                  className="flex items-center gap-2 rounded-full bg-white/80 dark:bg-slate-800/80 backdrop-blur px-4 py-2 shadow-lg animate-fadeIn"
                  style={{ animationDelay: `${i * 200}ms` }}
                >
                  <span className="text-2xl font-bold text-brand-green">
                    {stat.value}
                  </span>
                  <span className="text-sm text-slate-600 dark:text-slate-300">
                    {stat.label}
                  </span>
                </div>
              ))}
            </div>

            {/* CTA Buttons */}
            <div className="flex flex-wrap gap-4">
              <Link
                href={`/${lang}/demo`}
                className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white transition-all duration-200 bg-brand-green rounded-lg hover:bg-brand-greenHover transform hover:scale-105 hover:shadow-xl"
              >
                <span className="relative z-10">
                  {isAr ? "احجز عرض تجريبي" : "Book a Demo"}
                </span>
                <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-brand-green to-green-600 opacity-0 group-hover:opacity-100 transition-opacity" />
              </Link>
              <Link
                href={`/${lang}/services/booking-automation`}
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-brand-green bg-white dark:bg-slate-800 border-2 border-brand-green rounded-lg hover:bg-brand-green hover:text-white transition-all duration-200 transform hover:scale-105"
              >
                {isAr ? "شاهد كيف يعمل" : "See How It Works"}
                <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="M9 5l7 7-7 7"
                  />
                </svg>
              </Link>
            </div>

            {/* Trust Badges */}
            <div className="flex items-center gap-6 pt-4">
              <div className="flex items-center gap-2">
                <svg
                  className="w-5 h-5 text-green-500"
                  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 className="text-sm text-slate-600 dark:text-slate-300">
                  {isAr ? "واتساب معتمد" : "WhatsApp Verified"}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <svg
                  className="w-5 h-5 text-blue-500"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 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 className="text-sm text-slate-600 dark:text-slate-300">
                  {isAr ? "آمن ومشفر" : "Secure & Encrypted"}
                </span>
              </div>
            </div>
          </div>

          {/* Interactive Visual */}
          <div
            className={`relative ${isVisible ? "animate-slideInRight" : "opacity-0"}`}
          >
            <div className="relative mx-auto max-w-md">
              {/* Phone Mockup */}
              <div className="relative mx-auto w-full max-w-sm">
                <div className="relative z-10 rounded-[2.5rem] border-8 border-slate-800 bg-slate-800 shadow-2xl">
                  <div className="rounded-[2rem] bg-white dark:bg-slate-900 p-4">
                    <div className="mb-4 flex items-center justify-between border-b pb-3 dark:border-slate-700">
                      <div className="flex items-center gap-3">
                        <div className="h-10 w-10 rounded-full bg-brand-green flex items-center justify-center text-white font-bold">
                          M
                        </div>
                        <div>
                          <p className="font-semibold text-sm dark:text-white">
                            Mawidi Clinic
                          </p>
                          <p className="text-xs text-green-500">● Online</p>
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <div className="h-8 w-8 rounded-full bg-slate-100 dark:bg-slate-700" />
                        <div className="h-8 w-8 rounded-full bg-slate-100 dark:bg-slate-700" />
                      </div>
                    </div>

                    {/* Animated Messages */}
                    <div className="space-y-3 h-96 overflow-hidden">
                      <MessageBubble
                        message={
                          isAr
                            ? "مرحباً، أريد حجز موعد"
                            : "Hi, I want to book an appointment"
                        }
                        isUser={true}
                        delay={500}
                      />
                      <MessageBubble
                        message={
                          isAr
                            ? "أهلاً بك! 👋 يسعدني مساعدتك في الحجز. ما هي الخدمة المطلوبة؟"
                            : "Welcome! 👋 I'd be happy to help you book. What service do you need?"
                        }
                        isUser={false}
                        delay={1500}
                      />
                      <MessageBubble
                        message={isAr ? "تنظيف أسنان" : "Teeth cleaning"}
                        isUser={true}
                        delay={2500}
                      />
                      <MessageBubble
                        message={
                          isAr
                            ? "ممتاز! لدينا مواعيد متاحة غداً في الساعة 10:00 أو 14:00. أيهما يناسبك؟"
                            : "Perfect! We have slots tomorrow at 10:00 AM or 2:00 PM. Which works for you?"
                        }
                        isUser={false}
                        delay={3500}
                      />
                      <MessageBubble
                        message={
                          isAr ? "الساعة 10:00 مناسبة" : "10:00 AM works"
                        }
                        isUser={true}
                        delay={4500}
                      />
                      <MessageBubble
                        message={
                          isAr
                            ? "رائع! سأرسل لك رابط دفع العربون (50 ريال) لتأكيد الحجز 💳"
                            : "Great! I'll send you a deposit link (50 SAR) to confirm your booking 💳"
                        }
                        isUser={false}
                        delay={5500}
                      />
                    </div>
                  </div>
                </div>
                {/* Phone Notch */}
                <div className="absolute top-0 left-1/2 -translate-x-1/2 h-6 w-40 rounded-b-2xl bg-slate-800" />
              </div>

              {/* Floating Elements */}
              <div className="absolute -top-10 -right-10 animate-float">
                <div className="rounded-xl bg-white dark:bg-slate-800 shadow-xl p-3">
                  <span className="text-2xl">💬</span>
                </div>
              </div>
              <div className="absolute -bottom-10 -left-10 animate-float animation-delay-2000">
                <div className="rounded-xl bg-white dark:bg-slate-800 shadow-xl p-3">
                  <span className="text-2xl">✅</span>
                </div>
              </div>
              <div className="absolute top-1/2 -right-16 animate-float animation-delay-1000">
                <div className="rounded-xl bg-white dark:bg-slate-800 shadow-xl p-3">
                  <span className="text-2xl">📅</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MessageBubble({
  message,
  isUser,
  delay,
}: {
  message: string;
  isUser: boolean;
  delay: number;
}) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setIsVisible(true), delay);
    return () => clearTimeout(timer);
  }, [delay]);

  if (!isVisible) return null;

  return (
    <div
      className={`flex ${isUser ? "justify-end" : "justify-start"} animate-slideIn`}
    >
      <div
        className={`max-w-[80%] rounded-2xl px-4 py-2 ${
          isUser
            ? "bg-brand-green text-white rounded-br-none"
            : "bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 rounded-bl-none"
        }`}
      >
        <p className="text-sm">{message}</p>
      </div>
    </div>
  );
}