"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="large"
        background="floatingGradient"
        cardStyle="solid"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Stories",
          id: "/stories",
        },
        {
          name: "Services",
          id: "/services",
        },
        {
          name: "About",
          id: "/about",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      button={{
        text: "Work With Us",
        href: "/services",
      }}
      logoSrc="http://img.b2bpic.net/free-vector/pack-african-logo-templates_23-2148735830.jpg"
      logoAlt="DYSRVPT Logo"
      brandName="DYSRVPT"
    />
  </div>

  <div id="get-in-touch" data-section="get-in-touch">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="CONNECT WITH US"
      title="LET'S BUILD SOMETHING DYSRVPTIVE."
      description="Reach out to discuss collaborations, partnerships, or general inquiries. We're always seeking new voices and visionary projects."
      imageSrc="http://img.b2bpic.net/free-photo/minimal-tropical-leaf-arrangement_23-2148955681.jpg"
      imageAlt="Minimalist background with tropical leaf shadows"
      mediaPosition="right"
      buttonText="SUBMIT INQUIRY"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="why-collaborate" data-section="why-collaborate">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Deep Cultural Insight",
          description: "Leverage our profound understanding of African cultural nuances and trends.",
          imageSrc: "http://img.b2bpic.net/free-photo/orange-ferromagnetic-liquid-metal-with-copy-space_23-2148253609.jpg",
          imageAlt: "Intricate African textile pattern",
        },
        {
          title: "Targeted Audience Access",
          description: "Connect directly with influential creatives, artists, and culture shapers.",
          imageSrc: "http://img.b2bpic.net/free-photo/back-view-team-sporty-meeting_23-2148905521.jpg",
          imageAlt: "Diverse group of young engaged Africans",
        },
        {
          title: "Authentic Storytelling",
          description: "Engage your audience with narratives that are real, impactful, and resonant.",
          imageSrc: "http://img.b2bpic.net/free-photo/scene-with-african-american-people-moving-rural-area-old-times_23-2151295783.jpg",
          imageAlt: "Person listening intently to an elder in an African village",
        },
      ]}
      title="WHY COLLABORATE WITH DYSRVPT?"
      description="We offer unparalleled access and authentic storytelling within African culture, ensuring your message resonates with the right audience."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoSrc="http://img.b2bpic.net/free-vector/pack-african-logo-templates_23-2148735830.jpg"
      logoAlt="DYSRVPT Logo"
      logoText="DYSRVPT"
      leftLink={{
        text: "DO IT LIKE YOU.",
        href: "#",
      }}
      rightLink={{
        text: "STAY DYSRVPTIVE.",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
