frontend/src/components/Blog.jsx

import { motion } from 'framer-motion'
import { useInView } from 'react-intersection-observer'
import { FiBookOpen, FiClock, FiArrowRight, FiTrendingUp } from 'react-icons/fi'

const BLOGS = [
  {
    emoji: '🔌',
    tag: 'MCP Deep Dive',
    tagColor: '#6366f1',
    title: 'Understanding MCP: Model Context Protocol Explained',
    excerpt: 'MCP (Model Context Protocol) is Anthropic\'s open standard that bridges AI assistants to external data, tools, and APIs. This deep-dive covers how MCP\'s client-server architecture enables stateful context management, JSON-RPC transport, and how LLMs like Claude interact with real-world systems through structured tool calls.',
    readTime: '6 min read',
    date: 'Apr 2025',
    topics: ['MCP', 'Anthropic', 'LLM', 'Protocols'],
    featured: true,
  },
  {
    emoji: '🛠️',
    tag: 'MCP Tools',
    tagColor: '#8b5cf6',
    title: 'Building Your First MCP Server: Tools, Resources & Prompts',
    excerpt: 'A hands-on guide to building production-grade MCP servers using the Python SDK. Learn how to define Tools, expose Resources, and create reusable Prompt templates — making your AI agent capable of reading files, querying APIs, and executing custom logic through a standardized protocol.',
    readTime: '9 min read',
    date: 'Apr 2025',
    topics: ['MCP Server', 'Python SDK', 'Tools', 'Resources'],
    featured: true,
  },
  {
    emoji: '🤖',
    tag: 'MCP Automation',
    tagColor: '#06b6d4',
    title: 'Claude + MCP: Orchestrating Multi-Step AI Automations',
    excerpt: 'Claude\'s native MCP integration unlocks a new paradigm in AI automation — where a single LLM can read emails, query databases, call APIs, and write files in a coordinated, multi-step flow. This post explores architectural patterns for building reliable MCP orchestration pipelines with tool chaining, error recovery, and state persistence.',
    readTime: '10 min read',
    date: 'Mar 2025',
    topics: ['Claude', 'MCP', 'Orchestration', 'Agents'],
    featured: true,
  },
  {
    emoji: '⚙️',
    tag: 'AI Workflows',
    tagColor: '#f59e0b',
    title: 'n8n + LLM: Building Visual AI Automation Workflows',
    excerpt: 'n8n\'s node-based workflow engine pairs powerfully with LLM APIs and MCP to build production-ready AI automations without complex code. This guide covers integrating OpenAI, Claude, and MCP tool nodes in n8n to automate document processing, customer support triaging, and smart notification pipelines.',
    readTime: '8 min read',
    date: 'Mar 2025',
    topics: ['n8n', 'LLM', 'Automation', 'No-Code'],
    featured: false,
  },
  {
    emoji: '🕸️',
    tag: 'AI Automation',
    tagColor: '#8b5cf6',
    title: 'Building AI Automation Workflows with LangGraph',
    excerpt: 'LangGraph brings graph-based state machines to LLM applications, enabling complex branching, loops, and multi-step automation. Learn how to design production-ready agentic workflows that handle real-world complexity — including conditional routing, human-in-the-loop nodes, and persistent memory across sessions.',
    readTime: '8 min read',
    date: 'Feb 2025',
    topics: ['LangGraph', 'Automation', 'Agents', 'Python'],
    featured: false,
  },
  {
    emoji: '🤝',
    tag: 'Multi-Agent',
    tagColor: '#06b6d4',
    title: 'AutoGen vs LangGraph: Which Multi-Agent Framework to Use?',
    excerpt: 'A practical comparison of Microsoft AutoGen and LangGraph for multi-agent development. We examine developer experience, orchestration flexibility, memory management, and when to choose each framework for production AI systems that require collaborative agent teams.',
    readTime: '7 min read',
    date: 'Jan 2025',
    topics: ['AutoGen', 'LangGraph', 'Agents', 'Architecture'],
    featured: false,
  },
  {
    emoji: '⚡',
    tag: 'Agentic AI',
    tagColor: '#10b981',
    title: 'Agentic AI Design Patterns: ReAct, Plan-and-Execute & Beyond',
    excerpt: 'From simple ReAct loops to sophisticated Plan-and-Execute architectures, this post dissects the core design patterns powering today\'s agentic AI systems. Understand when to use each pattern, their failure modes, and how MCP tool use changes the agent reliability equation.',
    readTime: '11 min read',
    date: 'Dec 2024',
    topics: ['ReAct', 'Planning', 'Agents', 'Design Patterns'],
    featured: false,
  },
  {
    emoji: '📚',
    tag: 'RAG',
    tagColor: '#ec4899',
    title: 'RAG vs Fine-Tuning: Making the Right Choice for Your LLM App',
    excerpt: 'Retrieval-Augmented Generation and fine-tuning both improve LLM performance, but solve different problems. This guide breaks down cost tradeoffs, latency implications, vector database selection, and when each approach delivers the best results for production AI applications.',
    readTime: '5 min read',
    date: 'Nov 2024',
    topics: ['RAG', 'Fine-Tuning', 'LLM', 'Architecture'],
    featured: false,
  },
]

export default function Blog() {
  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.05 })

  const featured = BLOGS.filter(b => b.featured)
  const rest = BLOGS.filter(b => !b.featured)

  return (
    <section id="blog" className="section">
      <div className="orb orb-purple" style={{ width: 350, height: 350, bottom: '5%', right: '-5%', position: 'absolute', opacity: 0.3 }} />
      <div className="container" ref={ref}>
        <motion.div className="section-header"
          initial={{ opacity: 0, y: 24 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.55 }}>
          <div className="section-tag"><FiBookOpen size={12} /> Blog</div>
          <h2 className="section-title">Thoughts &amp; Insights</h2>
          <p className="section-subtitle">Deep research on MCP, AI automation workflows, agentic systems, and the future of intelligent AI engineering.</p>
        </motion.div>

        {/* Featured row — larger cards */}
        <motion.div
          initial={{ opacity: 0 }} animate={inView ? { opacity: 1 } : {}} transition={{ duration: 0.4, delay: 0.1 }}
          style={{ marginBottom: '1.5rem' }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: '0.9rem' }}>
            <FiTrendingUp size={13} style={{ color: '#6366f1' }} />
            <span style={{ fontSize: '0.72rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-accent)' }}>
              Featured Research
            </span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: '1.25rem' }}>
            {featured.map((blog, i) => (
              <BlogCard key={blog.title} blog={blog} i={i} inView={inView} large />
            ))}
          </div>
        </motion.div>

        {/* Divider */}
        <div style={{ height: 1, background: 'var(--border-subtle)', marginBottom: '1.5rem', opacity: 0.5 }} />

        {/* All articles grid */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: '0.9rem' }}>
          <span style={{ fontSize: '0.72rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
            More Articles
          </span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '1rem' }}>
          {rest.map((blog, i) => (
            <BlogCard key={blog.title} blog={blog} i={i + featured.length} inView={inView} />
          ))}
        </div>
      </div>
    </section>
  )
}

function BlogCard({ blog, i, inView, large }) {
  return (
    <motion.article
      className="glass-card"
      style={{ padding: large ? '1.75rem' : '1.5rem', display: 'flex', flexDirection: 'column', gap: '0.85rem', cursor: 'pointer', position: 'relative', overflow: 'hidden' }}
      initial={{ opacity: 0, y: 36 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.55, delay: i * 0.08, ease: [0.22, 1, 0.36, 1] }}
      whileHover={{ y: -6, borderColor: blog.tagColor + '50' }}
    >
      {/* Subtle top accent line */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: `linear-gradient(90deg, ${blog.tagColor}60, transparent)` }} />

      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: large ? '2rem' : '1.8rem' }}>{blog.emoji}</span>
        <span style={{
          padding: '3px 10px', borderRadius: 999, fontSize: '0.68rem', fontWeight: 700,
          background: `${blog.tagColor}15`, border: `1px solid ${blog.tagColor}30`,
          color: blog.tagColor, letterSpacing: '0.05em',
        }}>{blog.tag}</span>
      </div>

      {/* Title */}
      <h3 style={{ fontSize: large ? '1.05rem' : '0.97rem', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.45 }}>
        {blog.title}
      </h3>

      {/* Excerpt */}
      <p style={{ fontSize: '0.82rem', color: 'var(--text-secondary)', lineHeight: 1.75, flexGrow: 1 }}>
        {blog.excerpt}
      </p>

      {/* Topic chips */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
        {blog.topics.map(t => (
          <span key={t} className="tech-tag" style={{
            fontSize: '0.65rem', background: `${blog.tagColor}10`,
            borderColor: `${blog.tagColor}20`, color: blog.tagColor,
          }}>{t}</span>
        ))}
      </div>

      {/* Footer */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: '0.5rem', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ display: 'flex', gap: 12 }}>
          <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{blog.date}</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: '0.75rem', color: 'var(--text-muted)' }}>
            <FiClock size={11} /> {blog.readTime}
          </span>
        </div>
        <motion.button
          style={{
            background: 'none', border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 4,
            fontSize: '0.78rem', fontWeight: 600, color: blog.tagColor,
          }}
          whileHover={{ gap: 8 }}
        >
          Read <FiArrowRight size={12} />
        </motion.button>
      </div>
    </motion.article>
  )
}