"use client";

import { ThemeProvider } from "@/components/theme-provider";
import { NavbarStyleApple } from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import { HeroBillboardTestimonial } from "@/components/sections/hero/HeroBillboardTestimonial";
import { FooterSimple } from "@/components/sections/footer/FooterSimple";
import { Sparkles } from "lucide-react";

export default function ComponentsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <NavbarStyleApple
        navItems={[
          { name: "Home", id: "/components" },
          { name: "Bundles", id: "/bundles" },
          { name: "Promotions", id: "/promotions" }
        ]}
        brandName="Webild"
      />

      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial
          title="Welcome to Our Platform"
          description="Explore our comprehensive offerings and discover how we can help your business thrive with innovative solutions."
          background={{ variant: "downward-rays-static" }}
          testimonials={[
            {
              name: "Client One",              handle: "@clientone",              testimonial: "An amazing experience from start to finish! Highly recommend their services.",              rating: 5,
              imageSrc: "https://via.placeholder.com/150?_wi=1"
            },
            {
              name: "Client Two",              handle: "@clienttwo",              testimonial: "They truly understand our needs and deliver exceptional results every time.",              rating: 5,
              imageSrc: "https://via.placeholder.com/150?_wi=1"
            }
          ]}
          buttons={[
            { text: "Get Started", href: "/promotions" },
            { text: "Learn More", href: "/bundles" }
          ]}
          imageSrc="https://via.placeholder.com/1024x768?_wi=1"
          imageAlt="Placeholder image for hero section"
          mediaAnimation="opacity"
          tag="Innovation"
          tagIcon={Sparkles}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Products",              items: [
                { label: "Bundles", href: "/bundles" },
                { label: "Promotions", href: "/promotions" },
                { label: "Solutions", href: "/components" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/components" },
                { label: "Careers", href: "/components" },
                { label: "Blog", href: "/components" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "/components" },
                { label: "Terms of Service", href: "/components" }
              ]
            }
          ]}
          bottomLeftText="© 2024 Webild. All rights reserved."
          bottomRightText="Built with Webild"
        />
      </div>
    </ThemeProvider>
  );
}
