"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, TrendingUp, Target, DollarSign, Users } from "lucide-react";

export default function MediaBuyingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="blurBottom"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Hero", id: "hero-section" },
            { name: "About", id: "about-section" },
            { name: "Feature", id: "features-section" },
            { name: "Metric", id: "metrics-section" },
            { name: "Testimonial", id: "testimonials-section" },
            { name: "Contact", id: "contact-section" }
          ]}
          brandName="MediaBuy Pro"
          button={{
            text: "Get Started",            href: "#contact-section"
          }}
        />
      </div>

      <div id="hero-section" data-section="hero-section">
        <HeroBillboardCarousel
          title="Strategic Media Buying That Drives Results"
          description="Transform your advertising ROI with data-driven media strategies tailored to your brand's unique objectives. Expertise in programmatic buying, DSP optimization, and cross-channel campaign management."
          background={{ variant: "radial-gradient" }}
          tag="Award-Winning Media Strategist"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "View Case Studies", href: "#features-section" },
            { text: "Schedule Consultation", href: "#contact-section" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-analysing-charts-laptop-start-up-business-meeting-room_482257-5026.jpg",              imageAlt: "Professional media buying dashboard showing real-time campaign performance metrics"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg?_wi=1",              imageAlt: "Business team analyzing media performance"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/business-people-working-laptop_53876-20853.jpg?_wi=1",              imageAlt: "Media strategy planning session"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/business-meeting-office_1268-21517.jpg?_wi=1",              imageAlt: "Client consultation meeting"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg?_wi=1",              imageAlt: "Diverse marketing team collaboration"
            }
          ]}
          ariaLabel="Hero section featuring media buying expertise and strategic advertising solutions"
        />
      </div>

      <div id="about-section" data-section="about-section">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Transforming Media Strategies Into Measurable Results" },
            {
              type: "image",              src: "https://img.b2bpic.net/free-photo/young-woman-analysing-charts-laptop-start-up-business-meeting-room_482257-5026.jpg",              alt: "Media buying expert working with data analytics"
            },
            {
              type: "text",              content: "With over 8 years of experience in the digital advertising landscape, I specialize in crafting data-driven media strategies that maximize ROI for brands across industries."
            }
          ]}
          buttons={[
            { text: "View My Approach", href: "#features-section" },
            { text: "See Case Studies", href: "#testimonials-section" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="About section highlighting media buying expertise"
        />
      </div>

      <div id="features-section" data-section="features-section">
        <FeatureCardNineteen
          title="Strategic Media Buying Solutions"
          description="Comprehensive media planning and buying services designed to maximize your brand's reach and ROI through data-driven strategies and premium placements."
          textboxLayout="split-description"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              tag: "Performance Analytics",              title: "Data-Driven Campaigns",              subtitle: "Precision targeting with real-time insights",              description: "Our advanced analytics platform tracks performance metrics across all channels, enabling us to optimize campaigns for maximum efficiency and measurable results.",              imageSrc: "https://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg?_wi=2",              imageAlt: "Analytics dashboard showing campaign performance metrics",              buttons: [
                { text: "View Case Studies", href: "#testimonials-section" }
              ]
            },
            {
              id: 2,
              tag: "Cross-Platform Strategy",              title: "Integrated Media Planning",              subtitle: "Seamless coordination across digital and traditional channels",              description: "We develop cohesive strategies that span television, digital, social, and print platforms, ensuring consistent messaging and amplified impact.",              imageSrc: "https://img.b2bpic.net/free-photo/business-people-working-laptop_53876-20853.jpg?_wi=2",              imageAlt: "Infographic showing integration of various media platforms",              buttons: [
                { text: "Explore Services", href: "#about-section" }
              ]
            },
            {
              id: 3,
              tag: "ROI Optimization",              title: "Budget Efficiency",              subtitle: "Maximizing return on investment with smart allocation",              description: "Through strategic buying and negotiation, we ensure every dollar spent delivers measurable value, reducing waste and increasing campaign effectiveness.",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-budget-planning-note-with-pens-gray-surface-job-copybook-school-student-business-work-college-money-budget_179666-19724.jpg",              imageAlt: "Chart showing improved ROI after media buying optimization",              buttons: [
                { text: "See Results", href: "#metrics-section" }
              ]
            }
          ]}
          buttons={[
            { text: "Get Started", href: "#contact-section" }
          ]}
        />
      </div>

      <div id="metrics-section" data-section="metrics-section">
        <MetricCardThree
          title="Media Buying Impact Metrics"
          description="Proven results delivered through strategic media planning and execution across multiple channels."
          metrics={[
            {
              id: "metric-1",              icon: TrendingUp,
              title: "ROI Increase",              value: "+240%"
            },
            {
              id: "metric-2",              icon: Target,
              title: "Audience Reach",              value: "12M+ impressions"
            },
            {
              id: "metric-3",              icon: DollarSign,
              title: "Cost Savings",              value: "$2.3M annually"
            },
            {
              id: "metric-4",              icon: Users,
              title: "Client Retention",              value: "98%"
            }
          ]}
          carouselMode="buttons"
          animationType="slide-up"
          textboxLayout="inline-image"
          useInvertedBackground={false}
          buttons={[
            { text: "View Case Studies", href: "#features-section" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials-section" data-section="testimonials-section">
        <TestimonialCardSixteen
          testimonials={[
            {
              id: "testimonial-1",              name: "Sarah Johnson",              role: "Marketing Director",              company: "TechGrowth Inc.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/business-meeting-office_1268-21517.jpg?_wi=2",              imageAlt: "Sarah Johnson, Marketing Director at TechGrowth Inc."
            },
            {
              id: "testimonial-2",              name: "Michael Chen",              role: "Brand Manager",              company: "Global Retail Solutions",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/business-meeting-office_1268-21517.jpg?_wi=3",              imageAlt: "Michael Chen, Brand Manager at Global Retail Solutions"
            },
            {
              id: "testimonial-3",              name: "Elena Rodriguez",              role: "CEO",              company: "Creative Dynamics",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/business-progress-report-graph-concept_53876-15869.jpg",              imageAlt: "Elena Rodriguez, CEO at Creative Dynamics"
            }
          ]}
          kpiItems={[
            { value: "42%", label: "Average CTR Increase" },
            { value: "$2.3M", label: "Media Budget Saved" },
            { value: "18%", label: "ROI Improvement" }
          ]}
          animationType="slide-up"
          title="Trusted by Industry Leaders"
          description="Discover how our strategic media buying expertise has transformed marketing outcomes for top-tier brands across various sectors."
          tag="Client Success Stories"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "View Case Studies", href: "#features-section" }
          ]}
          buttonAnimation="opacity"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
          ariaLabel="Client testimonials and success metrics"
        />
      </div>

      <div id="contact-section" data-section="contact-section">
        <ContactSplitForm
          title="Let's Discuss Your Media Strategy"
          description="Ready to optimize your advertising spend? Reach out to schedule a consultation and discover how strategic media buying can elevate your brand's performance."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Full Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Business Email Address",              required: true
            },
            {
              name: "company",              type: "text",              placeholder: "Company Name",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your media objectives...",            rows: 4,
            required: true
          }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg?_wi=2"
          imageAlt="Media buying expert discussing strategies with a client"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Start Strategic Partnership"
          ariaLabel="Contact section for media buying consultation"
        />
      </div>

      <div id="footer-section" data-section="footer-section">
        <FooterBaseCard
          logoText="MediaStrategix"
          columns={[
            {
              title: "Services",              items: [
                { label: "Media Buying", href: "#features-section" },
                { label: "Campaign Strategy", href: "#features-section" },
                { label: "Performance Analytics", href: "#metrics-section" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Me", href: "#about-section" },
                { label: "Testimonials", href: "#testimonials-section" },
                { label: "Contact", href: "#contact-section" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Case Studies", href: "#testimonials-section" },
                { label: "Blog", href: "#" },
                { label: "Media Kit", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 MediaStrategix. All rights reserved."
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}