"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterCard from '@/components/sections/footer/FooterCard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Facebook, Instagram, MessageCircle } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="floatingGradient"
        cardStyle="soft-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "About",
          id: "/about",
        },
        {
          name: "Products",
          id: "/#products",
        },
        {
          name: "Offers",
          id: "/#offers",
        },
        {
          name: "FAQ",
          id: "/faq",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      brandName="Vamshi Fashion"
    />
  </div>

  <div id="about-content" data-section="about-content">
      <MediaAbout
      useInvertedBackground={false}
      title="About Vamshi Fashion"
      description="Vamshi Fashion, also known as the '999 Store', is dedicated to bringing the latest fashion trends and high-quality apparel to everyone at affordable prices. Our mission is to make style accessible and enjoyable for every customer, ensuring satisfaction with every purchase. We believe that great style shouldn't come with a hefty price tag, and we strive to empower our community through fashion."
      buttons={[
        {
          text: "Explore Collections",
          href: "/#products",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/clothing-store-with-blurred-effect_23-2148164791.jpg"
      imageAlt="Interior of a modern fashion boutique"
    />
  </div>

  <div id="about-values" data-section="about-values">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Quality Assurance",
        "Customer Satisfaction",
        "Trendy Designs",
        "Affordable Luxury",
        "Fast & Secure Delivery",
        "Ethical Sourcing",
        "Community Focus",
      ]}
      title="Our Core Values"
      description="Vamshi Fashion is built on principles of trust, quality, and customer-first service. We believe everyone deserves to look and feel their best, and these values guide every decision we make."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Vamshi Fashion"
      copyrightText="© 2024 Vamshi Fashion. All rights reserved."
      socialLinks={[
        {
          icon: Instagram,
          href: "https://instagram.com/vamshifashion",
          ariaLabel: "Instagram",
        },
        {
          icon: Facebook,
          href: "https://facebook.com/vamshifashion",
          ariaLabel: "Facebook",
        },
        {
          icon: MessageCircle,
          href: "https://wa.me/YOUR_PHONE_NUMBER",
          ariaLabel: "WhatsApp",
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
