"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumSizeLargeTitles"
        background="circleGradient"
        cardStyle="layered-gradient"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Home", id: "hero" },
              { name: "About", id: "about" },
              { name: "Process", id: "process" },
              { name: "Team", id: "team" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="Motion3D Studio"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroOverlayTestimonial
            title="Bring Your Ideas to Life in 3D"
            description="We specialize in cinematic 3D animation and motion graphics that captivate audiences and elevate your brand narrative."
            testimonials={[
              { name: "Sarah Jenkins", handle: "@sarah_j", testimonial: "The work delivered was absolutely breathtaking, the attention to detail in the motion graphics is top-tier.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fairy-tale-world-with-delicious-candy_23-2150799048.jpg?_wi=1", imageAlt: "abstract 3d motion graphics red neon" },
              { name: "Mark Sterling", handle: "@mark_s", testimonial: "Motion3D Studio redefined our brand video with stunning 3D elements. Fast communication and professional results.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/computer-screen-office-workspace_23-2148821931.jpg?_wi=1", imageAlt: "modern 3d animation design workspace" },
              { name: "Elena Ross", handle: "@elena_r", testimonial: "Highly recommended for any company needing high-end 3D character animation. Truly talented artists.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg?_wi=1", imageAlt: "abstract geometric 3d animation concept" },
              { name: "David Chen", handle: "@d_chen", testimonial: "They captured the exact vision of our project and brought it to life with incredible motion quality.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg?_wi=1", imageAlt: "3d character rigging process visual" },
              { name: "Linda Wu", handle: "@linda_w", testimonial: "Game-changing visuals. Working with the team was seamless and the final deliverable was beyond expectations.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cropped-portrait-young-joyful-man-white-shirt-posing-camera-with-broad-smile-isolated-dark-gray-wall_171337-457.jpg?_wi=1", imageAlt: "professional portrait of creative agency client" },
            ]}
            buttons={[
              { text: "See Our Work", href: "#contact" },
              { text: "Get a Quote", href: "#contact" },
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/fairy-tale-world-with-delicious-candy_23-2150799048.jpg?_wi=2"
            imageAlt="Cinematic 3D animation reel scene"
            avatars={[
              { src: "http://img.b2bpic.net/free-photo/cropped-portrait-young-joyful-man-white-shirt-posing-camera-with-broad-smile-isolated-dark-gray-wall_171337-457.jpg", alt: "Sarah Jenkins" },
              { src: "http://img.b2bpic.net/free-photo/portrait-stylish-serious-bearded-male-wearing-elegant-suit-dark-background_613910-11332.jpg", alt: "Mark Sterling" },
              { src: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13551.jpg", alt: "Elena Ross" },
              { src: "http://img.b2bpic.net/free-photo/front-view-boy-posing-with-neon-light_23-2149596328.jpg", alt: "David Chen" },
              { src: "http://img.b2bpic.net/free-photo/solar-panels-industry-technician-high-tech-factory-inspection-quality-control-production_482257-132256.jpg", alt: "Linda Wu" },
            ]}
          />
        </div>

        <div id="about" data-section="about">
          <TextSplitAbout
            useInvertedBackground={true}
            title="Crafting Motion with Precision"
            description={[
              "At Motion3D Studio, we blend artistry with cutting-edge technology to produce high-impact 3D animations.",              "Our team consists of industry-leading motion designers, animators, and technical artists dedicated to your project's success.",              "From dynamic product commercials to character-driven storytelling, we thrive on challenges that push the boundaries of CGI."]}
          />
        </div>

        <div id="process" data-section="process">
          <FeatureCardNine
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            showStepNumbers={true}
            title="Our Animation Process"
            description="A streamlined workflow ensuring top-quality results from initial concept to the final frame render."
            features={[
              {
                title: "Conceptual Storyboarding",                description: "Defining the narrative and visuals before starting the build phase.",                phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg?_wi=2", imageAlt: "Conceptual phase" },
                phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg?_wi=2", imageAlt: "Character phase" },
              },
              {
                title: "3D Asset Creation",                description: "Meticulous modeling, texturing, and rigging to create photorealistic assets.",                phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg?_wi=3", imageAlt: "3D Modeling" },
                phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg?_wi=3", imageAlt: "Texturing" },
              },
              {
                title: "Final Render & Polish",                description: "Advanced rendering and post-production coloring for a flawless final look.",                phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg?_wi=4", imageAlt: "Final Render" },
                phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg?_wi=4", imageAlt: "Polishing" },
              },
            ]}
          />
        </div>

        <div id="team" data-section="team">
          <TeamCardOne
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="uniform-all-items-equal"
            useInvertedBackground={false}
            title="Meet the Minds Behind the Motion"
            description="Our studio is home to elite 3D artists, technical directors, and visionary storytellers dedicated to pushing the limits of digital art."
            members={[
              { id: "m1", name: "Marcus Vane", role: "Lead Animator", imageSrc: "http://img.b2bpic.net/free-photo/cropped-portrait-young-joyful-man-white-shirt-posing-camera-with-broad-smile-isolated-dark-gray-wall_171337-457.jpg?_wi=2" },
              { id: "m2", name: "Elena Thorne", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-serious-bearded-male-wearing-elegant-suit-dark-background_613910-11332.jpg" },
              { id: "m3", name: "Jaxen Ryle", role: "Technical Lead", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13551.jpg" },
              { id: "m4", name: "Sofia Conti", role: "3D Generalist", imageSrc: "http://img.b2bpic.net/free-photo/front-view-boy-posing-with-neon-light_23-2149596328.jpg" },
              { id: "m5", name: "Liam Brooks", role: "CGI Artist", imageSrc: "http://img.b2bpic.net/free-photo/solar-panels-industry-technician-high-tech-factory-inspection-quality-control-production_482257-132256.jpg" },
            ]}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplitForm
            useInvertedBackground={true}
            title="Ready to Start Your Project?"
            description="Send us a message and let's discuss your next 3D animation requirements."
            inputs={[
              { name: "name", type: "text", placeholder: "Your Name", required: true },
              { name: "email", type: "email", placeholder: "Your Email", required: true },
            ]}
            textarea={{ name: "message", placeholder: "Tell us about your project...", required: true }}
            imageSrc="http://img.b2bpic.net/free-photo/computer-screen-office-workspace_23-2148821931.jpg?_wi=2"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoReveal
            logoText="Motion3D"
            leftLink={{ text: "Terms of Service", href: "#" }}
            rightLink={{ text: "Privacy Policy", href: "#" }}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
