import Link from "next/link";
import { Building2, Wrench, Tv, ArrowRight, Wifi, Smartphone, Lock } from "lucide-react";
import { cn } from "@/shared/utils";

interface ServicesGridProps {
  basePath?: string;
}

interface ServiceCardProps {
  href: string;
  icon: React.ReactNode;
  title: string;
  description: string;
  price?: string;
  highlight?: string;
  featured?: boolean;
  className?: string;
}

function ServiceCard({
  href,
  icon,
  title,
  description,
  price,
  highlight,
  featured = false,
  className,
}: ServiceCardProps) {
  return (
    <Link href={href} className={cn("group block h-full", className)}>
      <div
        className={cn(
          "h-full flex flex-col rounded-xl border p-6",
          "transition-all duration-[var(--cp-duration-normal)]",
          "hover:-translate-y-0.5 hover:shadow-lg",
          featured
            ? "bg-gradient-to-br from-primary/5 to-card border-primary/20 hover:border-primary/40"
            : "bg-card border-border hover:border-primary/30"
        )}
      >
        {/* Icon */}
        <div
          className={cn(
            "flex h-11 w-11 items-center justify-center rounded-lg mb-4 text-primary",
            featured ? "bg-primary/15" : "bg-primary/8"
          )}
        >
          {icon}
        </div>

        {/* Content */}
        <h2 className="text-lg font-semibold text-foreground mb-2 font-display">{title}</h2>
        <p className="text-sm text-muted-foreground mb-4 flex-grow leading-relaxed">
          {description}
        </p>

        {/* Price or Highlight */}
        <div className="flex items-center justify-between mt-auto pt-4 border-t border-border/50">
          <div>
            {price && (
              <span className="text-sm font-medium text-foreground">
                From <span className="text-primary">{price}</span>
              </span>
            )}
            {highlight && (
              <span className="inline-flex rounded-full bg-success/10 px-2.5 py-0.5 text-xs font-medium text-success">
                {highlight}
              </span>
            )}
            {!price && !highlight && (
              <span className="text-sm text-muted-foreground">Learn more</span>
            )}
          </div>
          <div
            className={cn(
              "flex items-center gap-1 text-sm font-medium text-primary",
              "transition-transform group-hover:translate-x-0.5"
            )}
          >
            View Plans
            <ArrowRight className="h-3.5 w-3.5" />
          </div>
        </div>
      </div>
    </Link>
  );
}

export function ServicesGrid({ basePath = "/services" }: ServicesGridProps) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {/* Internet - Featured */}
      <ServiceCard
        href={`${basePath}/internet`}
        icon={<Wifi className="h-5 w-5" />}
        title="Internet"
        description="NTT fiber with speeds up to 10Gbps. Professional installation and full support included."
        price="¥4,000/mo"
        featured
      />

      {/* SIM */}
      <ServiceCard
        href={`${basePath}/sim`}
        icon={<Smartphone className="h-5 w-5" />}
        title="SIM & eSIM"
        description="Data, voice & SMS on NTT Docomo's network. Physical SIM or instant eSIM."
        highlight="No contract"
      />

      {/* VPN */}
      <ServiceCard
        href={`${basePath}/vpn`}
        icon={<Lock className="h-5 w-5" />}
        title="VPN"
        description="Access US/UK content with pre-configured routers. Simple setup."
        price="¥2,500/mo"
      />

      {/* Business */}
      <ServiceCard
        href="/services/business"
        icon={<Building2 className="h-5 w-5" />}
        title="Business"
        description="DIA, Office LAN, and enterprise connectivity solutions."
      />

      {/* Onsite */}
      <ServiceCard
        href="/services/onsite"
        icon={<Wrench className="h-5 w-5" />}
        title="Onsite"
        description="Setup and troubleshooting at your location by certified technicians."
      />

      {/* TV */}
      <ServiceCard
        href="/services/tv"
        icon={<Tv className="h-5 w-5" />}
        title="TV Services"
        description="Satellite, cable, and optical fiber TV with international packages."
      />
    </div>
  );
}
