"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSmallSizeLargeTitles"
        background="none"
        cardStyle="gradient-bordered"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "About", id: "#about" },
        { name: "Work", id: "#work" },
        { name: "Services", id: "#services" },
        { name: "Contact", id: "#contact" },
      ]}
      brandName="NEXOWOKS"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      logoText="NEXOWOKS"
      description="We are a premium website development agency. We drive massive conversion growth through 4k visual storytelling and immersive 3D animation experiences."
      buttons={[
        { text: "View Projects", href: "#work" },
        { text: "Contact Us", href: "#contact" },
      ]}
      background={{ variant: "glowing-orb" }}
      imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-digital-background-with-flowing-cyber-dots_1048-12641.jpg"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      tag="Our Philosophy"
      title="Defining the Future of 3D Visuals"
      buttons={[
        { text: "Learn Our Story", href: "#" },
      ]}
    />
  </div>

  <div id="work" data-section="work">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        { id: "w1", name: "Cyber Character", price: "4K Render", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-online-avatar-design_23-2149699881.jpg" },
        { id: "w2", name: "Motion Wave", price: "Animation", imageSrc: "http://img.b2bpic.net/free-photo/abstract-blue-acrylic-shape-black-background_23-2148469394.jpg" },
        { id: "w3", name: "Tech Gadget", price: "Modeling", imageSrc: "http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349250.jpg" },
        { id: "w4", name: "Architecture", price: "Visualization", imageSrc: "http://img.b2bpic.net/free-photo/modern-styled-entryway_23-2150695965.jpg" },
        { id: "w5", name: "Particle Burst", price: "VFX", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-cyber-particles-background-design_1048-16913.jpg" },
        { id: "w6", name: "Concept Art", price: "Stylized", imageSrc: "http://img.b2bpic.net/free-photo/collection-many-small-silver-christmas-baubles_23-2147968554.jpg" },
      ]}
      title="Selected 3D Works"
      description="A collection of our finest 4k motion graphics, character designs, and architectural renderings."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSix
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { title: "Motion Graphics", description: "High-fidelity 4k motion assets designed for maximum viewer engagement.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-composition-glass-spheres-yellow-green_23-2151972815.jpg", imageAlt: "Motion" },
        { title: "Character Design", description: "Rigged, textured, and expressive 3D models for games and film.", imageSrc: "http://img.b2bpic.net/free-photo/creative-company-professional-digital-engineer-modeling-3d-mesh-while-improving-geometry-asset-creator-optimising-polygon-count-while-using-cad-create-advanced-virtual-sketch_482257-42940.jpg", imageAlt: "Character" },
        { title: "Architectural Viz", description: "Immersive environments built with physical accuracy and global illumination.", imageSrc: "http://img.b2bpic.net/free-photo/view-light-lamp-with-futuristic-design_23-2151037577.jpg", imageAlt: "Arch" },
      ]}
      title="Our Core Specializations"
      description="Nexowoks delivers industry-leading 3D solutions for modern brands."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="depth-3d"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "150+", title: "Projects Completed", items: ["Commercials", "Films", "Websites"] },
        { id: "m2", value: "20K+", title: "Rendered Frames", items: ["4K Quality", "60FPS", "Global Lighting"] },
        { id: "m3", value: "45+", title: "Happy Global Clients", items: ["Fortune 500", "Startups", "Agencies"] },
      ]}
      title="Our Impact"
      description="Numbers behind the creative excellence."
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="split"
      useInvertedBackground={false}
      names={["Nexus", "Gravity", "Flux", "Core", "Zenith", "Prime", "Velocity"]}
      title="Trusted Partners"
      description="Collaborating with visionaries across the globe."
      showCard={false}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "Elena Vance", handle: "@elena", testimonial: "Nexowoks' 3D work is unparalleled. The 4k animations completely changed how our users perceive our brand.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-smiling_23-2148452672.jpg" },
        { id: "t2", name: "Marcus Thorne", handle: "@mthorne", testimonial: "Incredible communication and vision. Their character modeling is the best I've encountered in the industry.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-tablet_23-2149442310.jpg" },
        { id: "t3", name: "Sarah Jenkins", handle: "@sjenks", testimonial: "They turned our complex architectural ideas into breathtaking immersive renders. Stunning quality.", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg" },
        { id: "t4", name: "David Wu", handle: "@dwu", testimonial: "Fast turnaround, competitive pricing, and industry-leading creative output. Truly excellent experience.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-middle-aged-man-with-beard-hairstyle-dressed-elegant-formal-suit-textured-dark-background-studio_613910-5081.jpg" },
        { id: "t5", name: "Anna Petrova", handle: "@apetrova", testimonial: "The motion graphics added that 'wow' factor we were missing for years. Nexowoks are legends.", imageSrc: "http://img.b2bpic.net/free-photo/smart-pensive-redhead-hipster-with-full-beard-glasses-dressed-casual-clothes-poses-with-hand-chin-studio-isolated-dark-background_613910-20091.jpg" },
      ]}
      title="What Clients Say"
      description="Real feedback from the brands we've helped elevate."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      tag="Let's Collaborate"
      title="Start Your 3D Project"
      description="Ready to bring your next big idea to life with 4k animations? Reach out today for a consultation."
      useInvertedBackground={false}
      background={{ variant: "cell-wave" }}
      imageSrc="http://img.b2bpic.net/free-photo/3d-neon-lights-background_23-2150710761.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="NEXOWOKS"
      columns={[
        { title: "Studio", items: [{ label: "About", href: "#about" }, { label: "Portfolio", href: "#work" }] },
        { title: "Services", items: [{ label: "3D Animation", href: "#services" }, { label: "Consulting", href: "#" }] },
        { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
