"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Activity, Clock, MapPin, Phone, ShieldCheck } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="compact"
        sizing="mediumLargeSizeLargeTitles"
        background="grid"
        cardStyle="glass-depth"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingOverlay
              navItems={[
                { name: "Home", id: "hero" },
                { name: "Overview", id: "about" },
                { name: "Features", id: "features" },
                { name: "Location", id: "location" },
                { name: "FAQ", id: "faq" },
                { name: "Contact", id: "contact" },
              ]}
              brandName="NXT Store"
            />
        </div>

        <div id="hero" data-section="hero">
            <HeroSplitDoubleCarousel
              background={{ variant: "gradient-bars" }}
              title="Welcome to NXT Store Batna"
              description="Your premier destination in Batna for quality products and exceptional service. Experience modern shopping excellence with NXT Store."
              buttons={[{ text: "Contact Us", href: "#contact" }]}
            />
        </div>

        <div id="about" data-section="about">
            <InlineImageSplitTextAbout
              heading={[{ type: "text", content: "About NXT Store" }]}
            />
        </div>

        <div id="features" data-section="features">
            <FeatureHoverPattern
              animationType="slide-up"
              textboxLayout="default"
              useInvertedBackground={true}
              features={[
                { icon: Activity, title: "Curated Selection", description: "High-quality products for our customers." },
                { icon: ShieldCheck, title: "Customer Satisfaction", description: "Your happiness is our top priority." },
                { icon: Clock, title: "Convenient Shopping", description: "Visit us in the heart of Batna." },
              ]}
              title="Why Choose Us"
              description="Commitment to quality and convenience."
            />
        </div>

        <div id="location" data-section="location">
            <MetricCardThree
              animationType="slide-up"
              textboxLayout="default"
              metrics={[
                { id: "loc", icon: MapPin, title: "Store Location", value: "Batna, Algeria" },
                { id: "hr", icon: Clock, title: "Business Hours", value: "08:00 - 20:00" },
              ]}
              title="Visit Our Store"
              description="Find us in Batna."
            />
        </div>

        <div id="faq" data-section="faq">
            <FaqSplitMedia
              faqs={[
                { id: "q1", title: "What are your hours?", content: "We are open daily from 8 AM to 8 PM." },
                { id: "q2", title: "Where is the store located?", content: "We are located in the center of Batna, Algeria." },
              ]}
              mediaAnimation="slide-up"
              title="Frequently Asked Questions"
              description="Everything you need to know about NXT Store."
              faqsAnimation="slide-up"
            />
        </div>

        <div id="contact" data-section="contact">
            <ContactText
              useInvertedBackground={true}
              background={{ variant: "gradient-bars" }}
              text="Get in touch with NXT Store Batna today for any inquiries."
            />
        </div>

        <div id="footer" data-section="footer">
            <FooterLogoEmphasis
              columns={[{ items: [{ label: "Contact", href: "#contact" }] }]}
              logoText="NXT Store"
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}