"use client";

import React from 'react';
import { motion } from "framer-motion";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import {
    FaBlog, FaRobot, FaCode, FaLightbulb, FaGlobe,
    FaBrain, FaRss, FaMicrochip, FaNewspaper
} from 'react-icons/fa';
import Navbar from '@/components/Navbar/navbar';
import Footer from '@/components/footer';
import { DotPattern } from '@/components/magicui/dot-pattern';
import { cn } from '@/lib/utils';

const floatingWords = [
    "C", "f", "t", "n", "x", "g",
    "a", "s", "h/", "4", "g.js",
    "g", "e", "Code", "v", "b", "5",
    "e", "e", "UI/UX", "6", "js",
    "2", "e", "Code", "d", "j", "Design",
    "t", "w", "UI/UX", "t", "t",
];

const generateRandomPosition = () => ({
    x: Math.random() * 100 - 50 + "vw", // Random X position
    y: Math.random() * 100 - 50 + "vh", // Random Y position
    opacity: Math.random() * 0.5 + 0.3, // Random opacity (faded effect)
    scale: Math.random() * 0.7 + 0.5, // Random scale for variation
});

const heading = "Explore Our Blogs";
const description = "Stay informed with the latest insights on AI agents, enterprise technology, and digital transformation. Our blog features expert articles, practical guides, and thought leadership pieces.";

const blogLink = "https://everydayseries.com/?__hstc=131524315.44ca9acfdfb12f3a6754faae18ec617e.1736862124713.1740446338560.1740449080633.32&__hssc=131524315.2.1740449080633&__hsfp=2021807260";

const featuredPosts = [
    {
        title: "The Evolution of AI Agents in Enterprise Workflows",
        excerpt: "Discover how AI agents are transforming business processes and creating unprecedented efficiency across organizations.",
        category: "AI Trends",
        date: "Feb 18, 2025",
        icon: <FaRobot className="text-indigo-400 text-2xl" />,
        image: "https://images.unsplash.com/photo-1677756119517-756a188d2d94?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YWl8ZW58MHx8MHx8fDA%3D"
    },
    {
        title: "Building Your First AI Workflow with Everyday",
        excerpt: "A step-by-step guide to creating powerful, automated workflows using our drag-and-drop AI builder with zero coding required.",
        category: "Tutorials",
        date: "Feb 12, 2025",
        icon: <FaCode className="text-sky-400 text-2xl" />,
        image: "https://images.unsplash.com/photo-1634476229749-a2e480a919d0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHdvcmtmbG93fGVufDB8fDB8fHww"
    },
    {
        title: "The Future of Work: How AI is Reshaping Enterprise Collaboration",
        excerpt: "Explore how artificial intelligence is fundamentally changing how teams work together and make decisions.",
        category: "Future of Work",
        date: "Feb 5, 2025",
        icon: <FaBrain className="text-purple-400 text-2xl" />,
        image: "https://images.unsplash.com/photo-1568992687947-868a62a9f521?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8b2ZmaWNlfGVufDB8fDB8fHww"
    }
];

const blogCategories = [
    {
        title: "AI Agents",
        description: "Deep dives into how AI agents work, their capabilities, and real-world applications",
        icon: <FaRobot className="text-4xl text-indigo-400" />
    },
    {
        title: "Tech Trends",
        description: "Stay ahead with analysis of emerging technologies and digital transformation strategies",
        icon: <FaMicrochip className="text-4xl text-sky-400" />
    },
    {
        title: "Tutorials & Guides",
        description: "Practical how-to articles and step-by-step guides for leveraging AI in your workflows",
        icon: <FaLightbulb className="text-4xl text-amber-400" />
    },
    {
        title: "Internet Culture",
        description: "Exploring how technology is shaping online communities, digital experiences, and society",
        icon: <FaGlobe className="text-4xl text-emerald-400" />
    }
];

const BlogSection = () => {
    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">
                    {/* <div className="absolute inset-0 pointer-events-none">
                        {floatingWords.map((word, index) => (
                            <motion.span
                                key={index}
                                initial={generateRandomPosition()}
                                animate={{
                                    y: ["-5vh", "5vh", "-5vh"], // Floating effect
                                    opacity: [0.3, 0.5, 0.3],
                                }}
                                transition={{
                                    duration: Math.random() * 5 + 5, // Random speed
                                    repeat: Infinity,
                                    ease: "easeInOut",
                                }}
                                className="absolute text-gray-500 text-4xl font-semibold opacity-30 select-none"
                                style={{
                                    left: Math.random() * 100 + "vw", // Random left position
                                    top: Math.random() * 100 + "vh", // Random top position
                                    transform: `rotate(${Math.random() * 360}deg)`, // Random rotation
                                    filter: "blur(2px)", // Soft blur effect
                                }}
                            >
                                {word}
                            </motion.span>
                        ))}
                    </div> */}
                    <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">
                            <FaBlog 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>
                </div>

                {/* Featured Posts */}
                <div className="h-screen grid grid-cols-1 md:grid-cols-3 gap-8">
                    {featuredPosts.map((post, index) => (
                        <a
                            key={index}
                            href={blogLink}
                            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={post.image}
                                    alt={post.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">
                                        {post.category}
                                    </span>
                                </div>
                            </div>
                            <div className="p-6">
                                <div className="flex items-center justify-between mb-3">
                                    <div className="flex items-center gap-2">
                                        {post.icon}
                                    </div>
                                    <span className="text-gray-400 text-sm">{post.date}</span>
                                </div>
                                <h3 className="text-xl font-medium mb-3 group-hover:text-indigo-300 transition-colors">
                                    {post.title}
                                </h3>
                                <p className="text-gray-300 mb-4 line-clamp-3">
                                    {post.excerpt}
                                </p>
                                <span className="inline-flex items-center text-indigo-400 group-hover:text-indigo-300">
                                    Read more
                                    <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>

                {/* Blog Categories */}
                <div className="mb-20">
                    <h3 className="text-4xl mb-10 text-center">
                        Explore <span className="text-sky-400">Topics</span> That Matter
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        {blogCategories.map((category, index) => (
                            <a
                                key={index}
                                href={blogLink}
                                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>

                {/* 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 Updated with the Latest in AI & Tech
                            </h3>
                            <p className="text-gray-300 mb-6">
                                Our blog covers everything from AI agents and how they work to the coolest internet and technology trends. Join our community of forward-thinking innovators.
                            </p>
                            <div className="flex flex-wrap gap-4">
                                <a
                                    href={blogLink}
                                    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"
                                >
                                    Visit Our Blog
                                </a>
                                <a
                                    href={blogLink}
                                    className="px-6 py-3 bg-gray-800 rounded-lg text-white font-medium hover:bg-gray-700 transition-all border border-gray-700 hover:border-gray-500"
                                >
                                    Subscribe to Newsletter
                                </a>
                            </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 BlogSection;