"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Megaphone, Target, BarChart3, Users, Star } from "lucide-react";

export default function UDDigitalMarketingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="medium"
        background="noiseDiagonalGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Services", id: "features" },
              { name: "Performance", id: "metrics" },
              { name: "Pricing", id: "pricing" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="UD Digital Marketing"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroOverlay
            title="Scale Your Brand with Digital Precision"
            description="Data-driven marketing strategies tailored to elevate your business presence and drive measurable growth."
            tag="UD Digital Marketing"
            buttons={[{ text: "Start Your Growth" }, { text: "View Our Work" }]}
            imageSrc="https://img.b2bpic.net/free-photo/marketing-strategy-meeting_23-2148737380.jpg"
          />
        </div>

        <div id="about" data-section="about">
          <TestimonialAboutCard
            tag="About Us"
            title="Your Strategic Marketing Partner"
            description="We bridge the gap between creative storytelling and analytical performance, helping brands connect with their ideal audience."
            subdescription="Our experts specialize in multi-channel digital campaigns that maximize ROI and foster lasting customer relationships."
            icon={Megaphone}
            imageSrc="https://img.b2bpic.net/free-photo/diverse-business-team-working_23-2148440815.jpg"
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardTwentyNine
            title="Tailored Digital Solutions"
            description="Expertly crafted services to handle every aspect of your online presence."
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            textboxLayout="split"
            features={[
              { title: "SEO & Content", description: "Dominate search rankings and build authority with strategic content.", imageSrc: "https://img.b2bpic.net/free-photo/seo-optimization-concept_23-2148737380.jpg", titleImageSrc: "", buttonText: "Learn More" },
              { title: "Social Media", description: "Engaging content that drives community interaction and brand loyalty.", imageSrc: "https://img.b2bpic.net/free-photo/social-media-marketing_23-2148737380.jpg", titleImageSrc: "", buttonText: "Learn More" },
              { title: "Paid Advertising", description: "High-converting campaigns across all major advertising platforms.", imageSrc: "https://img.b2bpic.net/free-photo/paid-ad-strategy_23-2148737380.jpg", titleImageSrc: "", buttonText: "Learn More" }
            ]}
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardThree
            title="Proven Performance Metrics"
            description="The data behind our digital strategies."
            gridVariant="bento-grid"
            animationType="blur-reveal"
            textboxLayout="split"
            metrics={[
              { id: "1", icon: Target, title: "Client Retention", value: "98%" },
              { id: "2", icon: BarChart3, title: "Avg. Growth", value: "150%" },
              { id: "3", icon: Users, title: "Lead Gen", value: "12k+" }
            ]}
          />
        </div>

        <div id="pricing" data-section="pricing">
          <PricingCardNine
            title="Transparent Campaign Plans"
            description="Select the partnership tier that aligns with your scaling goals."
            textboxLayout="split"
            animationType="slide-up"
            plans={[
              { id: "start", title: "Growth", price: "$999", period: "/mo", features: ["SEO Audit", "Basic Ads", "Monthly Report"], button: { text: "Get Started" } },
              { id: "scale", title: "Scale", price: "$2,499", period: "/mo", features: ["Advanced SEO", "Full Ads Suite", "Weekly Reports", "Dedicated Manager"], button: { text: "Choose Scale" } }
            ]}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardFive
            title="Success Stories"
            description="Don't just take our word for it—see what our partners say."
            showRating={true}
            animationType="slide-up"
            textboxLayout="split"
            testimonials={[
              { id: "1", name: "Alex P.", date: "Oct 2023", title: "Exceptional Growth", quote: "UD transformed our digital strategy and revenue.", tag: "Retail", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-successful-manager_23-2148440815.jpg" }
            ]}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqBase
            title="Questions?"
            description="We're here to clarify our process."
            faqsAnimation="slide-up"
            textboxLayout="split"
            faqs={[
              { id: "1", title: "How do we measure success?", content: "We define clear KPIs at the start of every partnership and provide real-time reporting dashboards." }
            ]}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCenter
            tag="Get in touch"
            title="Ready to scale?"
            description="Schedule your discovery call with our growth team today."
            background={{ variant: "sparkles-gradient" }}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="UD Digital Marketing"
            columns={[
              { title: "Solutions", items: [{ label: "SEO", href: "#" }, { label: "Ads", href: "#" }] },
              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}