"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, Zap, Star, Quote, HelpCircle } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="large"
      background="aurora"
      cardStyle="elevated"
      primaryButtonStyle="outline"
      secondaryButtonStyle="minimal"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" },
            { name: "FAQ", id: "faq" }
          ]}
          brandName="Webild"
          bottomLeftText="Global Community"
          bottomRightText="hello@webild.com"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Build Modern Web Experiences"
          description="Create stunning, responsive websites with our comprehensive component library and design system"
          tag="New Release"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-vector/abstract-technology-science-background-with-connecting-lines_1017-22915.jpg"
          imageAlt="Modern technology and innovation background"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={false}
          buttons={[
            { text: "Get Started", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitAbout
          title="Who We Are"
          description="We are a global team of designers and developers dedicated to creating timeless digital experiences that blend style with functionality. Our mission is to empower businesses with tools that turn innovative ideas into reality."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767718413069-c3iu7cab.jpg"
          imageAlt="Our collaborative team working together"
          imagePosition="right"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Our Story", href: "https://example.com" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEight
          title="Our Process"
          description="Discover how we bring ideas to life through a structured, collaborative approach"
          tag="How It Works"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Research & Planning",              description: "Understanding user needs, market trends, and project requirements through deep analysis and strategy",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767718416719-yvkzg2la.jpg"
            },
            {
              id: 2,
              title: "Design & Prototyping",              description: "Creating beautiful, intuitive designs and interactive prototypes that bring visions to reality",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767718418493-k2j744vo.jpg"
            },
            {
              id: 3,
              title: "Development & Launch",              description: "Building robust, scalable solutions and launching products that exceed expectations",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767718420024-ichadts2.jpg"
            }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardSeven
          title="Featured Products"
          description="Discover our latest collection of premium products designed for excellence"
          tag="New Arrivals"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertCard"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          products={[
            {
              id: "1",              name: "Eclipse Motion Pro",              price: "$249",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767718421662-i8xl0vwr.jpg",              imageAlt: "Eclipse Motion Pro premium product"
            },
            {
              id: "2",              name: "Quantum Design Suite",              price: "$399",              imageSrc: "https://img.b2bpic.net/free-vector/11image-from-rawpixel-id-2210331-original_53876-114381.jpg",              imageAlt: "Quantum Design Suite professional tool"
            },
            {
              id: "3",              name: "Nexus Flow System",              price: "$599",              imageSrc: "https://img.b2bpic.net/free-vector/modern-lounge-banner-template-with-minimal-glass-logo_53876-117517.jpg",              imageAlt: "Nexus Flow System advanced solution"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Clients Say"
          description="Hear from those who've experienced our work and transformed their businesses"
          tag="Testimonials"
          tagIcon={Quote}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          showRating={true}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "@sarahjohnson",              testimonial: "Working with this team transformed our entire digital presence. Their attention to detail and innovative approach exceeded all expectations.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767547305478-fweyvjya.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              handle: "@mchen",              testimonial: "Exceptional service from start to finish. They understood our vision and delivered a solution that perfectly represents our brand.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767547306899-rmyqkijq.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              handle: "@emilyrod",              testimonial: "Incredibly talented professionals who go above and beyond. Our project was completed on time and exceeded our expectations.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767718423298-8w3epz18.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              handle: "@davidkim",              testimonial: "The best investment we made for our business. Their expertise and dedication resulted in a product we're proud to showcase.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767547308385-b7vtjzjh.jpg",              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our products and services"
          tag="Help"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767718043491-cuo81djg.jpg"
          imageAlt="Customer support and help illustration"
          mediaPosition="left"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What is your return policy?",              content: "We offer a 30-day money-back guarantee on all our products. If you're not completely satisfied, simply contact us for a full refund."
            },
            {
              id: "2",              title: "How long does delivery take?",              content: "Standard delivery typically takes 5-7 business days. Expedited shipping options are available at checkout for faster delivery."
            },
            {
              id: "3",              title: "Do you offer customization?",              content: "Yes! We offer extensive customization options. Contact our team to discuss your specific requirements and create a tailored solution."
            },
            {
              id: "4",              title: "What support do you provide?",              content: "We provide 24/7 customer support via email, chat, and phone. Our dedicated team is always ready to help with any questions or issues."
            },
            {
              id: "5",              title: "Are there volume discounts?",              content: "Yes, we offer special pricing for bulk orders and enterprise clients. Please contact our sales team for custom quotes."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get In Touch"
          description="We'd love to hear from you. Send us a message and we'll respond as quickly as possible."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767718425052-ybn8774s.jpg"
          imageAlt="Communication and connection illustration"
          mediaPosition="right"
          buttonText="Send Message"
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Your Email",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your project...",            rows: 5,
            required: true
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Webild"
          columns={[
            {
              items: [
                { label: "About", href: "about" },
                { label: "Features", href: "features" },
                { label: "Products", href: "products" }
              ]
            },
            {
              items: [
                { label: "Testimonials", href: "testimonials" },
                { label: "FAQ", href: "faq" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "https://example.com/privacy" },
                { label: "Terms of Service", href: "https://example.com/terms" },
                { label: "Sitemap", href: "https://example.com/sitemap" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}