"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import PricingCardSeven from '@/components/sections/pricing/PricingCardSeven';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { CreditCard, Heart, Sparkles, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant={"text-stagger"}
      defaultTextAnimation={"reveal-blur"}
      borderRadius={"pill"}
      contentWidth={"mediumSmall"}
      sizing={"mediumLarge"}
      background={"circleGradient"}
      cardStyle={"outline-light"}
      primaryButtonStyle={"radial-glow"}
      secondaryButtonStyle={"radial-glow"}
      headingFontWeight={"normal"}
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal 
          brandName="Webild"
          button={{
            text: "Get Started",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo 
          logoText="WEBILD"
          description="Create stunning, responsive websites with our comprehensive component library and design system"
          buttons={[
            {
              text: "Get Started",              href: "contact"
            },
            {
              text: "Learn More",              href: "about"
            }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-vector/abstract-modern-background-with-waves_1361-1452.jpg",              imageAlt: "Modern gradient background"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/abstract-background-with-gradient-shapes_23-2148236980.jpg",              imageAlt: "Colorful geometric design"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/gradient-abstract-background_23-2149124366.jpg",              imageAlt: "Digital futuristic background"
            }
          ]}
          autoplayDelay={4000}
          showDimOverlay={true}
          logoLineHeight={1.1}
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout 
          title="Elevate Your Digital Presence"
          description="We craft beautiful, functional experiences that resonate with your audience. Our design philosophy combines innovation with accessibility, ensuring every interaction feels intentional and delightful."
          tag="About Us"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717145571-8bb6qqvp.jpg"
          imageAlt="Creative team workspace"
          buttons={[
            {
              text: "Discover Our Story",              href: "#"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardFourteen 
          title="Powerful Features for Modern Design"
          description="Everything you need to build extraordinary digital experiences"
          tag="Features"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "1",              title: "Intelligent Design System",              description: "Pre-built components that adapt to your brand and scale effortlessly",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717147155-pyqqrqtf.jpg",              imageAlt: "Design system showcase"
            },
            {
              id: "2",              title: "Dynamic Interactions",              description: "Smooth animations and responsive behaviors that delight users",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717148416-s3c8kqqv.jpg",              imageAlt: "Interactive design demonstration"
            },
            {
              id: "3",              title: "Developer Friendly",              description: "Clean code and comprehensive documentation for seamless integration",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717149693-xsfbemh8.jpg",              imageAlt: "Development environment preview"
            }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardSeven 
          title="Featured Collections"
          description="Explore our curated selection of premium digital assets"
          tag="New Arrivals"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          products={[
            {
              id: "1",              name: "Designer's Toolkit Pro",              price: "$149",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717150812-1msj25rh.jpg",              imageAlt: "Designer toolkit product"
            },
            {
              id: "2",              name: "Component Library Plus",              price: "$199",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717152150-hnthrayc.jpg",              imageAlt: "Component library package"
            },
            {
              id: "3",              name: "Full Stack Framework",              price: "$299",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717153591-1r1i77fy.jpg",              imageAlt: "Framework premium edition"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardSeven 
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your needs and scale as you grow"
          tag="Pricing"
          tagIcon={CreditCard}
          textboxLayout="default"
          useInvertedBackground="invertCard"
          animationType="slide-up"
          plans={[
            {
              id: "starter",              tag: "PERFECT FOR BEGINNERS",              pricingOptions: [
                {
                  value: "monthly",                  label: "Monthly",                  price: "$29",                  subtitle: "Per Month"
                },
                {
                  value: "yearly",                  label: "Yearly",                  price: "$290",                  subtitle: "Per Year"
                }
              ],
              defaultOption: "yearly",              selectorNote: "Save 17% with yearly billing",              description: "Essential tools for individual creators and small projects",              buttons: [
                {
                  text: "Start Free Trial",                  href: "#"
                }
              ]
            },
            {
              id: "professional",              tag: "MOST POPULAR",              pricingOptions: [
                {
                  value: "monthly",                  label: "Monthly",                  price: "$79",                  subtitle: "Per Month"
                },
                {
                  value: "yearly",                  label: "Yearly",                  price: "$790",                  subtitle: "Per Year"
                }
              ],
              defaultOption: "yearly",              selectorNote: "Save 17% with yearly billing",              description: "Full access to all features with priority support",              buttons: [
                {
                  text: "Get Started",                  href: "#"
                }
              ]
            },
            {
              id: "enterprise",              tag: "CUSTOM SOLUTIONS",              pricingOptions: [
                {
                  value: "monthly",                  label: "Monthly",                  price: "$199",                  subtitle: "Per Month"
                },
                {
                  value: "yearly",                  label: "Yearly",                  price: "$1990",                  subtitle: "Per Year"
                }
              ],
              defaultOption: "yearly",              selectorNote: "Save 17% with yearly billing",              description: "Unlimited access, dedicated support, and custom integrations",              buttons: [
                {
                  text: "Contact Sales",                  href: "#"
                }
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight 
          title="Loved by Creators Worldwide"
          description="See what our community has to say about their experience"
          tag="Testimonials"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Creative Director",              company: "Design Studio Co.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716612033-pmp8jgth.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Product Lead",              company: "TechVentures Inc.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716612977-ndtzevzi.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Founder",              company: "Innovation Labs",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717155333-vqc8t7wg.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Park",              role: "Lead Developer",              company: "StartupXYZ",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767717157494-lxyh2p44.jpg",              imageAlt: "David Park"
            },
            {
              id: "5",              name: "Lisa Thompson",              role: "UX Manager",              company: "Creative Agency Ltd.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716614231-c7kqvy4k.jpg",              imageAlt: "Lisa Thompson"
            },
            {
              id: "6",              name: "James Wilson",              role: "CEO",              company: "Digital Solutions Corp.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767716615370-11cqkj8g.jpg",              imageAlt: "James Wilson"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm 
          title="Let's Create Together"
          description="Have questions or ready to start your project? We'd love to hear from you. Get in touch with our team and let's bring your vision to life."
          useInvertedBackground="invertDefault"
          buttonText="Send Message"
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Email Address",              required: true
            },
            {
              name: "company",              type: "text",              placeholder: "Company Name",              required: false
            }
          ]}
          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: "Features",                  href: "features"
                },
                {
                  label: "Pricing",                  href: "pricing"
                },
                {
                  label: "About",                  href: "about"
                }
              ]
            },
            {
              items: [
                {
                  label: "Documentation",                  href: "#"
                },
                {
                  label: "Support",                  href: "#"
                },
                {
                  label: "Contact",                  href: "contact"
                }
              ]
            },
            {
              items: [
                {
                  label: "Privacy Policy",                  href: "#"
                },
                {
                  label: "Terms of Service",                  href: "#"
                },
                {
                  label: "Cookies",                  href: "#"
                }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}