"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="compact"
        sizing="mediumLargeSizeMediumTitles"
        background="none"
        cardStyle="outline"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/cubic-transparent-prism-lights_23-2148771770.jpg"
      logoAlt="Poly Logo"
      brandName="Poly"
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogoBillboard
      background={{
        variant: "plain"}}
      logoText="Poly"
      description="Experience file browsing reimagined. A cinematic interface where creativity flows."
      buttons={[
        {
          text: "Discover Features",          href: "#features"},
        {
          text: "Get Started",          href: "#contact"},
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-120252.jpg"
      imageAlt="MacBook screen showcasing Poly file browser with dynamic content"
      mediaAnimation="blur-reveal"
      frameStyle="browser"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      tag="About Poly"
      tagAnimation="slide-up"
      title="Your Creative Canvas, Organized."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        {
          title: "Dynamic Asset Stacking",          description: "Watch your creative assets dynamically fly, rearrange, and stack seamlessly. Poly's cinematic UI makes organization a visual delight, adapting to your workflow with fluid animations and intelligent grouping.",          imageSrc: "http://img.b2bpic.net/free-photo/analyst-looking-presentation-charts-dashboard-implement-analytics_482257-119372.jpg",          imageAlt: "Dynamic stacking of creative assets in Poly",          titleImageSrc: "http://img.b2bpic.net/free-photo/surreal-geometric-shapes-barren-desert_23-2151296326.jpg",          buttonText: "See it in action",          buttonHref: "#"},
        {
          title: "Intuitive Visual Browser",          description: "Navigate through high-quality fashion photos, magazine covers, polaroids, film strips, and audio wave previews with a truly visual and intuitive browser. Effortlessly find, preview, and organize every type of media.",          imageSrc: "http://img.b2bpic.net/free-photo/travel-again-concept-assortment_23-2149064613.jpg",          imageAlt: "Visual file browsing interface",          titleImageSrc: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",          buttonText: "Explore Visuals",          buttonHref: "#"},
        {
          title: "Seamless Cross-Device Sync",          description: "Access your organized digital desk canvas from anywhere. Poly ensures your files are always up-to-date and instantly available across all your devices, maintaining the same ultra-premium experience whether you're on desktop or mobile.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037181.jpg",          imageAlt: "Cross-device synchronization for Poly",          titleImageSrc: "http://img.b2bpic.net/free-photo/person-using-ar-technology-perform-their-occupation_23-2151137454.jpg",          buttonText: "Sync Your Workflow",          buttonHref: "#"},
      ]}
      title="Unleash Your Digital Potential"
      description="Poly is packed with innovative features designed to elevate your workflow and spark creativity, transforming how you interact with your digital world."
      tag="Key Features"
      tagAnimation="slide-up"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      animationType="slide-up"
      metrics={[
        {
          id: "1",          value: "10M+",          description: "Files Organized"},
        {
          id: "2",          value: "500K+",          description: "Active Users"},
        {
          id: "3",          value: "98%",          description: "User Satisfaction"},
      ]}
      title="Transforming Workflows, Globally."
      description="See how Poly is empowering creators and professionals worldwide, driving efficiency and inspiring creativity."
      tag="Our Impact"
      tagAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          role: "CEO",          company: "DesignFlow Studio",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/vertical-portrait-successful-goodlooking-young-professional-headhunter-female-entrepreneur-office-worker-beige-blazer-look-away-cross-hands-chest-confident-manage-own-business_197531-30576.jpg",          imageAlt: "Portrait of Sarah Johnson"},
        {
          id: "2",          name: "Michael Chen",          role: "CTO",          company: "Innovate Lab",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-with-notepad_1301-1749.jpg",          imageAlt: "Portrait of Michael Chen"},
        {
          id: "3",          name: "Emily Rodriguez",          role: "Marketing Director",          company: "GrowthCo Creative",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg",          imageAlt: "Portrait of Emily Rodriguez"},
        {
          id: "4",          name: "David Kim",          role: "Product Manager",          company: "Startup XYZ",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/crazy-hippie-angry-expression_1194-3935.jpg",          imageAlt: "Portrait of David Kim"},
        {
          id: "5",          name: "Jessica Lee",          role: "UX Designer",          company: "ArtTech Solutions",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-late-night_23-2150170778.jpg",          imageAlt: "Portrait of Jessica Lee"},
      ]}
      kpiItems={[
        {
          value: "5 Stars",          label: "Average Rating"},
        {
          value: "99%",          label: "Satisfaction Rate"},
        {
          value: "20K+",          label: "Happy Users"},
      ]}
      title="The Future of File Browsing is Here."
      description="Hear from creatives and professionals who have transformed their digital experience with Poly, praising its intuitive design and powerful features."
      tag="What Our Users Say"
      tagAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Google",        "Microsoft",        "Adobe",        "Apple",        "Spotify",        "Slack",        "Notion"]}
      title="Trusted by Leading Innovators"
      description="Our partners recognize Poly's potential to revolutionize creative workflows and digital asset management."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      tag="Get Started"
      tagAnimation="slide-up"
      title="Ready to Reimagine Your Files?"
      description="Join the Poly revolution and transform the way you interact with your digital assets. Sign up for early access or reach out for a personalized demo."
      buttons={[
        {
          text: "Request a Demo",          href: "#"},
        {
          text: "Join Our Community",          href: "#"},
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Product",          items: [
            {
              label: "Features",              href: "#features"},
            {
              label: "Pricing",              href: "#"},
            {
              label: "Integrations",              href: "#"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Blog",              href: "#"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
            {
              label: "Cookie Policy",              href: "#"},
          ],
        },
      ]}
      bottomLeftText="&copy; 2024 Poly. All rights reserved."
      bottomRightText="Made with ❤️ by Webuild"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
