"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import HeroSignup from '@/components/sections/hero/HeroSignup';
import { Sparkles } from "lucide-react";
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';

export default function WaitlistPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="hero" data-section="hero">
        <HeroSignup
          title="Be First in Line for Something Special"
          description="Join our exclusive waitlist and get early access to our revolutionary platform. Limited spots available for founding members."
          tag="Early Access"
          tagIcon={Sparkles}
          background={{ variant: "sparkles-gradient" }}
          inputPlaceholder="Enter your email"
          buttonText="Get Early Access"
          onSubmit={(email) => console.log('Waitlist signup:', email)}
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardOne
            features={[
                {
                    id: 1,
                    title: "Seamless Integration",
                    description: "Easily integrate our AI solutions with your existing systems for a cohesive experience.",
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "System integration"
                },
                {
                    id: 2,
                    title: "Enhanced Security",
                    description: "Benefit from advanced security measures to protect your data and privacy.",
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Security measures"
                },
                {
                    id: 3,
                    title: "User-Friendly Interface",
                    description: "Enjoy a clean and intuitive design that makes navigation a breeze.",
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "User interface"
                },
                {
                    id: 4,
                    title: "Scalable Solutions",
                    description: "Our AI solutions grow with your business, offering scalable options to meet your needs.",
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Scalable solutions"
                }
            ]}
            animationType="slide"
            title="Experience the Future of AI"
            description="Discover how our cutting-edge AI solutions can transform your experience on the website."
            tag="Revolutionary"
            textboxLayout="right"
            useInvertedBackground="none"
            className="mb-10"
            containerClassName="max-w-7xl mx-auto"
            cardClassName="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md"
            textBoxTitleClassName="text-3xl font-bold mb-4"
            textBoxDescriptionClassName="text-lg mb-6"
            textBoxTagClassName="bg-green-500 text-white px-3 py-1 rounded-full mb-4"
            textBoxButtonContainerClassName="mt-4"
            textBoxButtonClassName="bg-green-500 text-white px-4 py-2 rounded-full hover:bg-green-600"
            textBoxButtonTextClassName="font-semibold"
            titleImageWrapperClassName="mb-6"
            titleImageClassName="w-full h-64 object-cover rounded-lg"
            cardContentClassName="flex flex-col items-center"
            stepNumberClassName="text-2xl font-bold mb-2"
            cardTitleClassName="text-xl font-bold mb-2"
            cardDescriptionClassName="text-gray-600 dark:text-gray-400 mb-4"
            imageContainerClassName="mb-4"
            imageClassName="w-full h-48 object-cover rounded-lg"
            cardButtonClassName="bg-green-500 text-white px-4 py-2 rounded-full hover:bg-green-600"
            cardButtonTextClassName="font-semibold"
        />
      </div>
    </ThemeProvider>
  );
}