"use client";

import Link from "next/link";
import {
  Wifi,
  Smartphone,
  ShieldCheck,
  ArrowRight,
  Phone,
  Building2,
  Wrench,
  Check,
} from "lucide-react";

interface ServicesOverviewContentProps {
  /** Base path for service links ("/services" or "/account/services") */
  basePath: "/services" | "/account/services";
  /** Whether to show the hero section (default: true) */
  showHero?: boolean;
  /** Whether to show the CTA section (default: true) */
  showCta?: boolean;
}

const serviceAccents = {
  internet: {
    icon: "bg-sky-500/10 text-sky-600",
    badge: "bg-sky-500/10 text-sky-700 border-sky-500/20",
    stripe: "from-sky-500 to-blue-600",
  },
  sim: {
    icon: "bg-emerald-500/10 text-emerald-600",
    badge: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20",
    stripe: "from-emerald-500 to-teal-600",
  },
  vpn: {
    icon: "bg-violet-500/10 text-violet-600",
    badge: "bg-violet-500/10 text-violet-700 border-violet-500/20",
    stripe: "from-violet-500 to-purple-600",
  },
  business: {
    icon: "bg-slate-500/10 text-slate-600",
    badge: "bg-slate-500/10 text-slate-700 border-slate-500/20",
    stripe: "from-slate-500 to-slate-700",
  },
  onsite: {
    icon: "bg-amber-500/10 text-amber-600",
    badge: "bg-amber-500/10 text-amber-700 border-amber-500/20",
    stripe: "from-amber-500 to-orange-600",
  },
} as const;

const services = [
  {
    id: "internet" as const,
    icon: Wifi,
    title: "Internet",
    subtitle: "Fiber Optic",
    description:
      "NTT Optical Fiber for homes and apartments. Speeds up to 10Gbps with professional installation.",
    price: "¥3,200",
    priceUnit: "/mo",
    features: ["Up to 10Gbps", "NTT Network", "Pro Install"],
    useBasePath: true,
  },
  {
    id: "sim" as const,
    icon: Smartphone,
    title: "SIM & eSIM",
    subtitle: "Mobile Data",
    description:
      "Data, voice & SMS on NTT Docomo network. Physical SIM or instant eSIM activation.",
    price: "¥1,100",
    priceUnit: "/mo",
    badge: "1st month free",
    features: ["Docomo Network", "Voice + Data", "eSIM Ready"],
    useBasePath: true,
  },
  {
    id: "vpn" as const,
    icon: ShieldCheck,
    title: "VPN Router",
    subtitle: "Streaming Access",
    description:
      "Access US & UK streaming content with a pre-configured router. Simple plug-and-play.",
    price: "¥2,500",
    priceUnit: "/mo",
    features: ["US/UK Content", "Pre-configured", "Plug & Play"],
    useBasePath: true,
  },
  {
    id: "business" as const,
    icon: Building2,
    title: "Business",
    subtitle: "Enterprise IT",
    description:
      "Enterprise solutions for offices and commercial spaces. Dedicated support and SLAs.",
    features: ["Office Setup", "Dedicated Support", "Custom SLAs"],
    useBasePath: false,
    fixedPath: "/services/business",
  },
  {
    id: "onsite" as const,
    icon: Wrench,
    title: "Onsite Support",
    subtitle: "Tech Assistance",
    description:
      "Professional technicians visit your location for setup, troubleshooting, and maintenance.",
    features: ["Home Visits", "Setup Help", "Troubleshooting"],
    useBasePath: false,
    fixedPath: "/services/onsite",
  },
];

function HeroSection() {
  return (
    <section className="relative overflow-hidden pt-8 pb-12">
      <div
        className="absolute inset-0 pointer-events-none opacity-40"
        style={{
          backgroundImage: `radial-gradient(circle at center, color-mix(in oklch, var(--primary) 10%, transparent) 0.8px, transparent 0.8px)`,
          backgroundSize: "28px 28px",
        }}
      />
      <div
        className="absolute -top-20 -right-20 w-80 h-80 rounded-full pointer-events-none opacity-50"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklch, var(--info) 20%, transparent) 0%, transparent 65%)",
        }}
      />
      <div
        className="absolute -bottom-16 -left-16 w-64 h-64 rounded-full pointer-events-none opacity-30"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklch, var(--primary) 18%, transparent) 0%, transparent 65%)",
        }}
      />
      <div className="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p className="text-sm font-semibold text-primary uppercase tracking-wider mb-3 animate-in fade-in slide-in-from-bottom-4 duration-500">
          Full English Support
        </p>
        <h1
          className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground tracking-tight animate-in fade-in slide-in-from-bottom-4 duration-500"
          style={{ animationDelay: "80ms" }}
        >
          Our Services
        </h1>
        <p
          className="text-base sm:text-lg text-muted-foreground mt-3 max-w-xl mx-auto leading-relaxed animate-in fade-in slide-in-from-bottom-4 duration-500"
          style={{ animationDelay: "160ms" }}
        >
          Connectivity and support solutions designed for Japan&apos;s international community.
        </p>
      </div>
    </section>
  );
}

function getServiceHref(service: (typeof services)[number], basePath: string): string {
  return service.useBasePath ? `${basePath}/${service.id}` : service.fixedPath!;
}

function FeaturedServiceCard({
  service,
  basePath,
  index,
}: {
  service: (typeof services)[number];
  basePath: string;
  index: number;
}) {
  const Icon = service.icon;
  const accent = serviceAccents[service.id];

  return (
    <Link
      key={service.id}
      href={getServiceHref(service, basePath)}
      className="group relative overflow-hidden rounded-2xl bg-card border border-border shadow-sm hover:shadow-md transition-all duration-300 animate-in fade-in slide-in-from-bottom-6 duration-600"
      style={{ animationDelay: `${index * 80}ms` }}
    >
      <div className={`h-1 w-full bg-gradient-to-r ${accent.stripe}`} />
      <div className="p-6">
        {service.badge && (
          <div className="absolute top-5 right-5">
            <span
              className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold ${accent.badge}`}
            >
              {service.badge}
            </span>
          </div>
        )}
        <div
          className={`w-11 h-11 rounded-xl ${accent.icon} flex items-center justify-center mb-4`}
        >
          <Icon className="h-5.5 w-5.5" />
        </div>
        <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-1">
          {service.subtitle}
        </p>
        <h3 className="text-xl font-bold text-foreground mb-2">{service.title}</h3>
        <p className="text-sm text-muted-foreground leading-relaxed mb-4">{service.description}</p>
        <div className="flex items-end justify-between gap-4">
          <div className="flex flex-wrap gap-1.5">
            {service.features.map(feature => (
              <span
                key={feature}
                className="inline-flex items-center gap-1 rounded-md bg-muted/60 px-2 py-1 text-[11px] font-medium text-foreground/80"
              >
                <Check className="h-3 w-3 text-primary/70" />
                {feature}
              </span>
            ))}
          </div>
          {service.price && (
            <div className="text-right flex-shrink-0">
              <span className="text-lg font-bold text-foreground">{service.price}</span>
              <span className="text-xs text-muted-foreground">{service.priceUnit}</span>
            </div>
          )}
        </div>
        <div className="flex items-center gap-1.5 text-primary font-medium text-sm mt-4 group-hover:gap-2.5 transition-all duration-300">
          <span>View Plans</span>
          <ArrowRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
        </div>
      </div>
    </Link>
  );
}

function SecondaryServiceCard({
  service,
  basePath,
  index,
}: {
  service: (typeof services)[number];
  basePath: string;
  index: number;
}) {
  const Icon = service.icon;
  const accent = serviceAccents[service.id];

  return (
    <Link
      key={service.id}
      href={getServiceHref(service, basePath)}
      className="group relative overflow-hidden rounded-xl bg-card border border-border shadow-sm hover:shadow-md transition-all duration-300 animate-in fade-in slide-in-from-bottom-6 duration-600"
      style={{ animationDelay: `${(index + 2) * 80}ms` }}
    >
      <div className={`absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b ${accent.stripe}`} />
      <div className="p-5 pl-6">
        <div className="flex items-start gap-3.5">
          <div
            className={`w-10 h-10 rounded-lg ${accent.icon} flex items-center justify-center flex-shrink-0`}
          >
            <Icon className="h-5 w-5" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-0.5">
              {service.subtitle}
            </p>
            <h3 className="text-base font-bold text-foreground mb-1.5">{service.title}</h3>
            <p className="text-xs text-muted-foreground leading-relaxed line-clamp-2 mb-3">
              {service.description}
            </p>
            <div className="flex flex-wrap gap-1">
              {service.features.map(feature => (
                <span
                  key={feature}
                  className="inline-flex items-center rounded bg-muted/50 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground"
                >
                  {feature}
                </span>
              ))}
            </div>
          </div>
        </div>
        <div className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
          <ArrowRight className="h-4 w-4 text-primary" />
        </div>
      </div>
    </Link>
  );
}

function CtaSection() {
  return (
    <section className="py-14">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 className="text-xl sm:text-2xl font-bold text-foreground mb-3">Need help choosing?</h2>
        <p className="text-sm text-muted-foreground mb-6 max-w-md mx-auto leading-relaxed">
          Our bilingual team can help you find the right solution. Get personalized recommendations
          in English.
        </p>
        <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
          <Link
            href="/contact"
            className="inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:bg-primary/90 transition-colors shadow-sm"
          >
            Get in Touch
            <ArrowRight className="h-3.5 w-3.5" />
          </Link>
          <a
            href="tel:0120660470"
            className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
            aria-label="Call us toll free at 0120-660-470"
          >
            <Phone className="h-4 w-4" aria-hidden="true" />
            0120-660-470 (Toll Free)
          </a>
        </div>
      </div>
    </section>
  );
}

export function ServicesOverviewContent({
  basePath,
  showHero = true,
  showCta = true,
}: ServicesOverviewContentProps) {
  return (
    <div>
      {showHero && <HeroSection />}

      <section className={showHero ? "" : "pt-2"}>
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
            {services.slice(0, 2).map((service, index) => (
              <FeaturedServiceCard
                key={service.id}
                service={service}
                basePath={basePath}
                index={index}
              />
            ))}
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {services.slice(2).map((service, index) => (
              <SecondaryServiceCard
                key={service.id}
                service={service}
                basePath={basePath}
                index={index}
              />
            ))}
          </div>
        </div>
      </section>

      {showCta && <CtaSection />}
    </div>
  );
}
