"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Work", id: "#portfolio" },
        { name: "Services", id: "#services" },
        { name: "About", id: "#about" },
        { name: "Contact", id: "#contact" }
      ]}
      brandName="CREATIVE STUDIO"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{ variant: "gradient-bars" }}
      title="Cinematic Visuals That Make Brands Impossible To Ignore"
      description="High-end content production for fashion brands, businesses, and modern creators."
      tag="CREATIVE DIRECTOR & AI VISUAL ARTIST"
      mediaItems={[
        {
          videoSrc: "http://img.b2bpic.net/free-photo/creative-background-with-curtain-shadow-from-window_23-2149657471.jpg",          imageAlt: "Cinematic Fashion Showreel",          imageSrc: "http://img.b2bpic.net/free-photo/creative-background-with-curtain-shadow-from-window_23-2149657471.jpg"
        },
        {
          videoSrc: "http://img.b2bpic.net/free-photo/close-up-japanese-woman-modeling_23-2149032719.jpg",          imageAlt: "AI Fashion Artistry",          imageSrc: "http://img.b2bpic.net/free-photo/graphic-designer-uses-professional-retouching-software-photos_482257-126915.jpg"
        }
      ]}
      mediaAnimation="blur-reveal"
      rating={5}
      ratingText="Trusted by luxury brands worldwide"
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="Storytelling through a refined lens."
      description="I blend cinematic editing, AI visual innovation, and editorial fashion aesthetics to produce high-impact brand identities."
      bulletPoints={[
        { title: "Creative Direction", description: "Defining the soul of your brand through visual identity." },
        { title: "Cinematic Editing", description: "Crafting emotive reels that stop the scroll." },
        { title: "AI Visual Art", description: "Innovative imagery at the intersection of tech and art." }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/graphic-designer-uses-professional-retouching-software-photos_482257-126915.jpg"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyFour
      animationType="blur-reveal"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { id: "s1", title: "Cinematic Reels", author: "Directing", description: "Immersive short-form storytelling.", tags: ["Video", "Luxury"], imageSrc: "http://img.b2bpic.net/free-vector/video-producing-computer-hardware-25-flat-color-icon-pack-including-directors-chair-movie-lady-character_1142-24873.jpg" },
        { id: "s2", title: "Fashion Branding", author: "Artistic", description: "Luxury identity development.", tags: ["Fashion", "Strategy"], imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-smiley-face_53876-63791.jpg" },
        { id: "s3", title: "AI Visual Creation", author: "Experimental", description: "Futuristic brand assets.", tags: ["AI", "Tech"], imageSrc: "http://img.b2bpic.net/free-photo/abstract-creative-3d-sphere-with-liquid-effect_23-2150885399.jpg" }
      ]}
      title="High-End Production Suite"
      description="Elevated creative services for forward-thinking brands."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardOne
      animationType="blur-reveal"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        { id: "p1", name: "Fashion Campaign A", price: "Editorial", imageSrc: "http://img.b2bpic.net/free-photo/student-with-goth-style-school_23-2150576841.jpg" },
        { id: "p2", name: "Product Spot B", price: "Commercial", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-single-s-day-banner_23-2149520244.jpg" },
        { id: "p3", name: "AI Visual Abstract", price: "Digital Art", imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149377405.jpg" }
      ]}
      title="Selected Works"
      description="A curated showcase of cinematic campaigns and visual art."
    />
  </div>

  <div id="experience" data-section="experience">
      <MetricCardTwo
      animationType="blur-reveal"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "01", description: "Inquiry & Vision" },
        { id: "m2", value: "02", description: "Creative Strategy" },
        { id: "m3", value: "03", description: "Seamless Production" }
      ]}
      title="The Workflow"
      description="Transparent, efficient, and deeply collaborative."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="blur-reveal"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "Sarah J.", handle: "Fashion Designer", testimonial: "Exceptional vision and execution. A master of the cinematic craft.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-window_23-2148415798.jpg" },
        { id: "t2", name: "Marcus T.", handle: "Agency Lead", testimonial: "The AI visual integration changed our brand game entirely.", imageSrc: "http://img.b2bpic.net/free-photo/business-owner-working-their-strategy_23-2149241320.jpg" }
      ]}
      title="Client Perspectives"
      description="Visual partnerships defined by results."
    />
  </div>

  <div id="cta" data-section="cta">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Let’s Create Something Visually Unforgettable"
      description="Ready to bring your brand to the next level?"
      inputs={[
        { name: "name", type: "text", placeholder: "Name", required: true },
        { name: "email", type: "email", placeholder: "Email Address", required: true }
      ]}
      textarea={{ name: "message", placeholder: "Describe your vision...", rows: 4, required: true }}
      imageSrc="http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-man_23-2151020303.jpg"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="CREATIVE STUDIO"
      columns={[
        { title: "Navigation", items: [{ label: "Work", href: "#portfolio" }, { label: "Services", href: "#services" }] },
        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] }
      ]}
      copyrightText="© 2024 Creative Studio. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
