"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Star, Gift, Heart, Leaf, Users, Lightbulb, HelpCircle } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="outline"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="HERO LOGO"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Shop Now",            href: "products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Discover Premium Quality"
          description="Explore our curated collection of exceptional products designed with elegance and precision for the discerning customer"
          tag="Welcome to HERO LOGO"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-vector/vintage-background-design_1375-504.jpg"
          imageAlt="hero logo brand luxury minimal"
          buttons={[
            { text: "Shop Collection", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Featured Products"
          description="Handpicked selections of our finest items, carefully curated for quality and elegance"
          tag="Exclusive Collection"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          carouselMode="buttons"
          products={[
            {
              id: "1",              name: "Premium Leather Collection",              price: "$189.00",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-cosmetics-with-lipstick_23-2149234332.jpg",              imageAlt: "premium product elegant minimal white",              initialQuantity: 1
            },
            {
              id: "2",              name: "Elegant Home Essentials",              price: "$149.00",              imageSrc: "https://img.b2bpic.net/free-vector/11image-from-rawpixel-id-2210331-original_53876-114381.jpg",              imageAlt: "luxury item minimalist modern product",              initialQuantity: 1
            },
            {
              id: "3",              name: "Sophisticated Lifestyle Set",              price: "$229.00",              imageSrc: "https://img.b2bpic.net/free-photo/make-up-concept-with-powder_23-2149030353.jpg",              imageAlt: "sophisticated product premium clean design",              initialQuantity: 1
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="Choose the plan that works best for your shopping needs and enjoy premium benefits"
          tag="Membership Plans"
          tagIcon={Gift}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="opacity"
          carouselMode="buttons"
          plans={[
            {
              id: "starter",              price: "Free",              name: "Starter",              buttons: [
                { text: "Get Started", href: "shop" }
              ],
              features: [
                "Access to basic products",                "Standard shipping",                "Email support",                "Exclusive member discounts"
              ]
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$99/year",              name: "Premium Plus",              buttons: [
                { text: "Start Premium", href: "shop" }
              ],
              features: [
                "Full product access",                "Free expedited shipping",                "Priority customer support",                "Early access to new collections",                "Exclusive member events"
              ]
            },
            {
              id: "elite",              price: "$199/year",              name: "Elite Collection",              buttons: [
                { text: "Become Elite", href: "shop" }
              ],
              features: [
                "All Premium Plus benefits",                "Personal shopping assistant",                "Custom product curation",                "Complimentary gift wrapping",                "VIP event invitations"
              ]
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="About HERO LOGO"
          description="We believe in delivering products of exceptional quality that elevate everyday moments into meaningful experiences"
          tag="Our Story"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          imagePosition="right"
          imageSrc="https://img.b2bpic.net/free-psd/moody-food-restaurant-instagram-stories-template-concept-mock-up_23-2148424794.jpg"
          imageAlt="brand story business luxury modern"
          bulletPoints={[
            {
              title: "Premium Quality",              description: "Each product is meticulously selected and tested to ensure exceptional standards",              icon: Star
            },
            {
              title: "Sustainable Design",              description: "Committed to ethical sourcing and environmentally responsible manufacturing practices",              icon: Leaf
            },
            {
              title: "Customer First",              description: "Your satisfaction is our priority, backed by responsive support and hassle-free returns",              icon: Users
            },
            {
              title: "Innovation",              description: "Continuously evolving our collections to bring you the latest in elegant design",              icon: Lightbulb
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by thousands of satisfied customers worldwide"
          cardTag="See What Our Customers Say"
          cardTagIcon={Heart}
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",              imageAlt: "customer portrait professional woman headshot"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",              imageAlt: "customer portrait professional man headshot"
            },
            {
              id: "3",              name: "Emma Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-woman-work_23-2149622870.jpg",              imageAlt: "customer portrait professional woman confident"
            },
            {
              id: "4",              name: "James Wilson",              imageSrc: "https://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151098593.jpg",              imageAlt: "customer portrait professional man smiling"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our products, shipping, and policies"
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What is your return policy?",              content: "We offer a 30-day money-back guarantee on all products. If you're not completely satisfied, simply return your item in its original condition for a full refund or exchange."
            },
            {
              id: "2",              title: "How long does shipping take?",              content: "Standard shipping typically takes 5-7 business days. Premium members enjoy free expedited shipping (2-3 business days). International orders may take 10-14 business days."
            },
            {
              id: "3",              title: "Do you offer international shipping?",              content: "Yes, we ship to over 150 countries worldwide. Shipping costs and delivery times vary by location. Calculate your shipping costs at checkout before completing your purchase."
            },
            {
              id: "4",              title: "What payment methods do you accept?",              content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and Apple Pay. All transactions are secure and encrypted for your protection."
            },
            {
              id: "5",              title: "Are your products authentic?",              content: "100% authentic. All our products are sourced directly from authorized manufacturers and distributors. We guarantee authenticity or your money back."
            },
            {
              id: "6",              title: "Do you offer gift wrapping?",              content: "Yes! Complimentary gift wrapping is available for all orders. Elite members receive this service automatically. Select the gift wrapping option at checkout."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Have questions about our products or services? We'd love to hear from you. Reach out anytime and our team will respond within 24 hours."
          useInvertedBackground="noInvert"
          mediaPosition="right"
          imageSrc="https://img.b2bpic.net/free-photo/businessman-urbanization-town-city-metro-concept_53876-64995.jpg"
          imageAlt="contact communication business minimal professional"
          buttonText="Send Message"
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "your@email.com",              required: true
            },
            {
              name: "phone",              type: "tel",              placeholder: "Your Phone Number",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us what's on your mind...",            rows: 5,
            required: true
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="HERO LOGO"
          copyrightText="© 2025 HERO LOGO. All rights reserved."
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Products", href: "/products" },
                { label: "New Arrivals", href: "/new" },
                { label: "Best Sellers", href: "/bestsellers" },
                { label: "Collections", href: "/collections" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Story", href: "/story" },
                { label: "Careers", href: "/careers" },
                { 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" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}