"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Star, Zap, Flame, Crown } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="CLAV"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Why Us", id: "features" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Items",            href: "products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="CLAV"
          description="Premium looks maxing items for TikTok creators and streamers. Level up your style instantly."
          buttons={[
            { text: "Shop Now", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/girl-wears-fashionable-cloths-white-boots-has-bright-makeup-poses-against-urban-building-poses-making-photo-practices-breakdancing-looks-seriously_273609-54827.jpg"
          imageAlt="Modern fashion styling aesthetic"
          showDimOverlay={true}
          logoLineHeight={1.15}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Premium Collection"
          description="Curated looks maxing items trusted by top creators and streamers"
          products={[
            {
              id: "1",              name: "Luxury Gold Chronograph Watch",              price: "$189.99",              imageSrc: "https://img.b2bpic.net/free-photo/fashion-portrait-young-businessman-handsome-model-man-casual-cloth-suit-with-accesories-hands_158538-9460.jpg",              imageAlt: "Gold chronograph luxury watch",              initialQuantity: 1
            },
            {
              id: "2",              name: "Premium Shield Sunglasses",              price: "$129.99",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-businesman-summer-city_1157-25611.jpg",              imageAlt: "Designer shield sunglasses",              initialQuantity: 1
            },
            {
              id: "3",              name: "Signature Black Leather Jacket",              price: "$249.99",              imageSrc: "https://img.b2bpic.net/free-photo/fashion-portrait-young-businessman-handsome-model-man-casual-cloth-suit-with-accessories-hands_158538-9455.jpg",              imageAlt: "Premium black leather jacket",              initialQuantity: 1
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About CLAV"
          tagIcon={Sparkles}
          title="Your Ultimate Looks Maxing Destination"
          description="For TikTok & Streaming Creators"
          subdescription="Trusted by 50K+ content creators worldwide"
          icon={Star}
          imageSrc="https://img.b2bpic.net/free-photo/young-woman-doing-beauty-vlog-home_23-2148916285.jpg"
          imageAlt="Content creator with premium styling"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwelve
          title="Why Creators Choose CLAV"
          description="Everything you need to look your absolute best on camera"
          tag="Premium Benefits"
          tagIcon={Zap}
          features={[
            {
              id: "authentic",              label: "Authentic",              title: "100% Genuine Premium Items",              items: [
                "Verified luxury brands",                "Certificate of authenticity",                "Full quality guarantee"
              ]
            },
            {
              id: "fast",              label: "Express",              title: "Lightning Fast Shipping",              items: [
                "2-3 day delivery",                "Free shipping on orders",                "Track in real-time"
              ]
            },
            {
              id: "creator",              label: "Creator",              title: "Creator Exclusive Perks",              items: [
                "Special discount codes",                "Early access to drops",                "VIP community access"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Loved by Top Creators"
          description="Join thousands of TikTok creators and streamers who've transformed their look"
          tag="Creator Reviews"
          testimonials={[
            {
              id: "1",              name: "Alex Chen",              handle: "@alexcreates",              testimonial: "CLAV completely changed my streaming aesthetic. My engagement went crazy after upgrading my looks!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              imageAlt: "Alex Chen profile"
            },
            {
              id: "2",              name: "Jordan Style",              handle: "@stylemaker",              testimonial: "The quality is insane and the delivery was faster than expected. Definitely a must-have for creators.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-black-t-shirt-isolated-pink-wall_141793-82450.jpg",              imageAlt: "Jordan Style profile"
            },
            {
              id: "3",              name: "Marcus Flex",              handle: "@flexonflex",              testimonial: "Best investment for my streaming setup. The items are premium and the vibe is immaculate.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-handsome-man_23-2148780801.jpg",              imageAlt: "Marcus Flex profile"
            },
            {
              id: "4",              name: "Sophia Glow",              handle: "@glowvibes",              testimonial: "Every single piece from CLAV levels up my content. The customer service is chef's kiss too!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-smiling-handsome-man-with-blond-hair-wearing-burgunde-casual-t-shirt-standing_176532-9610.jpg",              imageAlt: "Sophia Glow profile"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Exclusive Creator Plans"
          description="Get premium items at prices that won't break the bank"
          tag="Flexible Options"
          plans={[
            {
              id: "starter",              badge: "Popular",              badgeIcon: Flame,
              price: "$199",              subtitle: "Perfect for new creators",              buttons: [
                { text: "Get Started", href: "#contact" }
              ],
              features: [
                "Luxury watch + sunglasses combo",                "Express 2-day shipping",                "Creator discount code (10% off)",                "Styling guide included"
              ]
            },
            {
              id: "pro",              badge: "Best Value",              badgeIcon: Crown,
              price: "$399",              subtitle: "For serious content creators",              buttons: [
                { text: "Unlock Pro", href: "#contact" }
              ],
              features: [
                "Full premium collection bundle",                "Express 1-day shipping",                "VIP creator access",                "Monthly exclusive drops",                "Personal style consultant"
              ]
            },
            {
              id: "elite",              badge: "Exclusive",              badgeIcon: Sparkles,
              price: "$699",              subtitle: "Limited slots for top streamers",              buttons: [
                { text: "Apply for Elite", href: "#contact" }
              ],
              features: [
                "Everything in Pro plan",                "Overnight priority shipping",                "Custom curated items monthly",                "Exclusive collaboration pieces",                "Dedicated account manager"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Common Questions"
          description="Everything you need to know about CLAV and our products"
          tag="Help Center"
          faqs={[
            {
              id: "1",              title: "Are all items authentic?",              content: "Yes! Every item sold through CLAV is 100% authentic and verified. We only work with authorized distributors and provide certificates of authenticity with premium purchases. Your satisfaction is guaranteed."
            },
            {
              id: "2",              title: "What's the shipping time?",              content: "Standard shipping takes 3-5 business days. Express shipping is 2 days, and Elite members get overnight delivery. All orders are tracked in real-time so you always know where your package is."
            },
            {
              id: "3",              title: "Do you have a return policy?",              content: "Absolutely. We offer 30-day returns on all items in original condition. If you're not completely satisfied, we'll make it right. No questions asked, full refund or exchange."
            },
            {
              id: "4",              title: "Can I get a creator discount?",              content: "Yes! All CLAV plans include exclusive creator discount codes. Starter plans get 10% off, Pro plans get 15% off, and Elite members get custom pricing. Apply to become an official CLAV creator."
            },
            {
              id: "5",              title: "Is there international shipping?",              content: "We currently ship to over 80 countries worldwide. International orders typically take 7-14 business days depending on location. Customs duties may apply and are the customer's responsibility."
            },
            {
              id: "6",              title: "How do I contact support?",              content: "We're here 24/7 via email, DM, and live chat. Creator members get priority support with dedicated account managers. Average response time is under 2 hours."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Join the CLAV Community"
          description="Get exclusive early access to new drops, creator tips, and special promotions. Connect with us today."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Your email",              required: true
            },
            {
              name: "handle",              type: "text",              placeholder: "Your TikTok/streaming handle",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about yourself or ask anything...",            rows: 4,
            required: false
          }}
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/medium-shot-influencer-with-camera_23-2149172433.jpg"
          imageAlt="Customer support team"
          mediaPosition="right"
          buttonText="Get Exclusive Access"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="CLAV"
        />
      </div>
    </ThemeProvider>
  );
}