"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSizeMediumTitles"
        background="aurora"
        cardStyle="gradient-mesh"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Itachi",
          id: "/",
        },
        {
          name: "Akaza",
          id: "/akaza",
        },
        {
          name: "Madara",
          id: "/madara",
        },
      ]}
      brandName="ANIME HUB"
    />
  </div>

  <div id="hero-itachi" data-section="hero-itachi">
      <HeroCentered
      background={{
        variant: "radial-gradient",
      }}
      title="Itachi Uchiha"
      description="Explore the legendary Uchiha prodigy. 10,000+ high-quality wallpapers available for download."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
          alt: "Itachi Uchiha",
        },
        {
          src: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
          alt: "Itachi Uchiha",
        },
        {
          src: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
          alt: "Itachi Uchiha",
        },
        {
          src: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
          alt: "Itachi Uchiha",
        },
        {
          src: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
          alt: "Itachi Uchiha",
        },
      ]}
      marqueeItems={[
        {
          type: "text",
          text: "Sharingans",
        },
        {
          type: "text",
          text: "Akatsuki",
        },
        {
          type: "text",
          text: "Prodigy",
        },
        {
          type: "text",
          text: "Ninja",
        },
        {
          type: "text",
          text: "Konoha",
        },
      ]}
    />
  </div>

  <div id="itachi-grid" data-section="itachi-grid">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      title="Itachi Collection"
      description="Download 10,000+ unique Itachi wallpapers."
      products={[
        {
          id: "1",
          brand: "Uchiha",
          name: "Sharingan Focus",
          price: "Free",
          rating: 5,
          reviewCount: "1.2k",
          imageSrc: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
        },
        {
          id: "2",
          brand: "Uchiha",
          name: "Mangekyo Art",
          price: "Free",
          rating: 5,
          reviewCount: "900",
          imageSrc: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
        },
        {
          id: "3",
          brand: "Uchiha",
          name: "Clan Legacy",
          price: "Free",
          rating: 4,
          reviewCount: "850",
          imageSrc: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
        },
        {
          id: "4",
          brand: "Uchiha",
          name: "Akatsuki Path",
          price: "Free",
          rating: 5,
          reviewCount: "2.1k",
          imageSrc: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
        },
      ]}
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      title="Trusted by Ninja"
      description="Join thousands of anime fans globally."
      names={[
        "Konoha Shinobi",
        "Akatsuki Clan",
        "Demon Slayers",
        "Hashira Rank",
        "Uchiha Legacy",
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      title="Common Questions"
      description="Everything you need to know about our downloads."
      faqs={[
        {
          id: "q1",
          title: "Are these free?",
          content: "Yes, all wallpapers are free.",
        },
        {
          id: "q2",
          title: "Can I request more?",
          content: "Contact us to request specific characters.",
        },
      ]}
      faqsAnimation="slide-up"
    />
  </div>

  <div id="metric" data-section="metric">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      title="Gallery Impact"
      description="High resolution, high performance."
      metrics={[
        {
          id: "m1",
          value: "50k+",
          description: "Total Downloads",
        },
        {
          id: "m2",
          value: "99.9%",
          description: "Uptime",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Download",
              href: "#",
            },
            {
              label: "About",
              href: "/about",
            },
          ],
        },
      ]}
      logoText="ANIME HUB"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
