"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Zap, BarChart3, HelpCircle } from "lucide-react";

const navItems = [
  { name: "Services", id: "services" },
  { name: "Portfolio", id: "portfolio" },
  { name: "Insights", id: "blog" },
  { name: "Testimonials", id: "testimonials" },
  { name: "Contact", id: "contact" },
];

const footerColumns = [
  {
    title: "Services",    items: [
      { label: "Short-Form Content", href: "/services" },
      { label: "Long-Form Production", href: "/services" },
      { label: "Strategy Consulting", href: "/services" },
      { label: "Analytics & Optimization", href: "/services" },
    ],
  },
  {
    title: "Company",    items: [
      { label: "About Us", href: "/about" },
      { label: "Our Process", href: "#process" },
      { label: "Case Studies", href: "/portfolio" },
      { label: "Careers", href: "/careers" },
    ],
  },
  {
    title: "Resources",    items: [
      { label: "Content Blog", href: "/blog" },
      { label: "Trend Reports", href: "/trends" },
      { label: "Creator Community", href: "/community" },
      { label: "Contact", href: "#contact" },
    ],
  },
];

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmall"
      background="noiseDiagonalGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={{ text: "Start Growing", href: "#contact" }}
          brandName="ViralFlow"
        />
      </div>

      {/* Detailed Services Section */}
      <div id="services" data-section="services">
        <FeatureCardNineteen
          title="Our Content Services"
          description="From viral TikTok trends to in-depth YouTube documentaries, we handle every format with excellence and strategic precision."
          tag="What We Do"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              id: 1,
              tag: "Short-Form Mastery",              title: "TikTok & Reels Optimization",              subtitle: "Viral-ready content designed to dominate",              description:
                "We create snappy, scroll-stopping content that leverages platform algorithms. From trending sounds to perfect cuts, every frame is engineered for virality and audience engagement. Our team stays ahead of trends and produces content that resonates with your target demographic.",              imageSrc:
                "http://img.b2bpic.net/free-photo/person-recording-blogger-influencer_1268-21928.jpg",              imageAlt: "Short-form content creation",              buttons: [{ text: "Learn More", href: "/services" }],
            },
            {
              id: 2,
              tag: "Long-Form Excellence",              title: "YouTube & Podcast Production",              subtitle: "Deep dives that build loyal communities",              description:
                "Our long-form specialists craft narratives that hold attention from intro to outro. High-quality production, compelling storytelling, and strategic SEO optimization for maximum reach. We produce everything from documentary-style series to educational content that establishes authority.",              imageSrc:
                "http://img.b2bpic.net/free-photo/close-up-shot-phone-used-film-by-influencer-making-energetic-hand-movements_482257-123006.jpg",              imageAlt: "Long-form video production",              buttons: [{ text: "Learn More", href: "/services" }],
            },
            {
              id: 3,
              tag: "Cross-Platform Strategy",              title: "Omnichannel Content Planning",              subtitle: "One idea, infinite platforms",              description:
                "We develop content ecosystems where short-form pieces funnel audiences to long-form experiences. Strategic repurposing maximizes your content ROI across YouTube, Instagram, TikTok, Twitter, and LinkedIn. Our integrated approach ensures consistent messaging while optimizing for each platform.",              imageSrc:
                "http://img.b2bpic.net/free-vector/social-media-network-tree_1394-23.jpg",              imageAlt: "Multi-platform content strategy",              buttons: [{ text: "Learn More", href: "/services" }],
            },
          ]}
        />
      </div>

      {/* Service Metrics */}
      <div id="service-metrics" data-section="service-metrics">
        <MetricCardTwo
          title="Service Excellence Metrics"
          description="What sets our services apart - the numbers that prove our commitment to quality."
          tag="Our Standards"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "48 hrs",              description: "Average Turnaround for Short-Form Content"},
            {
              id: "2",              value: "4 weeks",              description: "Full Production Timeline for Long-Form Series"},
            {
              id: "3",              value: "15+",              description: "Team Members per Project"},
            {
              id: "4",              value: "99.8%",              description: "On-Time Delivery Rate"},
          ]}
        />
      </div>

      {/* FAQ Section */}
      <div id="faq" data-section="faq">
        <FaqDouble
          title="Service FAQs"
          description="Got questions about our content creation services? We have answers."
          tag="Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What's the difference between your short-form and long-form services?",              content:
                "Short-form content (TikTok, Reels, Shorts) is designed for maximum viral potential with quick cuts and trending audio. Long-form content (YouTube, podcasts) builds deeper connections and authority. We often use both in tandem—short-form drives discovery, long-form drives loyalty and conversions."},
            {
              id: "2",              title: "How do you ensure content goes viral?",              content:
                "Virality isn't guaranteed, but it's predictable. We combine trend analysis, audience psychology, platform algorithm understanding, and A/B testing. Our process involves strategic audio selection, optimal timing, compelling hooks, and continuous performance monitoring. We've achieved 7x better viral probability than industry averages."},
            {
              id: "3",              title: "What's the typical timeline for a campaign?",              content:
                "Most campaigns run 30-90 days depending on goals. Initial strategy takes 1-2 weeks, content production takes 2-3 weeks, and performance optimization continues throughout. We can pivot quickly based on real-time performance data to capitalize on emerging trends."},
            {
              id: "4",              title: "Can you work with brands in any industry?",              content:
                "Yes! We've worked with fashion, tech, wellness, education, B2B, and more. Every industry has unique audience behaviors and platform dynamics. Our approach is fully customizable to your specific industry, target audience, and business goals."},
            {
              id: "5",              title: "How do you measure ROI on content?",              content:
                "We track multiple metrics: views, engagement rate, click-through rate, conversion rate, audience growth, and revenue attribution. We provide detailed monthly reports showing exactly what content performed, why, and how it contributed to your business goals."},
            {
              id: "6",              title: "Do you handle content distribution and promotion?",              content:
                "Absolutely. We manage all posting schedules, platform optimization, hashtag research, and community engagement. For paid promotion, we can integrate with your ad budget or recommend distribution strategies. Everything is transparent and measured for ROI."},
          ]}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 ViralFlow. All rights reserved. | Built for content creators, powered by data."
        />
      </div>
    </ThemeProvider>
  );
}