import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Footer from "@/components/footer";
import { 
  FaVideo, 
  FaChalkboardTeacher, 
  FaUsers, 
  FaNewspaper, 
  FaPlayCircle 
} from 'react-icons/fa';

const heading = "Videos: Your Hub for AI Insights & Education";
const description = "Explore in-depth tutorials, engaging panel discussions, and insightful conversations about our AI innovations.";

const videoCategories = [
  {
    title: "Tutorials & How-Tos",
    description: "Learn how to convert your expertise into intelligent AI agents with our easy-to-follow video tutorials.",
    icon: <FaChalkboardTeacher className="text-4xl text-green-400" />
  },
  {
    title: "Expert Conversations & Panels",
    description: "Gain insights into emerging trends, strategic approaches, and the future of AI technology.",
    icon: <FaUsers className="text-4xl text-blue-400" />
  },
  {
    title: "Learning Resources",
    description: "Access comprehensive videos documenting our product features, case studies, and success stories.",
    icon: <FaNewspaper className="text-4xl text-indigo-400" />
  }
];

const featuredContent = [
  {
    title: "Webinars & Live Sessions",
    description: "Join our live webinars to interact with experts, ask questions in real time, and explore deep dives into specific topics.",
    button: "Upcoming Events",
    link: "#",
    icon: <FaPlayCircle className="text-4xl text-amber-400" />
  }
];

const subscriptionOptions = [
  {
    title: "Stay Connected",
    description: "Subscribe to our video updates and marketing insights.",
    button: "Subscribe Now",
    link: "/pricing",
    image: "https://via.placeholder.com/400x300"
  },
  {
    title: "Explore & Engage",
    description: "Dive into our video content and unlock a world of knowledge.",
    subFeatures: [
      "Build intelligent AI agents",
      "Learn industry best practices",
      "Stay ahead of AI trends"
    ],
    button: "Browse Videos",
    link: "#"
  }
];

export default function VideosPage() {
  return (
    <div className="bg-[#080E12] dark 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">
            {heading}
          </h1>
          <h2 className="text-2xl md:text-3xl lg:text-4xl max-w-4xl mb-12">
            {description}
          </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">
              Browse Videos
            </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>

      {/* Video Categories Section */}
      <div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl md:text-5xl mb-16 text-center">
            What <span className="text-indigo-400">You'll Find</span>
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
            {videoCategories.map((category, index) => (
              <div key={index} className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-800 hover:border-gray-700 transition-all">
                <div className="mb-6">{category.icon}</div>
                <h3 className="text-2xl mb-4">{category.title}</h3>
                <p className="text-gray-300">{category.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Featured Content Section */}
      <div className="py-24 px-6 md:px-12">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl md:text-5xl mb-4 text-center">Live & Interactive Content</h2>
          <p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
            Engage directly with AI experts and stay updated with the latest insights and trends.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-8">
            {featuredContent.map((feature, index) => (
              <div key={index} className="bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-800 hover:border-gray-700">
                <div className="mb-6">{feature.icon}</div>
                <h3 className="text-2xl mb-4">{feature.title}</h3>
                <p className="text-gray-300 mb-6">{feature.description}</p>
                <a href={feature.link} className="inline-block px-6 py-2 rounded-md bg-sky-200 text-gray-900 font-medium hover:opacity-90 transition-opacity">
                  {feature.button}
                </a>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Subscription & Engagement Section */}
      <div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl md:text-5xl mb-16 text-center">
            Stay <span className="text-indigo-400">Connected & Informed</span>
          </h2>
          <p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
            Transform your expertise into intelligent AI agents with Everyday Series video resources.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {subscriptionOptions.map((option, index) => (
              <div key={index} className="flex flex-col justify-between bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-800 hover:border-gray-700">
                {/* {option.image && <img src={option.image} alt={option.title} className="mb-4 rounded-md" />} */}
                <div>
                <h3 className="text-2xl mb-4">{option.title}</h3>
                <p className="text-gray-300 mb-6">{option.description}</p>
                {option.subFeatures && (
                  <ul className="list-disc text-gray-300 pl-6 mb-6">
                    {option.subFeatures.map((feature, idx) => (
                      <li key={idx}>{feature}</li>
                    ))}
                  </ul>
                )}
                </div>
                <a href={option.link} className="inline-blockn w-fit px-6 py-2 rounded-md bg-sky-200 text-gray-900 font-medium hover:opacity-90 transition-opacity">
                  {option.button}
                </a>
              </div>
            ))}
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}