import {
  IconChartBar,
  IconCode,
  IconDatabase,
  IconUsers,
} from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { FadeIn } from "@/components/ui/fade-in";
import { Link } from "@/i18n/navigation";

interface ServiceCategory {
  description: string;
  features: string[];
  href: string;
  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
  serviceCount?: number;
  title: string;
}

const serviceCategories: ServiceCategory[] = [
  {
    icon: IconChartBar,
    title: "Performance Audits",
    description:
      "Stop guessing what's slow. We dive deep into your tech, SEO, and data flows to deliver a prioritized, actionable roadmap for growth.",
    features: [
      "Core Web Vitals & Performance Bottlenecks",
      "Technical SEO & Migration Readiness",
      "Marketing Tech Stack & Data Integrity",
      "API Latency & Security Posture",
    ],
    href: "/services#audits",
    serviceCount: 12,
  },
  {
    icon: IconCode,
    title: "Headless Builds",
    description:
      "This is where marketing ideas come to life. We engineer high-performance headless platforms that give your team the freedom to create, test, and convert at speed.",
    features: [
      "Shopify Hydrogen & Custom Storefronts",
      "WordPress Headless Conversions",
      "Composable stacks with Contentful/Prismic",
      "Full setup, ready for your marketing team",
    ],
    href: "/services/builds/shopify-headless",
    serviceCount: 2,
  },
  {
    icon: IconDatabase,
    title: "Platform Migration",
    description:
      "Migrate with absolute confidence. We manage the entire transition to a modern architecture, guaranteeing zero SEO traffic loss and a transformative performance upgrade.",
    features: [
      "WordPress → Shopify Headless",
      "Guaranteed data & content integrity",
      "Zero-loss SEO methodology",
      "Seamless tracking & analytics transition",
    ],
    href: "/services/builds/shopify-headless",
    serviceCount: 1,
  },
  {
    icon: IconUsers,
    title: "Expert Training",
    description:
      "Turn your in-house team into a powerhouse. Our workshops provide the cutting-edge skills in technical SEO and AI needed to maximize the impact of your growth platform.",
    features: [
      "Technical SEO for Marketers",
      "AI for SEO & Content Teams",
      "Live, interactive workshops",
      "Ongoing support & resources",
    ],
    href: "/services#training",
    serviceCount: 2,
  },
];

export async function ServicesOverview() {
  const tCommon = await getTranslations("common");
  return (
    <section className="relative overflow-hidden py-12 sm:py-24 md:py-32">
      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mx-auto mb-8 max-w-4xl text-center md:mb-16">
          <FadeIn>
            <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-5xl">
              <span className="text-[#FD105E]">
                A Solution for Every Challenge
              </span>
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-xl">
              Whether you need to diagnose a critical issue, build a new
              platform from the ground up, or empower your team, our services
              are structured to deliver targeted, measurable value.
            </p>
          </FadeIn>
        </div>

        {/* Services Grid */}
        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-4 md:gap-8 lg:grid-cols-2">
          {serviceCategories.map((category, index) => (
            <FadeIn
              className="group relative"
              delay={index * 0.1}
              duration={0.6}
              ease={[0.21, 0.47, 0.32, 0.98]}
              key={category.title}
              viewportAmount={0.2}
            >
              <Link href={category.href}>
                <div className="relative h-full rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/50 hover:bg-[#1a1a1a] sm:p-6 md:p-8">
                  <div className="relative">
                    {/* Icon and Title */}
                    <div className="mb-4 flex items-start md:mb-6">
                      <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 transition-transform duration-300 group-hover:scale-110 sm:h-12 sm:w-12 md:h-14 md:w-14">
                        <category.icon
                          className="h-5 w-5 text-[#FD105E] sm:h-6 sm:w-6 md:h-7 md:w-7"
                          strokeWidth={1.5}
                        />
                      </div>
                      <div className="mt-1 ml-3 md:mt-2 md:ml-4">
                        <h3 className="font-bold text-lg text-white sm:text-xl md:text-2xl">
                          {category.title}
                        </h3>
                        {category.serviceCount && (
                          <span className="mt-1 inline-block rounded bg-[#333333] px-2 py-1 font-semibold text-neutral-400 text-xs">
                            {category.serviceCount}{" "}
                            {category.serviceCount === 1
                              ? "service"
                              : "services"}
                          </span>
                        )}
                      </div>
                    </div>

                    {/* Description */}
                    <p className="mb-6 text-neutral-200 text-sm leading-relaxed">
                      {category.description}
                    </p>

                    {/* Features */}
                    <div>
                      <h4 className="mb-3 font-semibold text-neutral-400 text-sm uppercase tracking-wide">
                        {tCommon("whatsIncluded")}
                      </h4>
                      <ul className="space-y-2">
                        {category.features.map((feature) => (
                          <li
                            className="flex items-start text-neutral-300 text-sm"
                            key={feature}
                          >
                            <span className="mt-1 mr-2 text-[#FD105E]">→</span>
                            {feature}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </div>
              </Link>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}