"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MetricCardFive from '@/components/sections/metrics/MetricCardFive';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { TrendingUp, Users, Award, Target, Rocket, Linkedin, Twitter, Facebook, Instagram } from "lucide-react";

export default function MarketingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLarge"
      background="none"
      cardStyle="solid-accent"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight={undefined}
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Marketing Pro"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Case Studies", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Elevate Your Brand with Strategic Marketing"
          description="We create compelling campaigns that drive results. From digital strategy to creative execution, we help your business stand out."
          tag="Modern Marketing Solutions"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140098536-9jc7ywck.jpg"
          imageAlt="Marketing team collaborating on strategy"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={false}
          buttons={[
            { text: "Start Your Journey", href: "contact" },
            { text: "See Our Work", href: "testimonials" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Proven Results Delivered to Leading Brands"
          useInvertedBackground="noInvert"
          metrics={[
            { icon: TrendingUp, label: "Average Growth", value: "247%" },
            { icon: Users, label: "Happy Clients", value: "150+" },
            { icon: Award, label: "Campaigns Launched", value: "500+" },
            { icon: Target, label: "ROI Improvement", value: "380%" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardThree
          title="Our Marketing Services"
          description="Comprehensive solutions tailored to accelerate your growth"
          tag="Services"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "01",
              title: "Digital Strategy",
              description: "Comprehensive marketing strategies designed to reach your target audience and drive meaningful engagement.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787041844-tzssa0wc.jpg",
              imageAlt: "Digital marketing strategy visualization"
            },
            {
              id: "02",
              title: "Social Media Marketing",
              description: "Creative content and campaigns that build communities and amplify your brand voice across platforms.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766488005357-9beefs8k.jpg",
              imageAlt: "Social media content creation"
            },
            {
              id: "03",
              title: "Brand Development",
              description: "Build a distinctive identity that resonates with your audience and sets you apart from competitors.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767024558753-o4oz8xe5.jpg",
              imageAlt: "Brand identity development"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFive
          title="Performance That Speaks"
          description="Track measurable results from every campaign"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          textboxLayout="default"
          metrics={[
            {
              id: "1",
              value: "8.2M+",
              description: "Total impressions generated for our clients across all channels"
            },
            {
              id: "2",
              value: "15.3K+",
              description: "New leads and conversions achieved through targeted campaigns"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardNine
          title="Trusted by Industry Leaders"
          description="See what our clients have to say about our work"
          tag="Case Studies"
          useInvertedBackground="noInvert"
          textboxLayout="default"
          testimonials={[
            {
              id: "1",
              quote: "Marketing Pro transformed our digital presence. Within 6 months, we saw a 300% increase in qualified leads and our brand recognition doubled.",
              name: "Sarah Johnson",
              role: "CEO",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Sarah Johnson, CEO of TechCorp"
            },
            {
              id: "2",
              quote: "The team's creative approach and data-driven strategies have been instrumental in our success. They understand our market better than anyone.",
              name: "Michael Chen",
              role: "Marketing Director",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Michael Chen, Marketing Director"
            },
            {
              id: "3",
              quote: "Outstanding results and exceptional service. The team is responsive, creative, and truly invested in our success.",
              name: "Emily Rodriguez",
              role: "Founder",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140103339-f3be0gdh.jpg",
              imageAlt: "Emily Rodriguez, Founder of StartupXYZ"
            },
            {
              id: "4",
              quote: "They delivered a complete rebranding that elevated our market position. Our conversion rates have never been better.",
              name: "David Kim",
              role: "VP of Marketing",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320184384-whnns6as.jpg",
              imageAlt: "David Kim, VP of Marketing"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Grow?"
          ctaDescription="Let's discuss how we can elevate your marketing and drive real results for your business."
          ctaButton={{
            text: "Schedule a Consultation",
            href: "#contact"
          }}
          ctaIcon={Rocket}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "1",
              title: "What services do you offer?",
              content: "We offer comprehensive marketing solutions including digital strategy, social media marketing, brand development, content creation, paid advertising, and campaign management tailored to your specific business needs."
            },
            {
              id: "2",
              title: "How long before we see results?",
              content: "Results vary by strategy and goals, but most clients see meaningful engagement improvements within 4-8 weeks. Significant growth metrics typically appear within 3-6 months."
            },
            {
              id: "3",
              title: "What's your typical project scope?",
              content: "We work with businesses of all sizes, from startups to established enterprises. Projects can range from focused campaign management to complete brand overhauls and digital transformation initiatives."
            },
            {
              id: "4",
              title: "How do you measure success?",
              content: "We establish clear KPIs at the start of every project. Success is measured through metrics like lead generation, conversion rates, ROI, engagement rates, and overall brand growth depending on your goals."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          logoText="Marketing Pro"
          description="Elevating brands through strategic marketing, creative storytelling, and data-driven results."
          copyrightText="© 2025 Marketing Pro. All rights reserved."
          columns={[
            {
              title: "Services",
              items: [
                { label: "Digital Strategy", href: "services" },
                { label: "Social Media", href: "services" },
                { label: "Brand Development", href: "services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "about" },
                { label: "Case Studies", href: "testimonials" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}