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 { GrContactInfo, 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 { MdAutoAwesome, MdSecurity, MdStore, 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',
            },
            {
                name: 'Micro-Saas',
                description: 'Build Your MicroSAAS & Grow Your Community',
                icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
                link: '/micro-saas',
            },
        ],
    },
    {
        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>
    );
};

interface SolutionItem {
    category: string;
    list: {
        name: string;
        description: string;
        icon: React.ReactNode;
        link?: string;
    }[];
}
const solutionItems: SolutionItem[] = [
    {
        category: 'Overview',
        list: [
            {
                name: 'Marketing',
                description: 'Revolutionize campaigns with AI-driven automation',
                icon: <IoMdAnalytics className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/marketing'
            },
            {
                name: 'Product Manager',
                description: 'Streamline workflows and build smarter, faster products',
                icon: <RiProductHuntFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/product-manager'
            },
            {
                name: 'Sales',
                description: 'Close deals faster with seamless, automated tools',
                icon: <RiMoneyEuroBoxFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/sales'
            },
            {
                name: 'Finance',
                description: 'Optimize processes and track budgets with ease',
                icon: <FaMoneyBillAlt className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/finance'
            },
            {
                name: 'HR',
                description: 'Empower your team with smarter workflow solutions',
                icon: <FaUserCog className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/hr'
            },
        ],
    },
    {
        category: 'Enterprises',
        list: [
            {
                name: 'Services',
                description: 'Transform operations with AI-driven service solutions',
                icon: <FaServicestack className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/services'
            },
            {
                name: 'Security',
                description: 'Protect your data with next-gen secure workflows',
                icon: <MdSecurity className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/security'
            },
            {
                name: 'Marketplace',
                description: 'Explore a wide range of AI-driven tools and solutions tailored for your business.',
                icon: <MdStore className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/marketplace'
            },
            {
                name: 'GenAI Readiness Program',
                description: 'Prepare your organization for the future with cutting-edge AI adoption strategies.',
                icon: <MdAutoAwesome className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/genai-readiness'
            }

        ],
    },
    {
        category: 'Users',
        list: [
            {
                name: 'For Learners',
                description: 'Learn smarter with intuitive tools and AI support',
                icon: null,
                link: '/learners'
            },
            {
                name: 'For Coders',
                description: 'Code faster and build better with powerful tools',
                icon: null,
                link: '/coders'
            },
            {
                name: 'For Enterprises',
                description: 'Scale operations with solutions built for enterprise growth',
                icon: null,
                link: '/enterprises'
            },
        ],
    },
];
const aiTools: { name: string; description: string; icon: React.ReactNode; link: string }[] = [
    {
        name: 'Story Book',
        description: 'Generate a story using the power of AI.',
        icon: <FaBook className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />,
        link: '/storybook',
    },
    {
        name: 'Audio Genie',
        description: 'Generate and modify audio content effortlessly.',
        icon: <FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />,
        link: '/audiogenie',
    },
    {
        name: 'Custom Translator',
        description: 'Neural Text translation system tailored to your needs.',
        icon: <MdTranslate className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />,
        link: '/translator',
    },
    {
        name: 'Text Classification',
        description: 'Categorise text into user defined classes.',
        icon: <IoText className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />,
        link: '/text-classification',
    },
];

// 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'>
                        {solutionItems.map((solutionGroup, index) => (
                            <div className='w-1/3 space-y-2' key={index}>
                                <h3 className='font-medium text-sm text-slate-300'>{solutionGroup.category}</h3>
                                <ul className='space-y-4'>
                                    {solutionGroup.list.map((item, itemIndex) => (
                                        <li className='flex items-center space-x-4' key={itemIndex}>
                                            {item.icon && item.icon} {/* Render icon if it exists */}
                                            <div className='group hover:cursor-pointer'>
                                                <a href={item.link} >
                                                    <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>
                                                </a>
                                            </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'>
                            {aiTools.map((tool, index) => (
                                <li className='flex items-center space-x-4' key={index}>
                                    {tool.icon}
                                    <div className='group hover:cursor-pointer'>
                                        <a href={tool.link}>
                                            <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>{tool.name}</h3>
                                            <p className='font-thin text-xs'>{tool.description}</p>
                                        </a>
                                    </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
interface ResourceItem {
    category: string;
    list: {
        name: string;
        description: string;
        icon?: React.ReactNode; // Making icon optional as some items don't have it
        link?: string;
    }[];
}

const resourceItems: ResourceItem[] = [
    {
        category: 'Learn',
        list: [
            {
                name: 'Demo',
                description: 'Experience the power of automation-live now',
                icon: <IoMdAnalytics className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/demo' // Add the correct link
            },
            {
                name: 'Blogs',
                description: 'Innovative insights to empower your next move',
                icon: <RiProductHuntFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/blogs' // Add the correct link
            },
            {
                name: 'Webinars',
                description: 'Learn, connect, and grow with expert-led sessions',
                icon: <RiMoneyEuroBoxFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/webinars' // Add the correct link
            },
            {
                name: 'Guides',
                description: 'Step-by-step tools to unlock your potential',
                icon: <FaMoneyBillAlt className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/guides' // Add the correct link
            },
        ],
    },
    {
        category: 'Build',
        list: [
            {
                name: 'API Doc',
                description: 'Comprehensive API docs for seamless integrations',
                icon: <IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/api-doc' // Add the correct link
            },
            {
                name: 'Videos',
                description: 'Engage with interactive, on-demand video solutions',
                icon: <FaVideo className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/videos' // Add the correct link
            },
        ],
    },
    {
        category: 'Services',
        list: [
            {
                name: 'Documentations',
                description: 'Explore detailed resources to optimize your workflows',
                icon: <IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/documentations' // Add the correct link
            },
            {
                name: 'Enterprise Contact',
                description: 'Partner with us to scale your enterprise',
                icon: <GrContactInfo className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/enterprise-contact' // Add the correct link
            },
        ],
    },
    {
        category: 'Resources',
        list: [
            {
                name: 'Books',
                description: 'Discover knowledge to inspire and empower action',
                icon: <FaBook className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/books' // Add the correct link
            },
            {
                name: 'Agents',
                description: 'Your personalized support, every step of the way',
                icon: <GiArtificialIntelligence className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/agents' // Add the correct link
            },
            {
                name: 'Podcasts',
                description: 'Tune in for fresh perspectives and expert advice',
                icon: <FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/podcasts' // Add the correct link
            },
            {
                name: 'Newsletters',
                description: 'Stay updated with the latest insights and tools',
                icon: <IoIosMail className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/newsletters' // Add the correct link
            },
            {
                name: 'Bookmarks',
                description: 'Save and revisit your go-to resources anytime',
                icon: <FaBookmark className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
                link: '/bookmarks' // Add the correct link
            },
        ],
    },
    {
        category: 'Connect',
        list: [
            {
                name: 'Developer Connect',
                description: 'Empower developers to create and integrate seamlessly',
                icon: undefined, // No Icon
                link: '/developer-connect' // Add the correct link
            },
            {
                name: 'Community',
                description: 'Join a network of creators and innovators',
                icon: undefined, // No Icon
                link: '/community' // Add the correct link
            },
            {
                name: 'Meetups',
                description: 'Collaborate, learn, and grow at local events',
                icon: undefined, // No Icon
                link: '/meetups' // Add the correct link
            },
        ],
    },
];

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 a lot more.</p>
                    </div>
                    <div className='flex space-x-4'>
                        {/* Mapping over resource items, ensuring Build & Services are in the same column */}
                        {resourceItems.map((item, index) => {
                            if (item.category === 'Build') {
                                return (
                                    <div key={index} className='w-1/4 space-y-2'>
                                        {/* Render Build category */}
                                        <h3 className='font-medium text-sm text-slate-300'>{item.category}</h3>
                                        <ul className='space-y-4'>
                                            {item.list.slice(0, 2).map((listItem) => (
                                                <li key={listItem.name} className='flex items-center space-x-4'>
                                                    {listItem.icon && listItem.icon}
                                                    <div className='group'>
                                                        <a href={listItem.link}>
                                                            <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
                                                                {listItem.name}
                                                            </h3>
                                                            <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
                                                                {listItem.description}
                                                            </p>
                                                        </a>
                                                    </div>
                                                </li>
                                            ))}
                                        </ul>

                                        {/* Render Services category immediately after Build */}
                                        {resourceItems
                                            .filter((el) => el.category === 'Services')
                                            .map((serviceItem) => (
                                                <div key={serviceItem.category}>
                                                    <h3 className='font-medium text-sm text-slate-300 mt-6'>{serviceItem.category}</h3>
                                                    <ul className='space-y-4'>
                                                        {serviceItem.list.slice(0, 2).map((listItem) => (
                                                            <li key={listItem.name} className='flex items-center space-x-4'>
                                                                {listItem.icon && listItem.icon}
                                                                <div className='group'>
                                                                    <a href={listItem.link}>
                                                                        <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
                                                                            {listItem.name}
                                                                        </h3>
                                                                        <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
                                                                            {listItem.description}
                                                                        </p>
                                                                    </a>
                                                                </div>
                                                            </li>
                                                        ))}
                                                    </ul>
                                                </div>
                                            ))}
                                    </div>
                                );
                            } else if (item.category !== 'Services') {
                                return (
                                    <div key={index} className='w-1/4 space-y-2'>
                                        <h3 className='font-medium text-sm text-slate-300'>{item.category}</h3>
                                        <ul className='space-y-4'>
                                            {item.list.map((listItem) => (
                                                <li key={listItem.name} className='flex items-center space-x-4'>
                                                    {listItem.icon && listItem.icon}
                                                    <div className='group'>
                                                        <a href={listItem.link}>
                                                            <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
                                                                {listItem.name}
                                                            </h3>
                                                            <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
                                                                {listItem.description}
                                                            </p>
                                                        </a>
                                                    </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>
    );
};