"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeLargeTitles"
        background="fluid"
        cardStyle="outline"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Stories",
          id: "/stories",
        },
        {
          name: "Services",
          id: "/services",
        },
        {
          name: "About",
          id: "/about",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m7mhs2"
      logoAlt="DYSRVPT Logo"
      brandName="DYSRVPT"
    />
  </div>

  <div id="contact-form" data-section="contact-form">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Get in Touch"
      title="LET'S BUILD SOMETHING DYSRVPTIVE"
      description="Reach out to us to collaborate, inquire about services, or simply share your story. We’re eager to connect with fellow disruptors. Fields: Name, Email, Phone Number, Inquiry."
      buttons={[
        {
          text: "Submit Inquiry",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="faq-section" data-section="faq-section">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",
          title: "What kind of content does DYSRVPT focus on?",
          content: "We focus on contemporary African culture, including nightlife, music, art, creativity, and the communities shaping these movements, particularly rooted in Nigeria and broader Africa.",
        },
        {
          id: "faq-2",
          title: "How can I submit a story or project for consideration?",
          content: "Please use the 'Contact Us' form and select 'Story Submission' or 'Project Inquiry.' Provide a brief overview of your idea, and our editorial team will review it.",
        },
        {
          id: "faq-3",
          title: "Do you offer partnership opportunities for brands?",
          content: "Yes, we collaborate with brands and organizations aligned with our mission to document and amplify African culture. Visit our Services page or contact us directly to discuss bespoke partnerships.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/indigenous-cultures-celebrate-tradition-with-ornate-masks-generated-by-ai_188544-23324.jpg"
      imageAlt="African cultural artifacts display"
      mediaAnimation="slide-up"
      title="FREQUENTLY ASKED QUESTIONS"
      description="Find quick answers to common questions about DYSRVPT and our work."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "Home",
              href: "/",
            },
            {
              label: "Stories",
              href: "/stories",
            },
            {
              label: "Services",
              href: "/services",
            },
            {
              label: "About",
              href: "/about",
            },
            {
              label: "Contact",
              href: "/contact",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "Instagram",
              href: "https://instagram.com/dysrvpt",
            },
            {
              label: "TikTok",
              href: "https://tiktok.com/@dysrvpt",
            },
            {
              label: "X",
              href: "https://x.com/dysrvpt",
            },
            {
              label: "YouTube",
              href: "https://youtube.com/@dysrvpt",
            },
          ],
        },
      ]}
      bottomLeftText="DYSRVPT. Documenting African Culture In Motion."
      bottomRightText="DO IT LIKE YOU. STAY DYSRVPTIVE."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
