"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';

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="madara-info" data-section="madara-info">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="✘ itachi ✘"
      description="Itachi is the dev of the web you were seeing through."
      metrics={[
        {
          value: "10k+",
          title: "Madara Wallpapers",
        },
      ]}
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg?_wi=11"
    />
  </div>

  <div id="blog" data-section="blog">
      <BlogCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Madara Uchiha Lore"
      description="Discover the legend of the Uchiha ancestor."
      blogs={[
        {
          id: "b1",
          category: "Legend",
          title: "The Awakening",
          excerpt: "Madara's path to power.",
          imageSrc: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg?_wi=12",
          authorName: "Itachi",
          authorAvatar: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
          date: "2023-10-01",
        },
        {
          id: "b2",
          category: "Legend",
          title: "Final Form",
          excerpt: "The war of the ages.",
          imageSrc: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg?_wi=13",
          authorName: "Itachi",
          authorAvatar: "http://img.b2bpic.net/free-photo/eyeballs-plate-with-fake-blood_23-2147680340.jpg",
          date: "2023-10-05",
        },
      ]}
    />
  </div>

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