"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Sparkles, TrendingUp, Zap, Shield, Megaphone, Instagram, Facebook, Mail, Share2, Users, ShoppingCart, Globe, TrendingUp as TrendingUpIcon } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="DropHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Products", id: "products" },
            { name: "Features", id: "features" },
            { name: "About", id: "about" }
          ]}
          button={{ text: "Start Selling", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Build Your Dropshipping Empire"
          description="Access thousands of premium products, manage inventory effortlessly, and scale your ecommerce business with our cutting-edge dropshipping platform."
          background={{ variant: "plain" }}
          tag="Trusted by 10,000+ Sellers"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "Get Started Free", href: "#products" },
            { text: "Watch Demo", href: "#features" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/cotton-plants-still-life_23-2151158815.jpg", imageAlt: "modern ecommerce product showcase display" },
            { imageSrc: "http://img.b2bpic.net/free-photo/vertical-photo-open-laptop-with-chroma-key-green-screen-standing-clothing-rack-black-friday-sales-retail-store-inventory-management-softwares-apparel-retail_482257-72301.jpg", imageAlt: "product display elegant lifestyle photography" },
            { imageSrc: "http://img.b2bpic.net/free-vector/furniture-sale-ig-stories-pack_23-2148688228.jpg", imageAlt: "bestselling products retail display arrangement" },
            { imageSrc: "http://img.b2bpic.net/free-photo/chic-fashion-boutique-with-well-organized-clothing-racks_482257-118413.jpg", imageAlt: "premium product range lifestyle photography" },
            { imageSrc: "http://img.b2bpic.net/free-vector/abstract-sales-landing-page-with-female-bags_23-2148334147.jpg", imageAlt: "exclusive product offerings retail layout" },
            { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-wearing-face-mask-store_23-2149148472.jpg", imageAlt: "bestseller product collection ecommerce" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Why Choose DropHub?"
          description={[
            "DropHub revolutionizes the dropshipping industry by combining powerful automation tools with an extensive product catalog. We handle the complex logistics so you can focus on growing your business and maximizing profits.",            "With real-time inventory management, seamless supplier integration, and built-in marketing tools, you'll have everything needed to launch and scale your dropshipping store in minutes."
          ]}
          buttons={[
            { text: "Learn More", href: "#features" }
          ]}
          buttonAnimation="blur-reveal"
          useInvertedBackground={false}
          showBorder={true}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Featured Products"
          description="Explore our curated selection of high-demand items ready to resell"
          tag="Best Sellers"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            { id: "prod-1", name: "Premium Wireless Headphones", price: "$24.99", variant: "Black", imageSrc: "http://img.b2bpic.net/free-psd/black-friday-super-sale-web-banner-template_120329-3851.jpg", imageAlt: "Wireless Headphones" },
            { id: "prod-2", name: "Smart Fitness Tracker", price: "$34.99", variant: "Blue", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-unrecognizable-woman-dressed-beige-sportswear-wears-smartwatch-holds-bottle-fresh-water-takes-break-after-workout-faceless-sporty-female-model-feels-thirsty-training_273609-57744.jpg", imageAlt: "Fitness Tracker" },
            { id: "prod-3", name: "Portable Power Bank", price: "$18.99", variant: "Silver", imageSrc: "http://img.b2bpic.net/free-photo/close-up-round-gray-wall-clock-isolated-white-background_187299-47159.jpg", imageAlt: "Power Bank" },
            { id: "prod-4", name: "Wireless Bluetooth Speaker", price: "$29.99", variant: "Black", imageSrc: "http://img.b2bpic.net/free-photo/pre-knobs-switchers-mixing-console-panel-board_482257-122203.jpg", imageAlt: "Bluetooth Speaker" },
            { id: "prod-5", name: "Mechanical Keyboard", price: "$49.99", variant: "RGB", imageSrc: "http://img.b2bpic.net/free-photo/silhouette-business-person-typing_53876-42735.jpg", imageAlt: "Mechanical Keyboard" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Powerful Features for Success"
          description="Everything you need to manage, scale, and grow your dropshipping business"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            { title: "Inventory Management", description: "Real-time sync across all suppliers and sales channels", bentoComponent: "animated-bar-chart" },
            { title: "Automated Orders", description: "Orders automatically forwarded to suppliers for fulfillment", bentoComponent: "icon-info-cards", items: [
              { icon: Zap, label: "Speed", value: "< 1 min" },
              { icon: Shield, label: "Reliability", value: "99.9%" },
              { icon: TrendingUpIcon, label: "Growth", value: "+300%" }
            ] },
            { title: "Marketing Tools", description: "Built-in social media integration and email campaigns", bentoComponent: "orbiting-icons", centerIcon: Megaphone, items: [
              { icon: Instagram, ring: 1 },
              { icon: Facebook, ring: 1 },
              { icon: Mail, ring: 2 },
              { icon: Share2, ring: 2 }
            ] }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Trusted by Thousands"
          description="See how successful entrepreneurs are building their dropshipping empires with DropHub"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          kpiItems={[
            { value: "10,000+", label: "Active Sellers" },
            { value: "$500M+", label: "Annual Revenue" },
            { value: "50,000+", label: "Products Available" }
          ]}
          testimonials={[
            { id: "1", name: "Sarah Mitchell", role: "Founder", company: "Digital Ventures", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-businesswoman-with-glasses_23-2147989567.jpg", imageAlt: "professional headshot business portrait" },
            { id: "2", name: "James Chen", role: "CEO", company: "Global Commerce Co", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-with-folded-arms-looking-camera_23-2147955314.jpg", imageAlt: "professional business man headshot portrait" },
            { id: "3", name: "Jessica Rodriguez", role: "Store Owner", company: "Trend Retailers", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blond-photographer-female-dressed-black-leather-jacket-holds-professional-digital-camera-tripod_613910-199.jpg", imageAlt: "diverse professional woman headshot portrait" },
            { id: "4", name: "Michael Thompson", role: "Entrepreneur", company: "NextGen Brands", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-by-cafe_1303-29687.jpg", imageAlt: "young entrepreneur professional headshot" },
            { id: "5", name: "Emma Watson", role: "Business Manager", company: "E-Commerce Solutions", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/bald-man-with-beard-wearing-business-clothes-glasses-puffing-cheeks-with-funny-face-mouth-inflated-with-air-crazy-expression_839833-2502.jpg", imageAlt: "diverse professional team portrait photo" },
            { id: "6", name: "David Kim", role: "Founder", company: "Smart Retail Hub", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/serene-businessman-with-glasses_1098-719.jpg", imageAlt: "professional entrepreneur headshot portrait" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="By The Numbers"
          description="Our platform delivers measurable results for dropshipping merchants"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            { id: "1", icon: Users, title: "Active Merchants", value: "10K+" },
            { id: "2", icon: ShoppingCart, title: "Orders Processed", value: "2M+" },
            { id: "3", icon: Globe, title: "Countries Served", value: "180+" },
            { id: "4", icon: TrendingUpIcon, title: "Avg Revenue Growth", value: "340%" }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Common Questions"
          description="Everything you need to know about getting started with DropHub"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="smooth"
          faqs={[
            { id: "1", title: "How do I get started?", content: "Sign up for a free account, connect your suppliers, and start listing products within minutes. Our onboarding guide walks you through every step." },
            { id: "2", title: "What fees do you charge?", content: "We charge a small commission on each order fulfilled through our platform. There are no hidden fees, and you only pay when you make sales." },
            { id: "3", title: "Can I integrate with my existing store?", content: "Yes! DropHub integrates seamlessly with Shopify, WooCommerce, BigCommerce, and many other ecommerce platforms." },
            { id: "4", title: "How are orders fulfilled?", content: "Orders are automatically sent to our network of verified suppliers who handle packing and shipping directly to your customers." },
            { id: "5", title: "What if a product is out of stock?", content: "Our real-time inventory system prevents overselling. If stock runs out, the product is automatically marked as unavailable." },
            { id: "6", title: "Do you provide customer support?", content: "Absolutely! Our support team is available 24/7 via chat, email, and phone to help you succeed." }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            { title: "Product", items: [
              { label: "Features", href: "#features" },
              { label: "Pricing", href: "#pricing" },
              { label: "Integrations", href: "#" },
              { label: "API Docs", href: "#" }
            ] },
            { title: "Company", items: [
              { label: "About Us", href: "#about" },
              { label: "Blog", href: "#" },
              { label: "Careers", href: "#" },
              { label: "Contact", href: "#" }
            ] },
            { title: "Resources", items: [
              { label: "Help Center", href: "#" },
              { label: "Community", href: "#" },
              { label: "Status", href: "#" },
              { label: "Partners", href: "#" }
            ] },
            { title: "Legal", items: [
              { label: "Privacy Policy", href: "#" },
              { label: "Terms of Service", href: "#" },
              { label: "Cookie Policy", href: "#" }
            ] }
          ]}
          bottomLeftText="© 2024 DropHub. All rights reserved."
          bottomRightText="Built for modern ecommerce entrepreneurs"
        />
      </div>
    </ThemeProvider>
  );
}
