"use client";

import { motion } from "framer-motion";
import {
  Code2,
  Server,
  Smartphone,
  Wrench,
  MessageSquare,
  FileSearch,
  Rocket,
  HeartHandshake,
  ArrowRight,
  Check,
  Clock,
  Users,
  Target,
} from "lucide-react";
import GlassCard from "@/components/ui/GlassCard";
import GlowButton from "@/components/ui/GlowButton";
import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
import type { Dictionary, Locale } from "@/lib/dictionaries";

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

export default function ServicesContent({
  locale,
  dict,
}: ServicesContentProps) {
  const t = dict.servicesPage;

  return (
    <>
      {/* ──── HERO ──── */}
      <section className="relative isolate flex min-h-[75svh] items-center overflow-hidden pt-32">
        <div className="pointer-events-none absolute inset-0 grid-bg [mask-image:radial-gradient(ellipse_at_center,#000_30%,transparent_70%)] opacity-30" />

        {/* Floating orbs */}
        <motion.div
          className="pointer-events-none absolute left-[15%] top-[20%] h-[500px] w-[500px] rounded-full"
          style={{
            background: "radial-gradient(circle, rgba(139,92,246,0.4) 0%, transparent 70%)",
            filter: "blur(60px)",
          }}
          animate={{ x: [0, 30, -20, 0], y: [0, -25, 15, 0] }}
          transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
        />
        <motion.div
          className="pointer-events-none absolute right-[10%] top-[40%] h-[400px] w-[400px] rounded-full"
          style={{
            background: "radial-gradient(circle, rgba(167,139,250,0.25) 0%, transparent 70%)",
            filter: "blur(70px)",
          }}
          animate={{ x: [0, -40, 25, 0], y: [0, 30, -20, 0] }}
          transition={{ duration: 24, repeat: Infinity, ease: "easeInOut" }}
        />

        <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
          <motion.div
            initial="hidden"
            animate="visible"
            variants={stagger(0.1)}
            className="mx-auto 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"
            >
              {t.badge}
            </motion.span>

            <motion.h1
              variants={fadeUp}
              className="font-display text-display-xl font-medium tracking-tight"
            >
              <span className="text-gradient-fade">{t.heroTitle}</span>
              <br />
              <span className="text-gradient-purple">{t.heroTitleAccent}</span>
            </motion.h1>

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

            <motion.div variants={fadeUp} className="mt-10 flex flex-wrap items-center justify-center gap-4">
              <GlowButton
                href={`/${locale}/contact`}
                variant="primary"
                size="lg"
                icon={<ArrowRight className="h-4 w-4" />}
              >
                {t.heroCta}
              </GlowButton>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* ──── SERVICE OFFERINGS ──── */}
      <section className="relative w-full py-24 sm:py-32">
        <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
          <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"
            >
              {t.offeringsLabel}
            </motion.span>
            <motion.h2
              variants={fadeUp}
              className="font-display text-display-lg font-medium tracking-tight"
            >
              <span className="text-gradient-fade">{t.offeringsTitle}</span>
            </motion.h2>
            <motion.p
              variants={fadeUp}
              className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-text-secondary"
            >
              {t.offeringsSubtitle}
            </motion.p>
          </motion.div>

          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={viewportConfig}
            variants={stagger(0.1)}
            className="grid grid-cols-1 gap-5 md:grid-cols-2"
          >
            {t.offerings.map((offering, i) => {
              const icons = [Code2, Server, Smartphone, Wrench];
              const Icon = icons[i] || Code2;

              return (
                <motion.div key={i} variants={fadeUp} className="group">
                  <GlassCard className="h-full">
                    <div className="absolute -right-16 -top-16 h-40 w-40 rounded-full bg-purple-500/0 blur-3xl transition-all duration-700 group-hover:bg-purple-500/20" />

                    <div className="relative">
                      <div className="mb-5 flex items-center gap-4">
                        <div className="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:shadow-glow-sm">
                          <Icon className="h-5 w-5" strokeWidth={1.5} />
                        </div>
                        <h3 className="text-xl font-medium text-text-primary">
                          {offering.title}
                        </h3>
                      </div>

                      <p className="mb-6 text-sm leading-relaxed text-text-secondary">
                        {offering.description}
                      </p>

                      <div className="space-y-2.5">
                        {offering.includes.map((item, j) => (
                          <div
                            key={j}
                            className="flex items-start gap-2.5 text-sm"
                          >
                            <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-purple-500/15 text-purple-300">
                              <Check className="h-3 w-3" strokeWidth={2.5} />
                            </span>
                            <span className="text-text-secondary">{item}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </GlassCard>
                </motion.div>
              );
            })}
          </motion.div>
        </div>
      </section>


      {/*
      <section className="relative w-full py-24 sm:py-32">
        <div className="pointer-events-none absolute inset-0 grid-bg [mask-image:radial-gradient(ellipse_at_center,#000_20%,transparent_65%)] opacity-20" />

        <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={viewportConfig}
            variants={stagger(0.1)}
            className="grid grid-cols-1 gap-8 lg:grid-cols-5"
          >
            <motion.div variants={fadeUp} className="lg:col-span-3">
              <span className="mb-4 inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-emerald-300 backdrop-blur-md">
                <span className="relative flex h-2 w-2">
                  <span className="absolute inset-0 animate-ping rounded-full bg-emerald-400 opacity-75" />
                  <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.6)]" />
                </span>
                {t.infraBadge}
              </span>

              <h2 className="mt-4 font-display text-3xl font-medium tracking-tight text-gradient-fade sm:text-4xl">
                {t.infraTitle}
              </h2>

              <div className="mt-6 space-y-4 text-base leading-relaxed text-text-secondary">
                {t.infraParagraphs.map((p, i) => (
                  <p key={i}>{p}</p>
                ))}
              </div>
            </motion.div>

            <motion.div variants={fadeUp} className="space-y-3 lg:col-span-2">
              {t.infraPoints.map((point, i) => {
                const pointIcons = [Shield, Truck, Clock];
                const PIcon = pointIcons[i] || Shield;
                return (
                  <GlassCard key={i} className="flex items-start gap-4 py-5">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-emerald-400/20 bg-emerald-500/10 text-emerald-300">
                      <PIcon className="h-4 w-4" strokeWidth={1.5} />
                    </div>
                    <div>
                      <div className="text-sm font-medium text-text-primary">
                        {point.title}
                      </div>
                      <div className="mt-1 text-xs leading-relaxed text-text-secondary">
                        {point.description}
                      </div>
                    </div>
                  </GlassCard>
                );
              })}
            </motion.div>
          </motion.div>
        </div>
      </section>

        */}

      <section className="relative w-full py-24 sm:py-32">
        <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
          <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"
            >
              {t.processLabel}
            </motion.span>
            <motion.h2
              variants={fadeUp}
              className="font-display text-display-lg font-medium tracking-tight"
            >
              <span className="text-gradient-fade">{t.processTitle}</span>
            </motion.h2>
            <motion.p
              variants={fadeUp}
              className="mx-auto mt-6 max-w-xl text-base leading-relaxed text-text-secondary"
            >
              {t.processSubtitle}
            </motion.p>
          </motion.div>

          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={viewportConfig}
            variants={stagger(0.12)}
            className="relative grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5"
          >
            {/* Connecting line — desktop only */}
            <div className="pointer-events-none absolute top-12 hidden h-px bg-gradient-to-r from-transparent via-purple-400/30 to-transparent lg:inset-x-16 lg:block" />

            {t.processSteps.map((step, i) => {
              const stepIcons = [MessageSquare, FileSearch, Code2, Rocket, HeartHandshake];
              const SIcon = stepIcons[i] || Code2;

              return (
                <motion.div
                  key={i}
                  variants={fadeUp}
                  className="group relative text-center"
                >
                  {/* Step number */}
                  <div className="relative mx-auto mb-4 flex h-12 w-12 items-center justify-center">
                    <div className="absolute inset-0 rounded-full border border-purple-400/30 bg-purple-500/10 transition-all duration-500 group-hover:border-purple-400/60 group-hover:bg-purple-500/20 group-hover:shadow-glow-sm" />
                    <SIcon className="relative h-5 w-5 text-purple-300" strokeWidth={1.5} />
                  </div>

                  <div className="mb-1 font-mono text-[10px] uppercase tracking-widest text-purple-400/60">
                    {String(i + 1).padStart(2, "0")}
                  </div>
                  <h3 className="mb-2 text-base font-medium text-text-primary">
                    {step.title}
                  </h3>
                  <p className="text-xs leading-relaxed text-text-secondary">
                    {step.description}
                  </p>
                </motion.div>
              );
            })}
          </motion.div>
        </div>
      </section>

      <section className="relative w-full py-24 sm:py-32">
        <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={viewportConfig}
            variants={stagger(0.08)}
            className="relative overflow-hidden rounded-3xl border border-border/60 bg-surface/40 backdrop-blur-md"
          >
            <div className="absolute inset-0 grid-bg opacity-20 [mask-image:radial-gradient(ellipse_at_center,#000_20%,transparent_70%)]" />
            <div className="absolute -left-32 top-1/2 h-64 w-64 -translate-y-1/2 rounded-full bg-purple-500/10 blur-3xl" />

            <div className="relative grid grid-cols-1 gap-8 px-8 py-12 sm:px-16 sm:py-16 lg:grid-cols-2 lg:gap-16">
              <motion.div variants={fadeUp}>
                <span className="mb-4 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">
                  {t.pricingLabel}
                </span>
                <h2 className="mt-4 font-display text-3xl font-medium tracking-tight text-gradient-fade sm:text-4xl">
                  {t.pricingTitle}
                </h2>
                <p className="mt-6 text-base leading-relaxed text-text-secondary">
                  {t.pricingDescription}
                </p>
              </motion.div>

              <motion.div variants={fadeUp} className="space-y-4">
                {t.pricingPoints.map((point, i) => {
                  const pIcons = [Target, Users, Clock];
                  const PIcon = pIcons[i] || Target;
                  return (
                    <div key={i} className="flex items-start gap-4">
                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-purple-400/20 bg-purple-500/10 text-purple-300">
                        <PIcon className="h-4 w-4" strokeWidth={1.5} />
                      </div>
                      <div>
                        <div className="text-sm font-medium text-text-primary">
                          {point.title}
                        </div>
                        <div className="mt-1 text-xs leading-relaxed text-text-secondary">
                          {point.description}
                        </div>
                      </div>
                    </div>
                  );
                })}

                <div className="pt-4">
                  <GlowButton
                    href={`/${locale}/contact`}
                    variant="primary"
                    size="md"
                    icon={<ArrowRight className="h-4 w-4" />}
                  >
                    {t.pricingCta}
                  </GlowButton>
                </div>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </section>
    </>
  );
}