"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Sparkles, TrendingUp, Mail } from "lucide-react";

export default function ServicesPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
    { name: "Blog", id: "/blog" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="noise"
      cardStyle="soft-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Orion Media Co"
          bottomLeftText="Atlanta, Georgia"
          bottomRightText="hello@orionmedia.co"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyFour
          title="Our Digital Marketing Services"
          description="Comprehensive solutions tailored to your business goals"
          tag="Services"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          features={[
            {
              id: "seo",
              title: "Search Engine Optimization",
              author: "Strategic SEO Experts",
              description: "Drive organic traffic with our proven SEO strategies that improve rankings, increase visibility, and deliver qualified leads to your business. Our approach includes keyword research, on-page optimization, technical SEO, and link building strategies.",
              tags: ["SEO", "Organic Traffic", "Rankings"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU4mA6Hi2sQCai00D5KuDlQ1r/an-abstract-visualization-of-seo-optimiz-1772493588919-bf3fa553.png?_wi=2",
              imageAlt: "SEO optimization dashboard",
            },
            {
              id: "social",
              title: "Social Media Management",
              author: "Social Media Strategists",
              description: "Build engaged communities and drive conversions through strategic social media content, management, and advertising across all major platforms. We create compelling content, manage community interactions, and run targeted campaigns.",
              tags: ["Social Media", "Community", "Advertising"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU4mA6Hi2sQCai00D5KuDlQ1r/a-colorful-social-media-marketing-dashbo-1772493590124-df7d8601.png?_wi=2",
              imageAlt: "Social media marketing dashboard",
            },
            {
              id: "content",
              title: "Content Marketing & Creation",
              author: "Creative Content Team",
              description: "Tell your brand story with compelling content that resonates with your audience and drives meaningful engagement and loyalty. From blog posts to videos, we create content that converts and builds brand authority.",
              tags: ["Content", "Storytelling", "Engagement"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APU4mA6Hi2sQCai00D5KuDlQ1r/a-creative-content-creation-workspace-wi-1772493590496-7f902898.png?_wi=2",
              imageAlt: "Content creation team workspace",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Service Performance Metrics"
          description="Industry-leading results across all our service offerings"
          tag="Impact"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "seo-results",
              value: "156%",
              title: "Average SEO Traffic Growth",
              items: ["3-6 month timeline", "Sustainable rankings", "Qualified leads"],
            },
            {
              id: "social-engagement",
              value: "320%",
              title: "Social Media Engagement Increase",
              items: ["All major platforms", "Community building", "Conversion focused"],
            },
            {
              id: "content-performance",
              value: "4.8x",
              title: "Content ROI Multiplier",
              items: ["Evergreen assets", "Brand authority", "Lead generation"],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Get Started?"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Transform Your Digital Marketing Today"
          description="Choose the services that fit your business goals. Our team is ready to create a customized digital marketing strategy that drives real results and accelerates your growth."
          buttons={[
            { text: "Schedule Consultation", href: "mailto:hello@orionmedia.co" },
            { text: "View Pricing", href: "#" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          useInvertedBackground={true}
        />
      </div>

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