import React from 'react';
import { CgWebsite } from 'react-icons/cg';
import { FaBook, FaBookmark, FaMicrophone, FaMoneyBillAlt, FaPen, FaServicestack, FaStore, FaUserCog, FaUserPlus, FaVideo } from 'react-icons/fa';
import { GiArtificialIntelligence } from 'react-icons/gi';
import { GoWorkflow } from 'react-icons/go';
import { GrTemplate } from 'react-icons/gr';
import { IoIosApps, IoIosDocument, IoIosMail, IoMdAnalytics, IoMdArrowRoundForward } from 'react-icons/io';
import { IoFlash, IoText } from 'react-icons/io5';
import { LuWorkflow } from 'react-icons/lu';
import { MdSecurity, MdTranslate } from 'react-icons/md';
import { RiMoneyEuroBoxFill, RiProductHuntFill } from 'react-icons/ri';
import { VscTools } from 'react-icons/vsc';

const productItems = [
    {
        category: 'FEATURES',
        list: [
            {
                name: 'Series',
                description: 'Drag - drop and create amazing workflows',
                icon: <GoWorkflow className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
                link: '/series',
            },
            {
                name: 'Template',
                description: 'Create awesome templates for easier integration',
                icon: <GrTemplate className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
                link: '/template',
            },
            {
                name: 'Tools',
                description: 'For the non-techies, just input and output',
                icon: <VscTools className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
                link: '/tools',
            },
            {
                name: 'Click Video',
                description: 'Create interactive videos for your clients',
                icon: <FaVideo className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
                link: '/click-video',
            },
            {
                name: 'Writer',
                description: 'Write with ease with built in AI text generator',
                icon: <FaPen className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
                link: '/writer',
            },
            {
                name: 'Website',
                description: '',
                icon: <CgWebsite className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
                link: '/website',
            },
        ],
    },
    {
        category: 'CAPABILITIES',
        list: [
            {
                name: 'App Integration',
                description: 'Integrate your workflows in your apps',
                icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
                link: '/integrations',
            },
            {
                name: 'Data Syncing',
                description: 'Keep your data up-to-date across platforms.',
                icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
                link: '/data-syncing',
            },
            {
                name: 'Analytics Dashboard',
                description: 'Visualize your workflow performance.',
                icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
                link: '/analytics-dashboard',
            },
        ],
    },
    {
        category: "WHAT'S NEW",
        list: [
            {
                name: 'Improved Workflow Builder',
                description: 'Build smarter workflows faster with new updates.',
                icon: <LuWorkflow className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
                link: '/workflow-builder',
            },
            {
                name: 'Enhanced AI Writer',
                description: 'Generate better, smarter content effortlessly.',
                icon: <FaPen className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
                link: '/ai-writer',
            },
            {
                name: 'Marketplace Expansion',
                description: 'Explore more tools and integrations today.',
                icon: <FaStore className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
                link: '/marketplace-expansion',
            },
            {
                name: 'Upgraded Video Interactivity',
                description: 'Create dynamic, engaging videos with ease.',
                icon: <FaVideo className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
                link: '/video-interactivity',
            },
        ],
    },
];

export const ProductDropdown: React.FC = () => {
    return (
        <div className="w-full text-white py-10 px-28">
            <div className="flex">
                {/* Main Content */}
                <div className="w-2/3 space-y-8">
                    <div>
                        <h1 className="text-3xl">Everyday Series Workflows</h1>
                        <p className="text-gray-300 text-sm">No code automation and much more.</p>
                    </div>
                    <div className="flex space-x-4">
                        {/* Render Features and Capabilities */}
                        {productItems.slice(0, 2).map((itemGroup, index) => (
                            <div key={index} className="w-1/2 space-y-4">
                                <h3 className="font-medium text-sm text-slate-300">{itemGroup.category}</h3>
                                <ul className="space-y-4">
                                    {itemGroup.list.map((item, idx) => (
                                        <li key={idx} className="flex items-center space-x-4">
                                            {item.icon}
                                            <div
                                                className="group hover:cursor-pointer"
                                                onClick={() => window.location.href = item.link} // Navigate on click
                                            >
                                                <h3 className="font-medium transition-colors duration-200 group-hover:text-violet-500">{item.name}</h3>
                                                <p className="font-thin text-xs transition-all duration-200 group-hover:underline">
                                                    {item.description}
                                                </p>
                                            </div>
                                        </li>
                                    ))}
                                </ul>

                            </div>
                        ))}
                    </div>
                </div>
                {/* What's New Section */}
                <div className='w-1/3 space-y-10 border-gray-300 border-l pl-16 py-5'>
                    <h1 className='text-3xl'>What's New!</h1>
                    <ul className='space-y-4'>
                        {productItems.find(group => group.category === "WHAT'S NEW")?.list.map((item, index) => (
                            <li key={index} className='flex items-center space-x-4'>
                                {item.icon}
                                <div>
                                    <h3 className='font-medium'>{item.name}</h3>
                                    <p className='font-thin text-xs'>{item.description}</p>
                                </div>
                            </li>
                        ))}
                    </ul>
                </div>
            </div>

            {/* Footer Links */}
            <div className='relative bottom-0 flex border-gray-300 border-t mt-10 pt-5 px-10 text-sm font-light space-x-8'>
                <p className='hover:underline cursor-pointer'>Explore templates</p>
                <p className='hover:underline cursor-pointer'>Explore tools</p>
                <p className='hover:underline cursor-pointer'>Join Everyday Free Access</p>
            </div>
        </div>
    );
};

// Solutions Dropdown Component
export const SolutionsDropdown: React.FC = () => {
    return (
        <div className="w-full text-white py-10 px-28">
            <div className='flex'>
                <div className='w-3/4 space-y-8 space-x-4'>
                    <div>
                        <h1 className='text-3xl'>Explore AI driven solutions.</h1>
                        <p className='text-gray-300 text-sm'>Create AI solutions for your clients and enterprises.</p>
                    </div>
                    <div className='flex space-x-4'>
                        <div className='w-1/2 space-y-2'>
                            <h3 className='font-medium text-sm text-slate-300'>Overview</h3>
                            <ul className='space-y-4'>
                                <li className='flex items-center space-x-4'>
                                    <IoMdAnalytics className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Marketing</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Revolutionize campaigns with AI-driven automation</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <RiProductHuntFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Product Manager</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Streamline workflows and build smarter, faster products</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <RiMoneyEuroBoxFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Sales</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Close deals faster with seamless, automated tools</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <FaMoneyBillAlt className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Finance</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Optimize processes and track budgets with ease</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <FaUserCog className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>HR</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Empower your team with smarter workflow solutions</p>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div className='w-1/2 space-y-2'>
                            <h3 className='font-medium text-sm text-slate-300'>Enterprises</h3>
                            <ul className='space-y-4'>
                                <li className='flex items-center space-x-4'>
                                    <FaServicestack className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Services</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Transform operations with AI-driven service solutions</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <MdSecurity className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Security</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Protect your data with next-gen secure workflows</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        {/*  */}
                        <div className='w-1/2 space-y-2'>
                            <h3 className='font-medium text-sm text-slate-300'>Users</h3>
                            <ul className='space-y-4'>
                                <li className='flex items-center space-x-4'>
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>For Learners</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Learn smarter with intuitive tools and AI support</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>For Coders</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Code faster and build better with powerful tools</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>For Enterprises</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Scale operations with solutions built for enterprise growth</p>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <div className='w-1/4 space-y-10 border-gray-300 border-l pl-10 py-5'>
                    <h1 className='text-3xl'>Latest AI tools!</h1>
                    <div>
                        <ul className='space-y-4'>
                            <li className='flex items-center space-x-4'>
                                <FaBook className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
                                <div className='group hover:cursor-pointer'>
                                    <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Story Book</h3>
                                    <p className='font-thin text-xs'>Generate a story using the power of AI.</p>
                                </div>
                            </li>
                            <li className='flex items-center space-x-4'>
                                <FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
                                <div className='group hover:cursor-pointer'>
                                    <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Audio Genie</h3>
                                    <p className='font-thin text-xs'>Generate and modify audio content effortlessly.</p>
                                </div>
                            </li>
                            <li className='flex items-center space-x-4'>
                                <MdTranslate className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
                                <div className='group hover:cursor-pointer'>
                                    <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Custom Translator</h3>
                                    <p className='font-thin text-xs'>Neural Text translation system tailored to your needs.</p>
                                </div>
                            </li>
                            <li className='flex items-center space-x-4'>
                                <IoText className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
                                <div className='group hover:cursor-pointer'>
                                    <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Text Classification</h3>
                                    <p className='font-thin text-xs'>Categorise text into user defined classes.</p>
                                </div>
                            </li>
                            <li className='transition-colors duration-200 hover:text-violet-500 hover:underline cursor-pointer flex items-center'>View More <IoMdArrowRoundForward /> </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div className='relative bottom-0 flex border-gray-300 border-t mt-10 pt-5 px-10 text-sm font-light space-x-8'>
                <p className='hover:underline cursor-pointer'>Explore templates</p>
                <p className='hover:underline cursor-pointer'>Explore tools</p>
                <p className='hover:underline cursor-pointer'>Join Everyday Free Access</p>
            </div>
        </div>
    );
};

// Resources Dropdown Component
export const ResourcesDropdown: React.FC = () => {
    return (
        <div className="w-full text-white py-10 px-28">
            <div className='flex'>
                <div className='w-full space-y-8'>
                    <div>
                        <h1 className='text-3xl'>Curated Resources to Get You Started.</h1>
                        <p className='text-gray-300 text-sm'>Documents, videos, communities and lot more.</p>
                    </div>
                    <div className='flex space-x-4'>
                        <div className='w-1/4 space-y-2'>
                            <h3 className='font-medium text-sm text-slate-300'>Learn</h3>
                            <ul className='space-y-4'>
                                <li className='flex items-center space-x-4'>
                                    <IoMdAnalytics className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Demo</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Experience the power of automation-live now</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <RiProductHuntFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Blogs</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Innovative insights to empower your next move</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <RiMoneyEuroBoxFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Webinars</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Learn, connect, and grow with expert-led sessions</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <FaMoneyBillAlt className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Guides</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Step-by-step tools to unlock your potential</p>
                                    </div>
                                </li>

                            </ul>
                        </div>

                        <div className='w-1/4 space-y-2'>
                            <h3 className='font-medium text-sm text-slate-300'>Build</h3>
                            <ul className='space-y-4'>
                                <li className='flex items-center space-x-4'>
                                    <IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>API Doc</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Comprehensive API docs for seamless integrations</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <FaVideo className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Videos</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Engage with interactive, on-demand video solutions</p>
                                    </div>
                                </li>
                            </ul>
                            <h3 className='font-medium text-sm text-slate-300'>Services</h3>
                            <ul className='space-y-4'>
                                <li className='flex items-center space-x-4'>
                                    <IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Documentations</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Explore detailed resources to optimize your workflows</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <FaUserPlus className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Enterprise Contact</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Partner with us to scale your enterprise</p>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <div className='w-1/4 space-y-2'>
                            <h3 className='font-medium text-sm text-slate-300'>Resources</h3>
                            <ul className='space-y-4'>
                                <li className='flex items-center space-x-4'>
                                    <FaBook className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Books</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Discover knowledge to inspire and empower action</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <GiArtificialIntelligence className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Agents</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Your personalized support, every step of the way</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Podcasts</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Tune in for fresh perspectives and expert advice</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <IoIosMail className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Newsletters</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Stay updated with the latest insights and tools</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <FaBookmark className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Bookmarks</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Save and revisit your go-to resources anytime</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div className='w-1/4 space-y-2'>
                            <h3 className='font-medium text-sm text-slate-300'>Connect</h3>
                            <ul className='space-y-4'>
                                <li className='flex items-center space-x-4'>
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Developer Connect</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Empower developers to create and integrate seamlessly</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Community</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Join a network of creators and innovators</p>
                                    </div>
                                </li>
                                <li className='flex items-center space-x-4'>
                                    <div className='group'>
                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Meetups</h3>
                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Collaborate, learn, and grow at local events</p>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div className='relative bottom-0 flex border-gray-300 border-t mt-10 pt-5 px-10 text-sm font-light space-x-8'>
                <p className='hover:underline cursor-pointer'>Explore templates</p>
                <p className='hover:underline cursor-pointer'>Explore tools</p>
                <p className='hover:underline cursor-pointer'>Join Everyday Free Access</p>
            </div>
        </div>
    );
};