"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Zap, BarChart3, Rocket } from "lucide-react";

export default function ServicesPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Pricing", id: "pricing" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="LogisticsPro" navItems={navItems} />
      </div>

      <div id="services-detail" data-section="services-detail">
        <FeatureCardSeven
          title="Complete Logistics Solutions"
          description="Comprehensive services designed to optimize every aspect of your supply chain operations and reduce overhead costs."
          tag="Our Service Suite"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="split"
          useInvertedBackground={true}
          features={[
            {
              id: 1,
              title: "Express Freight Forwarding",              description: "Fast and reliable international freight services with guaranteed delivery windows and full tracking capabilities.",              imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-international-trade_23-2149164061.jpg",              imageAlt: "Express freight forwarding"},
            {
              id: 2,
              title: "Inventory Management Solutions",              description: "Automated warehouse management systems with real-time inventory tracking and smart replenishment strategies.",              imageSrc: "http://img.b2bpic.net/free-photo/home-business-employees-preparing-products-boxes-local-delivery_482257-132083.jpg",              imageAlt: "Inventory management"},
            {
              id: 3,
              title: "Same-Day Local Delivery",              description: "Urgent local deliveries with real-time driver tracking and customer notifications for maximum transparency.",              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-delivery-people_23-2149103420.jpg",              imageAlt: "Same-day delivery"},
          ]}
          animationType="blur-reveal"
          buttons={[{ text: "Request Quote", href: "/contact" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="service-metrics" data-section="service-metrics">
        <MetricCardTwo
          title="Service Performance Metrics"
          description="Delivering excellence through measurable performance standards and continuous optimization."
          tag="Performance Stats"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",              value: "99.2%",              description: "Service Reliability"},
            {
              id: "2",              value: "4.8/5.0",              description: "Customer Rating"},
            {
              id: "3",              value: "2hr avg",              description: "Response Time"},
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          buttons={[{ text: "View SLAs", href: "#" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="services-cta" data-section="services-cta">
        <ContactCTA
          tag="Ready to Optimize Your Supply Chain?"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Get Your Custom Logistics Plan"
          description="Our logistics experts will assess your needs and create a tailored solution that maximizes efficiency and minimizes costs."
          buttons={[
            { text: "Book Consultation", href: "/contact" },
            { text: "Download Brochure", onClick: () => {} },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="LogisticsPro"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}