"use client";

import { ThemeProvider } from "next-themes";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import SplitAbout from '@/components/sections/about/SplitAbout';
import { ArrowRight, Sparkles, CheckCircle } from 'lucide-react';

const serviceCategories = [
  {
    id: "general-supplies",    tag: "GS",    name: "General Supplies",    description: "Providing a wide range of essential goods, equipment, and materials to support various operational needs across different sectors.",    bulletPoints: [
      "Office Stationery",      "IT Hardware & Software",      "Cleaning & Janitorial Supplies",      "Safety & PPE",      "Building Materials",      "Consumables & Perishables"
    ],
    imageSrc: "https://via.placeholder.com/800x600?text=General+Supplies"
  },
  {
    id: "logistics-transport",    tag: "LT",    name: "Logistics & Transport",    description: "Comprehensive logistics solutions including cargo handling, transportation, warehousing, and supply chain management to ensure efficient movement of goods.",    bulletPoints: [
      "Freight Forwarding",      "Ground Transportation",      "Air & Sea Cargo",      "Warehousing & Distribution",      "Customs Clearance",      "Fleet Management"
    ],
    imageSrc: "https://via.placeholder.com/800x600?text=Logistics+%26+Transport"
  },
  {
    id: "aviation-technical-support",    tag: "AT",    name: "Aviation & Technical Support",    description: "Specialized services for the aviation sector, encompassing aircraft maintenance, ground support equipment, and technical personnel.",    bulletPoints: [
      "Aircraft Maintenance",      "GSE Supply & Maintenance",      "Technical Personnel Provision",      "Aviation Fuel Services",      "Flight Operations Support",      "Airfield Management"
    ],
    imageSrc: "https://via.placeholder.com/800x600?text=Aviation+%26+Technical+Support"
  },
  {\n    id: "ict-digital-solutions",    tag: "ID",    name: "ICT & Digital Solutions",    description: "Cutting-edge information and communication technology services, including network infrastructure, software development, and digital transformation initiatives.",    bulletPoints: [
      "Network Design & Implementation",      "Software Development",      "Cybersecurity",      "Cloud Services",      "IT Consulting",      "Data Management"
    ],
    imageSrc: "https://via.placeholder.com/800x600?text=ICT+%26+Digital+Solutions"
  },
  {
    id: "construction-facility-maintenance",    tag: "CF",    name: "Construction & Facility Maintenance",    description: "Expert services in construction, renovation, and ongoing facility maintenance to ensure optimal functionality and safety of infrastructure.",    bulletPoints: [
      "Building Construction",      "Renovation & Remodeling",      "HVAC Maintenance",      "Electrical & Plumbing",      "Landscaping & Groundskeeping",      "Integrated Facility Management"
    ],
    imageSrc: "https://via.placeholder.com/800x600?text=Construction+%26+Facility+Maintenance"
  },
  {
    id: "consultancy-project-support",    tag: "CP",    name: "Consultancy & Project Support",    description: "Strategic advisory and hands-on project management support to help organizations achieve their goals efficiently and effectively.",    bulletPoints: [
      "Strategic Planning",      "Project Management",      "Risk Assessment",      "Feasibility Studies",      "Financial Advisory",      "HR & Training Solutions"
    ],
    imageSrc: "https://via.placeholder.com/800x600?text=Consultancy+%26+Project+Support"
  },
  {
    id: "specialized-tender-based-services",    tag: "ST",    name: "Specialized Tender-Based Services",    description: "Tailored services delivered through competitive tendering, offering bespoke solutions to meet unique client requirements.",    bulletPoints: [
      "Custom Procurement Solutions",      "Public Sector Bids",      "Private Sector Contracts",      "Proposal Development",      "Contract Negotiation",      "Specialized Project Execution"
    ],
    imageSrc: "https://via.placeholder.com/800x600?text=Specialized+Tender-Based+Services"
  }
];

export default function ServicesPage() {
  const heroCarouselItems = [
    { imageSrc: "https://via.placeholder.com/400x300?text=Service+Image+1", imageAlt: "Service Image 1" },
    { imageSrc: "https://via.placeholder.com/400x300?text=Service+Image+2", imageAlt: "Service Image 2" },
    { imageSrc: "https://via.placeholder.com/400x300?text=Service+Image+3", imageAlt: "Service Image 3" },
  ];

  return (
    <ThemeProvider
      attribute="class"
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <NavbarStyleCentered
        navItems={[
          { name: "Home", id: "/" },
          { name: "Services", id: "/services" },
          { name: "General Supplies", id: "#general-supplies" },
          { name: "Logistics", id: "#logistics-transport" },
          { name: "Aviation", id: "#aviation-technical-support" },
          { name: "ICT", id: "#ict-digital-solutions" },
          { name: "Construction", id: "#construction-facility-maintenance" },
          { name: "Consultancy", id: "#consultancy-project-support" },
          { name: "Specialized Tenders", id: "#specialized-tender-based-services" }
        ]}
        brandName="OurCompany"
        logoSrc="https://via.placeholder.com/50x50?text=Logo"
        button={{ text: "Contact Us", href: "#contact" }}
      />
      <div id="services-page-wrapper">
        <HeroSplitDoubleCarousel
          title="Our Comprehensive Services"
          description="Delivering tailored solutions across various sectors, from essential supplies to specialized project support. We are committed to excellence and efficiency in every service we provide."
          tag="Trusted Solutions"
          tagIcon={Sparkles}
          background={{ variant: 'animated-grid' }}
          buttons={[{ text: "Explore Our Services", href: "#general-supplies" }]}
          leftCarouselItems={heroCarouselItems}
          rightCarouselItems={heroCarouselItems}
          carouselPosition="right"
          buttonAnimation="slide-up"
        />

        {serviceCategories.map((service) => (
          <div id={service.id} data-section={service.id} key={service.id}>
            <SplitAbout
              title={service.name}
              description={service.description}
              tag={service.tag}
              bulletPoints={service.bulletPoints.map(point => ({ title: point, description: '', icon: CheckCircle }))}
              buttons={[{ text: "Request This Service →", href: "#contact", icon: ArrowRight }]} 
              imageSrc={service.imageSrc}
              imageAlt={service.name}
              imagePosition="right"
              useInvertedBackground={false}
              textboxLayout="default"
              mediaAnimation="slide-up"
              buttonAnimation="slide-up"
            />
          </div>
        ))}
      </div>
    </ThemeProvider>
  );
}
