"use client";

import { motion } from "framer-motion";
import { Link2, Sliders, BarChart3 } from "lucide-react";
import type { Locale } from "@/lib/i18n";
import { getDictionary } from "@/lib/dictionary";

interface HowItWorksProps {
  locale: Locale;
}

const icons = [Link2, Sliders, BarChart3];

export function HowItWorks({ locale }: HowItWorksProps) {
  const isRTL = locale === "ar";
  const dict = getDictionary(locale);
  const t = dict.landing.howItWorks;

  return (
    <section id="how-it-works" className="relative py-24 md:py-32 overflow-hidden" dir={isRTL ? "rtl" : "ltr"}>
      <div className="absolute inset-0 bg-void-black" />
      <div className="absolute inset-0 dot-grid-cyan opacity-30" />

      {/* Section glow */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-electric-cyan/[0.02] rounded-full blur-3xl" />

      <div className="container-custom relative z-10">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          className="text-center mb-16 md:mb-20"
        >
          <h2 className="font-space-grotesk font-bold text-3xl md:text-5xl lg:text-6xl tracking-tight mb-4">
            <span className="text-warm-white">{t.title} </span>
            <span className="text-gradient-cyan">{t.titleHighlight}</span>
          </h2>
          <p className="text-base md:text-lg text-muted-white max-w-xl mx-auto leading-relaxed">
            {t.subtitle}
          </p>
        </motion.div>

        {/* Steps */}
        <div className="grid md:grid-cols-3 gap-8 md:gap-12 relative">
          {/* Connecting line (desktop) */}
          <div className="hidden md:block absolute top-16 left-[16.66%] right-[16.66%] h-px bg-gradient-to-r from-electric-cyan/0 via-electric-cyan/20 to-soft-emerald/0" />
          <div className="hidden md:block absolute top-16 left-[16.66%] right-[16.66%] h-px bg-gradient-to-r from-electric-cyan/0 via-electric-cyan/20 to-soft-emerald/0 transform translate-y-0.5 blur-sm" />

          {t.steps.map((step, i) => {
            const Icon = icons[i] || BarChart3;
            return (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-50px" }}
                transition={{ delay: i * 0.2, duration: 0.6 }}
                className="relative text-center md:text-left"
              >
                {/* Step number */}
                <div className="flex items-center justify-center md:justify-start mb-6">
                  <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-electric-cyan/10 to-soft-emerald/10 border border-electric-cyan/10 flex items-center justify-center">
                    <Icon size={24} className="text-electric-cyan" />
                  </div>
                </div>

                <h3 className="font-space-grotesk font-bold text-xl text-warm-white mb-3">{step.title}</h3>
                <p className="text-sm text-muted-white leading-relaxed">{step.description}</p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}