import { Link } from "react-router-dom";
import SiteLayout from "@/components/SiteLayout";
import AnimateIn from "@/components/AnimateIn";
import TestimonialsCarousel from "@/components/TestimonialsCarousel";
import {
  Server,
  Globe,
  Network,
  Mail,
  MessageSquare,
  ShieldCheck,
  Cog,
  ArrowRight,
  Check,
  Sparkles,
  Zap,
  Headphones,
  Puzzle,
  Crown,
  CheckCircle2,
  XCircle,
  Phone,
  DollarSign,
  Rocket,
} from "lucide-react";

/**
 * Service Catalog — DoItEasy's enterprise services landing page.
 *
 * Design language:
 *   - Dark premium base (black → deep emerald gradients)
 *   - Brand green accent: #0e6305  (primary)
 *   - Gold accent:        #d4af37  (highlights, numbering, borders)
 *   - 3-column responsive grid of service cards with hover glow
 *   - Smooth fade/slide section transitions via <AnimateIn />
 */

/* -------------------------------------------------------------------------- */
/*  Data                                                                      */
/* -------------------------------------------------------------------------- */

type Service = {
  id: string;
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  features: string[];
  useCases: string[];
  cta: { label: string; href: string };
  /** A short label shown top-right of the card (e.g. "Enterprise", "Popular"). */
  tag?: string;
};

const SERVICES: Service[] = [
  {
    id: "cloud-vps",
    title: "Cloud VPS & Dedicated Infrastructure",
    description:
      "Deploy high-performance virtual and dedicated servers powered by enterprise-grade hardware. Built for reliability, speed, and full root access.",
    icon: Server,
    features: [
      "KVM Virtualization (Full Isolation)",
      "NVMe SSD Storage",
      "High-Speed Network (1G / 10G options)",
      "Full Root / Administrator Access",
      "Snapshot & Backup Management",
    ],
    useCases: [
      "Web Hosting & SaaS Platforms",
      "ERP / Business Applications",
      "Development & Testing Environments",
    ],
    cta: { label: "Explore VPS & Dedicated", href: "/cloud-vps" },
    tag: "Enterprise",
  },
  {
    id: "web-hosting",
    title: "Web Hosting Solutions",
    description:
      "Reliable and optimized hosting for websites, applications, and online platforms with maximum uptime and performance.",
    icon: Globe,
    features: [
      "Optimized Web Stack (Apache / NGINX)",
      "One-Click Application Deployment",
      "SSL Certificates Included",
      "Daily Backups",
      "Scalable Hosting Plans",
    ],
    useCases: [
      "Business Websites",
      "E-commerce Platforms",
      "WordPress & CMS Hosting",
    ],
    cta: { label: "View Hosting Plans", href: "/hosting" },
    tag: "Popular",
  },
  {
    id: "dia",
    title: "Dedicated Internet Access (DIA)",
    description:
      "Enterprise-grade connectivity with guaranteed bandwidth, low latency, and global reach using DoItEasy infrastructure.",
    icon: Network,
    features: [
      "Static Public IP Addressing",
      "High Availability Connectivity",
      "Low Latency Routing",
      "SLA-backed Performance",
      "Custom Network Design",
      "Guaranteed Uptime",
      "24/7 NOC Monitoring",
    ],
    useCases: [
      "Corporate Networks",
      "Branch Connectivity",
      "Data Center Interconnect",
    ],
    cta: { label: "Request Network Design", href: "/contact" },
  },
  {
    id: "bizmail",
    title: "Business Email Solutions",
    description:
      "Secure and reliable email hosting with advanced anti-spam protection and enterprise-grade delivery.",
    icon: Mail,
    features: [
      "IMAP / SMTP / Webmail Access",
      "SPF, DKIM, DMARC Support",
      "Advanced Anti-Spam Filtering",
      "High Deliverability Optimization",
      "Multi-device Synchronization",
      "Bizmail360 Collaboration Suite",
    ],
    useCases: [
      "Corporate Email Systems",
      "Team Collaboration",
      "Secure Communication",
    ],
    cta: { label: "Discover Bizmail360", href: "/bizmail360" },
  },
  {
    id: "whatsapp",
    title: "WhatsApp API & Messaging",
    description:
      "Integrate WhatsApp messaging into your business workflows with automation, API access, and real-time communication tools.",
    icon: MessageSquare,
    features: [
      "QR Code Device Linking",
      "REST API Integration",
      "Automated Messaging Workflows",
      "Multi-device Management",
      "Real-time Notifications",
    ],
    useCases: [
      "Customer Support Automation",
      "Marketing Campaigns",
      "Notification Systems",
    ],
    cta: { label: "Integrate WhatsApp", href: "/whatsapp-api" },
    tag: "New",
  },
  {
    id: "security",
    title: "Security & Compliance",
    description:
      "Protect your infrastructure with advanced security controls, monitoring, and compliance-ready configurations.",
    icon: ShieldCheck,
    features: [
      "Firewall & Intrusion Protection",
      "Malware Detection & Prevention",
      "Email Security & Anti-Spam",
      "Backup & Disaster Recovery",
      "Security Auditing",
      "Compliance-ready Configurations",
    ],
    useCases: [
      "Enterprise Security Compliance",
      "Data Protection",
      "Risk Mitigation",
    ],
    cta: { label: "Talk to a Specialist", href: "/contact" },
  },
  {
    id: "api",
    title: "API & Automation",
    description:
      "Automate your infrastructure and integrate systems seamlessly using DoItEasy API services.",
    icon: Cog,
    features: [
      "Full API Access (Clients Portal Integration)",
      "Service Provisioning Automation",
      "Webhooks & Event Triggers",
      "Custom Integration Support",
      "AI Builder Compatibility",
      "Developer Documentation",
    ],
    useCases: [
      "SaaS Platforms",
      "Internal Automation",
      "System Integration",
    ],
    cta: { label: "Read API Docs", href: "/knowledge-base" },
  },
];

type CompareRow = {
  feature: string;
  icon: React.ComponentType<{ className?: string }>;
  doiteasy: string;
  typical: string;
};

const COMPARE_ROWS: CompareRow[] = [
  {
    feature: "Performance",
    icon: Zap,
    doiteasy: "High (NVMe + Optimized Network)",
    typical: "Average",
  },
  {
    feature: "API Integration",
    icon: Puzzle,
    doiteasy: "Full",
    typical: "Limited",
  },
  {
    feature: "Support",
    icon: Headphones,
    doiteasy: "24/7 Expert",
    typical: "Basic",
  },
  {
    feature: "Customization",
    icon: Crown,
    doiteasy: "Enterprise Level",
    typical: "Limited",
  },
];

/* -------------------------------------------------------------------------- */
/*  Component                                                                 */
/* -------------------------------------------------------------------------- */

export default function ServiceCatalog() {
  return (
    <SiteLayout>
      {/* ==================================================================== */}
      {/*  HERO                                                               */}
      {/* ==================================================================== */}
      <section className="relative overflow-hidden bg-black text-white">
        {/* Decorative gradient / glow layers */}
        <div
          aria-hidden="true"
          className="absolute inset-0 bg-gradient-to-br from-[#031a05] via-black to-[#05130a]"
        />
        <div
          aria-hidden="true"
          className="absolute -top-40 -left-40 w-[520px] h-[520px] rounded-full bg-[#0e6305]/30 blur-[140px]"
        />
        <div
          aria-hidden="true"
          className="absolute top-1/3 -right-40 w-[480px] h-[480px] rounded-full bg-[#d4af37]/10 blur-[140px]"
        />
        <div
          aria-hidden="true"
          className="absolute inset-0 opacity-[0.06]"
          style={{
            backgroundImage:
              "linear-gradient(rgba(212,175,55,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.5) 1px, transparent 1px)",
            backgroundSize: "52px 52px",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
          <AnimateIn>
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-[#d4af37]/40 bg-[#d4af37]/5 text-[#f0d674] text-xs font-bold uppercase tracking-widest mb-6">
              <Sparkles className="w-3.5 h-3.5" />
              DoItEasy Service Catalog
            </div>
            <h1 className="text-4xl sm:text-5xl md:text-6xl font-black leading-[1.05] tracking-tight max-w-4xl">
              Enterprise{" "}
              <span className="relative inline-block">
                <span className="bg-gradient-to-r from-[#22c55e] via-[#0e6305] to-[#d4af37] bg-clip-text text-transparent">
                  Cloud &amp; Infrastructure
                </span>
                <span className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-[#22c55e] via-[#0e6305] to-[#d4af37] rounded-full opacity-60" />
              </span>{" "}
              Services
            </h1>
            <p className="mt-6 text-lg md:text-xl text-slate-300/90 max-w-3xl leading-relaxed">
              High-performance hosting, secure communication platforms, and
              enterprise-grade infrastructure—engineered for scalability,
              reliability, and full control.
            </p>

            <div className="mt-10 flex flex-wrap gap-3">
              <a
                href="#services"
                className="group inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-[#0e6305] hover:bg-[#0a4a04] text-white font-bold text-sm uppercase tracking-wider shadow-lg shadow-[#0e6305]/30 hover:shadow-[#0e6305]/50 transition-all hover:-translate-y-0.5"
              >
                Explore Services
                <ArrowRight className="w-4 h-4 transition group-hover:translate-x-1" />
              </a>
              <Link
                to="/register"
                className="group inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-[#d4af37] hover:bg-[#b8962e] text-black font-bold text-sm uppercase tracking-wider shadow-lg shadow-[#d4af37]/20 hover:shadow-[#d4af37]/40 transition-all hover:-translate-y-0.5"
              >
                <Rocket className="w-4 h-4" />
                Get Started
              </Link>
              <Link
                to="/contact"
                className="group inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-white/5 hover:bg-white/10 border border-white/20 hover:border-[#d4af37]/60 text-white font-bold text-sm uppercase tracking-wider transition-all hover:-translate-y-0.5"
              >
                <Phone className="w-4 h-4" />
                Contact Sales
              </Link>
            </div>

            {/* Quick stats strip */}
            <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl">
              {[
                { k: "99.99%", v: "Uptime SLA" },
                { k: "24/7", v: "Expert Support" },
                { k: "7+", v: "Service Categories" },
                { k: "Full", v: "API Access" },
              ].map((s) => (
                <div
                  key={s.v}
                  className="border-l-2 border-[#d4af37]/60 pl-4"
                >
                  <div className="text-2xl md:text-3xl font-black text-white">
                    {s.k}
                  </div>
                  <div className="text-xs uppercase tracking-widest text-slate-400 mt-1">
                    {s.v}
                  </div>
                </div>
              ))}
            </div>
          </AnimateIn>
        </div>

        {/* Subtle bottom fade into next section */}
        <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-b from-transparent to-black pointer-events-none" />
      </section>

      {/* ==================================================================== */}
      {/*  CORE SERVICE CATEGORIES                                            */}
      {/* ==================================================================== */}
      <section
        id="services"
        className="relative bg-black text-white py-20 md:py-28"
      >
        <div
          aria-hidden="true"
          className="absolute inset-0 bg-gradient-to-b from-black via-[#040d06] to-black"
        />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn>
            <div className="max-w-3xl">
              <p className="text-[#d4af37] text-sm font-bold uppercase tracking-[0.25em]">
                Core Service Categories
              </p>
              <h2 className="mt-3 text-3xl md:text-4xl font-black">
                Everything you need to run a modern business online.
              </h2>
              <p className="mt-4 text-slate-400 text-base md:text-lg leading-relaxed">
                From bare-metal compute to messaging APIs, every DoItEasy
                service is built to the same enterprise standard: full control,
                measurable performance, and a support team that answers.
              </p>
            </div>
          </AnimateIn>

          <div className="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {SERVICES.map((svc, idx) => (
              <AnimateIn key={svc.id} delay={idx * 60}>
                <ServiceCard service={svc} index={idx + 1} />
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ==================================================================== */}
      {/*  COMPARISON                                                         */}
      {/* ==================================================================== */}
      <section className="relative bg-gradient-to-b from-black via-[#031a05] to-black text-white py-20 md:py-24">
        <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn>
            <div className="text-center max-w-2xl mx-auto">
              <p className="text-[#d4af37] text-sm font-bold uppercase tracking-[0.25em]">
                Why Choose DoItEasy
              </p>
              <h2 className="mt-3 text-3xl md:text-4xl font-black">
                Built differently. Priced fairly. Supported properly.
              </h2>
              <p className="mt-4 text-slate-400 leading-relaxed">
                Here&apos;s how our platform stacks up against what most
                providers consider &ldquo;standard&rdquo;.
              </p>
            </div>
          </AnimateIn>

          <AnimateIn>
            <div className="mt-12 rounded-2xl border border-white/10 bg-gradient-to-br from-white/[0.04] to-transparent backdrop-blur-sm overflow-hidden shadow-2xl shadow-black/50">
              {/* Table header */}
              <div className="hidden md:grid grid-cols-12 gap-4 px-6 py-4 bg-black/60 border-b border-white/10">
                <div className="col-span-4 text-xs uppercase tracking-widest text-slate-400 font-bold">
                  Feature
                </div>
                <div className="col-span-4 text-xs uppercase tracking-widest text-[#d4af37] font-bold flex items-center gap-2">
                  <Crown className="w-3.5 h-3.5" /> DoItEasy
                </div>
                <div className="col-span-4 text-xs uppercase tracking-widest text-slate-500 font-bold">
                  Typical Providers
                </div>
              </div>

              {COMPARE_ROWS.map((row, i) => {
                const Icon = row.icon;
                return (
                  <div
                    key={row.feature}
                    className={`grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-4 px-6 py-5 items-center ${
                      i !== COMPARE_ROWS.length - 1
                        ? "border-b border-white/5"
                        : ""
                    } hover:bg-white/[0.02] transition`}
                  >
                    <div className="md:col-span-4 flex items-center gap-3">
                      <div className="w-9 h-9 rounded-lg bg-[#0e6305]/20 border border-[#0e6305]/40 flex items-center justify-center shrink-0">
                        <Icon className="w-4 h-4 text-[#22c55e]" />
                      </div>
                      <span className="font-semibold text-white">
                        {row.feature}
                      </span>
                    </div>
                    <div className="md:col-span-4 flex items-center gap-2 text-sm">
                      <CheckCircle2 className="w-4 h-4 text-[#22c55e] shrink-0" />
                      <span className="font-semibold text-white">
                        {row.doiteasy}
                      </span>
                    </div>
                    <div className="md:col-span-4 flex items-center gap-2 text-sm">
                      <XCircle className="w-4 h-4 text-slate-600 shrink-0" />
                      <span className="text-slate-500">{row.typical}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* ==================================================================== */}
      {/*  CUSTOMER TESTIMONIALS                                              */}
      {/* ==================================================================== */}
      <TestimonialsCarousel />

      {/* ==================================================================== */}
      {/*  BOTTOM CTA                                                         */}
      {/* ==================================================================== */}
      <section className="relative bg-black text-white py-20 md:py-28 overflow-hidden">
        <div
          aria-hidden="true"
          className="absolute inset-0 bg-gradient-to-br from-[#031a05] via-black to-[#05130a]"
        />
        <div
          aria-hidden="true"
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] rounded-full bg-[#0e6305]/20 blur-[160px]"
        />
        <div className="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <AnimateIn>
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-[#d4af37]/40 bg-[#d4af37]/5 text-[#f0d674] text-xs font-bold uppercase tracking-widest mb-6">
              <Sparkles className="w-3.5 h-3.5" />
              Ready when you are
            </div>
            <h2 className="text-3xl md:text-5xl font-black leading-tight">
              Start Building Your{" "}
              <span className="bg-gradient-to-r from-[#22c55e] to-[#d4af37] bg-clip-text text-transparent">
                Infrastructure
              </span>{" "}
              Today
            </h2>
            <p className="mt-5 text-slate-300/90 text-lg max-w-2xl mx-auto leading-relaxed">
              Launch your services with DoItEasy and gain full control,
              performance, and scalability—with a team that treats your uptime
              like our own.
            </p>

            <div className="mt-10 flex flex-wrap gap-3 justify-center">
              <Link
                to="/register"
                className="group inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-[#0e6305] hover:bg-[#0a4a04] text-white font-bold text-sm uppercase tracking-wider shadow-lg shadow-[#0e6305]/30 hover:shadow-[#0e6305]/50 transition-all hover:-translate-y-0.5"
              >
                <Rocket className="w-4 h-4" />
                Get Started Now
                <ArrowRight className="w-4 h-4 transition group-hover:translate-x-1" />
              </Link>
              <Link
                to="/contact"
                className="group inline-flex items-center gap-2 px-6 py-3.5 rounded-full bg-[#d4af37] hover:bg-[#b8962e] text-black font-bold text-sm uppercase tracking-wider shadow-lg shadow-[#d4af37]/20 hover:shadow-[#d4af37]/40 transition-all hover:-translate-y-0.5"
              >
                <Phone className="w-4 h-4" />
                Contact Sales
              </Link>
              <Link
                to="/pricing"
                className="group inline-flex items-center gap-2 px-6 py-3.5 rounded-full !bg-transparent !hover:bg-transparent border border-white/20 hover:border-[#d4af37]/60 text-white hover:text-[#d4af37] font-bold text-sm uppercase tracking-wider transition-all hover:-translate-y-0.5"
              >
                <DollarSign className="w-4 h-4" />
                View Pricing
              </Link>
            </div>
          </AnimateIn>
        </div>
      </section>
    </SiteLayout>
  );
}

/* -------------------------------------------------------------------------- */
/*  ServiceCard — dark premium card with gold numbering + green hover glow   */
/* -------------------------------------------------------------------------- */

function ServiceCard({
  service,
  index,
}: {
  service: Service;
  index: number;
}) {
  const Icon = service.icon;
  return (
    <div className="group relative h-full rounded-2xl border border-white/10 bg-gradient-to-br from-white/[0.04] to-white/[0.01] backdrop-blur-sm overflow-hidden transition-all duration-500 hover:border-[#0e6305]/60 hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0_0_40px_-5px_rgba(34,197,94,0.35)]">
      {/* Hover glow overlay */}
      <div
        aria-hidden="true"
        className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-[#0e6305]/15 via-transparent to-[#d4af37]/10 pointer-events-none"
      />
      {/* Gold corner accent */}
      <div
        aria-hidden="true"
        className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-[#d4af37]/25 to-transparent pointer-events-none"
      />

      {/* Tag */}
      {service.tag && (
        <span className="absolute top-4 right-4 z-10 text-[10px] font-black uppercase tracking-widest px-2.5 py-1 rounded-full bg-[#d4af37] text-black shadow">
          {service.tag}
        </span>
      )}

      <div className="relative p-7 flex flex-col h-full">
        {/* Icon + index number */}
        <div className="flex items-start justify-between">
          <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-[#0e6305] to-[#063b03] flex items-center justify-center shadow-lg shadow-[#0e6305]/30 group-hover:scale-110 transition-transform duration-500">
            <Icon className="w-7 h-7 text-white" />
          </div>
          <span className="text-4xl font-black text-transparent bg-gradient-to-br from-[#d4af37]/60 to-[#d4af37]/10 bg-clip-text leading-none select-none">
            {String(index).padStart(2, "0")}
          </span>
        </div>

        {/* Title + description */}
        <h3 className="mt-5 text-xl font-black text-white leading-snug group-hover:text-[#f0d674] transition-colors">
          {service.title}
        </h3>
        <p className="mt-2 text-sm text-slate-400 leading-relaxed">
          {service.description}
        </p>

        {/* Features */}
        <div className="mt-5">
          <p className="text-[10px] font-bold uppercase tracking-widest text-[#d4af37] mb-3">
            Key Features
          </p>
          <ul className="space-y-2">
            {service.features.map((f) => (
              <li
                key={f}
                className="flex items-start gap-2 text-sm text-slate-300"
              >
                <Check className="w-4 h-4 text-[#22c55e] shrink-0 mt-0.5" />
                <span>{f}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* Use cases */}
        <div className="mt-5 pt-5 border-t border-white/5">
          <p className="text-[10px] font-bold uppercase tracking-widest text-slate-500 mb-2">
            Use Cases
          </p>
          <div className="flex flex-wrap gap-1.5">
            {service.useCases.map((u) => (
              <span
                key={u}
                className="text-[11px] font-medium px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-slate-300"
              >
                {u}
              </span>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div className="mt-6 pt-5 border-t border-white/5 flex-1 flex items-end">
          <Link
            to={service.cta.href}
            className="group/btn inline-flex items-center gap-2 text-sm font-bold text-[#22c55e] hover:text-[#d4af37] transition-colors"
          >
            {service.cta.label}
            <ArrowRight className="w-4 h-4 transition-transform group-hover/btn:translate-x-1" />
          </Link>
        </div>
      </div>
    </div>
  );
}