"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLarge"
      background="none"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Team", id: "/team" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="TechVision"
          bottomLeftText="Innovation Driven"
          bottomRightText="hello@techvision.io"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Our Impact"
          description="Measurable results that drive business success and customer satisfaction"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          metrics={[
            {
              id: "1",
              value: "150+",
              description: "Projects Delivered Successfully"
            },
            {
              id: "2",
              value: "98%",
              description: "Client Satisfaction Rate"
            },
            {
              id: "3",
              value: "50+",
              description: "Expert Team Members"
            },
            {
              id: "4",
              value: "$25M+",
              description: "Total Project Value"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Flexible Pricing Models"
          description="Choose the engagement model that works best for your team and project needs"
          tag="Pricing"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          plans={[
            {
              id: "project-based",
              tag: "Project-Based",
              price: "Custom Quote",
              period: "",
              description: "Perfect for well-defined projects with clear scope and deliverables",
              button: { text: "Get Quote", href: "/contact" },
              featuresTitle: "What's Included:",
              features: [
                "Full project lifecycle",
                "Dedicated team assignment",
                "Regular progress updates",
                "Quality assurance testing",
                "Post-launch support"
              ]
            },
            {
              id: "time-materials",
              tag: "Time & Materials",
              price: "$85-150",
              period: "/hour",
              description: "Ideal for projects that evolve or require flexible resource allocation",
              button: { text: "Learn More", href: "/contact" },
              featuresTitle: "What's Included:",
              features: [
                "Flexible team composition",
                "Scalable resource allocation",
                "Weekly reporting",
                "Adaptive development process",
                "Ongoing optimization"
              ]
            },
            {
              id: "retainer",
              tag: "Retainer Model",
              price: "$8,000",
              period: "/month",
              description: "Continuous partnership with dedicated resources for sustained growth",
              button: { text: "Start Partnership", href: "/contact" },
              featuresTitle: "What's Included:",
              features: [
                "Dedicated development team",
                "Priority support access",
                "Quarterly strategy review",
                "Performance optimization",
                "Technology consulting"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services, processes, and partnership"
          tag="FAQ"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What technologies do you specialize in?",
              content: "We specialize in modern web technologies including React, Node.js, Python, Java, and cloud platforms like AWS and Azure. Our team stays current with emerging technologies and best practices to deliver cutting-edge solutions tailored to your specific needs."
            },
            {
              id: "2",
              title: "How do you ensure project quality?",
              content: "Quality is embedded in every phase of our development process. We implement rigorous code reviews, automated testing, continuous integration, and comprehensive QA testing before launch. Our team follows industry best practices and maintains high standards throughout the project lifecycle."
            },
            {
              id: "3",
              title: "What is your typical project timeline?",
              content: "Project timelines vary based on scope and complexity. Small projects typically take 4-8 weeks, medium projects 8-16 weeks, and larger enterprise solutions 4-6+ months. We provide detailed timeline estimates during the discovery phase and maintain transparent communication throughout."
            },
            {
              id: "4",
              title: "Do you provide post-launch support?",
              content: "Yes, we offer comprehensive post-launch support including bug fixes, performance monitoring, security updates, and feature enhancements. Support packages can be customized based on your needs, from hourly support to dedicated team retainers."
            }
          ]}
        />
      </div>

      <FooterMedia
        imageSrc="https://img.b2bpic.net/free-photo/person-working-html-computer_23-2150038840.jpg"
        imageAlt="Digital technology network background"
        logoText="TechVision"
        copyrightText="© 2025 TechVision. All rights reserved."
        columns={[
          {
            title: "Services",
            items: [
              { label: "Web Development", href: "/services" },
              { label: "Mobile Apps", href: "/services" },
              { label: "Cloud Solutions", href: "/services" },
              { label: "AI & ML", href: "/services" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/team" },
              { label: "Team", href: "/team" },
              { label: "Careers", href: "https://careers.techvision.io" }
            ]
          },
          {
            title: "Connect",
            items: [
              { label: "Contact Us", href: "/contact" },
              { label: "Email", href: "mailto:hello@techvision.io" },
              { label: "LinkedIn", href: "https://linkedin.com/company/techvision" },
              { label: "GitHub", href: "https://github.com/techvision" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}