"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Mail, Heart, ShoppingBag } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLarge"
      background="none"
      cardStyle="solid-accent"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Fashion Forward"
          navItems={[
            { name: "Shop", id: "shop" },
            { name: "About", id: "about" },
            { name: "Collections", id: "collections" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitAvatars
          title="Elevate Your Style"
          description="Discover our premium collection of carefully curated clothing pieces designed for the modern fashion enthusiast. From timeless classics to contemporary trends."
          tag="New Collection"
          tagIcon={ShoppingBag}
          imagePosition="right"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983288368-py19hzaj.jpg"
          imageAlt="Fashion collection showcase"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg", alt: "Customer 1" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg", alt: "Customer 2" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766318234070-3a71e283.jpg", alt: "Customer 3" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg", alt: "Customer 4" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787044450-9f4y10ts.jpg", alt: "Customer 5" }
          ]}
          avatarText="Join 10,000+ fashion lovers"
          buttons={[
            { text: "Shop Now", href: "shop" },
            { text: "Explore Collection", href: "collections" }
          ]}
        />
      </div>

      <div id="shop" data-section="shop">
        <ProductCardOne
          title="Featured Collection"
          description="Hand-picked pieces from our latest arrivals. Each item is selected for quality, style, and comfort."
          tag="Best Sellers"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: "1",
              name: "Premium Cotton T-Shirt",
              price: "$49.99",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787041844-tzssa0wc.jpg",
              imageAlt: "Premium Cotton T-Shirt",
              isFavorited: false
            },
            {
              id: "2",
              name: "Elegant Silk Blouse",
              price: "$89.99",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983289277-elw8ical.jpg",
              imageAlt: "Elegant Silk Blouse",
              isFavorited: false
            },
            {
              id: "3",
              name: "Classic Denim Jeans",
              price: "$79.99",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983290082-rq47q3ut.jpg",
              imageAlt: "Classic Denim Jeans",
              isFavorited: false
            },
            {
              id: "4",
              name: "Luxury Leather Jacket",
              price: "$199.99",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983291397-8uh3i1cf.jpg",
              imageAlt: "Luxury Leather Jacket",
              isFavorited: false
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <FeatureCardThree
          title="Why Choose Our Fashion"
          description="We believe in quality, sustainability, and timeless style. Every piece in our collection is carefully selected to meet our high standards."
          tag="Our Promise"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          features={[
            {
              id: "1",
              title: "Premium Quality",
              description: "We source only the finest fabrics and materials from trusted suppliers around the world.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983292413-wq7r64pm.jpg",
              imageAlt: "Premium fabric quality"
            },
            {
              id: "2",
              title: "Sustainable Fashion",
              description: "Eco-friendly production methods and ethical sourcing practices for a better future.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787045743-6gjau4zf.jpg",
              imageAlt: "Sustainable production"
            },
            {
              id: "3",
              title: "Expert Craftsmanship",
              description: "Each piece is handcrafted by skilled artisans with decades of experience in fashion.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983293269-qul9w8a9.jpg",
              imageAlt: "Expert craftsmanship"
            },
            {
              id: "4",
              title: "Customer Support",
              description: "Dedicated support team ready to help with styling advice and any questions.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983294082-ngjm8l0d.jpg",
              imageAlt: "Customer support"
            }
          ]}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardOne
          title="What Our Customers Love"
          description="Read authentic reviews from fashion enthusiasts who have transformed their wardrobe with our collection."
          tag="Customer Reviews"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Fashion Blogger",
              company: "Style & Substance",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Chen",
              role: "Fashion Designer",
              company: "Creative Studio",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg",
              imageAlt: "James Chen"
            },
            {
              id: "3",
              name: "Emma Johnson",
              role: "Style Consultant",
              company: "Fashion Forward",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766318234070-3a71e283.jpg",
              imageAlt: "Emma Johnson"
            },
            {
              id: "4",
              name: "Michael Rodriguez",
              role: "Fashion Enthusiast",
              company: "Style Community",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg",
              imageAlt: "Michael Rodriguez"
            }
          ]}
        />
      </div>

      <div id="collections" data-section="collections">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Find answers to common questions about our collections, sizing, and policies."
          textPosition="left"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",
              title: "What is your return policy?",
              content: "We offer a 30-day return policy on all items. If you're not satisfied with your purchase, simply return it in original condition for a full refund or exchange."
            },
            {
              id: "2",
              title: "How do I find my size?",
              content: "Our size guide is available on each product page. We offer international sizing options including XS to XXL. Feel free to contact us if you need personalized sizing assistance."
            },
            {
              id: "3",
              title: "Do you ship internationally?",
              content: "Yes! We ship to over 150 countries worldwide. Shipping costs and delivery times vary by location. Standard shipping takes 5-7 business days."
            },
            {
              id: "4",
              title: "Are your materials ethically sourced?",
              content: "Absolutely. We partner exclusively with suppliers who follow fair trade practices and environmental standards. All our manufacturers are certified for ethical production."
            },
            {
              id: "5",
              title: "Can I customize my order?",
              content: "We offer customization options for select items including monogramming, embroidery, and color matching. Contact our team for details on personalization services."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Join Our Fashion Community"
          description="Subscribe to our newsletter for exclusive previews, style tips, and special offers on new collections."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. No spam, ever."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={[
            {
              items: [
                { label: "New Arrivals", href: "shop" },
                { label: "Best Sellers", href: "shop" },
                { label: "Sale", href: "shop" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "about" },
                { label: "Our Story", href: "about" },
                { label: "Sustainability", href: "about" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "Support", href: "contact" },
                { label: "Size Guide", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Shipping Info", href: "#" }
              ]
            }
          ]}
          logoText="Fashion Forward"
        />
      </div>
    </ThemeProvider>
  );
}