"use client";

import { motion } from "framer-motion";
import { Quote } from "lucide-react";
import type { Locale } from "@/lib/i18n";
import { getDictionary } from "@/lib/dictionary";

interface ResultsProps {
  locale: Locale;
}

export function Results({ locale }: ResultsProps) {
  const isRTL = locale === "ar";
  const dict = getDictionary(locale);
  const t = dict.landing.results;

  return (
    <section className="relative py-24 md:py-32 overflow-hidden" dir={isRTL ? "rtl" : "ltr"}>
      <div className="absolute inset-0 bg-gradient-to-b from-graphite via-void-black to-graphite" />
      <div className="absolute inset-0 dot-grid opacity-30" />

      <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"
        >
          <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>

        {/* Stats bar */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-20"
        >
          {t.stats.map((stat, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="text-center p-6 rounded-2xl border border-white/[0.04] bg-white/[0.02]"
            >
              <div className="font-space-grotesk font-bold text-3xl md:text-4xl text-gradient-cyan mb-1">{stat.value}</div>
              <div className="text-sm text-muted-white">{stat.label}</div>
            </motion.div>
          ))}
        </motion.div>

        {/* Testimonials */}
        <div className="grid md:grid-cols-3 gap-5">
          {t.testimonials.map((item, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.15, duration: 0.5 }}
              className="group relative p-6 md:p-8 rounded-2xl border border-white/[0.04] bg-white/[0.02] hover:bg-white/[0.04] hover:border-electric-cyan/10 transition-all duration-500"
            >
              {/* Stat badge */}
              <div className="inline-block px-3 py-1 rounded-full bg-electric-cyan/10 border border-electric-cyan/10 text-electric-cyan text-xs font-jetbrains-mono mb-4">
                {item.stat}
              </div>

              {/* Quote */}
              <div className="relative mb-6">
                <Quote size={20} className="text-electric-cyan/20 absolute -top-1 -left-1" />
                <p className="text-sm text-muted-white leading-relaxed pl-5">
                  {item.quote}
                </p>
              </div>

              {/* Author */}
              <div className="border-t border-white/[0.04] pt-4">
                <div className="font-space-grotesk font-semibold text-sm text-warm-white">{item.author}</div>
                <div className="text-xs text-muted-white mt-0.5">{item.role}</div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}