'use client';

import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import Link from 'next/link';
import Image from 'next/image';
import { ArrowRight, Clock, Tag, Newspaper } from 'lucide-react';

const blogPosts = [
  {
    slug: 'why-erp-is-dead',
    title: "Why I'll Never Implement Another ERP",
    excerpt: "A founder's journey from ERP hell to AI-native operations—and why you should skip the legacy trap entirely.",
    category: 'Thought Leadership',
    readTime: '8 min read',
    image: 'https://cdn.abacus.ai/images/673ad142-4674-43a5-adc4-cb1e7a02b1db.jpg',
    featured: true
  },
  {
    slug: 'k12-nutrition-ai-disruption',
    title: 'Why K-12 Nutrition Tech is Ripe for AI Disruption',
    excerpt: 'A $25 billion industry running on decades-old software. Here\'s why AI-native platforms will transform how 30 million students eat every day.',
    category: 'Market Analysis',
    readTime: '9 min read',
    image: 'https://cdn.abacus.ai/images/7d51776c-6b8d-4b94-9790-5c61338de54a.png',
    featured: false
  },
  {
    slug: 'post-erp-era',
    title: 'The Post-ERP Era: Operations for the AI Age',
    excerpt: 'How modern companies are moving beyond rigid enterprise software to AI-native operations that learn, adapt, and scale with you.',
    category: 'Industry Trends',
    readTime: '7 min read',
    image: 'https://cdn.abacus.ai/images/b383e35a-ec15-43b6-ad09-00a3e81208df.jpg',
    featured: false
  },
  {
    slug: 'explainable-ai-trust',
    title: 'Building Trust with Explainable AI',
    excerpt: 'Why audit trails, bias detection, and human override controls are non-negotiable for enterprise AI adoption.',
    category: 'Compliance',
    readTime: '6 min read',
    image: '/images/blog/explainable-ai-trust-hero.jpg',
    featured: false
  }
];

export function BlogList() {
  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.1 });

  return (
    <section className="py-20 px-6" ref={ref}>
      <div className="max-w-6xl mx-auto">
        <motion.div
          initial={{ opacity: 1, y: 0 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-deep/20 border border-brand-deep/30 text-brand text-sm font-medium mb-6">
            <Newspaper className="w-4 h-4" />
            Insights & Analysis
          </span>
          <h1 className="text-4xl md:text-5xl font-bold mb-4">
            <span className="text-white">The </span>
            <span className="gradient-text">Familiar Tales</span>
          </h1>
          <p className="text-gray-400 text-lg max-w-2xl mx-auto">
            Perspectives on AI-native operations, the post-ERP revolution, and building the future of business automation.
          </p>
        </motion.div>

        {/* Featured Post */}
        {blogPosts.filter(p => p.featured).map((post, index) => (
          <motion.div
            key={post.slug}
            initial={{ opacity: 0, y: 30 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="mb-12"
          >
            <Link href={`/blog/${post.slug}`} className="block group">
              <div className="glass-card overflow-hidden hover:border-brand-deep/40 transition-colors">
                <div className="grid md:grid-cols-2 gap-0">
                  <div className="relative aspect-video md:aspect-auto">
                    <Image
                      src={post.image}
                      alt={post.title}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-r from-transparent to-brand-bg/80 md:block hidden" />
                  </div>
                  <div className="p-8 flex flex-col justify-center">
                    <div className="flex items-center gap-4 mb-4">
                      <span className="px-3 py-1 rounded-full bg-brand-secondary/20 text-brand-secondary-light text-xs font-medium" style={{ color: '#e879a8' }}>
                        Featured
                      </span>
                      <span className="flex items-center gap-1 text-gray-300 text-sm" style={{ color: '#d1d5db' }}>
                        <Tag className="w-3 h-3" />
                        {post.category}
                      </span>
                      <span className="flex items-center gap-1 text-gray-300 text-sm" style={{ color: '#d1d5db' }}>
                        <Clock className="w-3 h-3" />
                        {post.readTime}
                      </span>
                    </div>
                    <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 group-hover:text-brand transition-colors" style={{ color: '#ffffff' }}>
                      {post.title}
                    </h2>
                    <p className="text-gray-300 mb-6" style={{ color: '#d1d5db' }}>{post.excerpt}</p>
                    <div className="flex items-center gap-2 text-brand font-medium" style={{ color: '#6366f1' }}>
                      Read Article
                      <ArrowRight className="w-4 h-4 group-hover:translate-x-2 transition-transform" />
                    </div>
                  </div>
                </div>
              </div>
            </Link>
          </motion.div>
        ))}

        {/* Other Posts */}
        <div className="grid md:grid-cols-2 gap-6">
          {blogPosts.filter(p => !p.featured).map((post, index) => (
            <motion.div
              key={post.slug + index}
              initial={{ opacity: 0, y: 30 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
            >
              <Link href={`/blog/${post.slug}`} className="block group">
                <div className="rounded-xl border border-slate-700 bg-slate-900 overflow-hidden h-full hover:border-brand-deep/40 transition-colors">
                  <div className="relative aspect-video">
                    <Image
                      src={post.image}
                      alt={post.title}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <div className="p-6">
                    <div className="flex items-center gap-4 mb-3">
                      <span className="flex items-center gap-1 text-sm text-gray-300" style={{ color: '#d1d5db' }}>
                        <Tag className="w-3 h-3" />
                        {post.category}
                      </span>
                      <span className="flex items-center gap-1 text-sm text-gray-300" style={{ color: '#d1d5db' }}>
                        <Clock className="w-3 h-3" />
                        {post.readTime}
                      </span>
                    </div>
                    <h3 className="text-xl font-bold mb-2 text-white group-hover:text-sky-400 transition-colors" style={{ color: '#ffffff' }}>{post.title}</h3>
                    <p className="text-sm text-gray-300" style={{ color: '#d1d5db' }}>{post.excerpt}</p>
                  </div>
                </div>
              </Link>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}