/**
 * Welcome Step - Introduction to Mawidi onboarding
 */

"use client";

import {
  Zap,
  MessageSquare,
  Calendar,
  TrendingUp,
  CheckCircle2,
} from "lucide-react";
import type { Lang } from "@/lib/config";

interface WelcomeStepProps {
  lang: Lang;
  onContinue: () => void;
}

export default function WelcomeStep({ lang, onContinue }: WelcomeStepProps) {
  const isAr = lang === "ar";

  const t = {
    title: isAr ? "مرحباً بك في ماويدي!" : "Welcome to Mawidi!",
    subtitle: isAr
      ? "نحن متحمسون لمساعدتك في أتمتة إدارة عيادتك"
      : "We're excited to help you automate your clinic management",
    trialInfo: isAr
      ? "تجربة مجانية لمدة 14 يوماً - بدون بطاقة ائتمان"
      : "14-day free trial - No credit card required",
    whatYouGet: isAr ? "ماذا ستحصل عليه" : "What You'll Get",
    features: [
      {
        icon: <MessageSquare className="w-5 h-5" />,
        title: isAr ? "وكيل واتساب ذكي" : "AI WhatsApp Agent",
        description: isAr
          ? "ردود تلقائية على استفسارات المرضى على مدار الساعة"
          : "24/7 automated responses to patient inquiries",
      },
      {
        icon: <Calendar className="w-5 h-5" />,
        title: isAr ? "حجز المواعيد الذكي" : "Smart Appointment Booking",
        description: isAr
          ? "جدولة سلسة مع تذكيرات تلقائية"
          : "Seamless scheduling with automatic reminders",
      },
      {
        icon: <Zap className="w-5 h-5" />,
        title: isAr ? "أتمتة سير العمل" : "Workflow Automation",
        description: isAr
          ? "تبسيط عمليات عيادتك باستخدام الذكاء الاصطناعي"
          : "Streamline your clinic operations with AI",
      },
      {
        icon: <TrendingUp className="w-5 h-5" />,
        title: isAr ? "تحليلات متقدمة" : "Advanced Analytics",
        description: isAr
          ? "رؤى حول أداء عيادتك"
          : "Insights into your clinic performance",
      },
    ],
    setupTime: isAr
      ? "وقت الإعداد: 5-10 دقائق فقط"
      : "Setup time: Just 5-10 minutes",
    continueBtn: isAr ? "ابدأ الإعداد" : "Start Setup",
  };

  return (
    <div className="space-y-8 animate-fadeIn">
      {/* Header */}
      <div className="text-center">
        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-green to-emerald-600 shadow-lg shadow-brand-green/25 mb-6">
          <Zap className="w-8 h-8 text-white" />
        </div>
        <h2 className="text-3xl font-bold text-slate-900 mb-3">{t.title}</h2>
        <p className="text-lg text-slate-600 mb-4">{t.subtitle}</p>
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-50 border border-emerald-200">
          <CheckCircle2 className="w-4 h-4 text-emerald-600" />
          <span className="text-sm font-medium text-emerald-700">
            {t.trialInfo}
          </span>
        </div>
      </div>

      {/* Features Grid */}
      <div className="space-y-4">
        <h3 className="text-xl font-bold text-slate-900 text-center">
          {t.whatYouGet}
        </h3>
        <div className="grid gap-4 sm:grid-cols-2">
          {t.features.map((feature, index) => (
            <div
              key={index}
              className="group p-5 rounded-2xl bg-white border border-slate-200 hover:border-brand-green hover:shadow-lg transition-all duration-300"
            >
              <div className="flex items-start gap-4">
                <div className="flex-shrink-0 w-10 h-10 rounded-xl bg-gradient-to-br from-brand-green/10 to-emerald-500/5 flex items-center justify-center group-hover:from-brand-green/20 group-hover:to-emerald-500/10 transition-colors">
                  <span className="text-brand-green">{feature.icon}</span>
                </div>
                <div className="flex-1 min-w-0">
                  <h4 className="text-base font-semibold text-slate-900 mb-1">
                    {feature.title}
                  </h4>
                  <p className="text-sm text-slate-600">
                    {feature.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Setup Time Info */}
      <div className="text-center">
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-50 border border-blue-200">
          <span className="text-sm text-blue-700">{t.setupTime}</span>
        </div>
      </div>

      {/* Continue Button */}
      <div className="flex justify-center pt-4">
        <button
          onClick={onContinue}
          className="inline-flex items-center gap-2 px-8 py-4 rounded-xl bg-gradient-to-r from-brand-green to-emerald-600 text-white font-semibold shadow-lg shadow-brand-green/25 hover:shadow-brand-green/40 hover:-translate-y-0.5 transition-all"
        >
          {t.continueBtn}
          <span className="text-xl">{isAr ? "←" : "→"}</span>
        </button>
      </div>

      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-fadeIn {
          animation: fadeIn 0.4s ease-out forwards;
        }
      `}</style>
    </div>
  );
}