"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Zap, TrendingUp, Users, Target, Rocket } from "lucide-react";

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="blurBottom"
      cardStyle="gradient-mesh"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="Proof Digital"
          bottomLeftText="Global Reach"
          bottomRightText="hello@proofdigital.com"
        />
      </div>

      <div id="services-detail" data-section="services-detail">
        <FeatureCardTwentySeven
          title="Our Complete Service Offerings"
          description="We deliver end-to-end digital solutions designed to transform your business and maximize your online potential."
          tag="Comprehensive Solutions"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: "1",
              title: "Web Development",
              description: "From responsive websites to complex web applications, we build scalable solutions using cutting-edge technologies including React, Next.js, and Node.js.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-web-development-concept-ima-1772538619187-01dd9557.png",
              imageAlt: "Web Development Services",
            },
            {
              id: "2",
              title: "UI/UX Design",
              description: "We create intuitive, beautiful interfaces that users love. Our design process focuses on user research, wireframing, prototyping, and rigorous testing.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/user-interface-and-experience-design-con-1772538617879-adc7cf56.png",
              imageAlt: "UI/UX Design Services",
            },
            {
              id: "3",
              title: "Digital Strategy",
              description: "Strategic consulting to help you navigate the digital landscape. We analyze market trends, competitive positioning, and develop roadmaps for success.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/digital-strategy-consultation-scene-with-1772538618258-45f82cfc.png",
              imageAlt: "Digital Strategy Services",
            },
            {
              id: "4",
              title: "Brand Identity",
              description: "Complete branding from concept to implementation. We develop cohesive visual identities that communicate your values and resonate with your target audience.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/brand-identity-design-workspace-showing--1772538617285-0010346f.png",
              imageAlt: "Brand Identity Services",
            },
          ]}
          gridVariant="uniform-4-items"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="service-metrics" data-section="service-metrics">
        <MetricCardThree
          title="Why Choose Our Services"
          description="We deliver measurable results backed by expertise, innovation, and dedication to your success"
          metrics={[
            {
              id: "1",
              icon: TrendingUp,
              title: "Average ROI Increase",
              value: "245%",
            },
            {
              id: "2",
              icon: Users,
              title: "Active Partnerships",
              value: "120+",
            },
            {
              id: "3",
              icon: Target,
              title: "Successful Launches",
              value: "98%",
            },
            {
              id: "4",
              icon: Zap,
              title: "Industry Experience",
              value: "10 Years",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="service-cta" data-section="service-cta">
        <ContactCTA
          tag="Ready to Get Started"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Let's Discuss Your Project"
          description="Our team is ready to understand your unique needs and create a customized solution that drives real results."
          buttons={[
            { text: "Schedule Consultation", href: "/contact" },
            { text: "View Our Portfolio", href: "/portfolio" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
        />
      </div>

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