"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Zap, HelpCircle } from "lucide-react";

export default function ServicesPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Work", id: "work" },
    { name: "Team", id: "team" },
    { name: "Pricing", id: "pricing" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="grid"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="SocialVibe Agency"
          bottomLeftText="Premium Social Strategy"
          bottomRightText="hello@socialvibe.com"
        />
      </div>

      {/* About Section */}
      <div id="about" data-section="about" className="mx-auto px-4 md:px-6">
        <TextSplitAbout
          title="Why Choose SocialVibe?"
          description={[
            "We're not just another social media agency. We're strategic partners invested in your growth.",
            "With 8+ years of industry experience, we've built social presence for 150+ brands across industries. We combine data-driven strategy with creative excellence.",
            "Our team stays ahead of platform trends and algorithm changes. We adapt quickly and test continuously to find what works for your unique audience.",
            "We believe in transparent reporting, collaborative partnerships, and results that matter to your bottom line.",
          ]}
          buttons={[
            {
              text: "Start Your Project",
              href: "/contact",
            },
            {
              text: "Schedule Consultation",
              href: "/contact",
            },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          showBorder={false}
        />
      </div>

      {/* Pricing Section */}
      <div id="pricing" data-section="pricing" className="mx-auto px-4 md:px-6">
        <PricingCardNine
          title="Flexible Pricing for Every Brand"
          description="Choose the plan that matches your social media goals and budget"
          tag="Investment Plans"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="split"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "starter",
              title: "Starter",
              price: "$2,500",
              period: "per month",
              features: [
                "2 Platform Management",
                "12 Posts/Month",
                "Basic Community Management",
                "Monthly Reporting",
                "Email Support",
              ],
              button: {
                text: "Get Started",
                href: "/contact",
              },
            },
            {
              id: "professional",
              title: "Professional",
              price: "$5,500",
              period: "per month",
              features: [
                "4 Platform Management",
                "24 Posts/Month",
                "Advanced Community Management",
                "Weekly Analytics",
                "Strategy Consultation",
                "Priority Support",
              ],
              button: {
                text: "Choose Plan",
                href: "/contact",
              },
            },
            {
              id: "enterprise",
              title: "Enterprise",
              price: "$9,999",
              period: "per month",
              features: [
                "Unlimited Platform Management",
                "Custom Content Calendar",
                "24/7 Community Management",
                "Real-time Analytics",
                "Monthly Strategy Sessions",
                "Dedicated Account Manager",
                "Content Creation Included",
              ],
              button: {
                text: "Contact Sales",
                href: "/contact",
              },
            },
          ]}
        />
      </div>

      {/* FAQ Section */}
      <div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about our services and process"
          tag="Get Answers"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "faq-1",
              title: "How long does it take to see results?",
              content: "Most clients see initial engagement improvements within 2-4 weeks. Meaningful follower growth and audience building typically takes 2-3 months. We focus on sustainable growth, not shortcuts. Results depend on your starting point, industry, and budget.",
            },
            {
              id: "faq-2",
              title: "Which social platforms do you manage?",
              content: "We specialize in Instagram, TikTok, LinkedIn, Twitter/X, Facebook, YouTube, and Pinterest. We also handle emerging platforms based on your audience. Our strategy determines which platforms maximize your reach and engagement.",
            },
            {
              id: "faq-3",
              title: "Do you create content or curate it?",
              content: "We do both. Our approach combines high-quality original content creation with strategic curation. We produce graphics, videos, reels, and captions. We also identify and share industry-relevant content that resonates with your audience.",
            },
            {
              id: "faq-4",
              title: "Can you work with established brands and startups?",
              content: "Absolutely. We work with everyone from Fortune 500 companies to early-stage startups. Our strategies scale to your budget and goals. Whether you're building from scratch or optimizing existing presence, we customize our approach.",
            },
            {
              id: "faq-5",
              title: "How do you measure success?",
              content: "We track KPIs aligned with your business goals: engagement rate, follower growth, reach, conversions, and ROI. We provide detailed monthly reports and quarterly strategy reviews. Transparency in metrics is fundamental to our partnership.",
            },
            {
              id: "faq-6",
              title: "What's your onboarding process?",
              content: "We start with a strategy consultation to understand your brand, goals, and audience. Then we conduct a social audit, create a 90-day roadmap, and establish reporting cadence. Our team gets full access to your accounts to execute seamlessly.",
            },
          ]}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
        <FooterLogoReveal
          logoText="SocialVibe"
          leftLink={{
            text: "Privacy Policy",
            href: "#",
          }}
          rightLink={{
            text: "© 2024 SocialVibe Agency",
            href: "/",
          }}
        />
      </div>
    </ThemeProvider>
  );
}