"use client";

import {
  Gavel,
  ClipboardCheck,
  FileText,
  BookOpen,
  Copyright,
  ShieldCheck,
  Building2,
  ReceiptText,
} from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";

const services = [
  {
    icon: Gavel,
    title: "Tax Appeal &",
    subTitle: "Litigation Services",
    href: "/services/tax-appeal",
  },
  {
    icon: ClipboardCheck,
    title: "Audit & Assurance",
    subTitle: "Services",
    href: "/services/audit",
  },
  {
    icon: FileText,
    title: "Accounting &",
    subTitle: "Reporting Services",
    href: "/services/accounting",
  },
  {
    icon: BookOpen,
    title: "Bookkeeping",
    subTitle: "Services",
    href: "/services/bookkeeping",
  },
  {
    icon: Copyright,
    title: "Copyright",
    subTitle: "Registration",
    href: "/services/copyright",
  },
  {
    icon: ShieldCheck,
    title: "Trademark",
    subTitle: "Registration",
    href: "/services/trademark",
  },
  {
    icon: Building2,
    title: "Company & Firm",
    subTitle: "Registration",
    href: "/services/company-registration",
  },
  {
    icon: ReceiptText,
    title: "Income Tax",
    subTitle: "Registration",
    href: "/services/tax-registration",
  },
];

export default function ServicesSection() {
  return (
    <section id="services" className="py-16 bg-white">
      <div className="max-w-7xl mx-auto px-4 md:px-8">
        {/* Header */}
        <div className="text-center mb-12">
          <h2 className="text-2xl font-bold text-[#0a3d3d] mb-2">
            Our Services
          </h2>
          <p className="text-sm text-gray-500">
            All the services that we provide to the clients
          </p>
        </div>

        {/* 4-Column Grid (LG) / 2-Column (MD) */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {services.map((service, index) => {
            const Icon = service.icon;
            return (
              <Link key={index} href={service.href} className="group">
                <div className="h-full bg-white rounded-xl p-5 border border-gray-100 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.06)] hover:shadow-md transition-all duration-300 flex items-center gap-4">
                  {/* Icon Wrapper */}
                  <div className="w-12 h-12 bg-[#f0f7f7] rounded-lg flex items-center justify-center shrink-0 group-hover:bg-[#0d7a7a] transition-colors duration-300">
                    <Icon
                      className="w-6 h-6 text-[#0d7a7a] group-hover:text-white transition-colors"
                      strokeWidth={1.5}
                    />
                  </div>

                  {/* Title Text (Two lines) */}
                  <div className="flex flex-col">
                    <span className="text-[13px] font-bold text-[#0a3d3d] leading-tight">
                      {service.title}
                    </span>
                    <span className="text-[13px] font-bold text-[#0a3d3d] leading-tight">
                      {service.subTitle}
                    </span>
                  </div>
                </div>
              </Link>
            );
          })}
        </div>

        {/* CTA Button */}
        <div className="text-center mt-12">
          <Button
            size="2xl"
            className="rounded-full px-8 bg-[#0d7a7a] hover:bg-[#119191] text-white border-none shadow-lg"
          >
            View More Services
          </Button>
        </div>
      </div>
    </section>
  );
}