"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { CheckCircle2, Code2, Diamond, Palette, TrendingUp, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="medium"
        background="none"
        cardStyle="glass-elevated"
        primaryButtonStyle="metallic"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Work",
          id: "#work",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Team",
          id: "#team",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="PixelStudio"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{
        variant: "gradient-bars",
      }}
      title="We Build Digital Experiences That Define The Future."
      description="Crafting high-performance websites and digital solutions for ambitious brands looking to dominate their market."
      leftCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg?_wi=1",
          imageAlt: "Digital Showcase",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-lights-motion-flowing-into-one-direction_181624-24445.jpg?_wi=1",
          imageAlt: "Abstract Art",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg?_wi=1",
          imageAlt: "Dashboard UI",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/colleagues-argueing-discussing-drawings-new-ideas-office_176420-1693.jpg?_wi=1",
          imageAlt: "Studio Workspace",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg?_wi=1",
          imageAlt: "Tech Energy",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320719.jpg?_wi=1",
          imageAlt: "Designer at work",
        },
      ]}
      rightCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320719.jpg?_wi=2",
          imageAlt: "Designer at work",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg?_wi=2",
          imageAlt: "Tech Energy",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/colleagues-argueing-discussing-drawings-new-ideas-office_176420-1693.jpg?_wi=2",
          imageAlt: "Studio Workspace",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg?_wi=2",
          imageAlt: "Dashboard UI",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-lights-motion-flowing-into-one-direction_181624-24445.jpg?_wi=2",
          imageAlt: "Abstract Art",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg?_wi=2",
          imageAlt: "Digital Showcase",
        },
      ]}
      tag="Award-Winning Agency"
      buttons={[
        {
          text: "View Our Work",
          href: "#work",
        },
        {
          text: "Let's Talk",
          href: "#contact",
        },
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-hat_23-2148884304.jpg",
          alt: "Team Lead",
        },
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-people-with-glasses-posing-studio_23-2150169312.jpg",
          alt: "Senior Developer",
        },
        {
          src: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151034081.jpg",
          alt: "UX Designer",
        },
        {
          src: "http://img.b2bpic.net/free-photo/top-view-blue-condom-white-background_23-2148259780.jpg",
          alt: "Project Manager",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-hat_23-2148884304.jpg",
          alt: "QA Lead",
        },
      ]}
      avatarText="Trusted by 50+ global industry leaders"
      marqueeItems={[
        {
          type: "text",
          text: "Innovation",
        },
        {
          type: "text",
          text: "Precision",
        },
        {
          type: "text",
          text: "Scalability",
        },
        {
          type: "text",
          text: "Performance",
        },
        {
          type: "text",
          text: "Excellence",
        },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "UI/UX Design",
          description: "Crafting user-centric interfaces that drive engagement and conversions.",
          bentoComponent: "reveal-icon",
          icon: Palette,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg?_wi=3",
          imageAlt: "modern digital design portfolio showcase",
        },
        {
          title: "Web Development",
          description: "High-performance code built for scalability and speed.",
          bentoComponent: "reveal-icon",
          icon: Code2,
          imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-lights-motion-flowing-into-one-direction_181624-24445.jpg?_wi=3",
          imageAlt: "abstract 3d geometric gold composition",
        },
        {
          title: "Digital Branding",
          description: "Developing robust brand identities that resonate with your target audience.",
          bentoComponent: "reveal-icon",
          icon: Diamond,
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg?_wi=3",
          imageAlt: "elegant ui design dashboard dark mode",
        },
      ]}
      title="Our Core Capabilities"
      description="Comprehensive design and development services tailored to accelerate your growth."
    />
  </div>

  <div id="work" data-section="work">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Fintech Dashboard",
          description: "Redesigned financial tracking tool improving user retention by 40%.",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-geometric-shapes_23-2150979717.jpg?_wi=4",
          buttonIcon: "ArrowRight",
        },
        {
          title: "Eco-Commerce Platform",
          description: "Sustainable fashion marketplace with a seamless checkout experience.",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29668.jpg?_wi=4",
          buttonIcon: "ArrowRight",
        },
        {
          title: "Healthcare AI",
          description: "Innovative diagnostics platform for leading clinical research teams.",
          imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139291.jpg?_wi=3",
          buttonIcon: "ArrowRight",
        },
      ]}
      title="Our Work"
      description="A curated selection of our most successful client projects."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="PixelStudio transformed our digital presence and helped us achieve our goals faster than we imagined possible."
      rating={5}
      author="Sarah Miller, CEO at Innovation Labs"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-hat_23-2148884304.jpg",
          alt: "Sarah Miller",
        },
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-people-with-glasses-posing-studio_23-2150169312.jpg",
          alt: "James Wilson",
        },
        {
          src: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151034081.jpg",
          alt: "Elena Rossi",
        },
        {
          src: "http://img.b2bpic.net/free-photo/top-view-blue-condom-white-background_23-2148259780.jpg",
          alt: "David Chen",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-man-posing-with-hat_23-2148884304.jpg",
          alt: "Maria Gomez",
        },
      ]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="depth-3d"
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "150+",
          title: "Projects Completed",
          description: "Across 12 unique industries",
          icon: CheckCircle2,
        },
        {
          id: "m2",
          value: "50+",
          title: "Happy Clients",
          description: "Global brands we trust",
          icon: Users,
        },
        {
          id: "m3",
          value: "95%",
          title: "Conversion Rate",
          description: "Average client lift",
          icon: TrendingUp,
        },
      ]}
      title="Agency Milestones"
      description="Quantifiable impact delivered through consistent creative excellence."
    />
  </div>

  <div id="methodology" data-section="methodology">
      <FeatureCardSixteen
      animationType="depth-3d"
      textboxLayout="split"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "No Hidden Costs",
          "No Generic Solutions",
          "No Missed Deadlines",
        ],
      }}
      positiveCard={{
        items: [
          "Discovery & Research",
          "Strategic Planning",
          "Iterative Design",
          "Agile Development",
        ],
      }}
      title="Our Strategic Process"
      description="A refined workflow to ensure project success."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      team={[
        {
          id: "t1",
          name: "Alice Johnson",
          role: "Creative Director",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-charismatic-sensual-male-black-sweater-with-wet_613910-11158.jpg",
        },
        {
          id: "t2",
          name: "Mark Spencer",
          role: "Senior Developer",
          imageSrc: "http://img.b2bpic.net/free-photo/enterprise-manager-analyzes-annual-reports-statistics-pc_482257-94061.jpg",
        },
        {
          id: "t3",
          name: "Elena Rodriguez",
          role: "UI/UX Lead",
          imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149489836.jpg",
        },
        {
          id: "t4",
          name: "David Kim",
          role: "Project Manager",
          imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",
        },
      ]}
      title="The Minds Behind The Work"
      description="Meet the creative team powering our agency's vision."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",
          title: "How do you start a project?",
          content: "We begin with a discovery phase to align goals.",
        },
        {
          id: "faq2",
          title: "Do you work with startups?",
          content: "Absolutely, we specialize in high-growth startups.",
        },
        {
          id: "faq3",
          title: "What is the typical timeline?",
          content: "Most projects are completed within 8-12 weeks.",
        },
      ]}
      title="Common Inquiries"
      description="Answers to frequently asked questions about our process and partnership."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Let's Collaborate"
      title="Ready to bring your ideas to life?"
      description="Get in touch today to discuss your next digital product or design challenge."
      buttons={[
        {
          text: "Contact Us",
          href: "#contact",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Services",
          items: [
            {
              label: "UI Design",
              href: "#",
            },
            {
              label: "Development",
              href: "#",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
