"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from "next/link";

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="StrategyHub"
          navItems={[
            { name: "Services", id: "/services" },
            { name: "Work", id: "/work" },
            { name: "Team", id: "/team" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Get Started", href: "/contact" }}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSeven
          title="Our Services"
          description="Comprehensive marketing solutions tailored to accelerate your business growth and achieve measurable results."
          tag="What We Offer"
          features={[
            {
              id: 1,
              title: "Strategic Marketing Planning",
              description: "Data-driven strategies that align with your business goals, market position, and competitive landscape. We develop roadmaps for sustainable growth.",
              imageSrc: "https://img.b2bpic.net/free-photo/group-diverse-people-having-business-meeting_53876-20876.jpg"
            },
            {
              id: 2,
              title: "Brand Identity & Design",
              description: "Compelling brand experiences that resonate with your target audience. From logo design to complete visual systems, we build memorable brands.",
              imageSrc: "https://img.b2bpic.net/free-vector/neon-business-cards-pack_23-2148566003.jpg"
            },
            {
              id: 3,
              title: "Content Marketing",
              description: "Engaging content that educates, entertains, and converts. We create stories that connect with your audience across all channels.",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-view-notebook-desk_23-2148304861.jpg"
            },
            {
              id: 4,
              title: "Performance Analytics",
              description: "Transparent reporting and continuous optimization. We track what matters, analyze results, and refine strategies for maximum ROI.",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Our Impact"
          description="Proven results that demonstrate our commitment to client success and measurable business outcomes."
          tag="By The Numbers"
          metrics={[
            {
              id: "1",
              value: "250+",
              title: "Projects Successfully Delivered",
              items: ["Across 8+ Industries", "Global Client Base", "98% Client Retention Rate"]
            },
            {
              id: "2",
              value: "$450M+",
              title: "Revenue Generated For Clients",
              items: ["Average ROI: 340%", "12-Month Campaigns", "Scalable Strategies"]
            },
            {
              id: "3",
              value: "12",
              title: "Years Of Industry Experience",
              items: ["Award-Winning Team", "Certified Specialists", "Continuous Innovation"]
            },
            {
              id: "4",
              value: "95%",
              title: "Client Satisfaction Rating",
              items: ["Long-Term Partnerships", "Transparent Communication", "Results-Focused Approach"]
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <FooterLogoEmphasis
        logoText="StrategyHub"
        columns={[
          {
            items: [
              { label: "Services", href: "/services" },
              { label: "Case Studies", href: "/work" },
              { label: "Team", href: "/team" }
            ]
          },
          {
            items: [
              { label: "About Us", href: "/about" },
              { label: "Contact", href: "/contact" },
              { label: "Blog", href: "#blog" }
            ]
          },
          {
            items: [
              { label: "Privacy Policy", href: "#privacy" },
              { label: "Terms of Service", href: "#terms" },
              { label: "Legal", href: "#legal" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}