"use client";

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { ChevronDown, ChevronUp, Code, Users, CreditCard, BarChart, Share } from 'lucide-react';
import Navbar from '@/components/Navbar/navbar';
import HowItWorks from './how-it-works';
import Footer from '@/components/footer';

const MicroSAASLanding = () => {
    const [expandedIndex, setExpandedIndex] = useState(null);
    const [expandedFaq, setExpandedFaq] = useState(null);

    const features = [
        {
            icon: <Code className="w-6 h-6" />,
            title: "No-Code, Fast Deployment",
            description: "Our drag-and-drop builder allows you to convert your services into an AI-powered solution in minutes—no technical skills required.",
            gradient: "from-pink-500/20 to-purple-500/20"
        },
        {
            icon: <CreditCard className="w-6 h-6" />,
            title: "Monetization Made Simple",
            description: "Integrate subscription billing and unlock recurring revenue streams from day one.",
            gradient: "from-blue-500/20 to-cyan-500/20"
        },
        {
            icon: <Users className="w-6 h-6" />,
            title: "Community-Centric Growth",
            description: "Build and nurture a dedicated community around your MicroSAAS, boosting customer loyalty and creating opportunities for upselling.",
            gradient: "from-green-500/20 to-emerald-500/20"
        },
        {
            icon: <BarChart className="w-6 h-6" />,
            title: "All-in-One Platform",
            description: "Manage your AI agents, community interactions, and monetization strategies from a single, easy-to-use dashboard.",
            gradient: "from-orange-500/20 to-yellow-500/20"
        }
    ];

    const steps = [
        {
            title: "Convert Your Expertise",
            description: "Use our intuitive no-code tools to transform your existing service into a fully functional AI agent."
        },
        {
            title: "Launch Your MicroSAAS",
            description: "Deploy your AI agent with integrated subscription management and analytics."
        },
        {
            title: "Grow Your Community",
            description: "Engage your audience with community forums, newsletters, and in-app engagement tools."
        }
    ];

    const testimonials = [
        {
            quote: "I turned my consulting expertise into an AI-powered MicroSAAS, and my community has grown exponentially.",
            author: "Samantha T.",
            role: "Business Strategist"
        },
        {
            quote: "The no-code builder made it incredibly easy to launch my MicroSAAS. Now, I generate consistent revenue through my engaged community.",
            author: "Marcus L.",
            role: "Digital Marketer"
        }
    ];

    const faqs = [
        {
            question: "What exactly is a MicroSAAS?",
            answer: "A MicroSAAS is a lean, specialized software service delivered on a subscription basis, often powered by AI to automate tasks and provide personalized solutions."
        },
        {
            question: "Do I need technical skills to build my MicroSAAS?",
            answer: "Not at all! Our platform is designed for non-technical users with an intuitive, drag-and-drop interface and comprehensive support resources."
        },
        {
            question: "How can I grow my community?",
            answer: "Use our built-in community tools—forums, chat, newsletters—to engage your users, gather feedback, and offer premium content that drives loyalty and additional revenue."
        }
    ];

    return (
        <div className="min-h-screen bg-[#080E12] text-white">
            <Navbar />
            {/* Hero Section */}
            <div className="min-h-screen flex flex-col justify-center p-6 md:p-12 lg:p-24 relative overflow-hidden">
                <div className="max-w-7xl mx-auto w-full z-10">
                    <h1 className="text-5xl md:text-7xl lg:text-8xl mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
                        Build Your MicroSAAS & Grow Your Community
                    </h1>
                    <h2 className="text-2xl md:text-3xl lg:text-4xl max-w-4xl mb-12">
                        Transform your expertise into a dynamic, AI-powered MicroSAAS and build a thriving community around your niche offering. Our platform equips you with everything you need—from a no-code builder to integrated community tools—to launch, grow, and monetize your MicroSAAS with ease.
                    </h2>
                    <div className="flex flex-wrap gap-4">
                        <button className="px-8 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all">
                            Get Started
                        </button>
                        <button className="px-8 py-3 bg-gray-800 rounded-lg text-lg font-medium hover:bg-gray-700 transition-all border border-gray-700">
                            Book Demo
                        </button>
                    </div>
                </div>
                <div className="absolute right-0 bottom-0 w-full md:w-1/2 h-1/2 opacity-20 md:opacity-30">
                    <div className="w-full h-full bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 rounded-full blur-3xl"></div>
                </div>
            </div>

            {/* What is MicroSAAS Section */}
            <motion.div
                className="relative py-20"
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.8, ease: "easeOut" }}
            >
                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/30 to-purple-500/30 backdrop-blur-lg rounded-xl shadow-lg" />
                <div className="container w-70%] mx-auto px-6 relative text-center">
                    <motion.h2
                        className="text-5xl font-extrabold mb-6 text-white drop-shadow-lg"
                        initial={{ y: 20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: 0.6, delay: 0.2 }}
                    >
                        What Is MicroSAAS?
                    </motion.h2>
                    <motion.p
                        className="text-lg text-gray-200 max-w-2xl mx-auto"
                        initial={{ y: 20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: 0.6, delay: 0.4 }}
                    >
                        MicroSAAS is the next evolution in software services: a lean, hyper-focused, subscription-based solution that leverages AI to solve specific problems for targeted audiences.
                    </motion.p>
                </div>
            </motion.div>

            {/* How it Works Section */}
            {/* <div className="container mx-auto px-4 py-16">
                <h2 className="text-4xl font-bold mb-12">How It Works</h2>
                <div className="space-y-12">
                    {steps.map((step, index) => (
                        <motion.div
                            key={index}
                            className="flex gap-8 items-start"
                            initial={{ opacity: 0, x: -20 }}
                            animate={{ opacity: 1, x: 0 }}
                            transition={{ delay: index * 0.3 }}
                        >
                            <div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-xl font-bold">
                                {index + 1}
                            </div>
                            <div>
                                <h3 className="text-2xl font-bold mb-2">{step.title}</h3>
                                <p className="text-gray-300">{step.description}</p>
                            </div>
                        </motion.div>
                    ))}
                </div>
            </div> */}

            <HowItWorks steps={steps} />

            {/* Features Section */}
            <div className="max-w-6xl mx-auto space-y-4">
                <h2 className="text-4xl mb-6">Features</h2>
                <p className="mb-12">Everything You Need to Create, Manage, and Monetize Your AI Offerings </p>
                {features.map((vertical, index) => (
                    <div
                        key={index}
                        className="group"
                    >
                        {/* Main row - always visible */}
                        <div
                            className={`
                              relative overflow-hidden
                              px-6 py-4 rounded-xl
                              cursor-pointer
                              transition-all duration-300
                              border border-purple-500/10
                              ${expandedIndex === index ? 'bg-purple-900/20' : 'hover:bg-purple-900/10'}
                            `}
                            onClick={() => setExpandedIndex(expandedIndex === index ? null : index)}
                        >
                            <div className="flex items-center gap-6">
                                {/* Icon */}
                                <div className={`
                                w-10 h-10 rounded-lg
                                flex items-center justify-center
                                bg-gradient-to-br ${vertical.gradient}
                                transition-transform duration-300 text-white
                                ${expandedIndex === index ? 'rotate-3' : 'group-hover:scale-105'}
                              `}>
                                    {vertical.icon}
                                </div>

                                {/* Title */}
                                <h3 className="flex-1 text-xl text-white">{vertical.title}</h3>

                                {/* Expand/Collapse icon */}
                                <ChevronDown
                                    className={`
                                  w-5 h-5 text-purple-400
                                  transition-transform duration-300
                                  ${expandedIndex === index ? 'rotate-180' : ''}
                                `}
                                />
                            </div>

                            {/* Expanded content */}
                            <div className={`
                              grid grid-rows-[0fr]
                              transition-all duration-300
                              ${expandedIndex === index ? 'grid-rows-[1fr] mt-4' : ''}
                            `}>
                                <div className="overflow-hidden">
                                    <div className="pl-16 text-gray-400 leading-relaxed">
                                        {vertical.description}
                                    </div>

                                    {/* Action button */}
                                    <div className="pl-16 mt-4">
                                        <button className="
                                    px-4 py-2 rounded-lg
                                    bg-purple-500/20 hover:bg-purple-500/30
                                    text-purple-300 text-sm
                                    transition-colors duration-300
                                  ">
                                            Explore Solutions
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            {/* Testimonials Section */}
            <div className="container mx-auto px-4 py-16">
                <h2 className="text-4xl mb-12">Success Stories</h2>
                <div className="grid md:grid-cols-2 gap-8">
                    {testimonials.map((testimonial, index) => (
                        <motion.div
                            key={index}
                            className="bg-white/5 p-6 rounded-lg hover:bg-gray-700 transition duration-100"
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: index * 0.2 }}
                        >
                            <p className="text-xl mb-4">"{testimonial.quote}"</p>
                            <div>
                                <p className="font-semibold">{testimonial.author}</p>
                                <p className="text-gray-400">{testimonial.role}</p>
                            </div>
                        </motion.div>
                    ))}
                </div>
            </div>

            {/* CTA Section */}
            <div className="container mx-auto px-4 py-16 text-center">
                <h2 className="text-4xl mb-6">Ready to Monetize Your Expertise?</h2>
                <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
                    Unlock the power of AI and community building to create a sustainable, recurring revenue model with your very own MicroSAAS.
                </p>
                <button className="bg-blue-600 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition">
                    Get Started Today
                </button>
            </div>

            {/* FAQ Section */}
            <div className="container max-w-6xl mx-auto px-4 py-16">
                <h2 className="text-4xl text-center mb-12">Frequently Asked Questions</h2>
                <div className="space-y-4 max-w-3xl mx-auto">
                    {faqs.map((faq, index) => (
                        <div key={index} className="border border-gray-700 rounded-lg overflow-hidden">
                            <button
                                className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition"
                                onClick={() => setExpandedFaq(expandedFaq === index ? null : index)}
                            >
                                <span className="text-lg font-semibold">{faq.question}</span>
                                {expandedFaq === index ? <ChevronUp /> : <ChevronDown />}
                            </button>
                            {expandedFaq === index && (
                                <motion.div
                                    initial={{ height: 0 }}
                                    animate={{ height: "auto" }}
                                    exit={{ height: 0 }}
                                    className="px-6 py-4 bg-white/5"
                                >
                                    <p className="text-gray-300">{faq.answer}</p>
                                </motion.div>
                            )}
                        </div>
                    ))}
                </div>
            </div>

            <Footer />

        </div>
    );
};

export default MicroSAASLanding;