"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
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="about-page" data-section="about-page">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",          content: "WHY DYSRVPT EXISTS"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/portrait-abstract-overstimulated-feelings_23-2151245438.jpg",          alt: "Image representing the origin story of documenting African culture"
        }
      ]}
    />
    <p className="mt-4 text-center text-lg text-muted-foreground max-w-2xl mx-auto">
      DYSRVPT was founded to fill a critical gap: the comprehensive, authentic documentation of contemporary African culture. We are building a living archive, legitimizing the movements and spotlighting the disruptors shaping our present and future. We're not observers. We're participants. We're archivists. We're DYSRVPT. Our vision is to be the definitive voice for African cultural innovation.
    </p>
  </div>

  <div id="our-impact-about" data-section="our-impact-about">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="OUR REACH"
      tag="CULTURAL FOOTPRINT"
      metrics={[
        {
          id: "m1",          value: "5M+",          description: "Annual Impressions"},
        {
          id: "m2",          value: "50+",          description: "Partnerships Forged"},
        {
          id: "m3",          value: "10+",          description: "Countries Covered"},
        {
          id: "m4",          value: "100K+",          description: "Engaged Community"},
      ]}
      metricsAnimation="blur-reveal"
    />
  </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>
  );
}
