"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import {
  Globe,
  Zap,
  Target,
  TrendingUp,
  Users,
  DollarSign,
  Mail,
} from "lucide-react";

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeMediumTitles"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Rank First"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Case Studies", id: "case-studies" },
            { name: "Insights", id: "blog" },
            { name: "About", id: "about" },
          ]}
          button={{
            text: "Start Free Audit",
            href: "/contact",
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="services-intro" data-section="services-intro">
        <MediaAbout
          title="Comprehensive SEO & AEO Services"
          description="Our full-spectrum service offering is designed to transform your organic visibility, from technical foundations to content strategy to next-generation AI-powered search optimization. We specialize in serving manufacturers and B2B businesses with industry-specific strategies that drive qualified leads and measurable revenue."
          tag="Our Complete Service Suite"
          buttons={[
            {
              text: "Get Your Audit",
              href: "/contact",
            },
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQGDOrT5kLldL884yuzbqKm2Qr/professional-analytics-dashboard-showing-1772518405631-fdd23f04.png"
          imageAlt="Professional analytics dashboard with transparent reporting"
          useInvertedBackground={false}
          ariaLabel="Services introduction"
        />
      </div>

      <div id="detailed-services" data-section="detailed-services">
        <FeatureBento
          title="Deep-Dive Service Breakdown"
          description="Each of our core services is built around industry best practices and proven methodologies specifically tailored for manufacturing and B2B sectors."
          tag="Service Excellence"
          features={[
            {
              title: "Strategic Keyword Research & Analysis",
              description:
                "We conduct exhaustive keyword research focused on your specific industry vertical, buyer personas, and sales cycle. We identify high-intent keywords that potential customers use when actively searching for solutions like yours.",
              bentoComponent: "globe",
            },
            {
              title: "Technical SEO & Site Optimization",
              description:
                "Our technical audits identify and fix critical issues: site speed optimization, mobile responsiveness, crawlability, indexability, and Core Web Vitals. Every technical barrier to ranking is systematically addressed.",
              bentoComponent: "animated-bar-chart",
            },
            {
              title: "Content Strategy & Creation",
              description:
                "We develop content roadmaps that address buyer intent at every stage of the customer journey. Our content is optimized for both search engines and AI-powered search platforms like ChatGPT Search and Google's AI Overviews.",
              bentoComponent: "map",
            },
            {
              title: "Link Building & Authority Development",
              description:
                "Strategic link acquisition from industry-relevant sources, authority building through thought leadership content, and brand mention tracking. We build domain authority that drives competitive advantage.",
              bentoComponent: "line-chart",
            },
            {
              title: "Generative Engine Optimization (AEO)",
              description:
                "Optimize your content for AI-powered search platforms. We structure content for inclusion in LLM training data and AI-generated search results to ensure your brand appears in next-generation search.",
              bentoComponent: "orbiting-icons",
              centerIcon: Zap,
              items: [
                { icon: Globe, ring: 1 },
                { icon: Target, ring: 2 },
                { icon: TrendingUp, ring: 3 },
              ],
            },
            {
              title: "Performance Tracking & Reporting",
              description:
                "Monthly transparency reports showing all key metrics: keyword rankings, organic traffic, qualified leads generated, conversion rates, and ROI. We track everything that matters to your bottom line.",
              bentoComponent: "icon-info-cards",
              items: [
                { icon: TrendingUp, label: "Avg. Ranking Gain", value: "+47" },
                { icon: Users, label: "Lead Growth", value: "+156%" },
                { icon: DollarSign, label: "ROI", value: "340%" },
              ],
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          ariaLabel="Detailed services section"
        />
      </div>

      <div id="cta-contact" data-section="cta-contact">
        <ContactCTA
          tag="Ready to Get Started"
          tagIcon={Mail}
          title="Let's Build Your Path to Search Domination"
          description="Schedule a free SEO audit with our specialists. We'll analyze your current rankings, identify quick wins, and outline a comprehensive 12-month strategy to drive qualified leads and sustainable organic revenue for your business."
          buttons={[
            {
              text: "Schedule Your Free Audit",
              href: "/contact",
            },
            {
              text: "View Our Case Studies",
              href: "/case-studies",
            },
          ]}
          background={{ variant: "floatingGradient" }}
          useInvertedBackground={false}
          ariaLabel="Contact CTA section"
        />
      </div>

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