"use client";

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Heart, Star, Award, Zap, Shield, Gift, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Big Size"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "Features", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Fashion That Fits You Perfectly"
          description="Discover our premium collection of stylish, comfortable clothing designed specifically for big and tall individuals. We celebrate every body type with high-quality fabrics and impeccable tailoring."
          tag="Inclusive Fashion"
          tagIcon={Heart}
          background={{ variant: "glowing-orb" }}
          imageSrc="https://img.b2bpic.net/free-photo/plus-size-model-clothing-apparel_53876-97857.jpg"
          imageAlt="Models showcasing Big Size fashion collection"
          imagePosition="right"
          buttons={[
            { text: "Shop Now", href: "products" },
            { text: "Learn More", href: "features" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Our Premium Collection"
          description="Handpicked items featuring comfortable fits, premium fabrics, and timeless styles"
          tag="Featured"
          tagIcon={Star}
          products={[
            {
              id: "1",              brand: "Big Size",              name: "Ultra Comfort T-Shirt",              price: "$49.99",              rating: 5,
              reviewCount: "1.2k",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-black-woman-with-afro-curls-hairstylesmiling-hipster-model-white-tshirt-sexy-carefree-female-posing-street-near-brown-wall-cheerful-happy-sunglasses_158538-21459.jpg",              imageAlt: "Ultra Comfort T-Shirt in natural beige"
            },
            {
              id: "2",              brand: "Big Size",              name: "Classic Denim Jeans",              price: "$89.99",              rating: 5,
              reviewCount: "892",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-black-woman-with-afro-curls-hairstylesmiling-hipster-model-white-tshirt-sexy-carefree-female-posing-street-near-brown-wall-cheerful-happy-sunglasses_158538-21447.jpg",              imageAlt: "Classic Denim Jeans in deep blue"
            },
            {
              id: "3",              brand: "Big Size",              name: "Professional Blazer",              price: "$129.99",              rating: 5,
              reviewCount: "645",              imageSrc: "https://img.b2bpic.net/free-photo/upset-european-man-white-shirt-with-tattooed-arms-sitting-outdoors_181624-59916.jpg",              imageAlt: "Professional Blazer in charcoal"
            }
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <MetricCardThree
          title="Why Choose Big Size"
          description="We're committed to providing exceptional quality and service to every customer"
          metrics={[
            {
              id: "1",              icon: Award,
              title: "Premium Quality",              value: "10K+ Happy"
            },
            {
              id: "2",              icon: Heart,
              title: "Inclusive Sizing",              value: "XS-4XL"
            },
            {
              id: "3",              icon: Zap,
              title: "Fast Shipping",              value: "2-3 Days"
            },
            {
              id: "4",              icon: Shield,
              title: "Quality Promise",              value: "100% Satisfied"
            }
          ]}
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Customers Say"
          description="Real stories from real people who love their Big Size wardrobe"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell, Marketing Director",              date: "Date: 15 January 2025",              title: "Finally, fashion that fits!",              quote: "I've struggled to find stylish clothing that actually fits properly. Big Size changed everything for me. The quality is exceptional and the customer service is outstanding. I feel confident and comfortable in every piece.",              tag: "Premium Member",              avatarSrc: "https://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg",              avatarAlt: "Sarah Mitchell",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg"
            },
            {
              id: "2",              name: "James Rodriguez, Software Engineer",              date: "Date: 10 January 2025",              title: "Best investment in my wardrobe",              quote: "The blazer I purchased from Big Size is professionally tailored and incredibly comfortable. It's perfect for both office meetings and casual Fridays. I've already recommended this shop to all my friends.",              tag: "Verified Buyer",              avatarSrc: "https://img.b2bpic.net/free-photo/happy-girl-home_1398-2388.jpg",              avatarAlt: "James Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/happy-girl-home_1398-2388.jpg"
            },
            {
              id: "3",              name: "Monica Chen, Business Owner",              date: "Date: 5 January 2025",              title: "Premium quality, unbeatable value",              quote: "As someone who values quality over quantity, Big Size delivers exactly that. Every garment is well-made, and the designs are contemporary without being trendy. I've been a loyal customer for over a year.",              tag: "Loyalty Member",              avatarSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-business-woman-with-sunglasses_23-2148603032.jpg",              avatarAlt: "Monica Chen",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-business-woman-with-sunglasses_23-2148603032.jpg"
            },
            {
              id: "4",              name: "David Thompson, Creative Director",              date: "Date: 28 December 2024",              title: "Inclusivity done right",              quote: "Big Size truly understands what inclusive fashion means. Their size range, quality fabrics, and thoughtful designs make everyone feel seen and valued. This is the future of fashion retail.",              tag: "Premium Member",              avatarSrc: "https://img.b2bpic.net/free-photo/picture-beautiful-smiling-woman-against-blurry-background_181624-19438.jpg",              avatarAlt: "David Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/picture-beautiful-smiling-woman-against-blurry-background_181624-19438.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Flexible Shopping Options"
          description="Choose the option that works best for your lifestyle"
          tag="Plans"
          tagIcon={Gift}
          plans={[
            {
              id: "1",              price: "$0",              name: "Basic",              buttons: [{ text: "Start Shopping", href: "https://example.com" }],
              features: [
                "Access to full collection",                "Standard shipping",                "Size guides and tips",                "Email support"
              ]
            },
            {
              id: "2",              badge: "Most Popular",              badgeIcon: Star,
              price: "$49/year",              name: "Premium Member",              buttons: [{ text: "Become a Member", href: "https://example.com" }],
              features: [
                "Everything in Basic",                "Free express shipping",                "Exclusive member sales",                "Early access to new collections",                "Priority support",                "Birthday rewards"
              ]
            },
            {
              id: "3",              price: "$99/year",              name: "VIP Elite",              buttons: [{ text: "Join Elite", href: "https://example.com" }],
              features: [
                "Everything in Premium",                "Free personal styling consultation",                "Custom tailoring options",                "Concierge support",                "VIP event invitations",                "Exclusive merchandise"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Updated with Latest Collections"
          description="Subscribe to our newsletter and receive exclusive offers, styling tips, and early access to new arrivals. We promise never to spam—just quality fashion inspiration."
          tagIcon={Mail}
          background={{ variant: "animated-grid" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="By subscribing, you agree to our privacy policy. You can unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Big Size"
          columns={[
            {
              items: [
                { label: "Shop", href: "products" },
                { label: "Collections", href: "products" },
                { label: "New Arrivals", href: "products" }
              ]
            },
            {
              items: [
                { label: "About", href: "features" },
                { label: "Our Story", href: "features" },
                { label: "Sustainability", href: "features" }
              ]
            },
            {
              items: [
                { label: "Support", href: "contact" },
                { label: "Contact Us", href: "contact" },
                { label: "FAQ", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Policies", href: "https://example.com/privacy" },
                { label: "Privacy", href: "https://example.com/privacy" },
                { label: "Terms", href: "https://example.com/terms" }
              ]
            },
            {
              items: [
                { label: "Follow Us", href: "https://instagram.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}