"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Package, Star, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="plain"
      cardStyle="soft-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="DigitalHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Products", id: "products" },
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Shop Now",            href: "products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Discover Premium Digital Products"
          description="Curated collection of high-quality digital tools, templates, and resources for creators and professionals"
          tag="Digital Marketplace"
          tagIcon={Sparkles}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/view-vacuum-cleaner-robot-flat-surface-floor_23-2151736729.jpg",              imageAlt: "Digital product showcase 1"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349187.jpg",              imageAlt: "Digital product showcase 2"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/pretty-woman-long-brown-dress-enjoying-sunny-day-lovable-white-girl-retro-attire-walking-down-street_197531-11307.jpg?id=11935547",              imageAlt: "Digital product showcase 3"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/sunset-projector-lamp-product-backdrop_53876-103670.jpg",              imageAlt: "Digital product showcase 4"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/view-robotic-vacuum-cleaner-flat-surface_23-2151736735.jpg",              imageAlt: "Digital product showcase 5"
            }
          ]}
          buttons={[
            { text: "Browse Products", href: "products" },
            { text: "Learn More", href: "features" }
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <div className="flex items-center justify-center py-12 md:py-16 bg-background">
          <div className="flex flex-wrap items-center justify-center gap-8 md:gap-12 lg:gap-16 px-6">
            <div className="flex flex-col items-center gap-2">
              <div className="h-12 md:h-16 w-auto flex items-center">
                <svg className="h-full w-auto" viewBox="0 0 24 24" fill="currentColor" aria-label="Microsoft logo">
                  <rect x="1" y="1" width="5" height="5" fill="#00A4EF"/>
                  <rect x="9" y="1" width="5" height="5" fill="#7FBA00"/>
                  <rect x="1" y="9" width="5" height="5" fill="#FFB900"/>
                  <rect x="9" y="9" width="5" height="5" fill="#F25022"/>
                </svg>
              </div>
              <p className="text-sm text-foreground/60 text-center">Microsoft</p>
            </div>
            <div className="flex flex-col items-center gap-2">
              <div className="h-12 md:h-16 w-auto flex items-center">
                <svg className="h-full w-auto" viewBox="0 0 24 24" fill="currentColor" aria-label="Google logo">
                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                </svg>
              </div>
              <p className="text-sm text-foreground/60 text-center">Google</p>
            </div>
            <div className="flex flex-col items-center gap-2">
              <div className="h-12 md:h-16 w-auto flex items-center">
                <svg className="h-full w-auto" viewBox="0 0 24 24" fill="currentColor" aria-label="Amazon logo">
                  <path d="M6 6h12v1H6V6zm0 2h12v1H6V8zm0 2h12v1H6v-1zm10.5 2.5c-.276 0-.5.224-.5.5v3c0 .276.224.5.5.5s.5-.224.5-.5v-3c0-.276-.224-.5-.5-.5zm-2 0c-.276 0-.5.224-.5.5v3c0 .276.224.5.5.5s.5-.224.5-.5v-3c0-.276-.224-.5-.5-.5zm-2 0c-.276 0-.5.224-.5.5v3c0 .276.224.5.5.5s.5-.224.5-.5v-3c0-.276-.224-.5-.5-.5zM6 19h12v1H6v-1z" fill="#FF9900"/>
                </svg>
              </div>
              <p className="text-sm text-foreground/60 text-center">Amazon</p>
            </div>
            <div className="flex flex-col items-center gap-2">
              <div className="h-12 md:h-16 w-auto flex items-center">
                <svg className="h-full w-auto" viewBox="0 0 24 24" fill="currentColor" aria-label="Adobe logo">
                  <path d="M1 1v22h22V1H1zm3 3h4v4H4V4zm6 0h4v4h-4V4zm6 0h4v4h-4V4zm-12 6h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4zm-12 6h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4z" fill="#FF0000"/>
                </svg>
              </div>
              <p className="text-sm text-foreground/60 text-center">Adobe</p>
            </div>
            <div className="flex flex-col items-center gap-2">
              <div className="h-12 md:h-16 w-auto flex items-center">
                <svg className="h-full w-auto" viewBox="0 0 24 24" fill="currentColor" aria-label="Disney logo">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z" fill="#113CCF"/>
                </svg>
              </div>
              <p className="text-sm text-foreground/60 text-center">Disney</p>
            </div>
            <div className="flex flex-col items-center gap-2">
              <div className="h-12 md:h-16 w-auto flex items-center">
                <svg className="h-full w-auto" viewBox="0 0 24 24" fill="currentColor" aria-label="Coca-Cola logo">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z" fill="#E4001B"/>
                </svg>
              </div>
              <p className="text-sm text-foreground/60 text-center">Coca-Cola</p>
            </div>
          </div>
        </div>
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Featured Digital Products"
          description="Handpicked selection of the best digital tools and resources available today"
          tag="New Arrivals"
          tagIcon={Package}
          products={[
            {
              id: "prod-1",              name: "Design System Pro",              price: "$49",              variant: "Complete Package · 12 Updates",              imageSrc: "https://img.b2bpic.net/free-photo/woman-uses-ai-chatbot-system-computer-guide-her-through-tasks_482257-118915.jpg",              imageAlt: "Design System Pro",              isFavorited: false
            },
            {
              id: "prod-2",              name: "Content Creator Suite",              price: "$79",              variant: "Full License · Lifetime Access",              imageSrc: "https://img.b2bpic.net/free-photo/businessman-using-his-tablet-with-background-blue-tones_1134-572.jpg",              imageAlt: "Content Creator Suite",              isFavorited: false
            },
            {
              id: "prod-3",              name: "Development Toolkit",              price: "$99",              variant: "Advanced Edition · Premium Support",              imageSrc: "https://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg",              imageAlt: "Development Toolkit",              isFavorited: false
            },
            {
              id: "prod-4",              name: "Marketing Automation",              price: "$129",              variant: "Enterprise Plan · 24/7 Support",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-ui-ux-background_23-2149053622.jpg",              imageAlt: "Marketing Automation",              isFavorited: false
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="Why Choose Our Store"
          description="Experience the best digital marketplace with powerful features designed for your success"
          tag="Key Benefits"
          features={[
            {
              id: 1,
              title: "Instant Access",              description: "Download your purchases immediately after checkout. No waiting, no delays—get started right away.",              imageSrc: "https://img.b2bpic.net/free-photo/woman-uses-ai-chatbot-system-computer-guide-her-through-tasks_482257-118915.jpg",              imageAlt: "Instant access feature"
            },
            {
              id: 2,
              title: "Lifetime Updates",              description: "Receive all future updates and improvements to your digital products at no extra cost.",              imageSrc: "https://img.b2bpic.net/free-photo/businessman-using-his-tablet-with-background-blue-tones_1134-572.jpg",              imageAlt: "Lifetime updates feature"
            },
            {
              id: 3,
              title: "Secure Transactions",              description: "Bank-level security ensures your payment information is always protected and safe.",              imageSrc: "https://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg",              imageAlt: "Secure transactions feature"
            },
            {
              id: 4,
              title: "Expert Support",              description: "Our dedicated support team is here to help with any questions or issues you encounter.",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-ui-ux-background_23-2149053622.jpg",              imageAlt: "Expert support feature"
            }
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              imageSrc: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_1262-20882.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Chen",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "James Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/cheerful-young-businesswoman-smiling-camera_74855-4022.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "Michael Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageAlt: "Michael Thompson"
            }
          ]}
          cardTitle="Over 50,000 satisfied customers trust our digital marketplace for premium products"
          cardTag="Customer Reviews"
          cardTagIcon={Star}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our digital products and services"
          tag="Support"
          faqs={[
            {
              id: "1",              title: "How do I access my purchased products?",              content: "After successful checkout, you'll receive immediate access to download your digital products. Login to your account anytime to access your library of purchases."
            },
            {
              id: "2",              title: "Is there a refund policy?",              content: "Yes, we offer a 30-day money-back guarantee on all digital products. If you're not satisfied, simply contact our support team for a full refund."
            },
            {
              id: "3",              title: "Can I share my purchase with others?",              content: "Digital products are licensed for personal use only. Please review our licensing terms for information about commercial or team licenses."
            },
            {
              id: "4",              title: "How often are products updated?",              content: "Premium products receive regular updates throughout the year. All updates are free for existing customers, and you'll be notified when new versions are available."
            },
            {
              id: "5",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, PayPal, Apple Pay, and Google Pay. All transactions are secure and encrypted."
            },
            {
              id: "6",              title: "Is customer support available?",              content: "Our support team is available Monday to Friday, 9 AM to 6 PM EST. Contact us via email or live chat for assistance."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Updated with New Releases"
          description="Subscribe to our newsletter and be the first to know about new digital products, exclusive deals, and special offers."
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/workdesk-with-envelopes-laptop_1134-195.jpg"
          imageAlt="Newsletter signup"
          mediaPosition="right"
          tagIcon={Mail}
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/view-vacuum-cleaner-robot-flat-surface-floor_23-2151736729.jpg"
          imageAlt="Digital marketplace footer"
          logoText="DigitalHub"
          copyrightText="© 2025 DigitalHub. All rights reserved."
          columns={[
            {
              title: "Products",              items: [
                { label: "Digital Tools", href: "products" },
                { label: "Templates", href: "products" },
                { label: "Resources", href: "products" },
                { label: "Bundles", href: "products" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Blog", href: "blog" },
                { label: "Careers", href: "careers" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "privacy" },
                { label: "Terms of Service", href: "terms" },
                { label: "Refund Policy", href: "refunds" },
                { label: "License Agreement", href: "license" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
