"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Palette, Code, Layout, Smartphone, TrendingUp, Lightbulb, Target, Settings } from "lucide-react";

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="large"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webild Studio"
          navItems={[
            { name: "Work", id: "/portfolio" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",            href: "/contact"
          }}
        />
      </div>

      <div id="services-overview" data-section="services-overview">
        <FeatureHoverPattern
          title="Complete Digital Solutions"
          description="From strategy to execution, we provide end-to-end digital services that transform your brand and drive measurable results"
          tag="Our Services"
          tagIcon={Target}
          features={[
            {
              icon: Palette,
              title: "Brand Identity & Design",              description: "Comprehensive brand strategy, visual identity design, and brand guidelines that create lasting impressions and build customer loyalty"
            },
            {
              icon: Code,
              title: "Custom Web Development",              description: "Modern, scalable websites and web applications built with cutting-edge technologies and optimized for performance and SEO"
            },
            {
              icon: Layout,
              title: "UI/UX Design",              description: "User-centered design approach creating intuitive interfaces that enhance user engagement and drive conversions"
            },
            {
              icon: Smartphone,
              title: "Mobile Applications",              description: "Native iOS and Android apps, progressive web apps, and cross-platform solutions that deliver seamless mobile experiences"
            },
            {
              icon: TrendingUp,
              title: "Digital Marketing & Strategy",              description: "Data-driven marketing campaigns, SEO optimization, content strategy, and social media management to grow your online presence"
            },
            {
              icon: Settings,
              title: "Technical Consulting",              description: "Architecture planning, technology stack selection, performance optimization, and ongoing technical guidance for your digital initiatives"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="approach" data-section="approach">
        <MetricSplitMediaAbout
          tag="Our Approach"
          tagIcon={Lightbulb}
          title="Strategic Process, Exceptional Results"
          description="Our proven methodology combines strategic thinking, creative excellence, and technical expertise. We begin with deep discovery to understand your goals, audience, and challenges. Then we craft tailored solutions that align with your business objectives while exceeding user expectations. Every project benefits from our collaborative approach, ensuring transparency and alignment throughout the entire process."
          metrics={[
            { value: "4-Phase", title: "Structured Process" },
            { value: "98%", title: "On-Time Delivery" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/web-design-online-technology-content-concept_53876-123927.jpg"
          imageAlt="Strategic design and development process"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="expertise" data-section="expertise">
        <MetricSplitMediaAbout
          tag="Technical Expertise"
          tagIcon={Code}
          title="Cutting-Edge Technologies & Best Practices"
          description="We stay at the forefront of technology, utilizing the latest frameworks, tools, and methodologies to deliver solutions that are not only visually stunning but also technically robust. Our expertise spans modern JavaScript frameworks, cloud infrastructure, API development, performance optimization, and emerging technologies like AI integration and progressive web apps."
          metrics={[
            { value: "20+", title: "Technologies Mastered" },
            { value: "99.9%", title: "Uptime Guarantee" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/side-view-man-working-desk_23-2149930959.jpg"
          imageAlt="Technical development and coding expertise"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
          imageAlt="Creative footer background"
          logoText="Webild Studio"
          copyrightText="© 2025 Webild Studio. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Brand Design", href: "/services" },
                { label: "Web Development", href: "/services" },
                { label: "Mobile Apps", href: "/services" },
                { label: "Digital Marketing", href: "/services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Portfolio", href: "/portfolio" },
                { label: "Careers", href: "/contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact", href: "/contact" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Instagram", href: "https://instagram.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}