import { Metadata } from "next";
import Link from "next/link";
import { Database, HardDrive, CheckCircle, ArrowLeft, ArrowRight, History, FileUp, MoveRight } from "lucide-react";
import { Button } from "@/components/ui/button";

export const metadata: Metadata = {
  title: "Data Services | DWD Consultancy",
  description: "Comprehensive data archival, migration and recovery services to keep your information secure and accessible.",
  keywords: ["data archival", "data migration", "data recovery", "backup solutions", "disaster recovery", "long-term storage"],
  openGraph: {
    title: "Data Services | DWD Consultancy",
    description: "Comprehensive data archival, migration and recovery services to keep your information secure and accessible.",
    url: "https://dwd.siliconpin.com/services/data-services",
    images: [
      {
        url: "/og-image-data.jpg",
        width: 1200,
        height: 630,
        alt: "DWD Consultancy Data Services",
      },
    ],
  },
};

// Custom icon for data migration
const DataMigrationIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className="h-5 w-5 text-netbirdOrange"
  >
    <path d="M10 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4"></path>
    <path d="M18 9h-8"></path>
    <path d="m15 6-3 3 3 3"></path>
    <path d="M14 21h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-4"></path>
    <path d="M6 15h8"></path>
    <path d="m9 18 3-3-3-3"></path>
  </svg>
);

export default function DataServicesPage() {
  const benefits = [
    "Secure, reliable data preservation for compliance and business continuity",
    "Seamless migration with minimal downtime or disruption",
    "Expert recovery of corrupted or lost data",
    "Customized solutions that scale with your business needs",
    "Comprehensive documentation and knowledge transfer",
    "Reduced risk of data loss and associated costs",
    "Compliance with industry regulations and standards",
    "Cost-effective long-term storage strategies",
  ];

  const offerings = [
    {
      title: "Data Archival",
      description: "Secure, long-term storage solutions for your valuable data assets.",
      icon: HardDrive,
    },
    {
      title: "Data Migration",
      description: "Seamless transfer of data between platforms and environments.",
      icon: DataMigrationIcon,
      isCustomIcon: true,
    },
    {
      title: "Data Recovery",
      description: "Expert retrieval of lost or corrupted data from various storage media.",
      icon: FileUp, // Changed from FileRecovery to FileUp
    },
    {
      title: "Backup Solutions",
      description: "Robust backup strategies to ensure business continuity and disaster recovery.",
      icon: Database,
    },
  ];

  // Rest of the component implementation remains the same
  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">
                Data Services
              </span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-white leading-tight">
              Keeping Your <span className="gradient-text">Data</span> Resilient
            </h1>
            <p className="text-xl text-white/80 mb-8 max-w-2xl">
              We provide comprehensive data archival, migration, and recovery services to ensure
              your valuable information remains secure, accessible, and protected against all types of failures.
            </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 Data Services
              </h2>
              <p className="text-white/80 mb-8">
                In today's digital landscape, your data is one of your most valuable assets. Our data
                services ensure that this critical information is properly managed, protected, and
                available when you need it, regardless of unforeseen circumstances.
              </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.isCustomIcon ? (
                        <offering.icon />
                      ) : (
                        <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">
                Our Data Approach
              </h2>
              <p className="text-white/80 mb-6">
                We take a methodical, security-focused approach to all data services. Our team begins
                with a comprehensive assessment of your current data landscape, develops a tailored
                strategy, and implements solutions with minimal disruption to your operations.
              </p>
              <p className="text-white/80 mb-8">
                All our processes are fully documented, and we provide detailed knowledge transfer to
                ensure your team understands how to leverage the systems we implement.
              </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 Data Services</h3>
                <p className="text-white/80 mb-6">
                  Partnering with DWD Consultancy for your data needs provides numerous advantages:
                </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 Data Needs
                  <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: Critical Data Recovery</h3>
                  <p className="text-white/80 mb-6">
                    A manufacturing company experienced a catastrophic system failure that compromised
                    their production database and threatened to halt operations.
                  </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 company's database had become corrupted, and their backup system had not been
                      properly maintained. They faced weeks of downtime and potential loss of customer orders.
                    </p>

                    <h4 className="text-white font-medium mb-2">Our Solution</h4>
                    <p className="text-white/70 text-sm mb-4">
                      Our data recovery team worked around the clock to recover the corrupted database,
                      reconstructing missing data using forensic techniques and partial backups.
                    </p>

                    <h4 className="text-white font-medium mb-2">The Results</h4>
                    <p className="text-white/70 text-sm">
                      We recovered most of the critical data within 48 hours, allowing operations to
                      resume with minimal disruption. We also implemented a robust backup strategy to
                      prevent future incidents.
                    </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">
                        <History className="h-6 w-6 text-netbirdOrange" />
                      </div>
                      <div>
                        <h4 className="text-white font-medium">Concerned about data loss?</h4>
                        <p className="text-white/70 text-sm">
                          Request a free data resilience assessment for your organization.
                        </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">Our Data Process</h3>

                  <div className="space-y-6">
                    <div className="flex">
                      <div className="mr-4 flex flex-col items-center">
                        <div className="w-8 h-8 bg-[#1c2640] rounded-full flex items-center justify-center border border-netbirdOrange/30 text-white font-medium">1</div>
                        <div className="w-0.5 h-full bg-white/10 my-2 flex-grow"></div>
                      </div>
                      <div>
                        <h4 className="text-white font-medium mb-2">Assessment</h4>
                        <p className="text-white/70 text-sm">
                          We evaluate your current data infrastructure, identify vulnerabilities,
                          and understand your business requirements.
                        </p>
                      </div>
                    </div>

                    <div className="flex">
                      <div className="mr-4 flex flex-col items-center">
                        <div className="w-8 h-8 bg-[#1c2640] rounded-full flex items-center justify-center border border-netbirdOrange/30 text-white font-medium">2</div>
                        <div className="w-0.5 h-full bg-white/10 my-2 flex-grow"></div>
                      </div>
                      <div>
                        <h4 className="text-white font-medium mb-2">Strategy Development</h4>
                        <p className="text-white/70 text-sm">
                          Our team designs a tailored approach that addresses your specific data needs
                          and challenges.
                        </p>
                      </div>
                    </div>

                    <div className="flex">
                      <div className="mr-4 flex flex-col items-center">
                        <div className="w-8 h-8 bg-[#1c2640] rounded-full flex items-center justify-center border border-netbirdOrange/30 text-white font-medium">3</div>
                        <div className="w-0.5 h-full bg-white/10 my-2 flex-grow"></div>
                      </div>
                      <div>
                        <h4 className="text-white font-medium mb-2">Implementation</h4>
                        <p className="text-white/70 text-sm">
                          We execute the data services with minimal disruption to your operations,
                          following industry best practices.
                        </p>
                      </div>
                    </div>

                    <div className="flex">
                      <div className="mr-4 flex flex-col items-center">
                        <div className="w-8 h-8 bg-[#1c2640] rounded-full flex items-center justify-center border border-netbirdOrange/30 text-white font-medium">4</div>
                      </div>
                      <div>
                        <h4 className="text-white font-medium mb-2">Verification & Ongoing Support</h4>
                        <p className="text-white/70 text-sm">
                          We rigorously test all implementations and provide ongoing support to
                          ensure your data remains resilient and accessible.
                        </p>
                      </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">FOSS Support</h3>
                <p className="text-white/70 text-sm mb-4">
                  Professional support for free and open-source software with customized development.
                </p>
                <Link href="/services/foss-support">
                  <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>
  );
}