"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ArrowRight, CheckCircle2 } from "lucide-react";
import { SectionHeading } from "./section-heading";
import { SERVICES } from "./site-data";
import { Button } from "@/components/ui/button";

const CATEGORY_MAP: Record<string, string[]> = {
  All: SERVICES.map((s) => s.title),
  "Civil & Building": ["Civil Construction", "Building Construction", "Roads & Bridges", "Specialized Works"],
  "Energy & Water": ["Energy & Hydropower", "Water & Irrigation", "Electrical & HVAC"],
  "Consulting & Survey": ["Project Management", "Equipment & Supply", "Survey & GIS", "Environment & EIA", "Consultancy & Valuation"],
};

export function Services() {
  const [activeFilter, setActiveFilter] = useState("All");

  const filteredServices = SERVICES.filter((s) =>
    CATEGORY_MAP[activeFilter]?.includes(s.title)
  );

  return (
    <section id="services" className="section-pad bg-muted/40">
      <div className="mx-auto max-w-7xl px-4 md:px-6">
        <SectionHeading
          eyebrow="What We Do"
          title="Comprehensive engineering & construction services"
          description="A full spectrum of construction, engineering and consultancy services — covering every stage of infrastructure development from initial study to final handover."
        />

        {/* Filter Pills */}
        <div className="mt-8 flex flex-wrap items-center justify-center gap-2">
          {Object.keys(CATEGORY_MAP).map((cat) => {
            const active = activeFilter === cat;
            return (
              <button
                key={cat}
                onClick={() => setActiveFilter(cat)}
                className={`rounded-full px-5 py-2 text-xs font-bold transition-all ${
                  active
                    ? "bg-primary text-primary-foreground shadow-md shadow-primary/20"
                    : "bg-card border border-border text-muted-foreground hover:text-foreground hover:border-primary/40"
                }`}
              >
                {cat}
              </button>
            );
          })}
        </div>

        {/* Services Grid */}
        <motion.div layout className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          <AnimatePresence mode="popLayout">
            {filteredServices.map((service, i) => {
              const Icon = service.icon;
              return (
                <motion.div
                  key={service.title}
                  layout
                  initial={{ opacity: 0, scale: 0.96 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.96 }}
                  transition={{ duration: 0.3, delay: (i % 3) * 0.05 }}
                  className="group relative flex flex-col justify-between overflow-hidden rounded-xl border border-border bg-card p-7 transition-all duration-300 hover:border-primary/40 hover:shadow-xl hover:shadow-primary/5"
                >
                  {/* Subtle top accent bar */}
                  <span className="absolute top-0 left-0 right-0 h-[3px] bg-primary scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />

                  <div>
                    <div className="flex items-center justify-between">
                      <span className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
                        <Icon className="h-6 w-6" strokeWidth={1.5} />
                      </span>
                      <span className="text-[10px] font-extrabold uppercase tracking-widest text-muted-foreground/60">
                        0{i + 1}
                      </span>
                    </div>

                    <h3 className="mt-5 text-lg font-bold text-foreground group-hover:text-primary transition-colors">
                      {service.title}
                    </h3>
                    <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
                      {service.description}
                    </p>
                  </div>

                  <div className="mt-6 pt-4 border-t border-border">
                    <ul className="space-y-2">
                      {service.points.map((point) => (
                        <li key={point} className="flex items-center gap-2 text-xs text-foreground">
                          <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-primary" />
                          <span>{point}</span>
                        </li>
                      ))}
                    </ul>

                    <div className="mt-6 flex items-center justify-between">
                      <span className="text-[11px] font-semibold text-muted-foreground">
                        Government Compliant
                      </span>
                      <Button asChild variant="ghost" size="sm" className="h-8 px-2 text-xs font-semibold text-primary hover:bg-primary/10">
                        <a href="#contact">
                          Request Scope
                          <ArrowRight className="ml-1 h-3.5 w-3.5" />
                        </a>
                      </Button>
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </AnimatePresence>
        </motion.div>
      </div>
    </section>
  );
}