"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import TextAbout from '@/components/sections/about/TextAbout';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ArrowRight, Star, Mail, Instagram, Twitter, Linkedin } from 'lucide-react';

const navItems = [
  { name: "Home", id: "/" },
  { name: "Story", id: "#story" },
  { name: "FAQ", id: "#faq" },
  { name: "Contact", id: "#contact" }
];

export default function HomePage() {
  return (
    <ThemeProvider 
        defaultButtonVariant="text-stagger" 
        defaultTextAnimation="entrance-slide" 
        borderRadius="rounded" 
        contentWidth="medium" 
        sizing="medium" 
        background="circleGradient" 
        cardStyle="glass-elevated" 
        primaryButtonStyle="gradient" 
        secondaryButtonStyle="glass" 
        headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay navItems={navItems} brandName="Lex Stylish Cloths" />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery 
            title="Premium Style for Everyone"
            description="Discover high-end fashion at Lex Stylish Cloths. Shop premium suits, streetwear, and more, all priced under £100."
            background={{ variant: "gradient-bars" }}
            mediaItems={[
                { imageSrc: "https://images.unsplash.com/photo-1523381210434-271e8be1f52b?q=80&w=800&auto=format&fit=crop", imageAlt: "Premium clothing 1" },
                { imageSrc: "https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?q=80&w=800&auto=format&fit=crop", imageAlt: "Premium clothing 2" },
                { imageSrc: "https://images.unsplash.com/photo-1516826957135-700dedea698c?q=80&w=800&auto=format&fit=crop", imageAlt: "Premium clothing 3" }
            ]}
            buttons={[{ text: "Shop Now", href: "#contact" }]}
        />
      </div>

      <div id="story" data-section="story">
        <TextAbout 
            title="Quality Meets Affordability"
            tag="Our Story"
        />
      </div>

      <div id="socialProof" data-section="socialProof">
        <SocialProofOne 
            names={["Vogue", "GQ", "Highsnobiety", "Hypebeast"]}
            title="Trusted by Fashion Icons"
            description="Join thousands of stylish customers worldwide."
            textboxLayout="default"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText 
            sideTitle="Frequently Asked Questions"
            faqsAnimation="slide-up"
            faqs={[
                { id: "1", title: "What is the return policy?", content: "Returns are accepted within 30 days of purchase." },
                { id: "2", title: "Is shipping free?", content: "Yes, shipping is free on orders over £50." },
                { id: "3", title: "How do I track my order?", content: "Tracking information is emailed once your order ships." }
            ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter 
            tag="Newsletter"
            title="Get Fashion Updates"
            description="Sign up for our newsletter to stay updated on new arrivals and sales."
            background={{ variant: "plain" }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard 
            logoText="Lex Stylish Cloths"
            socialLinks={[
                { icon: Instagram, href: "#", ariaLabel: "Instagram" },
                { icon: Twitter, href: "#", ariaLabel: "Twitter" },
                { icon: Linkedin, href: "#", ariaLabel: "Linkedin" }
            ]}
        />
      </div>
    </ThemeProvider>
  );
}
