"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import Link from "next/link";
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import { HardDrive, Cloud, Users, ShieldCheck } from 'lucide-react';

interface FooterProps {
  brandName?: string;
  navItems: Array<{ name: string; href: string; }>;
}

const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navItems }) => {
  return (
    <footer className="w-full py-8 bg-card text-foreground border-t border-accent mt-16">
      <div className="mx-auto px-4 md:px-6 max-w-7xl flex flex-col md:flex-row justify-between items-center gap-4">
        <div className="text-lg font-bold">
          {brandName}
        </div>
        <nav className="flex flex-wrap justify-center gap-6">
          {navItems.map((item) => (
            <Link key={item.href} href={item.href} className="text-foreground hover:text-primary-cta">
              {item.name}
            </Link>
          ))}
        </nav>
        <div className="text-sm text-foreground/80">
          © {new Date().getFullYear()} {brandName}. All rights reserved.
        </div>
      </div>
    </footer>
  );
};

export default function ServicesPage() {
  const navItems = [
    {name: "Home", id: "home", href: "/"},
    {name: "About us", id: "about", href: "/about"},
    {name: "Services", id: "services", href: "/services"},
    {name: "Products", id: "products", href: "/products"},
    {name: "Achievements", id: "achievements", href: "/portfolio"},
    {name: "News", id: "news", href: "/portfolio"},
    {name: "Contact us", id: "contact", href: "/contact"}
  ];

  const navbarProps = {
    brandName: "Nexsoft Australia",    navItems: navItems,
    button: {text: "Get a Quote", href: "/contact"}
  };

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmall"
      background="blurBottom"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay {...navbarProps} />
      </div>
      <div id="services-features" data-section="services-features">
        <FeatureCardSix
          tag="What We Do"
          title="Comprehensive Digital Solutions"
          description="From concept to deployment, we deliver tailored services designed to meet your unique business needs."
          features={[
            { id: 1, title: 'Custom Software Development', description: 'Building bespoke applications that drive efficiency.', imageSrc: 'https://cdn.pixabay.com/photo/2016/03/09/09/16/programmer-1246761_960_720.jpg', imageAlt: 'Software Development' },
            { id: 2, title: 'Cloud Solutions & Migration', description: 'Leverage the power of the cloud for scalability and security.', imageSrc: 'https://cdn.pixabay.com/photo/2016/11/19/23/00/data-1840003_960_720.jpg', imageAlt: 'Cloud Solutions' },
            { id: 3, title: 'IT Consulting & Strategy', description: 'Expert guidance to optimize your technology roadmap.', imageSrc: 'https://cdn.pixabay.com/photo/2015/07/02/10/44/laptop-828551_960_720.jpg', imageAlt: 'IT Consulting' },
            { id: 4, title: 'Cybersecurity & Data Protection', description: 'Protect your valuable assets with robust security measures.', imageSrc: 'https://cdn.pixabay.com/photo/2017/01/17/14/45/cyber-security-1987570_960_720.jpg', imageAlt: 'Cybersecurity' }
          ]}
          useInvertedBackground={true}
          textboxLayout={'default'}
        />
      </div>
      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Flexible Service Plans"
          description="Choose a plan that scales with your business, or let's create a custom solution."
          plans={[
            {
              id: 'basic',
              tag: 'Starter',
              price: '$999',
              period: '/month',
              description: 'Ideal for small businesses and startups.',
              button: { text: 'Get Started', href: '#' },
              featuresTitle: 'Includes:',
              features: ['Custom Dev (10 hrs)', 'Basic Cloud Setup', 'Email Support']
            },
            {
              id: 'pro',
              tag: 'Professional',
              price: '$2499',
              period: '/month',
              description: 'For growing businesses requiring more comprehensive support.',
              button: { text: 'Learn More', href: '#' },
              featuresTitle: 'Includes:',
              features: ['Custom Dev (30 hrs)', 'Advanced Cloud Mgmt', 'Priority Support', 'Monthly Reports']
            },
            {
              id: 'enterprise',
              tag: 'Enterprise',
              price: 'Custom',
              period: '',
              description: 'Tailored solutions for large organizations with complex needs.',
              button: { text: 'Contact Us', href: '/contact' },
              featuresTitle: 'Includes:',
              features: ['Dedicated Team', 'Full Cloud Suite', '24/7 Support', 'Strategic Consulting']
            }
          ]}
          animationType={'slide-up'}
          useInvertedBackground={false}
          textboxLayout={'default'}
        />
      </div>
      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Got Questions About Our Services?"
          sideDescription="We're here to provide clarity and ensure you have all the information you need."
          faqs={[
            { id: '1', title: 'How does your custom software development process work?', content: 'Our process involves discovery, design, development, testing, and deployment, ensuring a tailored solution that meets your specific needs.' },
            { id: '2', title: 'What cloud platforms do you support?', content: 'We specialize in AWS, Azure, and Google Cloud Platform, providing flexible and scalable cloud solutions.' },
            { id: '3', title: 'Can you help with legacy system migration?', content: 'Yes, we have extensive experience in migrating legacy systems to modern cloud infrastructure with minimal disruption.' },
            { id: '4', title: 'What is your approach to cybersecurity?', content: 'We implement multi-layered security strategies, including threat detection, data encryption, and regular security audits to protect your systems.' }
          ]}
          faqsAnimation={'slide-up'}
          useInvertedBackground={true}
        />
      </div>
      <Footer brandName="Nexsoft Australia" navItems={navItems} />
    </ThemeProvider>
  );
}
