"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Film, Sparkles, Award, Lightbulb, Phone } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSmall"
      background="noiseDiagonalGradient"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Work", id: "featured-work" },
            { name: "Process", id: "process" },
            { name: "Testimonials", id: "testimonials" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get In Touch", href: "contact" }}
          brandName="Creative Director"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial
          title="Stories Worth Telling"
          description="Creative director and editor crafting compelling visual narratives that transform brands and captivate audiences through strategic storytelling and meticulous editing."
          tag="Portfolio"
          tagIcon={Film}
          tagAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          imageSrc="http://img.b2bpic.net/free-photo/creative-videographer-editing-movie-computer-from-home-girlfriend-sofa-background_482257-31238.jpg"
          imageAlt="creative director film production video editing production studio"
          mediaAnimation="slide-up"
          testimonials={[
            {
              name: "Sarah Mitchell",              handle: "Creative Director, Brand Studio",              testimonial: "Exceptional vision combined with flawless execution. Transformed our brand narrative completely.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-11739.jpg",              imageAlt: "professional headshot portrait creative professional team member"
            },
            {
              name: "James Chen",              handle: "Producer, Film House",              testimonial: "The editing precision and creative choices elevated every frame. Truly visionary work.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "professional headshot portrait executive team member"
            },
            {
              name: "Emma Rodriguez",              handle: "CEO, Digital Agency",              testimonial: "A rare combination of technical mastery and creative brilliance. Unforgettable deliverables.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "professional headshot portrait business professional team member"
            }
          ]}
          buttons={[
            { text: "Explore My Work", href: "#featured-work" },
            { text: "Start a Project", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Storytelling Through Craft"
          description="With over a decade of experience, I specialize in transforming complex brand visions into compelling visual stories. As both a creative director and editor, I bring a unique perspective to every project—understanding narrative flow at every stage of production and post-production."
          tag="Creative Vision"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          metrics={[
            { value: "150+", title: "Projects Completed" },
            { value: "25", title: "Awards Won" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/man-filming-technology-review-recommending-newly-launched-dj-controller_482257-124553.jpg"
          imageAlt="creative director professional at work video editor filmmaker"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="featured-work" data-section="featured-work">
        <FeatureCardNineteen
          title="Signature Projects"
          description="A curated selection of work that showcases strategic vision, creative execution, and transformative impact"
          tag="Case Studies"
          tagIcon={Award}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              tag: "Brand Identity",              title: "Global Tech Launch",              subtitle: "From concept to market impact",              description: "Directed a comprehensive brand campaign for an international technology company. Led creative strategy, coordinated multi-location shoots, and oversaw post-production to create a cohesive narrative across 12 digital assets and a 60-second broadcast spot. Result: 340% increase in brand awareness.",              imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-digital-tablet-with-digital-marketing-graph_9975-22063.jpg",              imageAlt: "technology commercial tech campaign product launch digital marketing"
            },
            {
              id: 2,
              tag: "Documentary",              title: "Human Stories Series",              subtitle: "Five-part narrative documentary",              description: "Creative direction and editing of an intimate documentary series exploring social impact. Directed interviews, curated visual language, and crafted emotional arcs through precise editing. Each 25-minute episode resonates deeply with viewers through authentic storytelling and cinematographic excellence.",              imageSrc: "http://img.b2bpic.net/free-photo/professional-cameraman-recording-poeple-watching-football-public-place-night_1268-18138.jpg",              imageAlt: "documentary filming film production interview setup cinema camera"
            },
            {
              id: 3,
              tag: "Commercial",              title: "Premium Lifestyle Brand",              subtitle: "Luxury campaign execution",              description: "Directed and edited a high-end commercial campaign featuring cinematic aesthetics and sophisticated color grading. Creative direction established a distinctive visual language that elevated brand perception. Post-production refinements transformed raw footage into polished, award-winning content.",              imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg",              imageAlt: "luxury brand premium lifestyle luxury commercial high-end product"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "View Full Portfolio", href: "#" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="process" data-section="process">
        <MetricSplitMediaAbout
          title="My Creative Process"
          description="Every exceptional project follows a deliberate methodology. I begin with deep discovery—understanding your vision, audience, and goals. Throughout production, I maintain creative consistency while remaining adaptable. Post-production is where the real magic happens: meticulous editing, color grading, and sound design transform raw footage into a compelling narrative."
          tag="Methodology"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          metrics={[
            { value: "100%", title: "Client Satisfaction" },
            { value: "2x", title: "Faster Turnaround" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/businessmen-hands-wooden-table-with-documents-drafts_176420-367.jpg"
          imageAlt="creative workflow brainstorming production planning creative collaboration"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Working with this creative director was transformative. The vision, attention to detail, and ability to translate complex ideas into stunning visuals exceeded every expectation. A true creative partner."
          rating={5}
          author="Michael Torres, Executive Producer"
          avatars={[
            { src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" },
            { src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" },
            { src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" },
            { src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" },
            { src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" },
            { src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="call-to-action" data-section="call-to-action">
        <ContactFaq
          ctaTitle="Ready to Tell Your Story?"
          ctaDescription="Let's collaborate on a project that captures your vision and resonates with your audience."
          ctaButton={{ text: "Schedule a Creative Call", href: "#contact" }}
          ctaIcon={Phone}
          faqs={[
            {
              id: "1",              title: "What's your typical project timeline?",              content: "Project timelines vary based on scope and complexity. A typical commercial runs 4-8 weeks from concept to delivery, while longer-form content may take 8-12 weeks. We create custom timelines based on your specific needs."
            },
            {
              id: "2",              title: "Do you work with remote teams?",              content: "Absolutely. I collaborate seamlessly with remote teams using industry-standard tools and clear communication protocols. Distance is never a limitation to creative excellence."
            },
            {
              id: "3",              title: "What's your revision process?",              content: "I include revision rounds in every project. We work iteratively until you're completely satisfied. My goal is to ensure the final product exceeds your expectations."
            },
            {
              id: "4",              title: "Can you handle rush projects?",              content: "Yes, depending on availability. Rush projects require expedited timelines and may involve premium rates, but we can accommodate urgent needs without compromising quality."
            }
          ]}
          useInvertedBackground={false}
          animationType="slide-up"
          accordionAnimationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Creative Director"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Contact", href: "#contact" }}
        />
      </div>
    </ThemeProvider>
  );
}
