"use client";

import Link from "next/link";

interface Service {
  id: number;
  name: string;
  slug: string;
  popularCount: number | null;
  icon: string;
}

// Custom SVG icons matching the design
function ServiceIcon({ icon, name }: { icon: string; name: string }) {
  const icons: Record<string, React.ReactElement> = {
    kidney: (
      <svg viewBox="0 0 40 40" fill="none" className="w-8 h-8">
        <path d="M12 20C12 14 16 10 20 10C24 10 28 14 28 20C28 26 24 32 20 32C16 32 12 28 12 24C12 20 16 18 20 18" stroke="#2d8653" strokeWidth="2" strokeLinecap="round"/>
        <circle cx="20" cy="14" r="2" fill="#2d8653"/>
      </svg>
    ),
    liver: (
      <svg viewBox="0 0 40 40" fill="none" className="w-8 h-8">
        <path d="M10 15C10 15 14 10 20 12C26 14 30 18 28 24C26 30 18 32 14 28C10 24 10 20 12 17" stroke="#6c3fc5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M20 12C20 12 22 8 26 9" stroke="#6c3fc5" strokeWidth="1.5" strokeLinecap="round"/>
      </svg>
    ),
    heart: (
      <svg viewBox="0 0 40 40" fill="none" className="w-8 h-8">
        <path d="M20 30L10 20C7 17 7 12 10 9C13 6 17 7 20 10C23 7 27 6 30 9C33 12 33 17 30 20L20 30Z" stroke="#ef4444" strokeWidth="2" strokeLinejoin="round"/>
        <path d="M14 22L17 19L20 22L23 17L26 20" stroke="#ef4444" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    ),
    cancer: (
      <svg viewBox="0 0 40 40" fill="none" className="w-8 h-8">
        <circle cx="20" cy="20" r="8" stroke="#f59e0b" strokeWidth="2"/>
        <path d="M20 8V5M20 35V32M8 20H5M35 20H32M11 11L9 9M31 31L29 29M11 29L9 31M31 9L29 11" stroke="#f59e0b" strokeWidth="1.5" strokeLinecap="round"/>
        <circle cx="20" cy="20" r="3" fill="#f59e0b"/>
      </svg>
    ),
    bone: (
      <svg viewBox="0 0 40 40" fill="none" className="w-8 h-8">
        <path d="M13 12C13 10 11 8 9 9C7 10 7 13 9 14C10 14.5 11 14 11 15V25C11 26 10 25.5 9 26C7 27 7 30 9 31C11 32 13 30 13 28" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round"/>
        <path d="M27 12C27 10 29 8 31 9C33 10 33 13 31 14C30 14.5 29 14 29 15V25C29 26 30 25.5 31 26C33 27 33 30 31 31C29 32 27 30 27 28" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round"/>
        <line x1="13" y1="20" x2="27" y2="20" stroke="#3b82f6" strokeWidth="2"/>
      </svg>
    ),
    baby: (
      <svg viewBox="0 0 40 40" fill="none" className="w-8 h-8">
        <circle cx="20" cy="14" r="5" stroke="#ec4899" strokeWidth="2"/>
        <path d="M12 30C12 26 15 24 20 24C25 24 28 26 28 30" stroke="#ec4899" strokeWidth="2" strokeLinecap="round"/>
        <path d="M28 15C30 13 33 14 33 17C33 20 30 20 28 18" stroke="#ec4899" strokeWidth="1.5" strokeLinecap="round"/>
        <circle cx="28" cy="22" r="3" stroke="#ec4899" strokeWidth="1.5"/>
        <line x1="31" y1="21" x2="33" y2="18" stroke="#ec4899" strokeWidth="1.5" strokeLinecap="round"/>
      </svg>
    ),
  };

  return (
    <div className="w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center group-hover:bg-green-50 transition-colors">
      {icons[icon] || (
        <svg viewBox="0 0 40 40" fill="none" className="w-8 h-8">
          <circle cx="20" cy="20" r="10" stroke="#2d8653" strokeWidth="2"/>
          <path d="M20 15V25M15 20H25" stroke="#2d8653" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      )}
    </div>
  );
}

export default function ServicesSection({ services }: { services: Service[] }) {
  return (
    <section id="services" className="py-12 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="mb-6">
          <h2 className="text-xl font-bold text-slate-900 mb-1">Popular Medical Tourism Services</h2>
          <p className="text-sm text-slate-500">Verified hospitals, clear pricing, and local support from Dhaka.</p>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
          {services.map((service, i) => (
            <Link
              key={service.id}
              href={`/treatments/${service.slug}`}
              className="group relative border border-slate-100 hover:border-green-200 rounded-xl p-4 text-center transition-all hover:shadow-md hover:-translate-y-0.5 bg-white"
              style={{ animationDelay: `${i * 80}ms` }}
            >
              {/* Popular Badge */}
              {service.popularCount && service.popularCount > 0 && (
                <span className="absolute -top-2 -right-2 bg-purple-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full">
                  #{service.popularCount}
                </span>
              )}
              <div className="flex justify-center mb-3">
                <ServiceIcon icon={service.icon} name={service.name} />
              </div>
              <p className="text-sm font-semibold text-slate-800 group-hover:text-green-700 transition-colors mb-1">
                {service.name}
              </p>
              <span className="text-xs text-green-600 font-medium group-hover:underline">View Details</span>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}