"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="medium"
        background="aurora"
        cardStyle="soft-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Shop",
          id: "/shop",
        },
        {
          name: "Checkout",
          id: "/checkout",
        },
        {
          name: "Delivery",
          id: "/delivery",
        },
      ]}
      brandName="LEX"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "gradient-bars",
      }}
      title="Dress Like You Mean It"
      description="Premium style. Accessible price. Every piece under £100."
      buttons={[
        {
          text: "Shop Now",
          href: "/shop",
        },
        {
          text: "Our Story",
          href: "#story",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "asset://hero-1",
          imageAlt: "Hero item 1",
        },
        {
          imageSrc: "asset://hero-2",
          imageAlt: "Hero item 2",
        },
        {
          imageSrc: "asset://hero-3",
          imageAlt: "Hero item 3",
        },
        {
          imageSrc: "asset://hero-4",
          imageAlt: "Hero item 4",
        },
        {
          imageSrc: "asset://hero-5",
          imageAlt: "Hero item 5",
        },
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="story" data-section="story">
      <TextAbout
      useInvertedBackground={true}
      title="Lex Stylish Cloths: A Vision of Accessible Elegance"
      tag="Our Philosophy"
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      title="Trusted by Fashion Enthusiasts"
      description="Join thousands who have upgraded their wardrobe with Lex."
      names={[
        "Vogue Daily",
        "Style Weekly",
        "Urban Trends",
        "Modern Gent",
        "Fashion Forward",
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      sideTitle="Common Questions"
      sideDescription="Everything you need to know about shopping with us."
      faqs={[
        {
          id: "f1",
          title: "Is everything really under £100?",
          content: "Yes, our commitment is to provide premium fashion without the luxury markup, keeping every single item below £100.",
        },
        {
          id: "f2",
          title: "What is your return policy?",
          content: "We offer a 30-day hassle-free return policy for all items.",
        },
        {
          id: "f3",
          title: "Do you offer international shipping?",
          content: "Currently we ship across the UK, with plans to expand globally very soon.",
        },
        {
          id: "f4",
          title: "How do I choose the right size?",
          content: "Each product page features a detailed sizing chart to ensure the perfect fit.",
        },
        {
          id: "f5",
          title: "Are your materials sustainable?",
          content: "We prioritize high-quality fabrics that are ethically sourced.",
        },
      ]}
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Stay Updated"
      title="Get Fresh Drops Early"
      description="Sign up to receive early access to our latest collections and exclusive subscriber-only discounts."
      inputPlaceholder="Enter your email address"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="LEX STYLISH CLOTHS"
      copyrightText="© 2025 Lex Stylish Cloths. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
