"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import {
  Target,
  Share2,
  Film,
  Users,
  BarChart3,
  Zap,
  TrendingUp,
  Instagram,
  Facebook,
  Linkedin,
  Music,
} from "lucide-react";

export default function DigitalMarketingPage() {
  const navItems = [
    { name: "DJ Events", id: "dj-events" },
    { name: "Marketing", id: "digital-marketing" },
    { name: "Portfolio", id: "portfolio" },
    { name: "About", id: "about" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSmall"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Sonic Motion"
          navItems={navItems}
          button={{
            text: "Book Your Event",
            href: "#contact",
          }}
          animateOnLoad={true}
        />
      </div>

      {/* Marketing Services Section */}
      <div id="marketing-services" data-section="marketing-services">
        <FeatureCardTwentySix
          features={[
            {
              title: "Social Media Strategy & Execution",
              description:
                "Data-driven campaigns across Instagram, TikTok, Facebook, and emerging platforms designed to drive engagement and conversions.",
              imageSrc:
                "http://img.b2bpic.net/free-psd/digital-marketing-agency-collaborate-your-project_505751-8222.jpg?_wi=3",
              imageAlt: "Social media marketing",
              buttonIcon: Share2,
              buttonHref: "/digital-marketing",
            },
            {
              title: "Content Creation & Video Production",
              description:
                "Compelling visual storytelling that captures brand identity and resonates with target audiences across all digital touchpoints.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/pretty-blonde-influencer-testing-new-products-camera_496169-427.jpg?_wi=2",
              imageAlt: "Content creation",
              buttonIcon: Film,
              buttonHref: "/digital-marketing",
            },
            {
              title: "Influencer & Partnership Marketing",
              description:
                "Strategic collaborations with key opinion leaders and brand partners to extend reach and build authentic credibility.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/female-journalist-talking-her-cameraman_23-2149032401.jpg?_wi=2",
              imageAlt: "Influencer partnerships",
              buttonIcon: Users,
              buttonHref: "/digital-marketing",
            },
            {
              title: "Performance Analytics & Reporting",
              description:
                "Transparent ROI tracking and detailed analytics that prove campaign effectiveness and inform future strategy optimization.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/young-woman-analysing-charts-laptop-start-up-business-meeting-room_482257-5026.jpg?_wi=3",
              imageAlt: "Campaign analytics",
              buttonIcon: BarChart3,
              buttonHref: "/digital-marketing",
            },
          ]}
          title="Digital Marketing & Brand Activation"
          description="Strategic campaigns and experiential marketing that amplify brand presence across digital channels and live activations."
          tag="Marketing"
          tagIcon={Target}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Marketing-Specific Metrics Section */}
      <div id="marketing-metrics" data-section="marketing-metrics">
        <MetricCardThree
          title="Marketing Campaign Results"
          description="Proven performance metrics that showcase our digital expertise."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            { id: "1", icon: TrendingUp, title: "Average ROI", value: "340%" },
            { id: "2", icon: Zap, title: "Campaign Success Rate", value: "94%" },
            { id: "3", icon: Users, title: "Audience Growth", value: "250K+" },
            { id: "4", icon: BarChart3, title: "Conversion Increase", value: "165%" },
          ]}
        />
      </div>

      {/* Contact CTA Section */}
      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Launch?"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Start Your Digital Marketing Campaign Today"
          description="Whether you need to build brand awareness, drive sales, or activate an engaged community, Sonic Motion delivers results. Let's craft a strategy that moves your market."
          buttons={[
            {
              text: "Start Marketing Campaign",
              href: "mailto:marketing@sonicmotion.com",
            },
            { text: "Request Consultation", href: "/" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Sonic Motion"
          copyrightText="© 2025 Sonic Motion | Production Experts for Nightlife & Digital Marketing"
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com",
              ariaLabel: "Instagram",
            },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Music, href: "https://soundcloud.com", ariaLabel: "SoundCloud" },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}