'use client';

/**
 * How It Works Section — The ShineCode Experience
 *
 * Tier-one tech aesthetic (Apple / Uber Black) featuring 3D interactions,
 * physical ambient lighting orbs, and frosted glassmorphic cards with Framer Motion
 * and full dark mode support.
 */

import React from 'react';
import { motion } from 'framer-motion';
import { Smartphone, Navigation, Sparkles, ShieldCheck } from 'lucide-react';

interface HowItWorksProps {
  locale?: string;
}

interface StepItem {
  num: string;
  badgeNum: string;
  icon: React.ElementType;
  titleEn: string;
  titleAr: string;
  descEn: string;
  descAr: string;
  accent: string;
}

const STEPS: StepItem[] = [
  {
    num: '1',
    badgeNum: '01',
    icon: Smartphone,
    titleEn: '1. Tap & Request',
    titleAr: '١. اضغط واطلب',
    descEn:
      'Open the ShineCode app or web portal. Choose your treatment and instantly match with a vetted professional in your area.',
    descAr:
      'افتح تطبيق شاين كود أو الموقع. اختر الخدمة المطلوبة وطابق فوراً مع أفضل خبير معتمد في منطقتك.',
    accent: 'from-brand-500/10 to-transparent',
  },
  {
    num: '2',
    badgeNum: '02',
    icon: Navigation,
    titleEn: '2. Real-Time Tracking',
    titleAr: '٢. تتبع مباشر',
    descEn:
      'Watch your professional en route. They arrive perfectly on time with a sterilized, medical-grade kit.',
    descAr:
      'شاهد وصول أخصائي التجميل مباشرة. يصل في الوقت المحدد بأدوات معقمة طبياً ومعدات متكاملة.',
    accent: 'from-emerald-500/10 to-transparent',
  },
  {
    num: '3',
    badgeNum: '03',
    icon: Sparkles,
    titleEn: '3. Your Private Salon',
    titleAr: '٣. صالونك الخاص',
    descEn:
      'Transform your living room. Experience flawless, high-end treatments without the friction of Dubai traffic.',
    descAr:
      'حوّل غرفة معيشتك لصالون فاخر. استمتع بعناية فائقة وتجربة استرخاء بدون زحام مرور دبي.',
    accent: 'from-amber-500/10 to-transparent',
  },
];

export function HowItWorks({ locale = 'en' }: HowItWorksProps) {
  const isAr = locale === 'ar';

  return (
    <section
      id="how-it-works"
      className="py-24 relative overflow-hidden bg-white/40 dark:bg-zinc-950/60 border-b border-zinc-100 dark:border-zinc-900 transition-colors duration-200"
    >
      {/* ════════════ 1. 3D GLOWING AMBIENT BACKGROUND ORBS ════════════ */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden -z-10">
        {/* Top-Left Ambient Orb */}
        <div className="absolute -top-24 -left-24 w-96 h-96 bg-emerald-100/40 dark:bg-emerald-950/20 blur-[120px] rounded-full" />

        {/* Bottom-Right Ambient Orb */}
        <div className="absolute -bottom-28 -right-24 w-[32rem] h-[32rem] bg-brand-100/35 dark:bg-brand-950/20 blur-[140px] rounded-full" />

        {/* Center Depth Glow */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[42rem] h-[22rem] bg-amber-50/40 dark:bg-amber-950/15 blur-[130px] rounded-full" />
      </div>

      <div className="container mx-auto px-4 lg:px-8 relative z-10">
        {/* ════════════ 2. SECTION HEADER ════════════ */}
        <div className="text-center max-w-3xl mx-auto mb-6">
          <motion.div
            initial={{ opacity: 0, y: 15 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.4 }}
            className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-950 text-xs font-semibold tracking-wide mb-4 shadow-sm select-none"
          >
            <ShieldCheck className="w-3.5 h-3.5 text-brand-400 dark:text-brand-600" />
            <span>{isAr ? 'تجربة استثنائية' : 'Doorstep Luxury'}</span>
          </motion.div>

          <motion.h2
            initial={{ opacity: 0, y: 15 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="text-4xl sm:text-5xl font-extrabold tracking-tight text-zinc-900 dark:text-white"
          >
            {isAr ? 'تجربة شاين كود.' : 'The ShineCode Experience.'}
          </motion.h2>

          <motion.p
            initial={{ opacity: 0, y: 15 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="text-base sm:text-lg text-zinc-500 dark:text-zinc-400 font-normal mt-4 max-w-2xl mx-auto leading-relaxed"
          >
            {isAr
              ? 'احجز عبر التطبيق أو الموقع الإلكتروني. رفاهية وجمال فاخر يصلك حتى باب منزلك.'
              : 'Book via the app or web. Premium wellness delivered to your door.'}
          </motion.p>
        </div>

        {/* ════════════ 3. THE 3D GLASSMORHPIC GRID ════════════ */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto mt-16 px-4 relative z-10">
          {STEPS.map((step, index) => {
            const Icon = step.icon;

            return (
              <motion.div
                key={step.num}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{
                  duration: 0.5,
                  delay: index * 0.15,
                  ease: 'easeOut',
                }}
                whileHover={{
                  y: -10,
                  scale: 1.02,
                  transition: { type: 'spring', stiffness: 320, damping: 22 },
                }}
                className="group relative bg-white/60 dark:bg-zinc-900/60 backdrop-blur-xl border border-white/50 dark:border-zinc-800/60 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.08)] hover:border-zinc-200/80 dark:hover:border-zinc-700/80 rounded-3xl p-8 text-start select-none transition-colors duration-300 overflow-hidden flex flex-col justify-between"
              >
                {/* Subtle top edge glass specular highlight */}
                <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/50 dark:via-zinc-700/50 to-transparent pointer-events-none" />

                {/* Ambient Card Corner Tint */}
                <div
                  className={`absolute -top-16 -right-16 w-40 h-40 bg-gradient-to-br ${step.accent} rounded-full blur-2xl pointer-events-none group-hover:scale-125 transition-transform duration-500`}
                />

                {/* ── Visual: Styled Large Numeric Floating in Top-Right ── */}
                <span className="absolute -top-4 -right-4 text-9xl text-zinc-900/5 dark:text-white/5 font-black select-none pointer-events-none group-hover:text-zinc-900/10 dark:group-hover:text-white/10 transition-colors duration-500 font-sans leading-none rtl:-left-4 rtl:right-auto">
                  {step.num}
                </span>

                <div className="relative z-10">
                  {/* Glowing Icon Pill */}
                  <div className="w-13 h-13 rounded-2xl bg-white/90 dark:bg-zinc-800 border border-white dark:border-zinc-700 shadow-sm flex items-center justify-center text-zinc-900 dark:text-white mb-7 group-hover:scale-110 group-hover:bg-zinc-900 dark:group-hover:bg-white group-hover:text-white dark:group-hover:text-zinc-950 transition-all duration-300">
                    <Icon className="w-6 h-6 stroke-[1.8]" />
                  </div>

                  {/* Title */}
                  <h3 className="text-xl font-bold text-zinc-900 dark:text-white mb-3 tracking-tight group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">
                    {isAr ? step.titleAr : step.titleEn}
                  </h3>

                  {/* Description */}
                  <p className="text-sm sm:text-base text-zinc-600 dark:text-zinc-300 leading-relaxed font-normal">
                    {isAr ? step.descAr : step.descEn}
                  </p>
                </div>

                {/* Bottom subtle progress indicator line */}
                <div className="relative z-10 mt-8 pt-4 border-t border-zinc-100/80 dark:border-zinc-800 flex items-center justify-between">
                  <span className="text-[11px] font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500">
                    {isAr ? `المرحلة ${step.badgeNum}` : `Step ${step.badgeNum}`}
                  </span>
                  <span className="w-1.5 h-1.5 rounded-full bg-zinc-300 dark:bg-zinc-600 group-hover:bg-brand-500 group-hover:scale-150 transition-all duration-300" />
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

export default HowItWorks;