"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, TrendingUp } from "lucide-react";

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal 
          brandName="NEXUS DIGITAL"
          button={{
            text: "Start Project",
            href: "/contact"
          }}
          className="backdrop-blur-md bg-opacity-80"
          buttonClassName="px-6 py-2 rounded-full font-semibold"
          buttonTextClassName="text-sm font-medium"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne 
          title="Comprehensive Marketing Solutions"
          description="From strategic brand positioning to cutting-edge digital campaigns, we deliver integrated marketing solutions that drive measurable growth for forward-thinking enterprises."
          tag="Our Services"
          tagIcon={Sparkles}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Brand Strategy & Positioning",
              description: "Develop compelling brand narratives that resonate with your target audience and establish market authority through strategic positioning and messaging frameworks.",
              imageSrc: "https://img.b2bpic.net/free-vector/neon-business-cards-pack_23-2148566003.jpg",
              imageAlt: "Brand strategy and positioning services",
              button: { text: "Learn More", href: "/contact" }
            },
            {
              title: "Digital Marketing Campaigns",
              description: "Data-driven campaigns across social media, search, and display networks maximizing ROI and engagement through advanced targeting and optimization.",
              imageSrc: "https://img.b2bpic.net/free-vector/geometric-business-cards-template_23-2149151388.jpg",
              imageAlt: "Digital marketing campaign management",
              button: { text: "Get Started", href: "/contact" }
            },
            {
              title: "Content & Media Production",
              description: "Premium video, photography, and content creation that tells your brand story with cinematic excellence and drives meaningful engagement.",
              imageSrc: "https://img.b2bpic.net/free-vector/colorful-minimal-business-card-template_23-2148374363.jpg",
              imageAlt: "Content and media production services",
              button: { text: "View Work", href: "/portfolio" }
            }
          ]}
          buttons={[
            { text: "Schedule Consultation", href: "/contact" },
            { text: "View Case Studies", href: "/portfolio" }
          ]}
          containerClassName="max-w-7xl mx-auto"
          titleClassName="text-4xl md:text-6xl font-bold"
          descriptionClassName="text-base md:text-lg opacity-80 max-w-3xl"
          cardTitleClassName="text-xl font-bold mt-4"
          cardDescriptionClassName="text-sm opacity-75 leading-relaxed"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven 
          title="Proven Track Record"
          description="Our commitment to excellence is reflected in the measurable results we deliver for clients across diverse industries and market segments."
          tag="Performance Metrics"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="blur-reveal"
          gridVariant="four-items-2x2-equal-grid"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",
              value: "150+",
              title: "Successful Campaign Launches",
              items: [
                "Across 8+ Industries",
                "Global Reach",
                "Consistent Excellence"
              ]
            },
            {
              id: "2",
              value: "$85M+",
              title: "Total Client Revenue Generated",
              items: [
                "Documented ROI",
                "Performance-Driven",
                "Transparent Tracking"
              ]
            },
            {
              id: "3",
              value: "98%",
              title: "Client Satisfaction Rate",
              items: [
                "Long-term Partnerships",
                "Repeat Business",
                "Industry Leading"
              ]
            },
            {
              id: "4",
              value: "12+",
              title: "Awards & Industry Recognition",
              items: [
                "Marketing Excellence",
                "Innovation Leader",
                "Best Agency Wins"
              ]
            }
          ]}
          buttons={[
            { text: "View Results", href: "/portfolio" },
            { text: "Start Your Project", href: "/contact" }
          ]}
          containerClassName="max-w-7xl mx-auto"
          titleClassName="text-4xl md:text-5xl font-bold"
          descriptionClassName="text-base md:text-lg opacity-80 max-w-2xl"
          valueClassName="text-5xl font-bold text-cyan-400"
          metricTitleClassName="text-lg font-semibold mt-2"
          featureItemClassName="text-sm opacity-75 flex items-center gap-2"
        />
      </div>

      <FooterLogoEmphasis 
        logoText="NEXUS DIGITAL"
        columns={[
          {
            items: [
              { label: "Services", href: "/services" },
              { label: "Portfolio", href: "/portfolio" },
              { label: "About", href: "/about" }
            ]
          },
          {
            items: [
              { label: "Home", href: "/" },
              { label: "Contact", href: "/contact" },
              { label: "Case Studies", href: "/case-studies" }
            ]
          },
          {
            items: [
              { label: "Privacy Policy", href: "#privacy" },
              { label: "Terms & Conditions", href: "#terms" },
              { label: "Cookie Settings", href: "#cookies" }
            ]
          }
        ]}
        ariaLabel="Site footer"
        className="py-12 md:py-16 border-t border-white/10"
        containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
        logoClassName="text-3xl font-bold text-cyan-400 text-center mb-12"
        columnsClassName="grid grid-cols-1 md:grid-cols-3 gap-8"
        columnClassName="space-y-3"
        itemClassName="flex items-center gap-2 text-sm opacity-80 hover:opacity-100 transition-opacity"
        buttonClassName="inline-flex items-center gap-2 hover:gap-3 transition-all"
      />
    </ThemeProvider>
  );
}