"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactText from "@/components/sections/contact/ContactText";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import {
  Sparkles,
  TrendingUp,
  Zap,
  Heart,
  Star,
  Flame,
  Crown,
  Shield,
  HelpCircle,
  User,
  Shirt,
  Footprints,
  ThumbsUp,
} from "lucide-react";
import Link from "next/link";

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Admin", id: "admin" },
    { name: "Streetwear", id: "streetwear" },
    { name: "Casuals", id: "casuals" },
    { name: "Specials", id: "specials" },
    { name: "Collections", id: "collections" },
    { name: "About", id: "about" },
  ];

  const footerColumns = [
    {
      title: "Shop",      items: [
        { label: "Streetwear", href: "#streetwear" },
        { label: "Casuals", href: "#casuals" },
        { label: "Specials", href: "#specials" },
        { label: "Seasonal Drops", href: "#seasonal" },
        { label: "New Arrivals", href: "#new" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/collections" },
        { label: "Our Story", href: "#story" },
        { label: "Careers", href: "#careers" },
        { label: "Press", href: "#press" },
        { label: "Blog", href: "#blog" },
      ],
    },
    {
      title: "Support",      items: [
        { label: "Contact Us", href: "#contact" },
        { label: "FAQ", href: "#faq" },
        { label: "Shipping Info", href: "#shipping" },
        { label: "Returns", href: "#returns" },
        { label: "Track Order", href: "#track" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#privacy" },
        { label: "Terms of Service", href: "#terms" },
        { label: "Refund Policy", href: "#refund" },
        { label: "Cookie Policy", href: "#cookies" },
        { label: "Accessibility", href: "#accessibility" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="DripDrop"
          bottomLeftText="Luxury Fashion Curator"
          bottomRightText="hello@dripdrop.com"
        />
      </div>

      <div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
        <HeroBillboardGallery
          title="Own Your Drip"
          description="Experience luxury streetwear redefined. Curated collections from the world's most exclusive fashion houses. Premium quality, timeless style, and uncompromising craftsmanship."
          background={{ variant: "sparkles-gradient" }}
          tag="NEW COLLECTION"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Explore Now", href: "#featured" },
            { text: "View Collections", href: "/collections" },
          ]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-cinematic-luxury-fashion-hero-image-fe-1773905419937-c226a180.png",              imageAlt: "Premium luxury fashion hero showcase"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-luxury-streetwear-collection-d-1773905421130-d9b67094.png",              imageAlt: "Exclusive streetwear collection"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-sleek-minimalist-showcase-of-premium-c-1773905419713-776baa65.png",              imageAlt: "Premium casual collection"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-high-end-designer-hoodie-in-black-with-1773905420917-6167dd9c.png?_wi=1",              imageAlt: "Trending luxury hoodie"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-designer-jacket-or-outerwear-pi-1773905419357-a4758cb0.png?_wi=1",              imageAlt: "Designer jacket showcase"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-accessories-collection-caps-ba-1773905421103-bed8d636.png?_wi=1",              imageAlt: "Luxury accessories collection"},
          ]}
          mediaAnimation="slide-up"
          ariaLabel="DripDrop hero section with premium fashion showcase"
        />
      </div>

      <div id="featured" data-section="featured" className="mx-auto px-4 md:px-6">
        <ProductCardFour
          title="Featured Collections"
          description="Handpicked luxury pieces that define modern premium fashion. Each item represents the pinnacle of design, quality, and exclusivity."
          tag="TRENDING"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          buttons={[{ text: "View All Collections", href: "/collections" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "product-1",              name: "Premium Black Hoodie",              price: "₹8,999",              variant: "Luxury Streetwear",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-high-end-designer-hoodie-in-black-with-1773905420917-6167dd9c.png?_wi=2",              imageAlt: "Premium black luxury hoodie"},
            {
              id: "product-2",              name: "Designer Jacket",              price: "₹15,499",              variant: "Exclusive Outerwear",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-designer-jacket-or-outerwear-pi-1773905419357-a4758cb0.png?_wi=2",              imageAlt: "Premium designer jacket"},
            {
              id: "product-3",              name: "Luxury Accessories Set",              price: "₹12,999",              variant: "Signature Collection",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-accessories-collection-caps-ba-1773905421103-bed8d636.png?_wi=2",              imageAlt: "Premium accessories collection"},
          ]}
          ariaLabel="Featured collections section"
        />
      </div>

      <div id="trending" data-section="trending" className="mx-auto px-4 md:px-6">
        <ProductCardFour
          title="Trending Now"
          description="The most coveted pieces right now. Limited stock items that fashion enthusiasts are rushing to grab. Don't miss out on these exclusive drops."
          tag="LIMITED STOCK"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[{ text: "Shop Trending", href: "#products" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="four-items-2x2-equal-grid"
          animationType="scale-rotate"
          products={[
            {
              id: "trending-1",              name: "Exclusive Summer Collection T-Shirt",              price: "₹4,999",              variant: "Limited Edition",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-t-shirt-or-casual-shirt-in-a-l-1773905419262-62043441.png?_wi=1",              imageAlt: "Trending luxury t-shirt"},
            {
              id: "trending-2",              name: "Premium Tailored Trousers",              price: "₹9,999",              variant: "Seasonal Drop",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-pair-of-pants-or-trousers-in-a--1773905419958-31e31783.png?_wi=1",              imageAlt: "Premium tailored trousers"},
            {
              id: "trending-3",              name: "Designer Sneakers",              price: "₹11,499",              variant: "Exclusive Footwear",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-sneaker-or-footwear-item-in-a-p-1773905419919-e94895b9.png?_wi=1",              imageAlt: "Premium designer sneakers"},
            {
              id: "trending-4",              name: "Statement Luxury Piece",              price: "₹16,999",              variant: "Premium Collection",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-statement-piece-or-special-coll-1773905422145-be5fe60f.png?_wi=1",              imageAlt: "Luxury statement piece"},
          ]}
          ariaLabel="Trending products section"
        />
      </div>

      <div id="recommendations" data-section="recommendations" className="mx-auto px-4 md:px-6">
        <FeatureBento
          title="AI-Powered Style Recommendations"
          description="Our intelligent AI assistant analyzes your preferences, body type, and style profile to suggest the perfect pieces. Get personalized outfit recommendations and complete-the-look suggestions instantly."
          tag="AI POWERED"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[{ text: "Start AI Assistant", href: "#" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="split"
          useInvertedBackground={false}
          animationType="blur-reveal"
          features={[
            {
              title: "Smart Outfit Matching",              description:
                "AI analyzes your saved items and suggests perfect combinations. Mix and match pieces for complete looks.",              bentoComponent: "chat",              aiIcon: Sparkles,
              userIcon: User,
              exchanges: [
                {
                  userMessage: "I love black streetwear",                  aiResponse:
                    "Perfect! I recommend pairing this black hoodie with our premium trousers and designer sneakers for a cohesive luxury streetwear look."},
                {
                  userMessage: "Show me casual options",                  aiResponse:
                    "Absolutely! Here are 5 premium casual combinations that match your style preference based on your saved items."},
                {
                  userMessage: "What's trending?",                  aiResponse:
                    "These are the top trending combinations right now: Premium layers with statement accessories. Limited stock available!"},
              ],
              placeholder: "Ask about outfit recommendations..."},
            {
              title: "Complete the Look",              description:
                "Select any item and get instant recommendations for complementary pieces to complete your perfect outfit.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Shirt, label: "Tops", value: "547 matches" },
                { icon: Shield, label: "Bottoms", value: "382 matches" },
                { icon: Footprints, label: "Footwear", value: "231 matches" },
                { icon: Sparkles, label: "Accessories", value: "156 matches" },
              ],
            },
            {
              title: "Top Picks for You",              description:
                "Personalized selection based on your browsing history and preferences. Discover new favorites curated just for you.",              bentoComponent: "orbiting-icons",              centerIcon: Heart,
              items: [
                { icon: Star, ring: 1, duration: 20 },
                { icon: Sparkles, ring: 1, duration: 25 },
                { icon: Zap, ring: 2, duration: 30 },
                { icon: Flame, ring: 2, duration: 35 },
                { icon: Crown, ring: 3, duration: 40 },
              ],
            },
          ]}
          carouselMode="buttons"
          ariaLabel="AI-powered recommendations section"
        />
      </div>

      <div id="products" data-section="products" className="mx-auto px-4 md:px-6">
        <ProductCardFour
          title="Top Picks for You"
          description="Handpicked selection based on your style preferences and browsing history. Discover exclusive pieces that match your luxury fashion taste."
          tag="PERSONALIZED"
          tagIcon={Heart}
          tagAnimation="slide-up"
          buttons={[{ text: "Explore Full Catalog", href: "#" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="bento-grid"
          animationType="slide-up"
          products={[
            {
              id: "pick-1",              name: "Premium Casual Shirt",              price: "₹5,499",              variant: "Versatile Collection",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-premium-t-shirt-or-casual-shirt-in-a-l-1773905419262-62043441.png?_wi=2",              imageAlt: "Premium casual luxury shirt"},
            {
              id: "pick-2",              name: "Luxury Trousers",              price: "₹10,999",              variant: "Premium Selection",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-pair-of-pants-or-trousers-in-a--1773905419958-31e31783.png?_wi=2",              imageAlt: "Premium luxury trousers"},
            {
              id: "pick-3",              name: "Designer Sneakers Pro",              price: "₹12,999",              variant: "Signature Footwear",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-sneaker-or-footwear-item-in-a-p-1773905419919-e94895b9.png?_wi=2",              imageAlt: "Premium designer sneakers"},
            {
              id: "pick-4",              name: "Luxury Belt & Accessories",              price: "₹6,999",              variant: "Statement Collection",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-accessory-or-complementary-fash-1773905419444-022fd6a5.png",              imageAlt: "Premium luxury accessories"},
            {
              id: "pick-5",              name: "Premium Jacket",              price: "₹14,999",              variant: "Seasonal Collection",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-luxury-statement-piece-or-special-coll-1773905422145-be5fe60f.png?_wi=2",              imageAlt: "Premium designer jacket"},
          ]}
          ariaLabel="Top picks for you personalized products"
        />
      </div>

      <div id="testimonials" data-section="testimonials" className="mx-auto px-4 md:px-6">
        <TestimonialCardSix
          title="What Our Customers Say"
          description="Join thousands of satisfied fashion enthusiasts who have discovered their perfect style with DripDrop. Real reviews from real customers."
          tag="5-STAR REVIEWS"
          tagIcon={Star}
          tagAnimation="slide-up"
          buttons={[{ text: "Share Your Review", href: "#" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          testimonials={[
            {
              id: "testimonial-1",              name: "Arjun Kumar",              handle: "@arjunstyle",              testimonial:
                "DripDrop is a game-changer. The quality is unmatched, and the AI recommendations helped me find my perfect style. Absolutely worth every rupee!",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-headshot-of-a-satisfied-l-1773905419556-bcdb5b91.png",              imageAlt: "Arjun Kumar customer testimonial",              icon: Star,
            },
            {
              id: "testimonial-2",              name: "Priya Sharma",              handle: "@priyafashion",              testimonial:
                "Finally found a luxury fashion platform that understands premium quality. The collection is curated with impeccable taste. Highly recommended!",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/another-professional-headshot-of-a-satis-1773905421529-5cdcfa3d.png",              imageAlt: "Priya Sharma customer testimonial",              icon: Heart,
            },
            {
              id: "testimonial-3",              name: "Rajesh Patel",              handle: "@rajeshwear",              testimonial:
                "The checkout process is seamless, delivery was lightning fast, and the packaging feels premium. This is how luxury shopping should be!",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-headshot-of-a-luxury-fash-1773905418969-b6f3bc7c.png",              imageAlt: "Rajesh Patel customer testimonial",              icon: ThumbsUp,
            },
            {
              id: "testimonial-4",              name: "Neha Desai",              handle: "@neha_luxe",              testimonial:
                "Every piece from DripDrop is a masterpiece. The attention to detail is incredible. I've become a loyal customer for life!",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-portrait-of-a-customer-in-1773905419689-f702ac6f.png",              imageAlt: "Neha Desai customer testimonial",              icon: Sparkles,
            },
          ]}
          speed={40}
          topMarqueeDirection="left"
          ariaLabel="Customer testimonials section"
        />
      </div>

      <div id="metrics" data-section="metrics" className="mx-auto px-4 md:px-6">
        <MetricCardSeven
          title="DripDrop by Numbers"
          description="Trusted by fashion enthusiasts worldwide. Our metrics showcase the growth and success of the DripDrop community."
          tag="IMPRESSIVE GROWTH"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          buttons={[{ text: "Join the Community", href: "#" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="depth-3d"
          metrics={[
            {
              id: "customers",              value: "50K+",              title: "Happy Customers",              items: [
                "Worldwide shipping",                "99% satisfaction rate",                "Premium support"],
            },
            {
              id: "collections",              value: "500+",              title: "Products",              items: [
                "Curated selection",                "Regular drops",                "Exclusive pieces"],
            },
            {
              id: "awards",              value: "12",              title: "Awards Won",              items: [
                "Best Fashion Platform",                "Innovation in Retail",                "Customer Choice"],
            },
            {
              id: "countries",              value: "25+",              title: "Countries Served",              items: [
                "Global delivery",                "Multi-currency support",                "Local partnerships"],
            },
          ]}
          ariaLabel="Key metrics and achievements section"
        />
      </div>

      <div id="social-proof" data-section="social-proof" className="mx-auto px-4 md:px-6">
        <SocialProofOne
          title="Trusted by Global Fashion Leaders"
          description="DripDrop is the preferred platform for luxury fashion enthusiasts and industry professionals. Join a community of style innovators."
          tag="TRUSTED BRANDS"
          tagIcon={Shield}
          tagAnimation="slide-up"
          buttons={[{ text: "Become a Partner", href: "#" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          names={["Nike", "Adidas", "Dior", "Gucci", "Louis Vuitton", "Versace", "Supreme"]}
          logos={[
            "http://img.b2bpic.net/free-psd/sports-landing-page-template-with-photo_23-2148986698.jpg",            "http://img.b2bpic.net/free-vector/unsa-independance-day-label-collection_1366-10.jpg",            "http://img.b2bpic.net/free-vector/floral-botanical-frame-collection_53876-67206.jpg",            "http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150881462.jpg",            "http://img.b2bpic.net/free-vector/pattern-with-square-shapes-stars_1017-6220.jpg",            "http://img.b2bpic.net/free-vector/golden-logo-background_1115-689.jpg",            "http://img.b2bpic.net/free-photo/man-holding-bible-book-outside-church_23-2150572060.jpg"]}
          speed={40}
          showCard={true}
          ariaLabel="Trusted brand partners section"
        />
      </div>

      <div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about shopping with DripDrop. From payment options to delivery policies."
          tag="CUSTOMER SUPPORT"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          buttons={[{ text: "Contact Support", href: "/collections" }]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="blur-reveal"
          faqs={[
            {
              id: "faq-1",              title: "What payment methods do you accept?",              content:
                "We accept multiple payment methods including UPI (Google Pay, PhonePe, Paytm), Debit Cards, Credit Cards via Razorpay and Stripe integration. All transactions are encrypted and secure."},
            {
              id: "faq-2",              title: "How fast is your delivery?",              content:
                "We offer fast delivery options with estimated delivery times of 2-5 business days to major Indian cities. Express delivery is available for rush orders. Real-time tracking is available for all orders."},
            {
              id: "faq-3",              title: "Is there a return policy?",              content:
                "Yes, we offer a 30-day return policy for all items. Products must be unworn and in original packaging. Returns are free, and refunds are processed within 5-7 business days."},
            {
              id: "faq-4",              title: "How does the AI recommendation work?",              content:
                "Our AI analyzes your browsing history, saved items, style preferences, and previous purchases to suggest personalized products and outfit combinations. The more you interact, the smarter it gets!"},
            {
              id: "faq-5",              title: "Do you have physical stores?",              content:
                "Currently, DripDrop operates exclusively online to maintain lower prices and faster service. We're expanding to select premium locations. Visit our contact page for updates."},
            {
              id: "faq-6",              title: "Are your products authentic?",              content:
                "100% authentic. We partner directly with designers and verified suppliers. Each product comes with authenticity verification. If not satisfied, full refund guaranteed."},
          ]}
          ariaLabel="FAQ section"
        />
      </div>

      <div id="contact" data-section="contact" className="mx-auto px-4 md:px-6">
        <ContactText
          text="Ready to Own Your Drip? Connect with our team for exclusive previews, special offers, and personalized styling consultation. Your perfect look awaits."
          animationType="entrance-slide"
          buttons={[
            { text: "Contact Us", href: "/collections" },
            { text: "Subscribe for Updates", href: "#" },
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          ariaLabel="Contact call-to-action section"
        />
      </div>

      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 DripDrop. All rights reserved. Premium fashion, worldwide."
          bottomRightText="Secure checkout powered by Razorpay & Stripe"
          ariaLabel="Site footer with navigation and legal information"
        />
      </div>
    </ThemeProvider>
  );
}
