"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
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="contact-form" data-section="contact-form">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Get in Touch"
      title="Connect with Vamshi Fashion"
      description="Have questions, feedback, or need assistance? Reach out to our friendly customer support team – we're here to help you!"
      imageSrc="http://img.b2bpic.net/free-photo/top-view-digital-tablet-with-search-job-screen-yellow-background_169016-39375.jpg"
      imageAlt="Contact form illustration with abstract background"
      mediaAnimation="slide-up"
      mediaPosition="right"
      inputPlaceholder="Your Email Address"
      buttonText="Send Message"
      termsText="By sending your message, you agree to our Privacy Policy."
    />
  </div>

  <div id="contact-info" data-section="contact-info">
      <MediaAbout
      useInvertedBackground={true}
      title="Visit Us or Chat on WhatsApp"
      description="While we're primarily an online store, we're always here to assist you with any questions or styling advice. Find our details below or simply click to chat with us on WhatsApp for immediate support. Your fashion journey is important to us!"
      buttons={[
        {
          text: "Chat on WhatsApp",          href: "https://wa.me/YOUR_PHONE_NUMBER"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/social-media-communication-concept_23-2150822050.jpg"
      imageAlt="WhatsApp chat icon on a phone screen"
    />
  </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>
  );
}
