import React, { useRef, useLayoutEffect } from 'react';
import { motion } from 'framer-motion';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Link } from 'react-router-dom';
import { blogPostData } from '../src/data/seoData';

gsap.registerPlugin(ScrollTrigger);

const posts = blogPostData
  .filter((post) => !post.redirect)
  .slice(0, 3)
  .map((post) => ({
    image: post.image || '/images/blog/business-email-comparison-new.png',
    category: post.category === 'authority' ? 'IT Insights' : 'Local Services',
    title: post.h1,
    excerpt: post.description,
    href: `/${post.slug}`,
  }));

const Blog: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const imagesRef = useRef<(HTMLDivElement | null)[]>([]);
  imagesRef.current = [];

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      imagesRef.current.forEach((imgWrapper) => {
        if (!imgWrapper) return;

        gsap.to(imgWrapper, {
          yPercent: 30,
          ease: "none",
          scrollTrigger: {
            trigger: imgWrapper.closest('article'),
            start: "top bottom",
            end: "bottom top",
            scrub: true
          }
        });
      });
    }, containerRef);

    return () => ctx.revert();
  }, []);

  return (
    <motion.section
      ref={containerRef}
      id="blog"
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ duration: 0.8, ease: "easeOut" }}
      className="py-24 bg-background-light dark:bg-background-dark border-t border-gray-200 dark:border-white/10 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]"
    >
      <div className="max-w-7xl mx-auto px-6">
        <div className="flex justify-between items-end mb-12">
          <div>
            <span className="text-xs font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-500 mb-2 block">Latest Insights</span>
            <h2 className="font-display text-3xl md:text-4xl text-gray-900 dark:text-white">
              Stay updated <span className="text-gray-400 dark:text-gray-600">with our latest news and articles.</span>
            </h2>
          </div>
          <Link
            to="/blog"
            className="hidden md:inline-flex items-center text-sm font-medium text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
          >
            View all posts <span className="material-symbols-outlined text-sm ml-1">arrow_forward</span>
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {posts.map((post, i) => (
            <motion.article
              key={i}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              whileHover={{ y: -8 }}
              className="group"
            >
              <Link to={post.href} className="block">
              <div className="h-64 rounded-xl overflow-hidden mb-6 relative shadow-lg">
                <div
                  ref={el => { if (el) imagesRef.current.push(el); }}
                  className="w-full h-[140%] -mt-[20%]"
                >
                  <img
                    src={post.image}
                    alt={post.title}
                    loading="lazy"
                    decoding="async"
                    fetchPriority="low"
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                </div>
                <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors pointer-events-none"></div>
                <div className="absolute top-4 right-4 bg-white/90 dark:bg-black/80 backdrop-blur text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider z-10">
                  Read
                </div>
              </div>
              <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400 mb-3">
                <span className="text-blue-600 dark:text-blue-400 font-medium">{post.category}</span>
              </div>
              <h3 className="text-xl font-display font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                {post.title}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                {post.excerpt}
              </p>
              </Link>
            </motion.article>
          ))}
        </div>
      </div>
    </motion.section>
  );
};

export default Blog;