"use client";

import Link from "next/link";
import {
  Wifi,
  Smartphone,
  ShieldCheck,
  ArrowRight,
  Phone,
  CheckCircle2,
  Globe,
  Headphones,
  Building2,
  Wrench,
  Zap,
  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;
}

// Service data with enhanced information
const services = [
  {
    id: "internet",
    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",
    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",
    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",
    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",
    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",
  },
];

/**
 * ServicesOverviewContent - Enhanced services overview with rich visual design.
 *
 * Features full-width sections, gradient backgrounds, and polished card treatments
 * matching the website's landing page aesthetic.
 */
export function ServicesOverviewContent({
  basePath,
  showHero = true,
  showCta = true,
}: ServicesOverviewContentProps) {
  return (
    <div className="relative">
      {/* Hero Section with gradient background */}
      {showHero && (
        <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 overflow-hidden bg-gradient-to-br from-slate-50 via-white to-sky-50/80 pt-8 pb-16">
          {/* Dot grid pattern */}
          <div
            className="absolute inset-0 pointer-events-none"
            style={{
              backgroundImage: `radial-gradient(circle at center, oklch(0.65 0.05 234.4 / 0.12) 1px, transparent 1px)`,
              backgroundSize: "24px 24px",
            }}
          />

          {/* Gradient orb accent */}
          <div
            className="absolute -top-32 -right-32 w-96 h-96 rounded-full pointer-events-none opacity-60"
            style={{
              background: "radial-gradient(circle, oklch(0.85 0.08 200 / 0.4) 0%, transparent 70%)",
            }}
          />

          <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            {/* Eyebrow badge */}
            <div className="flex justify-center mb-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
              <span className="inline-flex items-center gap-2 rounded-full bg-white/80 backdrop-blur-sm border border-primary/20 px-4 py-2 text-sm text-primary font-medium shadow-sm">
                <CheckCircle2 className="h-4 w-4" />
                Full English Support
              </span>
            </div>

            {/* Main heading */}
            <h1
              className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-foreground mb-6 tracking-tight animate-in fade-in slide-in-from-bottom-4 duration-500"
              style={{ animationDelay: "100ms" }}
            >
              Our Services
            </h1>

            {/* Description */}
            <p
              className="text-lg sm:text-xl text-muted-foreground text-center max-w-2xl mx-auto mb-10 leading-relaxed animate-in fade-in slide-in-from-bottom-4 duration-500"
              style={{ animationDelay: "200ms" }}
            >
              Connectivity and support solutions designed for Japan&apos;s international community.
              One provider for all your needs.
            </p>

            {/* Value propositions */}
            <div
              className="flex flex-wrap justify-center gap-4 sm:gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500"
              style={{ animationDelay: "300ms" }}
            >
              <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-sm border border-border/40">
                <Globe className="h-4 w-4 text-primary" />
                <span className="text-sm font-medium text-foreground">
                  One provider, all services
                </span>
              </div>
              <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-sm border border-border/40">
                <Headphones className="h-4 w-4 text-primary" />
                <span className="text-sm font-medium text-foreground">English support</span>
              </div>
              <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-sm border border-border/40">
                <Zap className="h-4 w-4 text-primary" />
                <span className="text-sm font-medium text-foreground">Fast activation</span>
              </div>
            </div>
          </div>

          {/* Gradient fade to services section */}
          <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-b from-transparent to-[#f7f7f7] pointer-events-none" />
        </section>
      )}

      {/* Services Section */}
      <section
        className={`relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#f7f7f7] ${showHero ? "pt-8" : "pt-12"} pb-16`}
      >
        {/* Subtle pattern overlay */}
        <div
          className="absolute inset-0 pointer-events-none opacity-30"
          style={{
            backgroundImage: `radial-gradient(circle at center, oklch(0.6 0.0 0 / 0.08) 1px, transparent 1px)`,
            backgroundSize: "32px 32px",
          }}
        />

        <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Section header */}
          <div className="flex items-center justify-between mb-8">
            <h2 className="text-2xl sm:text-3xl font-bold text-foreground">Choose Your Service</h2>
            <div className="hidden sm:flex items-center gap-2 text-sm text-muted-foreground">
              <CheckCircle2 className="h-4 w-4 text-primary" />
              <span>No hidden fees</span>
            </div>
          </div>

          {/* Featured services - Top row (Internet & SIM) */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            {services.slice(0, 2).map((service, index) => {
              const Icon = service.icon;
              const href = service.useBasePath ? `${basePath}/${service.id}` : service.fixedPath;

              return (
                <Link
                  key={service.id}
                  href={href!}
                  className="group relative overflow-hidden rounded-2xl bg-white border border-border/60 shadow-md p-6 sm:p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg animate-in fade-in slide-in-from-bottom-8 duration-700"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  {/* Badge */}
                  {service.badge && (
                    <div className="absolute top-4 right-4 sm:top-6 sm:right-6">
                      <span className="inline-flex items-center rounded-full bg-primary px-3 py-1 text-xs font-bold text-white uppercase tracking-wide shadow-sm">
                        {service.badge}
                      </span>
                    </div>
                  )}

                  {/* Icon */}
                  <div className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-105">
                    <Icon className="h-7 w-7 sm:h-8 sm:w-8 text-primary" />
                  </div>

                  {/* Subtitle */}
                  <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1 block">
                    {service.subtitle}
                  </span>

                  {/* Title */}
                  <h3 className="text-xl sm:text-2xl font-bold text-foreground mb-3">
                    {service.title}
                  </h3>

                  {/* Description */}
                  <p className="text-muted-foreground leading-relaxed mb-5">
                    {service.description}
                  </p>

                  {/* Features */}
                  <div className="flex flex-wrap gap-2 mb-5">
                    {service.features.map(feature => (
                      <span
                        key={feature}
                        className="inline-flex items-center gap-1.5 rounded-full bg-muted px-3 py-1.5 text-xs font-medium text-foreground"
                      >
                        <Check className="h-3 w-3 text-primary" />
                        {feature}
                      </span>
                    ))}
                  </div>

                  {/* CTA */}
                  <div className="flex items-center gap-2 text-primary font-semibold group-hover:gap-3 transition-all duration-300">
                    <span>View Plans</span>
                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </div>
                </Link>
              );
            })}
          </div>

          {/* Secondary services - Bottom row */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {services.slice(2).map((service, index) => {
              const Icon = service.icon;
              const href = service.useBasePath ? `${basePath}/${service.id}` : service.fixedPath;

              return (
                <Link
                  key={service.id}
                  href={href!}
                  className="group relative overflow-hidden rounded-2xl bg-white border border-border/60 shadow-sm p-5 sm:p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-md animate-in fade-in slide-in-from-bottom-8 duration-700"
                  style={{ animationDelay: `${(index + 2) * 100}ms` }}
                >
                  <div className="flex items-start gap-4">
                    {/* Icon */}
                    <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0 transition-transform duration-300 group-hover:scale-105">
                      <Icon className="h-6 w-6 text-primary" />
                    </div>

                    <div className="flex-1 min-w-0">
                      {/* Subtitle */}
                      <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground mb-0.5 block">
                        {service.subtitle}
                      </span>

                      {/* Title */}
                      <h3 className="text-lg font-bold text-foreground mb-2">{service.title}</h3>

                      {/* Description */}
                      <p className="text-sm text-muted-foreground leading-relaxed mb-3 line-clamp-2">
                        {service.description}
                      </p>

                      {/* Features as pills */}
                      <div className="flex flex-wrap gap-1.5">
                        {service.features.slice(0, 2).map(feature => (
                          <span
                            key={feature}
                            className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-foreground"
                          >
                            {feature}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>

                  {/* Hover arrow indicator */}
                  <div className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <ArrowRight className="h-4 w-4 text-primary" />
                  </div>
                </Link>
              );
            })}
          </div>
        </div>

        {/* Gradient fade to CTA section */}
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-b from-transparent to-white pointer-events-none" />
      </section>

      {/* CTA Section */}
      {showCta && (
        <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-white py-12 sm:py-16">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-4">
              Need help choosing?
            </h2>
            <p className="text-muted-foreground mb-8 max-w-lg mx-auto leading-relaxed">
              Our bilingual team is ready to help you find the perfect solution for your needs. Get
              personalized recommendations in English.
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Link
                href="/contact"
                className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 font-semibold text-white hover:bg-primary/90 transition-colors shadow-md"
              >
                Get in Touch
                <ArrowRight className="h-4 w-4" />
              </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>
      )}
    </div>
  );
}
