import { Globe, Network, PenTool, Smartphone, type LucideIcon } from "lucide-react";
import type { Service } from "@/lib/contentTypes";
import Reveal from "./ui/Reveal";
import SectionHeading from "./ui/SectionHeading";
import PillButton from "./ui/PillButton";

const iconMap: Record<string, LucideIcon> = {
  globe: Globe,
  smartphone: Smartphone,
  pen: PenTool,
  network: Network,
};

function ChipList({ items }: { items: string[] }) {
  return (
    <div className="flex flex-wrap gap-2.5">
      {items.map((item) => (
        <span
          key={item}
          className="inline-flex items-center gap-2 rounded-full border border-line bg-ink/60 px-4 py-2 text-[13px] text-fog transition-colors hover:border-line-2 hover:text-fg"
        >
          <span className="size-1 rounded-full bg-fg/50" />
          {item}
        </span>
      ))}
    </div>
  );
}

/** Empat layanan utama + daftar layanan pendukung. */
export default function Services({
  services,
  subServicesLeft,
  subServicesRight,
}: {
  services: Service[];
  subServicesLeft: string[];
  subServicesRight: string[];
}) {
  return (
    <section id="layanan" className="mx-auto max-w-6xl px-5 py-24 md:px-8 md:py-32">
      <SectionHeading
        label="Layanan"
        title="Solusi teknologi untuk setiap kebutuhan"
        description="Dari website pertama hingga sistem skala enterprise — kami punya tim dan pengalamannya."
      />

      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
        {services.map((service, i) => {
          const Icon = iconMap[service.icon];
          return (
            <Reveal key={service.title} delay={i * 0.08}>
              <div className="group h-full rounded-3xl border border-line bg-surface p-6 transition-all duration-300 hover:-translate-y-1 hover:border-line-2 hover:bg-surface-2">
                <span className="glow-border grid size-12 place-items-center rounded-2xl bg-panel text-fg">
                  <Icon size={20} strokeWidth={1.6} />
                </span>
                <h3 className="mt-5 text-base font-semibold text-fg">
                  {service.title}
                </h3>
                <p className="mt-2.5 text-[13px] leading-relaxed text-fog">
                  {service.description}
                </p>
              </div>
            </Reveal>
          );
        })}
      </div>

      {/* Layanan pendukung */}
      <Reveal className="mt-14">
        <p className="mb-6 text-center font-accent text-[11px] tracking-[0.22em] text-mist uppercase">
          Dan masih banyak lagi
        </p>
        <div className="grid gap-6 md:grid-cols-2">
          <ChipList items={subServicesLeft} />
          <ChipList items={subServicesRight} />
        </div>
      </Reveal>

      <Reveal className="mt-12 flex justify-center">
        <PillButton href="#kontak">Pesan Layanan</PillButton>
      </Reveal>
    </section>
  );
}