"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Twitter, Instagram } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="ShopHub"
          navItems={[
            { name: "Products", id: "products" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Shop Now",            href: "#products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Premium Tech Watch"
          description="Experience cutting-edge wearable technology with premium craftsmanship. Available in midnight blue with advanced health tracking features."
          buttons={[
            { text: "Add to Cart", href: "#cart" },
            { text: "Learn More", href: "#features" }
          ]}
          background={{ variant: "plain" }}
          imageSrc="https://img.b2bpic.net/free-photo/minimalist-camera-lens-desk-with-copy-space_23-2148424430.jpg"
          imageAlt="Premium Tech Watch product showcase"
          frameStyle="card"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Join thousands of satisfied customers who trust ShopHub for premium products"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          carouselMode="buttons"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Tech Enthusiast",              company: "New York, USA",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Fitness Coach",              company: "San Francisco, USA",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emma Davis",              role: "Lifestyle Blogger",              company: "London, UK",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              imageAlt: "Emma Davis"
            },
            {
              id: "4",              name: "James Wilson",              role: "Business Executive",              company: "Chicago, USA",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              imageAlt: "James Wilson"
            },
            {
              id: "5",              name: "Lisa Anderson",              role: "Wellness Expert",              company: "Toronto, Canada",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "Lisa Anderson"
            },
            {
              id: "6",              name: "David Martinez",              role: "Sports Professional",              company: "Miami, USA",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",              imageAlt: "David Martinez"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyThree
          title="Product Features"
          description="Discover what makes this product exceptional with advanced specifications and premium design"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          features={[
            {
              id: "1",              title: "Advanced Health Monitoring",              tags: ["Feature", "Health", "24/7"],
              imageSrc: "https://img.b2bpic.net/free-photo/photography-studio-with-equipment-items-arrangement_23-2150254625.jpg",              imageAlt: "Health monitoring feature"
            },
            {
              id: "2",              title: "Extended Battery Life",              tags: ["Performance", "14 Days", "Efficiency"],
              imageSrc: "https://img.b2bpic.net/free-photo/fashionable-fedora-hat-studio_23-2150744016.jpg",              imageAlt: "Battery performance"
            },
            {
              id: "3",              title: "Water Resistant Design",              tags: ["Durability", "50m Depth", "All-Weather"],
              imageSrc: "https://img.b2bpic.net/free-photo/view-vintage-camera-device-nutshell-tones_23-2151208197.jpg",              imageAlt: "Water resistance capability"
            }
          ]}
        />
      </div>

      <div id="related-products" data-section="related-products">
        <ProductCardFour
          title="Related Products"
          description="Complete your tech collection with complementary products"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          carouselMode="buttons"
          products={[
            {
              id: "1",              name: "Wireless Charging Dock",              price: "$49.99",              variant: "Premium Aluminum - Silver",              imageSrc: "https://img.b2bpic.net/free-photo/fashionable-fedora-hat-studio_23-2150744015.jpg",              imageAlt: "Wireless charging dock",              isFavorited: false
            },
            {
              id: "2",              name: "Protective Sport Band",              price: "$29.99",              variant: "Silicone - Multiple Colors",              imageSrc: "https://img.b2bpic.net/free-photo/travel-still-life-pack-top-view_23-2148837327.jpg",              imageAlt: "Sport watch band",              isFavorited: false
            },
            {
              id: "3",              name: "Premium Screen Protector",              price: "$19.99",              variant: "Tempered Glass - Clear",              imageSrc: "https://img.b2bpic.net/free-photo/minimal-composition-beauty-products_23-2148961331.jpg",              imageAlt: "Screen protector",              isFavorited: false
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our premium tech watch"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What is the battery life?",              content: "The premium tech watch features an extended battery life of up to 14 days with typical usage. Battery life may vary depending on features used, display brightness, and activity tracking frequency."
            },
            {
              id: "2",              title: "Is it water resistant?",              content: "Yes, this watch is water resistant up to 50 meters (approximately 164 feet). It can withstand splashes, brief immersion in water, and shallow-water activities like swimming. Not suitable for diving or high-pressure water sports."
            },
            {
              id: "3",              title: "What health metrics does it track?",              content: "The watch tracks heart rate, blood oxygen saturation (SpO2), sleep quality, daily activity, steps, calories burned, and provides stress monitoring. All data syncs automatically to the companion mobile app."
            },
            {
              id: "4",              title: "Is there a warranty?",              content: "Yes, we offer a 2-year manufacturer's warranty covering defects in materials and workmanship. The warranty includes technical support and repair services at our authorized service centers."
            },
            {
              id: "5",              title: "How do I update the software?",              content: "Software updates are delivered over-the-air through the companion app. Simply connect your watch to the app via Bluetooth, and you'll be notified when updates are available. Updates typically take 5-10 minutes."
            },
            {
              id: "6",              title: "What's the return policy?",              content: "We offer a 30-day money-back guarantee if you're not completely satisfied. If you return the product within 30 days in original condition, we'll provide a full refund, no questions asked."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to elevate your daily routine with premium wearable technology? Get your tech watch today and join our community of satisfied customers."
          animationType="entrance-slide"
          buttons={[
            { text: "Add to Cart Now", href: "#cart" },
            { text: "Contact Support", href: "#contact-form" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="ShopHub"
          copyrightText="© 2025 ShopHub. All rights reserved. Premium e-commerce experiences."
          socialLinks={[
            {
              icon: Facebook,
              href: "https://facebook.com/shophub",              ariaLabel: "ShopHub Facebook"
            },
            {
              icon: Twitter,
              href: "https://twitter.com/shophub",              ariaLabel: "ShopHub Twitter"
            },
            {
              icon: Instagram,
              href: "https://instagram.com/shophub",              ariaLabel: "ShopHub Instagram"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}