"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import ContactSplit from '@/components/sections/contact/ContactSplit';

const allServices = [
  { id: "s1", title: "Telemarketing", subtitle: "Direct outreach to potential clients.", category: "Sales", value: "Custom" },
  { id: "s2", title: "Ad Campaigns", subtitle: "Strategic ad placement across platforms.", category: "Advertising", value: "Performance-Based" },
  { id: "s3", title: "Advertising", subtitle: "Comprehensive ad strategy and execution.", category: "Advertising", value: "Brand Growth" },
  { id: "s4", title: "Branding", subtitle: "Develop a strong, recognizable brand identity.", category: "Identity", value: "Long-term" },
  { id: "s5", title: "Business Profiles", subtitle: "Optimize and manage online business listings.", category: "Visibility", value: "Enhanced" },
  { id: "s6", title: "Content Creation", subtitle: "Engaging content for all marketing channels.", category: "Content", value: "High-Quality" },
  { id: "s7", title: "Content Marketing", subtitle: "Strategic distribution of valuable content.", category: "Content", value: "Audience Engagement" },
  { id: "s8", title: "Content Optimization", subtitle: "Improve existing content for better performance.", category: "Content", value: "Maximized Reach" },
  { id: "s9", title: "Conversion Tracking", subtitle: "Monitor and analyze user actions for insights.", category: "Analytics", value: "Precise" },
  { id: "s10", title: "Digital Marketing", subtitle: "Holistic online marketing strategies.", category: "Strategy", value: "Full-Spectrum" },
  { id: "s11", title: "Digital Media", subtitle: "Management of digital assets and channels.", category: "Media", value: "Optimized" },
  { id: "s12", title: "E-Mail Marketing", subtitle: "Effective email campaigns for engagement.", category: "Email", value: "Targeted" },  { id: "s13", title: "Email Marketing Campaigns", subtitle: "Design and execute compelling email sequences.", category: "Email", value: "Automated" },
  { id: "s14", title: "Facebook Ads", subtitle: "Targeted advertising on Facebook.", category: "Social Media", value: "ROI-driven" },
  { id: "s15", title: "Facebook Analytics", subtitle: "Insightful reporting on Facebook performance.", category: "Social Media", value: "Data-Powered" },
  { id: "s16", title: "Facebook Management", subtitle: "Full management of your Facebook presence.", category: "Social Media", value: "Engaging" },
  { id: "s17", title: "Free Consultation", subtitle: "Discuss your marketing needs with our experts.", category: "Introductory", value: "Complimentary" },
  { id: "s18", title: "Geo Targeting", subtitle: "Reach customers in specific geographical areas.", category: "Advertising", value: "Local Impact" },
  { id: "s19", title: "Google Ad Campaigns", subtitle: "Maximize visibility with Google Search & Display Ads.", category: "Advertising", value: "High Intent" },
  { id: "s20", title: "Google Business page", subtitle: "Optimize your Google My Business profile.", category: "Visibility", value: "Local SEO" },
  { id: "s21", title: "Guerilla Marketing", subtitle: "Creative, unconventional marketing tactics.", category: "Innovation", value: "High Impact" },
  { id: "s22", title: "Home Services", subtitle: "Specialized marketing for home service businesses.", category: "Industry Specific", value: "Tailored" },
  { id: "s23", title: "Increase brand spending", subtitle: "Strategies to maximize your advertising budget efficiency.", category: "Finance", value: "Optimized" },
  { id: "s24", title: "Influencer Marketing", subtitle: "Collaborate with influencers to expand reach.", category: "Social Media", value: "Authentic Reach" },
  { id: "s25", title: "Local Seo", subtitle: "Improve local search engine rankings.", category: "SEO", value: "Community Focus" },
  { id: "s26", title: "Mail Marketing", subtitle: "Direct mail campaigns for offline engagement.", category: "Traditional", value: "Physical Reach" },
  { id: "s27", title: "Marketing", subtitle: "Overall strategy and execution for market presence.", category: "Strategy", value: "Comprehensive" },
  { id: "s28", title: "Marketing And Social Media", subtitle: "Integrated strategy for online brand presence.", category: "Strategy", value: "Digital Footprint" },
  { id: "s29", title: "Online Ads", subtitle: "Managed online advertising across various networks.", category: "Advertising", value: "Digital" },
  { id: "s30", title: "Online Advertising", subtitle: "Full-service digital advertising solutions.", category: "Advertising", value: "Web Presence" },
  { id: "s31", title: "Paid Search Campaigns", subtitle: "Targeted PPC campaigns for instant visibility.", category: "Advertising", value: "Instant Traffic" },
  { id: "s32", title: "Re-Targeting Ads", subtitle: "Engage previous website visitors with tailored ads.", category: "Advertising", value: "Conversion Boost" },
  { id: "s33", title: "Sales Funnel Creation", subtitle: "Design and optimize customer sales journeys.", category: "Sales", value: "Automated" },
  { id: "s34", title: "Search Engine Optimization", subtitle: "Improve search engine rankings and organic traffic.", category: "SEO", value: "Organic Growth" },
  { id: "s35", title: "Seo Marketing", subtitle: "Integrated SEO strategies for market dominance.", category: "SEO", value: "Visibility" },
  { id: "s36", title: "Seo Marketing Services", subtitle: "Comprehensive SEO services from audit to execution.", category: "SEO", value: "Full-Service" },
  { id: "s37", title: "Social Media Campaign", subtitle: "Strategic campaigns across social platforms.", category: "Social Media", value: "Engagement" },
  { id: "s38", title: "Social Media Management", subtitle: "Manage and grow your social media presence.", category: "Social Media", value: "Active Presence" },
  { id: "s39", title: "Traffic Building", subtitle: "Strategies to increase website visitors.", category: "Web", value: "Audience Expansion" },
  { id: "s40", title: "Twitter Business page", subtitle: "Optimize and manage your Twitter profile.", category: "Social Media", value: "Professional" },
  { id: "s41", title: "Web Analytics", subtitle: "Track and analyze website performance.", category: "Analytics", value: "Deep Insights" },
  { id: "s42", title: "Web Hosting", subtitle: "Reliable and secure hosting solutions.", category: "Web", value: "Essential" },
  { id: "s43", title: "Web Management", subtitle: "Ongoing maintenance and updates for your website.", category: "Web", value: "Seamless Operation" },
  { id: "s44", title: "Website Analytics", subtitle: "Comprehensive reporting on website user behavior.", category: "Analytics", value: "User Journey" },
  { id: "s45", title: "YouTube Business page", subtitle: "Optimize and manage your YouTube channel.", category: "Video", value: "Brand Reach" },
  { id: "s46", title: "Youtube Ads", subtitle: "Targeted advertising on YouTube.", category: "Video", value: "Video Views" }
];

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="noise"
      cardStyle="solid"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              {
                name: "Home",                id: "#home"},
              {
                name: "About Us",                id: "#about"},
              {
                name: "Services",                id: "/services"},
              {
                name: "Strategies",                id: "#strategies"},
              {
                name: "Clients",                id: "#clients"},
              {
                name: "Results",                id: "#results"},
              {
                name: "Pricing",                id: "#pricing"},
              {
                name: "FAQ",                id: "#faq"},
            ]}
            brandName="Prosperity Inbound"
            button={{
              text: "Schedule Your Call",              href: "/services#contact"}}
          />
        </div>

        <div id="services-hero" data-section="services-hero">
          <FeatureCardTwentyEight
            title="Our Comprehensive Services"
            description="Discover the full range of inbound marketing services we offer to drive your business growth, from strategic planning to execution and analytics."
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            features={allServices}
            carouselMode="buttons"
          />
        </div>

        <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "downward-rays-static-grid"}}
      tag="Get Started"
      title="Ready to Drive Revenue?"
      description="Schedule a free strategy call with our experts to discuss your business goals and how Prosperity Inbound can help you achieve predictable, measurable growth."
      imageSrc="http://img.b2bpic.net/free-photo/abstract-technology-background-connecting-dots-digital-network-design_53876-160254.jpg?_wi=2"
      imageAlt="Abstract digital lines representing data and strategy"
      mediaAnimation="opacity"
      mediaPosition="right"
      inputPlaceholder="Your Email Address"
      buttonText="Schedule My Call"
      termsText="By scheduling a call, you agree to our Terms and Conditions and Privacy Policy."
    />
  </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[
              {
                items: [
                  {
                    label: "Home",                    href: "/"},
                  {
                    label: "About Us",                    href: "/#about"},
                  {
                    label: "Services",                    href: "/services"},
                  {
                    label: "Results",                    href: "/#results"},
                ],
              },
              {
                items: [
                  {
                    label: "Testimonials",                    href: "/#testimonials"},
                  {
                    label: "Pricing",                    href: "/#pricing"},
                  {
                    label: "FAQ",                    href: "/#faq"},
                  {
                    label: "Contact",                    href: "/services#contact"},
                ],
              },
              {
                items: [
                  {
                    label: "Privacy Policy",                    href: "#"},
                  {
                    label: "Terms of Service",                    href: "#"},
                  {
                    label: "Careers",                    href: "#"},
                ],
              },
            ]}
            logoText="Prosperity Inbound"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
