"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Shield, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Products",          id: "#products"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/modern-wireless-earphones-with-case-displayed-round-podium-with-soft-shadows_23-2150808016.jpg"
      logoAlt="GadgetVerse Logo"
      brandName="GadgetVerse"
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogo
      logoText="GadgetVerse"
      description="Your Universe of Cutting-Edge Phone Gadgets. Elevate Your Mobile Experience."
      buttons={[
        {
          text: "Explore Products",          href: "#products"},
        {
          text: "Learn More",          href: "#about"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/natural-background-water-pool-texture-close-up_169016-22523.jpg"
      imageAlt="Collection of modern phone gadgets and accessories"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Innovation for Your Everyday Mobile Life"
      description="At GadgetVerse, we believe technology should simplify and enhance your daily routines. We curate the latest and most innovative phone gadgets designed to boost productivity, entertainment, and protection for your smartphone. Discover smart solutions that seamlessly integrate into your lifestyle."
      imageSrc="http://img.b2bpic.net/free-photo/man-playing-guitar-home_23-2149061755.jpg"
      imageAlt="Person interacting with various phone gadgets"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",          title: "Ultimate Protection",          author: "Engineered Durability",          description: "Shield your device from drops and scratches with our military-grade phone cases. Designed for maximum impact absorption and a sleek profile.",          tags: [
            "Durability",            "Style"],
          imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074268.jpg",          imageAlt: "Durable phone case"},
        {
          id: "f2",          title: "Immersive Audio",          author: "Crystal Clear Sound",          description: "Experience superior sound quality and active noise cancellation with our premium wireless earbuds. Perfect for music, calls, and focus.",          tags: [
            "Audio",            "Wireless"],
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072194.jpg",          imageAlt: "Wireless earbuds"},
        {
          id: "f3",          title: "Power On-The-Go",          author: "Never Run Out of Charge",          description: "Stay powered up all day with our high-capacity portable power banks. Fast charging capabilities ensure you're always connected.",          tags: [
            "Charging",            "Portable"],
          imageSrc: "http://img.b2bpic.net/free-photo/png-power-bank-isolated-white-background_185193-165523.jpg",          imageAlt: "Portable power bank"},
      ]}
      title="Unleash Your Phone's Full Potential"
      description="Discover smart accessories that deliver unparalleled performance and convenience."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          name: "WaveBeats Pro Earbuds",          price: "$129.99",          imageSrc: "http://img.b2bpic.net/free-photo/modern-wireless-earphones-with-case-displayed-round-podium-with-soft-shadows_23-2150808016.jpg",          imageAlt: "True wireless earbuds in case"},
        {
          id: "p2",          name: "AuraCharge Wireless Pad",          price: "$49.99",          imageSrc: "http://img.b2bpic.net/free-photo/wireless-charger-top-view_23-2149520038.jpg",          imageAlt: "Sleek wireless charging pad"},
        {
          id: "p3",          name: "HydroGuard Waterproof Case",          price: "$34.99",          imageSrc: "http://img.b2bpic.net/free-photo/new-cellphone-with-transparent-cover-isolated-white-background_58702-4649.jpg",          imageAlt: "Waterproof phone case"},
        {
          id: "p4",          name: "FlexiMount Car Holder",          price: "$29.99",          imageSrc: "http://img.b2bpic.net/free-photo/car-holder-with-modern-smartphone_23-2149487957.jpg",          imageAlt: "Phone car mount"},
        {
          id: "p5",          name: "SoundFlow Bluetooth Speaker",          price: "$79.99",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-minimalist-bluetooth-speaker_23-2149814407.jpg",          imageAlt: "Portable Bluetooth speaker"},
        {
          id: "p6",          name: "PowerCore 10000mAh Bank",          price: "$59.99",          imageSrc: "http://img.b2bpic.net/free-photo/png-power-bank-isolated-white-background_185193-165523.jpg",          imageAlt: "High-capacity power bank"},
      ]}
      title="Experience the Future with Waves Gadgets"
      description="Explore our cutting-edge selection of audio, charging, and smart accessories."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic-wavecare",          badge: "Starter",          badgeIcon: Shield,
          price: "$5.99/month",          subtitle: "Essential coverage for your Waves gadgets.",          buttons: [
            {
              text: "Get Started"},
          ],
          features: [
            "1-year extended warranty",            "Standard customer support",            "Email updates & tips",            "Access to basic online guides"],
        },
        {
          id: "premium-wavecare",          badge: "Popular",          badgeIcon: Star,
          price: "$12.99/month",          subtitle: "Enhanced protection and priority service.",          buttons: [
            {
              text: "Go Premium"},
          ],
          features: [
            "2-year extended warranty",            "24/7 priority customer support",            "Accidental damage protection",            "Free annual accessory check",            "Exclusive discounts on new releases"],
        },
        {
          id: "ultimate-wavecare",          badge: "Elite",          badgeIcon: Zap,
          price: "$19.99/month",          subtitle: "The most comprehensive plan for peace of mind.",          buttons: [
            {
              text: "Unlock Elite"},
          ],
          features: [
            "3-year comprehensive warranty",            "Dedicated VIP support line",            "Theft and loss coverage",            "Free gadget replacement (once per year)",            "Annual upgrade credit",            "Priority access to beta products"],
        },
      ]}
      title="WavesCare: Protection & Support Plans"
      description="Ensure your Waves Gadgets are always at their best with our comprehensive care plans."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",          value: "98%",          description: "Customer Satisfaction"},
        {
          id: "m2",          value: "50K+",          description: "Gadgets Sold Worldwide"},
        {
          id: "m3",          value: "4.9/5",          description: "Average Product Rating"},
      ]}
      title="Our Impact & Customer Satisfaction"
      description="Proudly serving a global community with top-tier phone gadgets and exceptional service."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "Sarah Johnson",          role: "Tech Enthusiast",          company: "Digital Life",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg",          imageAlt: "Sarah Johnson"},
        {
          id: "t2",          name: "Michael Chen",          role: "Productivity Hacker",          company: "Sync Solutions",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/excited-young-handsome-guy-wearing-red-shirt-glasses-showing-yes-gesture-isolated-green-wall_141793-83642.jpg",          imageAlt: "Michael Chen"},
        {
          id: "t3",          name: "Emily Rodriguez",          role: "Travel Vlogger",          company: "Wanderlust Media",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-afroamerican-man_23-2148508906.jpg",          imageAlt: "Emily Rodriguez"},
        {
          id: "t4",          name: "David Kim",          role: "Small Business Owner",          company: "Connect Inc.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/mature-woman-pointing-up-dress-looking-confident_176474-32780.jpg",          imageAlt: "David Kim"},
        {
          id: "t5",          name: "Jessica Lee",          role: "Student & Creator",          company: "Campus Innovations",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/positive-emotions-reaction-feelings-joyful-funny-young-woman-with-dyed-bob-hairstyle-artistic-make-up-screwing-up-eyes-smiling-feeling-shy-laughing-joke-being-good-mood_343059-4357.jpg",          imageAlt: "Jessica Lee"},
      ]}
      kpiItems={[
        {
          value: "5 Stars",          label: "Average Rating"},
        {
          value: "100%",          label: "Quality Tested"},
        {
          value: "Trusted",          label: "By Thousands"},
      ]}
      title="What Our Customers Say"
      description="Hear from the GadgetVerse community about how our products have enhanced their mobile lives."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "What is your return policy?",          content: "We offer a 30-day satisfaction guarantee. If you're not happy with your purchase, you can return it within 30 days for a full refund. Please see our full return policy page for details."},
        {
          id: "q2",          title: "Do you offer international shipping?",          content: "Yes, we ship worldwide! Shipping costs and delivery times vary by destination. You can find more information during checkout or on our shipping information page."},
        {
          id: "q3",          title: "How can I track my order?",          content: "Once your order is shipped, you will receive an email with a tracking number and a link to track your package's journey. You can also log into your account to check the status of your order."},
        {
          id: "q4",          title: "Are your products compatible with all phone models?",          content: "While many of our gadgets are universally compatible, some are designed for specific phone models. Please check the product description for compatibility details before making a purchase."},
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to your most common questions about our products and services."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      tag="Connect With Us"
      title="Got a Question? We're Here to Help!"
      description="Our team is ready to assist you with any inquiries, support, or feedback. Reach out to us anytime."
      buttons={[
        {
          text: "Contact Support",          href: "#"},
        {
          text: "Send an Email",          href: "mailto:support@gadgetverse.com"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/futuristic-dubai-landscape_23-2151339734.jpg"
      imageAlt="Futuristic cityscape with digital elements"
      logoText="GadgetVerse"
      columns={[
        {
          title: "Products",          items: [
            {
              label: "Phone Cases",              href: "#products"},
            {
              label: "Audio Gear",              href: "#products"},
            {
              label: "Chargers",              href: "#products"},
            {
              label: "Accessories",              href: "#products"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Blog",              href: "#"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Shipping",              href: "#"},
            {
              label: "Returns",              href: "#"},
            {
              label: "Warranty",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 GadgetVerse. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}