import { Metadata } from "next";
import Link from "next/link";
import { GitMerge, Code, CheckCircle, ArrowLeft, ArrowRight, BookOpen, ShieldCheck, Wrench } from "lucide-react";
import { Button } from "@/components/ui/button";

export const metadata: Metadata = {
  title: "FOSS Support | DWD Consultancy",
  description: "Professional support for free and open-source software (FOSS) with customized development and integration services.",
  keywords: ["FOSS support", "open source software", "Linux support", "custom development", "software integration", "open source maintenance"],
  openGraph: {
    title: "FOSS Support | DWD Consultancy",
    description: "Professional support for free and open-source software (FOSS) with customized development and integration services.",
    url: "https://dwdconsultancy.com/services/foss-support",
    images: [
      {
        url: "/og-image-foss.jpg",
        width: 1200,
        height: 630,
        alt: "DWD Consultancy FOSS Support",
      },
    ],
  },
};

export default function FOSSSupportPage() {
  const benefits = [
    "Enterprise-grade support for open-source technologies",
    "Custom feature development for open-source software",
    "Integration with existing business systems",
    "Regular maintenance and updates",
    "Security patches and vulnerability remediation",
    "Performance optimization",
    "Comprehensive documentation",
    "Knowledge transfer and team training",
  ];

  const offerings = [
    {
      title: "Linux System Support",
      description: "Expert support for various Linux distributions and environments.",
      icon: ShieldCheck,
    },
    {
      title: "Custom Development",
      description: "Tailored development to extend FOSS functionality for your needs.",
      icon: Code,
    },
    {
      title: "Integration Services",
      description: "Seamless integration of open-source tools with your existing systems.",
      icon: GitMerge,
    },
    {
      title: "Documentation & Training",
      description: "Comprehensive documentation and staff training for FOSS implementation.",
      icon: BookOpen,
    },
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative pt-32 pb-16 overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 z-0 opacity-20">
          <div className="absolute -top-40 -right-40 w-80 h-80 bg-netbirdOrange rounded-full blur-[100px]" />
          <div className="absolute bottom-0 right-1/3 w-60 h-60 bg-netbirdOrange/50 rounded-full blur-[100px]" />
        </div>

        <div className="container mx-auto relative z-10">
          <div className="mb-6">
            <Link href="/services" className="flex items-center text-white/70 hover:text-netbirdOrange transition-colors">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Services
            </Link>
          </div>

          <div className="max-w-3xl">
            <div className="flex items-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">
                FOSS Support
              </span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-white leading-tight">
              Professional <span className="gradient-text">Open Source</span> Support
            </h1>
            <p className="text-xl text-white/80 mb-8 max-w-2xl">
              We provide enterprise-grade support for free and open-source software (FOSS),
              with custom development capabilities to extend functionality for your specific needs.
            </p>
          </div>
        </div>
      </section>

      {/* Main Content */}
      <section className="py-16 relative">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
            {/* Left Column - Details */}
            <div>
              <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
                Our FOSS Support Services
              </h2>
              <p className="text-white/80 mb-8">
                Open-source software offers incredible value, flexibility, and freedom from vendor lock-in.
                However, organizations often need professional support to implement, customize, and maintain
                these solutions effectively. That's where we come in.
              </p>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
                {offerings.map((offering, index) => (
                  <div key={index} className="bg-[#0d1324] border border-white/10 p-5 rounded-xl">
                    <div className="w-10 h-10 bg-[#1c2640] rounded-lg flex items-center justify-center mb-4">
                      <offering.icon className="h-5 w-5 text-netbirdOrange" />
                    </div>
                    <h3 className="text-white font-semibold mb-2">{offering.title}</h3>
                    <p className="text-white/70 text-sm">{offering.description}</p>
                  </div>
                ))}
              </div>

              <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
                Why Choose Our FOSS Support
              </h2>
              <p className="text-white/80 mb-6">
                Our team consists of experienced developers and system administrators who are deeply
                familiar with a wide range of open-source technologies. We take pride in our ability
                to provide timely, effective support while respecting the principles of the open-source community.
              </p>
              <p className="text-white/80 mb-8">
                When you work with us, you get the best of both worlds: the freedom and cost-effectiveness
                of open-source software, combined with the reliability and peace of mind that comes with
                professional enterprise support.
              </p>

              <div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl mb-10">
                <h3 className="text-xl font-semibold text-white mb-4">Benefits of Our FOSS Support</h3>
                <p className="text-white/80 mb-6">
                  With our comprehensive FOSS support services, you'll gain:
                </p>

                <ul className="space-y-3">
                  {benefits.map((benefit, index) => (
                    <li key={index} className="flex items-start">
                      <CheckCircle className="mr-3 text-netbirdOrange h-5 w-5 mt-1 flex-shrink-0" />
                      <span className="text-white/80">{benefit}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <Link href="/contact">
                <Button className="bg-netbirdOrange hover:bg-netbirdOrange/90 text-white">
                  Discuss Your FOSS Requirements
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
            </div>

            {/* Right Column - Visual Elements */}
            <div className="relative">
              <div className="sticky top-32">
                <div className="relative bg-[#0d1324] border border-white/10 rounded-xl p-8 shadow-xl mb-8 overflow-hidden">
                  {/* Decorative elements */}
                  <div className="absolute -top-20 -right-20 w-40 h-40 bg-netbirdOrange rounded-full blur-[60px] opacity-20"></div>

                  <h3 className="text-xl font-semibold text-white mb-6">Case Study: Healthcare Provider</h3>
                  <p className="text-white/80 mb-6">
                    A regional healthcare provider needed to implement an open-source electronic health
                    record (EHR) system with custom features for their specific workflows.
                  </p>

                  <div className="mb-6">
                    <h4 className="text-white font-medium mb-2">The Challenge</h4>
                    <p className="text-white/70 text-sm mb-4">
                      The client needed specialized features not available in the standard distribution,
                      along with reliable ongoing support and security compliance.
                    </p>

                    <h4 className="text-white font-medium mb-2">Our Solution</h4>
                    <p className="text-white/70 text-sm mb-4">
                      We customized the open-source EHR platform, developed additional modules for their
                      specific requirements, and implemented a robust support and maintenance program.
                    </p>

                    <h4 className="text-white font-medium mb-2">The Results</h4>
                    <p className="text-white/70 text-sm">
                      The healthcare provider saved over $1.2 million compared to proprietary solutions,
                      while gaining a system perfectly tailored to their workflows with ongoing support.
                    </p>
                  </div>

                  <div className="p-4 bg-white/5 border border-white/10 rounded-lg">
                    <div className="flex items-center">
                      <div className="mr-4 p-3 bg-[#1c2640] rounded-full">
                        <Wrench className="h-6 w-6 text-netbirdOrange" />
                      </div>
                      <div>
                        <h4 className="text-white font-medium">Need custom FOSS development?</h4>
                        <p className="text-white/70 text-sm">
                          Let's discuss your requirements and how we can help.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="bg-[#0d1324] border border-white/10 rounded-xl p-6 shadow-xl">
                  <h3 className="text-xl font-semibold text-white mb-4">Technologies We Support</h3>

                  <div className="space-y-4">
                    <div>
                      <h4 className="text-white font-medium mb-2">Operating Systems</h4>
                      <div className="flex flex-wrap gap-2">
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Ubuntu</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Red Hat</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">CentOS</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Debian</span>
                      </div>
                    </div>

                    <div>
                      <h4 className="text-white font-medium mb-2">Databases</h4>
                      <div className="flex flex-wrap gap-2">
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">PostgreSQL</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">MySQL</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">MongoDB</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">MariaDB</span>
                      </div>
                    </div>

                    <div>
                      <h4 className="text-white font-medium mb-2">Web Technologies</h4>
                      <div className="flex flex-wrap gap-2">
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Apache</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Nginx</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Node.js</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Django</span>
                      </div>
                    </div>

                    <div>
                      <h4 className="text-white font-medium mb-2">Containerization</h4>
                      <div className="flex flex-wrap gap-2">
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Docker</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Kubernetes</span>
                        <span className="px-3 py-1 bg-[#1c2640] rounded-full text-sm text-white/90">Podman</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Related Services */}
          <div className="mt-20">
            <h2 className="text-2xl font-bold text-white mb-8">Related Services</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl">
                <h3 className="text-white font-semibold mb-3">Hardware Solutions</h3>
                <p className="text-white/70 text-sm mb-4">
                  Ready-to-use hardware with preset software and full freedom of ownership.
                </p>
                <Link href="/services/hardware-solutions">
                  <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>
              </div>

              <div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl">
                <h3 className="text-white font-semibold mb-3">Data Services</h3>
                <p className="text-white/70 text-sm mb-4">
                  Comprehensive data archival, migration, and recovery services to keep your information safe.
                </p>
                <Link href="/services/data-services">
                  <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>
              </div>

              <div className="bg-[#0d1324] border border-white/10 p-6 rounded-xl">
                <h3 className="text-white font-semibold mb-3">Custom Development</h3>
                <p className="text-white/70 text-sm mb-4">
                  Tailored software solutions designed to meet your organization's specific needs.
                </p>
                <Link href="/services/custom-development">
                  <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>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
