"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';

import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import {
  Award,
  CalendarCheck,
  Camera,
  CheckCircle,
  Crop,
  Download,
  Film,
  Headphones,
  Instagram,
  LifeBuoy,
  Lightbulb,
  Linkedin,
  Mic,
  Music,
  PencilRuler,
  Rocket,
  Sparkles,
  Twitter,
  Upload,
  Volume2,
} from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "#about" }, { name: "Services", id: "#features-detailed" }, { name: "Clients", id: "/" }, { name: "Contact", id: "#contact" }]}
          brandName="Pro Studio"
          button={{ text: "Get a Quote", href: "#contact" }}
          className="bg-card/90 backdrop-blur-sm shadow-lg"
          navItemClassName="text-foreground hover:text-primary-cta transition-colors duration-300"
          buttonClassName="bg-primary-cta text-secondary-cta px-6 py-2 rounded-pill hover:bg-accent hover:text-primary-cta transition-all duration-300"
          buttonTextClassName="font-medium text-base"
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Bringing Your Vision to Life"
          description="We are a full-service production studio specializing in video, audio, and creative content that captivates audiences and delivers results."
          background={{ variant: "glowing-orb" }}
          kpis={[{ value: "15+", label: "Years Experience" }, { value: "500+", label: "Projects Delivered" }, { value: "98%", label: "Client Satisfaction" }]}
          enableKpiAnimation={true}
          tag="Your Story, Our Expertise"
          buttons={[{ text: "View Our Work", href: "#services" }, { text: "Get a Free Consultation", href: "#contact" }]}
          imageSrc="https://img.b2bpic.net/free-photo/medium-shot-people-radio-station_23-2148802324.jpg?_wi=1"
          imageAlt="Professional production studio set up"
          mediaAnimation="slide-up"
          imagePosition="right"
          className="py-24 md:py-32 lg:py-40"
          titleClassName="text-4xl md:text-6xl font-extrabold leading-tight"
          descriptionClassName="text-lg md:text-xl max-w-2xl mx-auto"
          tagClassName="text-sm font-semibold text-primary-cta"
          buttonClassName="px-8 py-3 rounded-pill text-lg"
          buttonTextClassName="font-semibold"
          marqueeItems={[
            { type: "text", text: "Creative Minds Agency" },
            { type: "text", text: "GlobalTech Solutions" },
            { type: "text", text: "Apex Innovations" },
            { type: "text", text: "Nexus Games" },
            { type: "text", text: "Bloom Skincare" },
            { type: "text", text: "FutureForward Consulting" },
            { type: "text", text: "Digital Horizon Studios" },
            { type: "text", text: "Urban Living Magazine" },
            { type: "text", text: "Veridian Dynamics" },
            { type: "text", text: "Starlight Entertainment" }
          ]}
          marqueeSpeed={40}
          showMarqueeCard={true}
          marqueeTextClassName="text-2xl font-semibold text-foreground/80"
          marqueeCardClassName="bg-card/70 backdrop-blur-md"
        />
      </div>
      <div id="about" data-section="about">
        <TextAbout
          tag="Who We Are"
          title="Crafting compelling narratives through exceptional production quality."
          useInvertedBackground={true}
          buttons={[{ text: "Learn More About Us", href: "#contact" }]}
          className="py-20 md:py-28 lg:py-36 bg-background-accent"
          containerClassName="max-w-4xl"
          titleClassName="text-3xl md:text-5xl font-bold leading-tight"
          buttonClassName="px-8 py-3 rounded-pill text-lg"
          buttonTextClassName="font-semibold"
        />
      </div>
      <div id="features" data-section="features">
        <FeatureCardNineteen
          features={[
            {
              id: 1,
              tag: "Concept & Strategy",              title: "Discovery & Planning",              subtitle: "Laying the groundwork for success.",              description: "Every great project begins with a clear vision. We collaborate closely with you to understand your objectives, audience, and message, developing a strategic roadmap that ensures your content resonates.",              imageSrc: "https://img.b2bpic.net/free-photo/team-young-colleagues-having-meeting-cafe_273609-16259.jpg",              imageAlt: "Team brainstorming creative concepts."
            },
            {
              id: 2,
              tag: "Production & Filming",              title: "Bringing Ideas to Life",              subtitle: "High-quality execution, every take.",              description: "From dazzling visuals to crystal-clear audio, our experienced crew utilizes state-of-the-art equipment and techniques to capture every detail. We manage all aspects of filming, sound recording, and on-set direction.",              imageSrc: "https://img.b2bpic.net/free-photo/professional-cameraman-recording-poeple-watching-football-public-place-night_1268-18138.jpg?_wi=1",              imageAlt: "Film crew on set with professional camera equipment."
            },
            {
              id: 3,
              tag: "Post-Production & Refinement",              title: "Polishing the Masterpiece",              subtitle: "Turning raw footage into captivating stories.",              description: "Our post-production team meticulously edits, color grades, and mixes audio to transform raw footage into a polished, impactful final product. We handle everything from visual effects to sound design to deliver cinematic quality.",              imageSrc: "https://img.b2bpic.net/free-photo/producer-songwriter-mixing-mastering-tracks-with-stereo-gear_482257-121217.jpg?_wi=1",              imageAlt: "Video editor working on a multi-screen setup."
            }
          ]}
          title="Our Seamless Production Process"
          description="From initial concept to final delivery, we guide you through every step with expertise and precision."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="How We Work"
          className="py-20 md:py-28 lg:py-36"
          textBoxTitleClassName="text-3xl md:text-5xl font-bold leading-tight"
          textBoxDescriptionClassName="text-lg max-w-2xl mx-auto"
          cardTagClassName="text-primary-cta font-semibold"
          cardTitleClassName="text-2xl md:text-3xl font-bold"
          cardDescriptionClassName="text-base text-foreground/70"
        />
      </div>
      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            { id: "1", value: "99", title: "% Accuracy", description: "In project delivery and client brief adherence.", icon: CheckCircle },
            { id: "2", value: "1000", title: "Projects", description: "Successfully completed for diverse clients.", icon: Sparkles },
            { id: "3", value: "70", title: "Awards", description: "Recognizing our creative and technical excellence.", icon: Award }
          ]}
          carouselMode="buttons"
          gridVariant="uniform-all-items-equal"
          animationType="depth-3d"
          title="Our Impact: Driven by Excellence"
          description="Numbers that speak volumes about our dedication to quality and client success."
          textboxLayout="default"
          useInvertedBackground={false}
          className="py-20 md:py-28 lg:py-36 bg-background-accent"
          cardClassName="bg-card/70 backdrop-blur-md"
          textBoxTitleClassName="text-3xl md:text-5xl font-bold leading-tight"
          textBoxDescriptionClassName="text-lg max-w-2xl mx-auto"
          valueClassName="text-6xl md:text-7xl font-extrabold"
          titleClassName="text-2xl md:text-3xl font-bold"
          descriptionClassName="text-base text-foreground/70"
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson, CEO of Apex Innovations",              date: "Date: October 26, 2023",              title: "Exceeded Our Expectations!",              quote: "\"The team at Pro Studio transformed our complex ideas into a visually stunning and impactful brand video. Their professionalism and creativity are unparalleled. We saw a significant increase in engagement almost immediately.\"",              tag: "Brand Video Production",              avatarSrc: "https://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-radio-station_23-2148802324.jpg?_wi=2",              imageAlt: "Client Sarah Johnson in a meeting"
            },
            {
              id: "2",              name: "Michael Chen, Marketing Director at GlobalTech",              date: "Date: September 15, 2023",              title: "A True Partner in Content Creation",              quote: "\"Working with Pro Studio was a game-changer for our product launch. They handled everything from scripting to final delivery, and the results were phenomenal. They truly understand what it takes to produce compelling content.\"",              tag: "Product Launch Content",              avatarSrc: "https://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-people-working-together_23-2149636267.jpg",              imageAlt: "Client Michael Chen giving a presentation"
            },
            {
              id: "3",              name: "Emily Rodriguez, Founder of Creativista Media",              date: "Date: August 01, 2023",              title: "Incredible Vision and Execution",              quote: "\"Pro Studio's ability to grasp our artistic vision and translate it into a beautiful short film was extraordinary. Their attention to detail and passion for storytelling shone through every frame. Highly recommend!\"",              tag: "Short Film Production",              avatarSrc: "https://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/professional-cameraman-recording-poeple-watching-football-public-place-night_1268-18138.jpg?_wi=2",              imageAlt: "Client Emily Rodriguez directing a shoot"
            },
            {
              id: "4",              name: "David Kim, Lead Developer at Nexus Games",              date: "Date: July 10, 2023",              title: "Flawless Audio Design for Our Game",              quote: "\"We needed immersive sound design for our new game, and Pro Studio delivered beyond our wildest hopes. The audio quality and atmospheric effects are top-notch, elevating the entire player experience. They are masters of sound.\"",              tag: "Game Audio Production",              avatarSrc: "https://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/producer-songwriter-mixing-mastering-tracks-with-stereo-gear_482257-121217.jpg?_wi=2",              imageAlt: "Client David Kim reviewing game audio"
            }
          ]}
          title="What Our Clients Say"
          description="Hear directly from the businesses and individuals who have experienced the Pro Studio difference."
          textboxLayout="default"
          useInvertedBackground={false}
          className="py-20 md:py-28 lg:py-36"
          textBoxTitleClassName="text-3xl md:text-5xl font-bold leading-tight"
          textBoxDescriptionClassName="text-lg max-w-2xl mx-auto"
          cardTagClassName="text-primary-cta font-semibold"
          cardTitleClassName="text-xl md:text-2xl font-bold"
          cardQuoteClassName="text-base text-foreground/70 italic"
          cardNameClassName="font-semibold text-lg"
          cardDateClassName="text-sm text-foreground/60"
        />
      </div>
      
      <div id="features-detailed" data-section="features-detailed">
        <FeatureCardTen
          features={[
            {
              id: "01",              title: "Pre-Production & Concept Development",              description: "We delve deep into your project's core, crafting compelling scripts, detailed storyboards, and comprehensive production plans that align perfectly with your vision and objectives.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/some-important-notes-must-be-written-down_329181-10278.jpg", imageAlt: "Creative team brainstorming ideas on a whiteboard" },
              items: [{ icon: Lightbulb, text: "Scriptwriting & Storyboarding" }, { icon: PencilRuler, text: "Concept & Creative Direction" }, { icon: CalendarCheck, text: "Detailed Production Planning" }],
              reverse: false
            },
            {
              id: "02",              title: "High-Quality Video Production",              description: "Our seasoned cinematographers and crew utilize cutting-edge cameras, lighting, and sound equipment to capture breathtaking visuals and crystal-clear audio, ensuring every shot is perfect.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/professional-cameraman-recording-poeple-watching-football-public-place-night_1268-18138.jpg?_wi=3", imageAlt: "Filming on a professional movie set" },
              items: [{ icon: Camera, text: "4K/8K Cinematography" }, { icon: Mic, text: "Professional Audio Recording" }, { icon: Film, text: "Multi-Camera Setups" }],
              reverse: true
            },
            {
              id: "03",              title: "Immersive Audio Production & Sound Design",              description: "From voiceovers and custom scores to intricate soundscapes, our audio experts create a rich sonic experience that elevates your content and deeply engages your audience.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/man-recording-studio-music-production_1303-20391.jpg", imageAlt: "Sound engineer working in an audio recording studio" },
              items: [{ icon: Headphones, text: "Voiceover & ADR" }, { icon: Music, text: "Original Music Composition" }, { icon: Volume2, text: "Advanced Sound Mixing & Mastering" }],
              reverse: false
            },
            {
              id: "04",              title: "Dynamic Post-Production & VFX",              description: "Our editors meticulously craft your story, enhancing it with professional color grading, seamless visual effects, motion graphics, and a polished final edit that captivates viewers.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/focused-editor-woman-works-video-montage-creative-software_482257-120176.jpg", imageAlt: "Video editor working on complex visual effects" },
              items: [{ icon: Crop, text: "Precision Editing & Color Grading" }, { icon: Sparkles, text: "Visual Effects (VFX) & Motion Graphics" }, { icon: Upload, text: "Multi-Format Delivery" }],
              reverse: true
            },
            {
              id: "05",              title: "Seamless Project Delivery & Support",              description: "We ensure your final product is delivered on time, in the correct format, and optimized for your chosen platforms. Our support doesn't end at delivery; we're here for any adjustments and future needs.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/corporate-business-people_23-2148827020.jpg", imageAlt: "Client and production team shaking hands over a delivered project" },
              items: [{ icon: Rocket, text: "Optimized Platform Delivery" }, { icon: Download, text: "Digital Asset Management" }, { icon: LifeBuoy, text: "Ongoing Client Support" }],
              reverse: false
            }
          ]}
          title="Our Comprehensive Services"
          description="Explore our end-to-end production capabilities designed to bring any creative project to fruition with unparalleled quality."
          tag="What We Offer"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          className="py-20 md:py-28 lg:py-36 bg-background-accent"
          textBoxTitleClassName="text-3xl md:text-5xl font-bold leading-tight"
          textBoxDescriptionClassName="text-lg max-w-2xl mx-auto"
          featureTitleClassName="text-2xl md:text-3xl font-bold"
          featureDescriptionClassName="text-base text-foreground/70"
          listItemClassName="text-foreground/80"
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to Elevate Your Story? Let's Create Something Unforgettable."
          animationType="entrance-slide"
          buttons={[{ text: "Start a Project", href: "#contact" }, { text: "Call Us Today", href: "tel:+1234567890" }]}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          className="py-20 md:py-28 lg:py-36"
          contentClassName="bg-card/70 backdrop-blur-md"
          textClassName="text-3xl md:text-5xl font-bold leading-tight"
          buttonClassName="px-8 py-3 rounded-pill text-lg"
          buttonTextClassName="font-semibold"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Pro Studio"
          copyrightText="© 2023 Pro Studio. All rights reserved."
          socialLinks={[{ icon: Twitter, href: "https://twitter.com/prostudio", ariaLabel: "Twitter" }, { icon: Linkedin, href: "https://linkedin.com/company/prostudio", ariaLabel: "LinkedIn" }, { icon: Instagram, href: "https://instagram.com/prostudio", ariaLabel: "Instagram" }]}
          className="py-16 md:py-24 bg-background-accent"
          cardClassName="bg-card/70 backdrop-blur-md"
          logoClassName="text-2xl font-bold text-foreground"
          copyrightTextClassName="text-sm text-foreground/70"
          socialIconClassName="text-foreground/80 hover:text-primary-cta transition-colors duration-300"
        />
      </div>
    </ThemeProvider>
  );
}
