"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
import FeatureCardTwentyNine from "@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Sparkles, Search, ArrowUpRight, Shield, Zap, TrendingUp, Users, Target, BarChart3, Megaphone, Target as Rocket } from "lucide-react";

export default function WebAgency2Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            brandName="DigitallyTop"
            navItems={[
              { name: "Services", id: "services" },
              { name: "Case Studies", id: "work" },
              { name: "Process", id: "process" },
              { name: "Contact", id: "contact" },
            ]}
            button={{ text: "Get Started", href: "#contact" }}
          />
        </div>
        <div id="hero" data-section="hero">
          <HeroSplitDualMedia
            title="Scale Faster with AI-Powered Marketing"
            description="We combine elite data science with high-impact creative strategies to drive predictable growth for premium e-commerce and B2B brands."
            tag="The Future of Growth"
            tagIcon={Sparkles}
            tagAnimation="slide-up"
            background={{ variant: "glowing-orb" }}
            rating={5}
            ratingText="Rated 5/5 by our partners"
            mediaItems={[
              { imageSrc: "http://img.b2bpic.net/free-photo/3d-flowing-particles-network-communications-design_1048-15848.jpg?_wi=1", imageAlt: "AI Data Visualization" },
              { imageSrc: "http://img.b2bpic.net/free-photo/working-from-home-ergonomic-workstation_23-2149204655.jpg?_wi=1", imageAlt: "Digital Campaign Strategy" },
            ]}
            mediaAnimation="slide-up"
          />
        </div>
        <div id="features" data-section="features">
          <FeatureCardTwentyNine
            title="Elite Performance Services"
            description="Our core competencies designed to dominate the digital landscape."
            textboxLayout="default"
            useInvertedBackground={false}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            features={[
              { title: "Lead Generation", description: "High-intent prospect acquisition powered by automated AI funnels.", imageSrc: "http://img.b2bpic.net/free-photo/3d-flowing-particles-network-communications-design_1048-15848.jpg?_wi=2", titleImageSrc: "", buttonText: "Learn More" },
              { title: "Google Ads", description: "ROI-focused campaigns designed to scale conversion volume.", imageSrc: "http://img.b2bpic.net/free-photo/business-person-hand-holding-financial-statistics-displayed-t_1150-772.jpg", titleImageSrc: "", buttonText: "Learn More" },
              { title: "Meta Ads", description: "Creative-first social ads targeting your ideal customer avatars.", imageSrc: "http://img.b2bpic.net/free-photo/working-from-home-ergonomic-workstation_23-2149204655.jpg?_wi=2", titleImageSrc: "", buttonText: "Learn More" },
            ]}
          />
        </div>
        <div id="metrics" data-section="metrics">
          <MetricCardThree
            title="Performance Metrics That Matter"
            description="We focus on the numbers that impact your bottom line."
            textboxLayout="default"
            useInvertedBackground={false}
            animationType="slide-up"
            metrics={[
              { id: "roi", value: "$50M+", title: "Revenue Generated", icon: TrendingUp },
              { id: "growth", value: "300%", title: "Average Growth", icon: Rocket },
              { id: "clients", value: "150+", title: "Partners", icon: Users }
            ]}
          />
        </div>
        <div id="testimonials" data-section="testimonials">
          <TestimonialCardTen
            title="Proven Success"
            description="See how DigitallyTop drives measurable revenue increases for our partners."
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[
              { id: "1", title: "Exceptional Growth", quote: "DigitallyTop is our growth engine.", name: "Alex Rivet", role: "CMO at Nexa Growth" },
              { id: "2", title: "Data-Driven", quote: "They bridged the gap between complex AI and revenue.", name: "Sarah Chen", role: "Founder at TechCo" }
            ]}
          />
        </div>
        <div id="faq" data-section="faq">
          <FaqDouble
            title="Frequently Asked Questions"
            description="Get the insights you need to get started."
            textboxLayout="default"
            useInvertedBackground={false}
            faqsAnimation="slide-up"
            faqs={[
              { id: "1", title: "How is your approach different?", content: "We leverage proprietary AI models." },
              { id: "2", title: "What industries do you serve?", content: "We specialize in e-commerce and B2B SaaS." },
              { id: "3", title: "How do we measure success?", content: "Success is tracked via real-time dashboards." }
            ]}
          />
        </div>
        <div id="contact" data-section="contact">
          <ContactSplit
            tag="Let's Grow"
            title="Ready to Dominate Your Market?"
            description="Book your discovery call and receive a custom marketing blueprint."
            background={{ variant: "sparkles-gradient" }}
            useInvertedBackground={false}
          />
        </div>
        <div id="footer" data-section="footer">
          <FooterSimple
            columns={[
              { title: "Services", items: [{ label: "Google Ads" }, { label: "Meta Ads" }] },
              { title: "Company", items: [{ label: "Case Studies" }, { label: "Contact" }] }
            ]}
            bottomLeftText="DigitallyTop"
            bottomRightText="© 2025"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}