"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import FeatureCardEleven from '@/components/sections/feature/FeatureCardEleven';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Zap, TrendingUp, Star, Play, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="noise"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Media Maxxing"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Results", id: "metrics" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="User-Generated Content That Converts"
          description="We create authentic, high-converting UGC videos and content that resonate with your audience. Scale your brand with proven media strategies."
          tag="UGC Marketing Agency"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508755463-1pzweejz.jpg"
          imageAlt="UGC content creation studio"
          imagePosition="right"
          buttons={[
            { text: "See Our Work", href: "testimonials" },
            { text: "Get Free Audit", href: "contact" }
          ]}
          className="w-full"
          containerClassName="max-w-7xl mx-auto px-4 md:px-8"
          titleClassName="text-4xl md:text-5xl font-bold tracking-tight"
          descriptionClassName="text-base md:text-lg text-foreground/80 leading-relaxed"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardEleven
          title="Our UGC Creation Process"
          description="From concept to conversion, we handle every step of authentic content creation."
          tag="How We Work"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          usePrimaryButtonImage={false}
          features={[
            {
              id: 1,
              title: "Strategy & Scripting",
              description: "We develop compelling scripts tailored to your product, target audience, and conversion goals. Every word is optimized for engagement and action.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766818957562-i1c181ll.jpg",
              imageAlt: "Content strategy and scripting"
            },
            {
              id: 2,
              title: "Professional Production",
              description: "High-quality filming with experienced creators using professional equipment. We capture authentic performances that showcase your product benefits.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766818958233-8fy7l3mw.jpg",
              imageAlt: "Professional UGC filming"
            },
            {
              id: 3,
              title: "Post-Production Excellence",
              description: "Expert editing, color grading, and sound design. We enhance each video while maintaining authenticity that viewers trust and connect with.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766818958948-ndhb2v8a.jpg",
              imageAlt: "Video editing and post-production"
            },
            {
              id: 4,
              title: "Performance Optimization",
              description: "Detailed analytics and A/B testing ensure your content performs at peak efficiency. We continuously refine for maximum conversions and ROI.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508755463-1pzweejz.jpg",
              imageAlt: "Analytics and optimization"
            }
          ]}
          titleClassName="text-4xl md:text-5xl font-bold"
          cardTitleClassName="text-2xl md:text-4xl font-bold"
          cardDescriptionClassName="text-base leading-relaxed text-foreground/70"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Proven Results for Our Clients"
          description="See the impact authentic UGC has on brand growth and conversion."
          tag="Real Performance Data"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              value: "320%",
              title: "Average ROI Increase",
              description: "Client revenue growth from UGC campaigns",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766677288032-ilvz0m5k.jpg",
              imageAlt: "Revenue growth metrics"
            },
            {
              id: "2",
              value: "8.5M+",
              title: "Combined Views Generated",
              description: "Total reach across all client content",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766818959772-vmzi75fb.jpg",
              imageAlt: "Content reach and engagement"
            }
          ]}
          valueClassName="text-4xl md:text-5xl font-bold"
          cardTitleClassName="text-xl font-semibold"
          cardDescriptionClassName="text-sm text-foreground/60"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by leading brands that demand authentic, high-converting content"
          cardTag="See Client Success Stories"
          cardTagIcon={Star}
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490270889-y1dksta5.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "2",
              name: "Marcus Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766818961513-mx8nd1f5.jpg",
              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766818962322-zwnay6g5.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              name: "David Kim",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766818962925-pftcji1l.jpg",
              imageAlt: "David Kim"
            }
          ]}
          cardTitleClassName="text-2xl md:text-3xl font-bold text-center"
          cardTagClassName="text-sm font-medium text-primary-cta"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Flexible UGC Packages"
          description="Choose the perfect plan for your content needs and budget."
          tag="Pricing"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "starter",
              tag: "Starter Package",
              tagIcon: Play,
              price: "$2,500",
              period: "/video",
              description: "Perfect for testing UGC with a single high-quality video.",
              button: {
                text: "Get Started",
                href: "contact"
              },
              featuresTitle: "What's Included:",
              features: [
                "1 Professional UGC video",
                "Script writing & strategy",
                "Professional editing",
                "Performance analytics"
              ]
            },
            {
              id: "professional",
              tag: "Professional Plan",
              tagIcon: Sparkles,
              price: "$6,500",
              period: "/package",
              description: "Ideal for growing brands launching multiple content pieces.",
              button: {
                text: "Schedule Call",
                href: "contact"
              },
              featuresTitle: "What's Included:",
              features: [
                "3 UGC videos",
                "Custom script development",
                "A/B test variations",
                "Advanced analytics",
                "1 revision round"
              ]
            },
            {
              id: "enterprise",
              tag: "Enterprise Solution",
              tagIcon: Zap,
              price: "Custom",
              period: "/month",
              description: "Unlimited content creation with dedicated team support.",
              button: {
                text: "Request Demo",
                href: "contact"
              },
              featuresTitle: "What's Included:",
              features: [
                "Unlimited monthly videos",
                "Dedicated content strategist",
                "Priority production timeline",
                "Real-time performance optimization",
                "Unlimited revisions",
                "Strategic consulting"
              ]
            }
          ]}
          planTagClassName="text-sm font-semibold text-primary-cta"
          planPriceClassName="text-4xl font-bold"
          planDescriptionClassName="text-foreground/70"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Maximize Your Media?"
          description="Join brands that are crushing their conversion goals with authentic UGC. Send us a message and let's discuss your content strategy."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="your@email.com"
          buttonText="Send Message"
          termsText="We respect your privacy. We'll only reach out with personalized solutions."
          titleClassName="text-3xl md:text-4xl font-bold"
          descriptionClassName="text-base text-foreground/70"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Media Maxxing"
          columns={[
            {
              title: "Services",
              items: [
                { label: "UGC Videos", href: "#services" },
                { label: "Content Strategy", href: "#services" },
                { label: "Performance Optimization", href: "#services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#" },
                { label: "Portfolio", href: "#testimonials" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Pricing", href: "#pricing" },
                { label: "Case Studies", href: "#testimonials" },
                { label: "Guides", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Media Maxxing. All rights reserved."
          logoTextClassName="text-3xl font-bold"
          columnTitleClassName="font-semibold text-foreground"
          columnItemClassName="text-foreground/70 hover:text-foreground transition-colors"
        />
      </div>
    </ThemeProvider>
  );
}