"use client";

import { motion } from "framer-motion";
import {
  Code2,
  Server,
  Cloud,
  Smartphone,
} from "lucide-react";
import GlassCard from "@/components/ui/GlassCard";
import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
import type { Dictionary, Locale } from "@/lib/dictionaries";

const icons = [Code2, Server, Cloud, Smartphone];

interface ServicesProps {
  locale: Locale;
  dict: Dictionary;
}

export default function Services({ dict }: ServicesProps) {
  return (
    <section id="features" className="relative w-full py-24 sm:py-32">
      <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
        {/* Header */}
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={viewportConfig}
          variants={stagger(0.06)}
          className="mx-auto mb-16 max-w-3xl text-center"
        >
          <motion.span
            variants={fadeUp}
            className="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md"
          >
            {dict.services.badge}
          </motion.span>

          <motion.h2
            variants={fadeUp}
            className="font-display text-display-lg font-medium tracking-tight"
          >
            <span className="text-gradient-fade">
              {dict.services.title}
            </span>
            <br />
            <span className="text-gradient-purple">
              {dict.services.titleAccent}
            </span>
          </motion.h2>

          <motion.p
            variants={fadeUp}
            className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-text-secondary sm:text-lg"
          >
            {dict.services.subtitle}
          </motion.p>
        </motion.div>

        {/* Grid */}
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={viewportConfig}
          variants={stagger(0.08)}
          className="grid grid-cols-1 gap-4 sm:grid-cols-2"
        >
          {dict.services.items.map((service, i) => {
            const Icon = icons[i];
            return (
              <motion.div key={i} variants={fadeUp} className="group h-full">
                <GlassCard className="h-full overflow-hidden">
                  {/* Hover glow */}
                  <div className="absolute -right-12 -top-12 h-32 w-32 rounded-full bg-purple-500/0 blur-3xl transition-all duration-700 group-hover:bg-purple-500/25" />

                  <div className="relative">
                    <div className="mb-5 inline-flex h-12 w-12 items-center justify-center rounded-xl border border-purple-400/20 bg-purple-500/10 text-purple-300 transition-all duration-500 group-hover:border-purple-400/50 group-hover:bg-purple-500/20 group-hover:text-purple-200 group-hover:shadow-glow-sm">
                      <Icon className="h-5 w-5" strokeWidth={1.5} />
                    </div>

                    <h3 className="mb-2 text-lg font-medium text-text-primary">
                      {service.title}
                    </h3>

                    <p className="text-sm leading-relaxed text-text-secondary">
                      {service.description}
                    </p>
                  </div>
                </GlassCard>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
}