"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Briefcase } from "lucide-react";

const ServicesPage = () => {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "services" },
    { name: "Case Studies", id: "case-studies" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="fluid"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="ROI Capital" navItems={navItems} />
      </div>

      <div id="services-detail" data-section="services-detail">
        <FeatureCardMedia
          title="Our Services"
          description="Comprehensive marketing solutions tailored to your business goals and growth objectives"
          tag="Services"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
          features={[
            {
              id: "strategy",
              title: "Strategic Planning",
              description: "Custom marketing strategies aligned with your business objectives and target audience. We conduct deep market research and competitive analysis to build your roadmap.",
              tag: "Strategy",
              imageSrc: "http://img.b2bpic.net/free-photo/business-scene-top-view_23-2147626514.jpg?_wi=2",
              imageAlt: "Strategic marketing planning",
              buttons: [{ text: "Learn More", href: "#" }],
            },
            {
              id: "seo",
              title: "SEO & SEM",
              description: "Boost your online visibility with our advanced search engine optimization and paid search expertise. We leverage technical SEO, content optimization, and strategic paid campaigns.",
              tag: "Search",
              imageSrc: "http://img.b2bpic.net/free-vector/search-engine-optimization_24908-55724.jpg?_wi=2",
              imageAlt: "SEO optimization and search marketing",
              buttons: [{ text: "Learn More", href: "#" }],
            },
            {
              id: "content",
              title: "Content Marketing",
              description: "Engaging, high-quality content that resonates with your audience and drives engagement. From blog posts to whitepapers, we create content that converts.",
              tag: "Content",
              imageSrc: "http://img.b2bpic.net/free-photo/media-marketing-internet-digital-global_53876-138500.jpg?_wi=2",
              imageAlt: "Content marketing strategy",
              buttons: [{ text: "Learn More", href: "#" }],
            },
            {
              id: "social",
              title: "Social Media Management",
              description: "Strategic social campaigns that build community, increase engagement, and drive conversions. We manage your presence across all major platforms.",
              tag: "Social",
              imageSrc: "http://img.b2bpic.net/free-photo/friends-using-smartphones-together-outdoors_53876-26150.jpg?_wi=2",
              imageAlt: "Social media marketing campaigns",
              buttons: [{ text: "Learn More", href: "#" }],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Detailed marketing services"
        />
      </div>

      <div id="service-faq" data-section="service-faq">
        <FaqSplitText
          sideTitle="Service Questions"
          sideDescription="Learn more about how each service can benefit your business"
          faqs={[
            {
              id: "1",
              title: "Which service should I choose?",
              content: "It depends on your business goals and current marketing maturity. We recommend starting with a strategic planning session to assess your needs and recommend a tailored service package.",
            },
            {
              id: "2",
              title: "Can I combine multiple services?",
              content: "Absolutely! Most of our successful clients use a combination of our services. We can create an integrated marketing solution that maximizes your ROI across multiple channels.",
            },
            {
              id: "3",
              title: "What's the typical timeline for results?",
              content: "Initial results vary by service. SEO typically takes 3-6 months, while paid campaigns can show results within weeks. We focus on sustainable, long-term growth.",
            },
          ]}
          faqsAnimation="slide-up"
          textPosition="left"
          useInvertedBackground={false}
          animationType="smooth"
          showCard={true}
          ariaLabel="Services FAQ"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="ROI CAPITAL"
          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
          rightLink={{ text: "Terms of Service", href: "/terms" }}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
};

export default ServicesPage;