"use client";

import React from 'react';
import { motion } from "framer-motion";
import { FaCalendarAlt, FaPlay, FaVideo, FaChalkboardTeacher, FaRocket, FaNewspaper } from 'react-icons/fa';
import Navbar from '@/components/Navbar/navbar';
import Footer from '@/components/footer';

const heading = "Everyday Webinars";
const description = "Step into the world of AI-driven business optimization with our informative webinars. Our experts are here to guide you through the ins and outs of the Everyday platform, showcasing how you can leverage our tools to drive your business forward.";

const webinarLink = "https://everydayseries.com/podcasts/";

const featuredWebinars = [
    {
        title: "Mastering the Everyday Platform: A Comprehensive Tour",
        excerpt: "Join our AI specialists as they take you on a comprehensive journey through the Everyday platform. Discover how our drag-and-drop AI builder, diverse input/output forms, Marketplace, and expansive integrations can redefine your enterprise operations.",
        category: "Platform Overview",
        date: "Feb 26, 2025 • 2:00 PM EST",
        icon: <FaVideo className="text-indigo-400 text-2xl" />,
        image: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHdlYmluYXJ8ZW58MHx8MHx8fDA%3D"
    },
    {
        title: "AI-Driven Business Intelligence: From Data to Decisions",
        excerpt: "Explore how to transform raw business data into actionable insights using Everyday's AI capabilities. Learn practical applications for various departments including sales, marketing, and operations.",
        category: "Business Intelligence",
        date: "Mar 5, 2025 • 1:00 PM EST",
        icon: <FaChalkboardTeacher className="text-sky-400 text-2xl" />,
        image: "https://images.unsplash.com/photo-1573164713988-8665fc963095?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8ZGF0YSUyMGFuYWx5c2lzfGVufDB8fDB8fHww"
    },
    {
        title: "Building Custom AI Workflows: Advanced Techniques",
        excerpt: "Take your AI workflow skills to the next level. This advanced session covers complex scenarios, custom integrations, and best practices for enterprise-grade workflow development.",
        category: "Advanced Training",
        date: "Mar 12, 2025 • 3:00 PM EST",
        icon: <FaRocket className="text-purple-400 text-2xl" />,
        image: "https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YWR2YW5jZWQlMjB0ZWNobm9sb2d5fGVufDB8fDB8fHww"
    }
];

const webinarCategories = [
    {
        title: "Live Webinars",
        description: "Join interactive sessions with real-time Q&A and demonstrations",
        icon: <FaPlay className="text-4xl text-indigo-400" />
    },
    {
        title: "On-Demand",
        description: "Access our library of recorded webinars to learn at your own pace",
        icon: <FaVideo className="text-4xl text-sky-400" />
    },
    {
        title: "Getting Started",
        description: "Perfect for newcomers looking to quickly understand and implement our platform",
        icon: <FaChalkboardTeacher className="text-4xl text-amber-400" />
    },
    {
        title: "Advanced Training",
        description: "Deep dives into complex features and advanced use cases for power users",
        icon: <FaRocket className="text-4xl text-emerald-400" />
    }
];

const WebinarSection = () => {
    return (
        <div className="bg-[#080E12] dark text-white relative overflow-hidden">
            <Navbar />
            {/* Background glow effects */}
            <div className="absolute -top-10 -right-10 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl"></div>
            <div className="absolute -bottom-40 -left-40 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>

            <div className="max-w-7xl mx-auto relative z-10">
                {/* Header Section */}
                <div className="relative h-screen flex flex-col items-center justify-center text-center px-4">
                    <motion.div
                        initial={{ scale: 0.8, opacity: 0 }}
                        animate={{ scale: 1, opacity: 1 }}
                        transition={{ duration: 0.6, ease: "easeOut" }}
                        className="mb-6"
                    >
                        <div className="inline-flex items-center justify-center h-20 w-20 rounded-full bg-gray-800 text-indigo-400 shadow-lg shadow-indigo-500/20">
                            <FaCalendarAlt className="text-4xl animate-pulse" />
                        </div>
                    </motion.div>

                    <motion.h2
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, ease: "easeOut" }}
                        className="h-28 text-5xl md:text-6xl lg:text-6xl my-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-purple-400 drop-shadow-lg"
                    >
                        {heading}
                    </motion.h2>

                    <motion.p
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 1, ease: "easeOut", delay: 0.2 }}
                        className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"
                    >
                        {description}
                    </motion.p>

                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 1, ease: "easeOut", delay: 0.4 }}
                        className="mt-8"
                    >
                        <a 
                            href={webinarLink}
                            className="px-8 py-4 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-white font-medium hover:from-sky-600 hover:to-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30 text-lg"
                        >
                            Register For Upcoming Webinars
                        </a>
                    </motion.div>
                </div>

                {/* Webinar Types Section */}
                <div className="h-screen flex flex-col justify-center text-center mb-16">
                    <h3 className="text-4xl mb-6">
                        Live and On-Demand <span className="text-indigo-400">Webinars</span>
                    </h3>
                    <p className="text-xl text-gray-300 max-w-3xl mx-auto">
                        Whether you prefer live interaction or learning at your own pace, we've got you covered. 
                        Our webinars are available both live and on-demand, providing flexibility for your busy schedule.
                    </p>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
                        {webinarCategories.map((category, index) => (
                            <a
                                key={index}
                                href={webinarLink}
                                className="p-6 bg-gray-900/50 backdrop-blur-sm rounded-xl border border-gray-800 hover:border-gray-600 transition-all flex flex-col items-center text-center group hover:bg-gray-800/50"
                            >
                                <div className="mb-4 transform group-hover:scale-110 transition-transform">
                                    {category.icon}
                                </div>
                                <h4 className="text-xl mb-2 group-hover:text-indigo-300 transition-colors">
                                    {category.title}
                                </h4>
                                <p className="text-gray-300 text-sm">
                                    {category.description}
                                </p>
                            </a>
                        ))}
                    </div>
                </div>

                {/* Featured Webinars */}
                <div className="h-screen flex flex-col justify-center">
                    <h3 className="text-3xl font-medium mb-10 text-center">
                        Featured <span className="text-sky-400">Webinars</span>
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {featuredWebinars.map((webinar, index) => (
                            <a
                                key={index}
                                href={webinarLink}
                                className="h-[500px] group bg-gray-900/50 backdrop-blur-sm rounded-xl overflow-hidden border border-gray-800 hover:border-gray-600 transition-all hover:shadow-lg hover:shadow-indigo-900/20"
                            >
                                <div className="relative h-48 overflow-hidden">
                                    <img
                                        src={webinar.image}
                                        alt={webinar.title}
                                        className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500"
                                    />
                                    <div className="absolute inset-0 bg-gradient-to-t from-[#080E12] to-transparent opacity-70"></div>
                                    <div className="absolute bottom-4 left-4 flex items-center gap-2">
                                        <span className="bg-gray-800/80 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm">
                                            {webinar.category}
                                        </span>
                                    </div>
                                </div>
                                <div className="p-6">
                                    <div className="flex items-center justify-between mb-3">
                                        <div className="flex items-center gap-2">
                                            {webinar.icon}
                                        </div>
                                        <span className="text-gray-400 text-sm">{webinar.date}</span>
                                    </div>
                                    <h3 className="text-xl font-medium mb-3 group-hover:text-indigo-300 transition-colors">
                                        {webinar.title}
                                    </h3>
                                    <p className="text-gray-300 mb-4 line-clamp-3">
                                        {webinar.excerpt}
                                    </p>
                                    <span className="inline-flex items-center text-indigo-400 group-hover:text-indigo-300">
                                        Register Now
                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-1 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                                        </svg>
                                    </span>
                                </div>
                            </a>
                        ))}
                    </div>
                </div>

                {/* CTA Section */}
                <div className="mb-20 text-center">
                    <h3 className="text-3xl font-medium mb-6">
                        Register For <span className="text-indigo-400">Upcoming Webinars</span>
                    </h3>
                    <p className="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
                        Looking to dive deeper into the world of AI-driven enterprise solutions? Register for our upcoming webinars and join the conversation.
                    </p>
                    <a 
                        href={webinarLink}
                        className="px-8 py-4 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-white font-medium hover:from-sky-600 hover:to-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30 text-lg inline-block"
                    >
                        View All Webinars
                    </a>
                </div>

                {/* Newsletter Signup / CTA */}
                <div className="bg-gradient-to-r from-indigo-900/30 to-purple-900/30 rounded-2xl mb-40 p-10 md:p-16 backdrop-blur-sm border border-gray-700 hover:border-gray-600 transition-all hover:shadow-lg hover:shadow-indigo-900/20">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
                        <div>
                            <h3 className="text-3xl md:text-4xl mb-4">
                                Stay ahead in the rapidly evolving world of business with Everyday webinars.
                            </h3>
                            <p className="text-gray-300 mb-6">
                                Uncover the power of AI and transform your business intelligence today. Stay up to date with our latest tech updates.
                            </p>
                            <div className="flex flex-col sm:flex-row gap-4">
                                <input 
                                    type="email" 
                                    placeholder="Enter your email address" 
                                    className="px-6 py-3 bg-gray-800/50 backdrop-blur-sm rounded-lg text-white border border-gray-700 focus:border-indigo-500 focus:outline-none flex-grow"
                                />
                                <button 
                                    className="px-6 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-white font-medium hover:from-sky-600 hover:to-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30 whitespace-nowrap"
                                >
                                    Subscribe to Newsletter
                                </button>
                            </div>
                        </div>
                        <div className="relative">
                            <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/10 to-purple-500/10 rounded-2xl"></div>
                            <div className="relative z-10 p-8 flex items-center justify-center">
                                <FaNewspaper className="text-8xl text-indigo-400 opacity-80" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
};

export default WebinarSection;