"use client";

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

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">
        <FeatureCardSeven
            features={[
                {
                    id: 1,
                    title: "Personalized Recommendations",
                    description: "AI agents analyze your preferences to provide tailored suggestions.",
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "AI analyzing data"
                },
                {
                    id: 2,
                    title: "24/7 Customer Support",
                    description: "Get instant assistance from AI-powered chatbots available around the clock.",
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "AI chatbot interface"
                },
                {
                    id: 3,
                    title: "Automated Task Management",
                    description: "Effortlessly delegate routine tasks to AI agents to save time and increase productivity.",
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "AI managing tasks"
                }
            ]}
            animationType="fade"
            title="Unlocking the Power of AI Agents"
            description="Discover how our AI agents can revolutionize your experience on the website."
            tag="Innovative"
            textboxLayout="left"
            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-blue-500 text-white px-3 py-1 rounded-full mb-4"
            textBoxButtonContainerClassName="mt-4"
            textBoxButtonClassName="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-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-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600"
            cardButtonTextClassName="font-semibold"
        />
      </div>
    </ThemeProvider>
  );
}