"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { HardDrive, GitMerge, Database, ArrowRight, Wrench, HelpCircle, Download, LucideIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";

const ServiceCard = ({
  icon: Icon,
  title,
  description,
  features,
  href,
}: {
  icon: LucideIcon;
  title: string;
  description: string;
  features: string[];
  href: string;
}) => {
  return (
    <Card className="bg-[#0d1324] border border-white/10 shadow-xl overflow-hidden group">
      <div className="absolute -top-10 -right-10 w-20 h-20 bg-netbirdOrange/20 rounded-full blur-2xl group-hover:w-32 group-hover:h-32 transition-all duration-500"></div>
      <CardHeader className="pb-2">
        <div className="w-12 h-12 bg-[#1c2640] rounded-lg flex items-center justify-center mb-4">
          <Icon className="h-6 w-6 text-netbirdOrange" />
        </div>
        <CardTitle className="text-white text-xl">{title}</CardTitle>
        <CardDescription className="text-white/70">{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <ul className="space-y-2 mb-6">
          {features.map((feature, index) => (
            <li key={index} className="flex items-start">
              <div className="mr-2 mt-1 text-netbirdOrange">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <polyline points="20 6 9 17 4 12" />
                </svg>
              </div>
              <span className="text-white/80 text-sm">{feature}</span>
            </li>
          ))}
        </ul>
        <Link href={href}>
          <Button variant="ghost" className="group px-0 text-white hover:text-netbirdOrange">
            Learn more
            <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
          </Button>
        </Link>
      </CardContent>
    </Card>
  );
};

const ServicesSection = () => {
  const services = [
    {
      icon: HardDrive,
      title: "Hardware Solutions",
      description: "Ready-to-use hardware with preset software",
      href: "/services/hardware-solutions",
      features: [
        "Preconfigured systems tailored to your needs",
        "Full freedom and ownership",
        "No vendor lock-in or hidden costs",
        "Enterprise-grade hardware with warranty"
      ]
    },
    {
      icon: GitMerge,
      title: "FOSS Support",
      description: "Paid support for open source software",
      href: "/services/foss-support",
      features: [
        "Professional support for free and open-source software",
        "Customized development for your specific needs",
        "Integration with existing systems",
        "Regular maintenance and updates"
      ]
    },
    {
      icon: Database,
      title: "Data Services",
      description: "Comprehensive data management solutions",
      href: "/services/data-services",
      features: [
        "Secure data archival and backup solutions",
        "Data migration between platforms",
        "Recovery of lost or corrupted data",
        "Long-term storage and retrieval systems"
      ]
    }
  ];

  return (
    <section id="services" className="py-24 relative">
      {/* Background Pattern */}
      <div className="absolute inset-0 z-0 opacity-10">
        <div
          className="h-full w-full"
          style={{
            backgroundImage:
              "linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px)",
            backgroundSize: "50px 50px",
          }}
        />
      </div>

      <div className="container mx-auto relative z-10">
        <div className="text-center mb-16">
          <div className="flex items-center justify-center mb-6">
            <div className="h-1 w-10 bg-netbirdOrange rounded-full mr-3"></div>
            <span className="text-sm text-white/80 uppercase tracking-wider font-medium">
              Our Services
            </span>
            <div className="h-1 w-10 bg-netbirdOrange rounded-full ml-3"></div>
          </div>
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Comprehensive <span className="gradient-text">Technology</span> Solutions
          </h2>
          <p className="text-white/70 max-w-2xl mx-auto">
            We offer a range of services designed to keep your data secure, accessible, and resilient
            against all types of failures and disruptions.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <ServiceCard
              key={index}
              icon={service.icon}
              title={service.title}
              description={service.description}
              features={service.features}
              href={service.href}
            />
          ))}
        </div>

        {/* Extra Features */}
        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl flex items-start">
            <div className="mr-4 p-3 bg-[#1c2640] rounded-lg">
              <Wrench className="h-6 w-6 text-netbirdOrange" />
            </div>
            <div>
              <h3 className="text-white font-semibold mb-2">Custom Development</h3>
              <p className="text-white/70 text-sm">
                Tailored software solutions built to your exact specifications and requirements.
              </p>
            </div>
          </div>

          <div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl flex items-start">
            <div className="mr-4 p-3 bg-[#1c2640] rounded-lg">
              <HelpCircle className="h-6 w-6 text-netbirdOrange" />
            </div>
            <div>
              <h3 className="text-white font-semibold mb-2">24/7 Support</h3>
              <p className="text-white/70 text-sm">
                Round-the-clock technical assistance from our team of experienced professionals.
              </p>
            </div>
          </div>

          <div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl flex items-start">
            <div className="mr-4 p-3 bg-[#1c2640] rounded-lg">
              <Download className="h-6 w-6 text-netbirdOrange" />
            </div>
            <div>
              <h3 className="text-white font-semibold mb-2">Seamless Integration</h3>
              <p className="text-white/70 text-sm">
                Effortless integration with your existing infrastructure and workflows.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ServicesSection;