'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { Header } from '../../components/Header';
import { Footer } from '../../components/Footer';
import api from '@/lib/api';

interface BlogPost {
  id: number;
  title: string;
  slug: string;
  excerpt: string;
  content: string;
  featured_image: string | null;
  thumbnail: string | null;
  category: string | null;
  tags: string[];
  reading_time: number;
  reading_time_formatted: string;
  views_count: number;
  published_at: string;
  published_at_human: string;
  meta_title: string | null;
  meta_description: string | null;
  author?: {
    id: number;
    name: string;
    email: string;
  } | null;
}

export default function BlogPostContent({ slug }: { slug?: string }) {
  const params = useParams();
  const slugFromParams = slug || (params?.slug as string);
  
  const [post, setPost] = useState<BlogPost | null>(null);
  const [relatedPosts, setRelatedPosts] = useState<BlogPost[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showShareMenu, setShowShareMenu] = useState(false);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    if (slugFromParams) {
      fetchBlogPost();
    }
  }, [slugFromParams]);

  // Update page title when post loads
  useEffect(() => {
    if (post) {
      const pageTitle = post.meta_title || post.title;
      document.title = `${pageTitle} | SSEOA`;
    } else {
      document.title = 'Blog | SSEOA';
    }

    // Cleanup: reset title when component unmounts
    return () => {
      document.title = 'SSEOA - We strive to work towards serving humanity';
    };
  }, [post]);

  const fetchBlogPost = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const response: any = await api.getBlogPost(slugFromParams);
      
      let postData: any = null;
      if (response && typeof response === 'object') {
        if ('data' in response) {
          postData = response.data;
        } else {
          postData = response;
        }
      }
      
      setPost(postData);
      
      // Fetch related posts
      if (postData) {
        fetchRelatedPosts(postData.category, postData.id);
      }
    } catch (err: any) {
      console.error('Error fetching blog post:', err);
      setError(err?.message || 'Failed to load blog post');
    } finally {
      setLoading(false);
    }
  };

  const fetchRelatedPosts = async (category: string | null, currentPostId: number) => {
    try {
      const response: any = await api.getBlogPosts({ 
        status: 'published',
        paginate: false,
        category: category || undefined
      });
      
      let posts: any[] = [];
      if (Array.isArray(response)) {
        posts = response;
      } else if (response && typeof response === 'object' && 'data' in response && Array.isArray(response.data)) {
        posts = response.data;
      }
      
      // Filter out current post and limit to 3
      const filtered = posts.filter(p => p.id !== currentPostId).slice(0, 3);
      setRelatedPosts(filtered);
    } catch (err: any) {
      console.error('Error fetching related posts:', err);
    }
  };

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'long', 
      day: 'numeric' 
    });
  };

  // Get share URLs for anchor tags (visible on hover)
  const getShareUrl = (platform: string): string => {
    if (!post || !slugFromParams) return '#';
    
    // Construct the full URL from the current origin and path
    let url = '';
    if (typeof window !== 'undefined') {
      // Use the current origin and construct the path from the slug
      url = `${window.location.origin}/blog/${slugFromParams}`;
    } else {
      return '#';
    }
    
    const title = post.title;
    const text = post.excerpt || post.title;
    
    // Construct share URLs with proper encoding
    const shareUrls: { [key: string]: string } = {
      facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`,
      twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
      linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`,
      whatsapp: `https://wa.me/?text=${encodeURIComponent(title + ' ' + url)}`,
      email: `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(text + '\n\n' + url)}`
    };
    
    return shareUrls[platform] || '#';
  };

  const handleShare = (platform: string, e?: React.MouseEvent) => {
    if (platform === 'copy') {
      e?.preventDefault();
      if (!post || !slugFromParams) return;
      
      const url = typeof window !== 'undefined' 
        ? `${window.location.origin}/blog/${slugFromParams}`
        : '';
      
      navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
      return;
    }
    
    // For other platforms, let the anchor tag handle navigation
    // But we can still prevent default and open in new window if needed
    if (e && (platform === 'facebook' || platform === 'linkedin')) {
      e.preventDefault();
      const url = getShareUrl(platform);
      window.open(url, '_blank', 'noopener,noreferrer');
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="min-h-[80vh] flex items-center justify-center px-4">
          <div className="text-center">
            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
            <p className="text-neutral-600">Loading article...</p>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  if (error || !post) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="min-h-[80vh] flex items-center justify-center px-4">
          <div className="text-center max-w-2xl">
            <svg className="mx-auto h-16 w-16 text-neutral-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <h2 className="text-2xl font-bold text-neutral-900 mb-2">Article Not Found</h2>
            <p className="text-neutral-600 mb-6">{error || 'The article you are looking for does not exist.'}</p>
            <Link
              href="/blog"
              className="inline-flex items-center px-6 py-3 text-sm font-medium rounded-lg shadow-sm text-neutral-900 bg-primary-500 hover:bg-primary-400"
            >
              Back to Latest
            </Link>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  const imageUrl = post.featured_image || post.thumbnail || 'https://via.placeholder.com/1200x600?text=Blog+Post';

  return (
    <div className="min-h-screen bg-white">
      <Header />

      {/* Hero Section */}
      <section className="relative bg-white pt-32 pb-8 md:pt-40 md:pb-12 border-b border-neutral-100">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Back Button */}
          <Link 
            href="/blog" 
            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-700 bg-white border border-neutral-200 rounded-lg hover:bg-neutral-50 hover:border-neutral-300 transition-all shadow-sm group"
          >
            <svg className="w-4 h-4 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            Back to Latest
          </Link>
        </div>
      </section>

      {/* Featured Image */}
      {imageUrl && (
        <section className="pb-8">
          <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="rounded-2xl overflow-hidden shadow-xl">
              <img 
                src={imageUrl}
                alt={post.title}
                className="w-full h-auto object-cover"
              />
            </div>
          </div>
        </section>
      )}

      {/* Main Content */}
      <section className="pb-16 md:pb-20">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Title */}
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-neutral-900 mb-6 leading-tight" dir="auto">
            {post.title}
          </h1>
          
          {/* Meta Info and Share Buttons */}
          <div className="flex flex-wrap items-center justify-between gap-4 pb-6 mb-8 border-b border-neutral-200">
            <div className="flex flex-wrap items-center gap-5 text-neutral-600 text-sm">
              {post.author && (
                <div className="flex items-center gap-2">
                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-primary-100 to-primary-200 flex items-center justify-center">
                    <span className="text-primary-700 text-sm font-bold">
                      {post.author.name.charAt(0).toUpperCase()}
                    </span>
                  </div>
                  <div>
                    <p className="font-semibold text-neutral-900">{post.author.name}</p>
                    <p className="text-xs text-neutral-500">Author</p>
                  </div>
                </div>
              )}
              {post.published_at && (
                <span className="flex items-center gap-2">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  {formatDate(post.published_at)}
                </span>
              )}
              {post.reading_time > 0 && (
                <span className="flex items-center gap-2">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  {post.reading_time_formatted || `${post.reading_time} min read`}
                </span>
              )}
            </div>

            {/* Share Buttons */}
            <div className="flex items-center gap-2">
              <span className="text-sm font-semibold text-neutral-700 mr-1">Share:</span>
              <a
                href={getShareUrl('facebook')}
                onClick={(e) => handleShare('facebook', e)}
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-full bg-[#1877F2] hover:bg-[#166FE5] text-white flex items-center justify-center transition-colors"
                title="Share on Facebook"
                aria-label="Share on Facebook"
              >
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                </svg>
              </a>
              <a
                href={getShareUrl('twitter')}
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-full bg-[#1DA1F2] hover:bg-[#1A94DA] text-white flex items-center justify-center transition-colors"
                title="Share on Twitter"
                aria-label="Share on Twitter"
              >
                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                </svg>
              </a>
              <a
                href={getShareUrl('linkedin')}
                onClick={(e) => handleShare('linkedin', e)}
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-full bg-[#0A66C2] hover:bg-[#004182] text-white flex items-center justify-center transition-colors"
                title="Share on LinkedIn"
                aria-label="Share on LinkedIn"
              >
                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                </svg>
              </a>
              <a
                href={getShareUrl('whatsapp')}
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-full bg-[#25D366] hover:bg-[#20BA5A] text-white flex items-center justify-center transition-colors"
                title="Share on WhatsApp"
                aria-label="Share on WhatsApp"
              >
                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                </svg>
              </a>
              <a
                href={getShareUrl('email')}
                className="w-9 h-9 rounded-full bg-neutral-600 hover:bg-neutral-700 text-white flex items-center justify-center transition-colors"
                title="Share via Email"
                aria-label="Share via Email"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </a>
              <button
                onClick={(e) => handleShare('copy', e)}
                className="w-9 h-9 rounded-full bg-neutral-100 hover:bg-neutral-200 text-neutral-700 flex items-center justify-center transition-colors relative"
                title="Copy link"
                aria-label="Copy link"
              >
                {copied ? (
                  <svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                ) : (
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                  </svg>
                )}
              </button>
            </div>
          </div>

          {/* Excerpt */}
          {post.excerpt && (
            <div className="mb-10 p-6 bg-primary-50 border-l-4 border-primary-600 rounded-r-xl">
              <p className="text-xl text-neutral-700 leading-relaxed italic font-medium" dir="auto">
                {post.excerpt}
              </p>
            </div>
          )}

          {/* Article Content */}
          <article className="prose prose-lg max-w-none 
            prose-headings:text-neutral-900 prose-headings:font-bold prose-headings:tracking-tight
            prose-h1:text-3xl prose-h1:mb-6 prose-h1:mt-8
            prose-h2:text-2xl prose-h2:mb-5 prose-h2:mt-8 prose-h2:pb-3 prose-h2:border-b prose-h2:border-neutral-200
            prose-h3:text-xl prose-h3:mb-4 prose-h3:mt-6
            prose-p:text-neutral-700 prose-p:leading-relaxed prose-p:mb-6 prose-p:text-lg
            prose-a:text-primary-600 prose-a:font-medium prose-a:no-underline hover:prose-a:underline
            prose-strong:text-neutral-900 prose-strong:font-semibold
            prose-ul:my-6 prose-ol:my-6 prose-ul:list-disc prose-ol:list-decimal
            prose-li:my-2 prose-li:text-neutral-700 prose-li:leading-relaxed
            prose-blockquote:border-l-4 prose-blockquote:border-primary-600 prose-blockquote:pl-6 prose-blockquote:italic prose-blockquote:text-neutral-600 prose-blockquote:bg-primary-50/50 prose-blockquote:py-4 prose-blockquote:pr-6 prose-blockquote:rounded-r-lg prose-blockquote:my-8
            prose-img:rounded-xl prose-img:shadow-lg prose-img:my-8 prose-img:w-full
            prose-code:text-primary-700 prose-code:bg-primary-50 prose-code:px-2 prose-code:py-1 prose-code:rounded prose-code:text-sm prose-code:font-mono
            prose-pre:bg-neutral-900 prose-pre:text-neutral-100 prose-pre:rounded-xl prose-pre:p-6 prose-pre:my-6 prose-pre:overflow-x-auto
            prose-hr:my-8 prose-hr:border-neutral-200
            [&_*]:dir-auto"
            dir="auto"
            dangerouslySetInnerHTML={{ __html: post.content }}
          />

          {/* Tags */}
          {post.tags && post.tags.length > 0 && (
            <div className="mt-12 pt-8 border-t border-neutral-200">
              <div className="flex items-center gap-2 mb-4">
                <svg className="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                </svg>
                <h3 className="text-base font-bold text-neutral-900">Tags</h3>
              </div>
              <div className="flex flex-wrap gap-2">
                {post.tags.map((tag, idx) => (
                  <Link
                    key={idx}
                    href={`/blog?tag=${tag}`}
                    className="px-4 py-2 bg-neutral-50 text-neutral-700 text-sm font-medium rounded-lg border border-neutral-200 hover:bg-primary-50 hover:text-primary-700 hover:border-primary-200 transition-all"
                  >
                    #{tag}
                  </Link>
                ))}
              </div>
            </div>
          )}

        </div>
      </section>

      {/* Related Posts */}
      {relatedPosts.length > 0 && (
        <section className="py-16 md:py-20 bg-neutral-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between mb-10">
              <div>
                <h2 className="text-3xl font-bold text-neutral-900 mb-2">Related Articles</h2>
                <p className="text-neutral-600">Continue exploring similar topics</p>
              </div>
              <Link
                href="/blog"
                className="hidden sm:inline-flex items-center gap-2 px-6 py-3 bg-white text-neutral-700 font-semibold rounded-lg border border-neutral-200 hover:bg-neutral-50 hover:border-neutral-300 transition-all shadow-sm"
              >
                View All
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </Link>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {relatedPosts.map((relatedPost) => {
                const imageUrl = relatedPost.featured_image || relatedPost.thumbnail || 'https://via.placeholder.com/800x600?text=Blog+Post';
                return (
                  <Link
                    key={relatedPost.id}
                    href={`/blog/${relatedPost.slug}`}
                    className="group block bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 border border-neutral-100 overflow-hidden"
                  >
                    {/* Image */}
                    <div className="relative h-48 w-full overflow-hidden bg-neutral-100">
                      <img 
                        src={imageUrl}
                        alt={relatedPost.title}
                        className="w-full h-full object-cover scale-100 group-hover:scale-110 transition-transform duration-700"
                      />
                      {relatedPost.category && (
                        <div className="absolute top-4 left-4">
                          <span className="px-3 py-1 bg-white/95 backdrop-blur-sm text-primary-600 text-xs font-bold rounded-full shadow-md">
                            {relatedPost.category}
                          </span>
                        </div>
                      )}
                    </div>

                    {/* Content */}
                    <div className="p-6">
                      {/* Meta Info */}
                      <div className="flex items-center gap-3 text-xs text-neutral-500 mb-3 font-medium">
                        {relatedPost.published_at && (
                          <span className="flex items-center gap-1.5">
                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            {new Date(relatedPost.published_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
                          </span>
                        )}
                      </div>

                      {/* Title */}
                      <h3 className="text-lg font-bold text-neutral-900 mb-2 group-hover:text-primary-600 transition-colors line-clamp-2 leading-tight">
                        {relatedPost.title}
                      </h3>

                      {/* Excerpt */}
                      {relatedPost.excerpt && (
                        <p className="text-neutral-600 leading-relaxed text-sm line-clamp-2">
                          {relatedPost.excerpt}
                        </p>
                      )}

                      {/* Read More */}
                      <div className="mt-4 flex items-center gap-2 text-primary-600 font-semibold text-sm group-hover:gap-3 transition-all">
                        Read Article
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
                        </svg>
                      </div>
                    </div>
                  </Link>
                );
              })}
            </div>

            {/* Mobile View All Button */}
            <div className="mt-8 text-center sm:hidden">
              <Link
                href="/blog"
                className="inline-flex items-center gap-2 px-6 py-3 bg-white text-neutral-700 font-semibold rounded-lg border border-neutral-200 hover:bg-neutral-50 hover:border-neutral-300 transition-all shadow-sm"
              >
                View All Articles
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </Link>
            </div>
          </div>
        </section>
      )}

      <Footer />
    </div>
  );
}