import React, { useState, useEffect } from 'react';
import { Button } from './ui/button';
import { Card, CardContent } from './ui/card';
import { Badge } from './ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
import { navigateTo } from './Router';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { CTABannerSection } from './CTABannerSection';
import { useCart } from './CartContext';
import {
  Calendar,
  Clock,
  ArrowRight,
  ChevronUp,
  Share2,
  Bookmark,
  Twitter,
  Facebook,
  Linkedin,
  Link,
  Heart,
  Eye,
  BookOpen,
  ArrowLeft,
  Star,
  MessageCircle,
  Users,
  TrendingUp,
  Award
} from 'lucide-react';

interface BlogPost {
  id: string;
  title: string;
  slug: string;
  excerpt: string;
  content: string;
  author: string;
  authorBio: string;
  authorImage: string;
  publishedDate: string;
  updatedDate?: string;
  readTime: string;
  views: number;
  likes: number;
  category: string;
  tags: string[];
  image: string;
  featured: boolean;
}

interface RelatedPost {
  id: string;
  title: string;
  slug: string;
  excerpt: string;
  author: string;
  publishedDate: string;
  readTime: string;
  category: string;
  image: string;
}

interface BlogDetailProps {
  params?: {
    slug?: string;
  };
}

// Articles data synced with Articles component for consistency
const articlesData = [
  {
    id: 1,
    title: "The Future of Leadership Development: Trends and Innovations",
    slug: "future-of-leadership-development",
    excerpt: "Explore emerging trends in leadership development and how organizations are adapting to create more effective leaders for tomorrow's challenges.",
    content: `
      <p>Leadership development is evolving rapidly in response to changing workplace dynamics, technological advances, and new generations entering the workforce. Organizations worldwide are reimagining their approach to cultivating leadership talent.</p>

      <h2>Emerging Trends in Leadership Development</h2>
      <p>Several key trends are reshaping how we develop leaders:</p>

      <ul>
        <li><strong>Personalized Learning Paths:</strong> Customized development programs based on individual strengths, weaknesses, and career aspirations.</li>
        <li><strong>Digital-First Delivery:</strong> Virtual reality simulations, AI-powered coaching, and mobile learning platforms.</li>
        <li><strong>Continuous Feedback Culture:</strong> Real-time performance insights and ongoing mentorship relationships.</li>
        <li><strong>Cross-Functional Exposure:</strong> Leaders developing broader business acumen through diverse role experiences.</li>
      </ul>

      <h2>Innovation in Leadership Development</h2>
      <p>Organizations are experimenting with new methodologies and technologies to create more effective development experiences.</p>

      <blockquote>
        <p>"The future of leadership development lies in creating adaptive, resilient leaders who can thrive in uncertainty while driving innovation and human connection."</p>
        <cite>— Sarah Johnson, Senior Leadership Consultant</cite>
      </blockquote>

      <h3>Technology-Enhanced Learning</h3>
      <p>From virtual reality leadership scenarios to AI-powered coaching platforms, technology is creating immersive development experiences that accelerate learning and skill application.</p>

      <p>The future belongs to leaders who embrace continuous learning, demonstrate emotional intelligence, and can navigate complexity with confidence and clarity.</p>
    `,
    author: "Sarah Johnson",
    authorTitle: "Senior Leadership Consultant",
    authorBio: "Sarah Johnson is a Senior Leadership Consultant with over 15 years of experience in organizational development and talent management. She specializes in designing innovative leadership programs for Fortune 500 companies.",
    authorImage: "https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop",
    publishedDate: "2024-02-20",
    readTime: "8 min read",
    category: "Leadership Development",
    tags: ["Future of Work", "Leadership Trends", "Innovation", "Strategy"],
    image: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=600&fit=crop",
    featured: true,
    views: 2400,
    likes: 45
  },
  {
    id: 2,
    title: "Emotional Intelligence: The Key to Effective Leadership",
    slug: "emotional-intelligence-in-leadership", 
    excerpt: "Discover how emotional intelligence impacts leadership effectiveness and learn practical strategies to develop your EQ.",
    content: `
      <p>Emotional intelligence has become increasingly recognized as a critical factor in leadership success. Research consistently shows that leaders with high emotional intelligence create more engaged teams, drive better business results, and build more resilient organizations.</p>

      <h2>The Four Domains of Emotional Intelligence</h2>
      <p>Daniel Goleman's framework identifies four key domains:</p>

      <ul>
        <li><strong>Self-Awareness:</strong> Understanding your emotions, strengths, and limitations.</li>
        <li><strong>Self-Management:</strong> Effectively managing your emotions and behaviors.</li>
        <li><strong>Social Awareness:</strong> Reading others' emotions and understanding group dynamics.</li>
        <li><strong>Relationship Management:</strong> Influencing and managing relationships effectively.</li>
      </ul>

      <blockquote>
        <p>"IQ gets you hired, but EQ gets you promoted. In leadership roles, emotional intelligence becomes the differentiator between good managers and great leaders."</p>
        <cite>— Dr. Michael Chen, Executive Coach</cite>
      </blockquote>

      <h2>Developing Your Emotional Intelligence</h2>
      <p>Unlike IQ, emotional intelligence can be developed throughout your career through deliberate practice, feedback, and reflection.</p>

      <h3>Practical Strategies</h3>
      <p>Start with mindfulness practices, seek feedback from trusted colleagues, and practice active listening in all your interactions. The investment in developing emotional intelligence pays dividends in leadership effectiveness.</p>
    `,
    author: "Dr. Michael Chen",
    authorTitle: "Executive Coach",
    authorBio: "Dr. Michael Chen is an Executive Coach and organizational psychologist with expertise in emotional intelligence and leadership development. He has coached hundreds of senior executives across various industries.",
    authorImage: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop",
    publishedDate: "2024-02-18",
    readTime: "6 min read",
    category: "Personal Development",
    tags: ["Emotional Intelligence", "Leadership Skills", "Communication", "Self-Awareness"],
    image: "https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=1200&h=600&fit=crop",
    featured: true,
    views: 1800,
    likes: 32
  },
  {
    id: 3,
    title: "Building High-Performing Teams: A Leader's Guide",
    slug: "building-high-performing-teams",
    excerpt: "Learn the essential strategies for creating and maintaining high-performing teams that deliver exceptional results.",
    content: `
      <p>High-performing teams don't happen by accident. They require intentional leadership, clear purpose, and the right environment to thrive. Understanding the key elements that drive team performance is essential for any leader.</p>

      <h2>Characteristics of High-Performing Teams</h2>
      <p>Research identifies several common traits among exceptional teams:</p>

      <ul>
        <li><strong>Shared Purpose:</strong> Clear understanding of goals and how individual contributions matter.</li>
        <li><strong>Psychological Safety:</strong> Environment where team members feel safe to take risks and share ideas.</li>
        <li><strong>Diverse Perspectives:</strong> Variety of backgrounds, skills, and thinking styles.</li>
        <li><strong>Effective Communication:</strong> Open, honest, and constructive dialogue.</li>
      </ul>

      <h2>Building Team Performance</h2>
      <p>Creating high-performing teams requires deliberate effort in team formation, skill development, and culture building.</p>

      <blockquote>
        <p>"Great teams are not created by chance. They are the result of intentional leadership that focuses on both individual development and collective excellence."</p>
        <cite>— Lisa Rodriguez, Team Development Specialist</cite>
      </blockquote>

      <p>The journey to high performance requires patience, consistency, and a commitment to continuous improvement at both individual and team levels.</p>
    `,
    author: "Lisa Rodriguez",
    authorTitle: "Team Development Specialist",
    authorBio: "Lisa Rodriguez is a Team Development Specialist with over 12 years of experience helping organizations build high-performing teams. She specializes in team dynamics, collaboration, and performance optimization.",
    authorImage: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop",
    publishedDate: "2024-02-15",
    readTime: "10 min read",
    category: "Team Development",
    tags: ["Team Building", "Performance", "Collaboration", "Leadership"],
    image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&h=600&fit=crop",
    featured: false,
    views: 3100,
    likes: 58
  },
  {
    id: 4,
    title: "Leading Digital Transformation: A Strategic Approach",
    slug: "digital-transformation-leadership",
    excerpt: "Navigate the complexities of digital transformation with proven leadership strategies and best practices.",
    content: `
      <p>Digital transformation is reshaping industries and organizations worldwide. Successful transformation requires strong leadership that can balance technological innovation with human-centered change management.</p>

      <h2>The Leadership Challenge</h2>
      <p>Digital transformation is as much about people and culture as it is about technology. Leaders must navigate resistance, build new capabilities, and maintain business performance during the transition.</p>

      <h3>Key Success Factors</h3>
      <ul>
        <li><strong>Vision Clarity:</strong> Articulating a compelling future state that motivates change.</li>
        <li><strong>Change Management:</strong> Supporting people through the transformation journey.</li>
        <li><strong>Technology Integration:</strong> Selecting and implementing the right solutions.</li>
        <li><strong>Cultural Evolution:</strong> Building a culture that embraces digital innovation.</li>
      </ul>

      <blockquote>
        <p>"Digital transformation succeeds when leaders focus on transforming people and processes, not just implementing technology."</p>
        <cite>— David Park, Digital Strategy Consultant</cite>
      </blockquote>

      <p>The most successful digital transformations are led by leaders who understand that technology enables transformation, but people make it happen.</p>
    `,
    author: "David Park",
    authorTitle: "Digital Strategy Consultant",
    authorBio: "David Park is a Digital Strategy Consultant with extensive experience in leading large-scale digital transformations across multiple industries. He specializes in technology strategy and organizational change.",
    authorImage: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop",
    publishedDate: "2024-02-12",
    readTime: "12 min read",
    category: "Digital Transformation",
    tags: ["Digital Strategy", "Change Management", "Technology", "Innovation"],
    image: "https://images.unsplash.com/photo-1560472355-536de3962603?w=1200&h=600&fit=crop",
    featured: false,
    views: 2700,
    likes: 41
  },
  {
    id: 5,
    title: "Crisis Leadership: Navigating Uncertainty with Confidence",
    slug: "crisis-leadership-strategies",
    excerpt: "Master the art of crisis leadership and learn how to guide your organization through challenging times.",
    content: `
      <p>Crisis situations test the mettle of leaders and reveal the true strength of an organization. Effective crisis leadership requires a unique combination of decisive action, clear communication, and emotional resilience.</p>

      <h2>Principles of Crisis Leadership</h2>
      <p>Successful crisis leaders follow key principles that help them navigate uncertainty:</p>

      <ul>
        <li><strong>Stay Calm Under Pressure:</strong> Maintaining composure to make clear-headed decisions.</li>
        <li><strong>Communicate Transparently:</strong> Providing honest, frequent updates to all stakeholders.</li>
        <li><strong>Act Decisively:</strong> Making tough decisions quickly with available information.</li>
        <li><strong>Show Empathy:</strong> Understanding and addressing the human impact of the crisis.</li>
      </ul>

      <h2>Building Crisis Resilience</h2>
      <p>The best time to prepare for a crisis is before it happens. Organizations need to build crisis response capabilities and leadership resilience proactively.</p>

      <blockquote>
        <p>"Crisis leadership is not about having all the answers—it's about maintaining trust and direction when everything seems uncertain."</p>
        <cite>— Jennifer Adams, Crisis Management Expert</cite>
      </blockquote>

      <p>Leaders who excel in crisis situations combine strategic thinking with human compassion, creating stability in the midst of chaos.</p>
    `,
    author: "Jennifer Adams",
    authorTitle: "Crisis Management Expert",
    authorBio: "Jennifer Adams is a Crisis Management Expert with over 20 years of experience helping organizations navigate complex crises. She has advised government agencies and Fortune 500 companies on crisis preparedness and response.",
    authorImage: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop",
    publishedDate: "2024-02-10",
    readTime: "9 min read",
    category: "Crisis Management",
    tags: ["Crisis Leadership", "Risk Management", "Decision Making", "Communication"],
    image: "https://images.unsplash.com/photo-1584697964358-3e14ca57658b?w=1200&h=600&fit=crop",
    featured: false,
    views: 1900,
    likes: 35
  },
  {
    id: 6,
    title: "Sustainable Leadership: Building for the Long Term",
    slug: "sustainable-leadership-practices",
    excerpt: "Explore sustainable leadership practices that create lasting value for organizations and stakeholders.",
    content: `
      <p>Sustainable leadership goes beyond short-term gains to create lasting value for all stakeholders. It requires a long-term perspective that balances profit with purpose, growth with responsibility.</p>

      <h2>The Sustainability Imperative</h2>
      <p>Modern leaders must navigate increasing expectations for environmental and social responsibility while maintaining business performance.</p>

      <h3>Key Elements of Sustainable Leadership</h3>
      <ul>
        <li><strong>Stakeholder Focus:</strong> Considering the needs of all stakeholders, not just shareholders.</li>
        <li><strong>Environmental Stewardship:</strong> Making decisions that consider environmental impact.</li>
        <li><strong>Social Responsibility:</strong> Contributing positively to communities and society.</li>
        <li><strong>Economic Viability:</strong> Ensuring long-term business sustainability.</li>
      </ul>

      <blockquote>
        <p>"Sustainable leadership is about creating value that endures beyond any individual leader's tenure, building organizations that thrive for generations."</p>
        <cite>— Robert Kim, Sustainability Consultant</cite>
      </blockquote>

      <p>The future belongs to leaders who can balance multiple bottom lines—profit, people, and planet—while driving innovation and growth.</p>
    `,
    author: "Robert Kim",
    authorTitle: "Sustainability Consultant",
    authorBio: "Robert Kim is a Sustainability Consultant specializing in ESG strategy and sustainable business practices. He has helped numerous organizations integrate sustainability into their core business strategy.",
    authorImage: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=150&h=150&fit=crop",
    publishedDate: "2024-02-08",
    readTime: "7 min read",
    category: "Strategy",
    tags: ["Sustainability", "ESG", "Long-term Thinking", "Stakeholder Value"],
    image: "https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=1200&h=600&fit=crop",
    featured: false,
    views: 1500,
    likes: 28
  }
];

// Function to get blog post by slug
const getBlogPostBySlug = (slug: string): BlogPost => {
  const article = articlesData.find(article => article.slug === slug);
  
  if (!article) {
    return {
      id: '1',
      title: 'Article Not Found',
      slug: 'not-found',
      excerpt: `The requested article "${slug}" could not be found.`,
      content: `
        <p>We're sorry, but the article you're looking for could not be found. It may have been moved or removed.</p>
        <p>Here are some available articles you can read:</p>
        <ul>
          <li><a href="/learning/articles/future-of-leadership-development">The Future of Leadership Development: Trends and Innovations</a></li>
          <li><a href="/learning/articles/emotional-intelligence-in-leadership">Emotional Intelligence: The Key to Effective Leadership</a></li>
          <li><a href="/learning/articles/building-high-performing-teams">Building High-Performing Teams: A Leader's Guide</a></li>
          <li><a href="/learning/articles/digital-transformation-leadership">Leading Digital Transformation: A Strategic Approach</a></li>
          <li><a href="/learning/articles/crisis-leadership-strategies">Crisis Leadership: Navigating Uncertainty with Confidence</a></li>
          <li><a href="/learning/articles/sustainable-leadership-practices">Sustainable Leadership: Building for the Long Term</a></li>
        </ul>
        <p><a href="/learning/articles">Return to all articles</a></p>
      `,
      author: 'KLC Team',
      authorBio: 'The Knowledge Leadership Centre team is dedicated to providing excellent leadership development resources.',
      authorImage: 'https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop',
      publishedDate: '2024-01-01',
      updatedDate: '2024-01-01',
      readTime: '1 min read',
      views: 0,
      likes: 0,
      category: 'General',
      tags: [],
      image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=600&fit=crop',
      featured: false
    };
  }
  
  return {
    id: article.id.toString(),
    title: article.title,
    slug: article.slug,
    excerpt: article.excerpt,
    content: article.content,
    author: article.author,
    authorBio: article.authorBio,
    authorImage: article.authorImage,
    publishedDate: article.publishedDate,
    updatedDate: article.publishedDate,
    readTime: article.readTime,
    views: article.views,
    likes: article.likes,
    category: article.category,
    tags: article.tags,
    image: article.image,
    featured: article.featured
  };
};

const relatedPosts: RelatedPost[] = [
  {
    id: '2',
    title: 'Emotional Intelligence: The Key to Effective Leadership',
    slug: 'emotional-intelligence-in-leadership',
    excerpt: 'Discover how emotional intelligence impacts leadership effectiveness and learn practical strategies to develop your EQ.',
    author: 'Dr. Michael Chen',
    publishedDate: '2024-02-18',
    readTime: '6 min read',
    category: 'Personal Development',
    image: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=400&h=300&fit=crop'
  },
  {
    id: '3',
    title: 'Building High-Performing Teams: A Leader\'s Guide',
    slug: 'building-high-performing-teams',
    excerpt: 'Learn the essential strategies for creating and maintaining high-performing teams that deliver exceptional results.',
    author: 'Lisa Rodriguez',
    publishedDate: '2024-02-15',
    readTime: '10 min read',
    category: 'Team Development',
    image: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&h=300&fit=crop'
  },
  {
    id: '4',
    title: 'Leading Digital Transformation: A Strategic Approach',
    slug: 'digital-transformation-leadership',
    excerpt: 'Navigate the complexities of digital transformation with proven leadership strategies and best practices.',
    author: 'David Park',
    publishedDate: '2024-02-12',
    readTime: '12 min read',
    category: 'Digital Transformation',
    image: 'https://images.unsplash.com/photo-1560472355-536de3962603?w=400&h=300&fit=crop'
  }
];

export function BlogDetail({ params }: BlogDetailProps) {
  const slug = params?.slug || '';
  const [scrollProgress, setScrollProgress] = useState(0);
  const [showBackToTop, setShowBackToTop] = useState(false);
  const [isLiked, setIsLiked] = useState(false);
  const [isBookmarked, setIsBookmarked] = useState(false);
  const { addToCart } = useCart();
  
  // Get blog post data based on slug
  const blogPost = getBlogPostBySlug(slug);

  useEffect(() => {
    document.title = `${blogPost.title} | KLC Blog`;
    window.scrollTo(0, 0);
    
    const handleScroll = () => {
      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const scrolled = (winScroll / height) * 100;
      
      setScrollProgress(scrolled);
      setShowBackToTop(winScroll > 300);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [blogPost.title]);

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

  const handleShare = (platform: string) => {
    const url = window.location.href;
    const title = blogPost.title;
    
    const shareUrls = {
      twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`,
      facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
      linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`,
      copy: url
    };

    if (platform === 'copy') {
      navigator.clipboard.writeText(url);
      alert('Link copied to clipboard!');
    } else {
      window.open(shareUrls[platform as keyof typeof shareUrls], '_blank', 'width=600,height=400');
    }
  };

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <div className="min-h-screen" style={{ backgroundColor: '#FFFFFF' }}>
      {/* Scroll Progress Bar */}
      <div className="fixed top-0 left-0 w-full h-1 z-50" style={{ backgroundColor: 'rgba(0, 0, 0, 0.1)' }}>
        <div 
          className="h-full transition-all duration-150"
          style={{ 
            width: `${scrollProgress}%`,
            backgroundColor: '#04045B'
          }}
        />
      </div>

      {/* Back to Top Button */}
      {showBackToTop && (
        <Button
          onClick={scrollToTop}
          size="icon"
          className="fixed bottom-8 right-8 z-40 rounded-full shadow-lg"
          style={{
            backgroundColor: '#04045B',
            color: 'white'
          }}
        >
          <ChevronUp className="w-4 h-4" />
        </Button>
      )}

      <main className="pt-20">
        {/* Consistent Side Gutters - Breadcrumb Navigation */}
        <div className="section-margin-x mb-8">
          <div className="flex items-center gap-3 text-small" style={{ color: '#6F6F6F' }}>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => navigateTo('/learning/articles')}
              className="p-0 h-auto font-medium hover:bg-transparent transition-colors"
              style={{ color: '#6F6F6F' }}
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Articles
            </Button>
            <span className="text-[#E5E7EB]">•</span>
            <span>{blogPost.category}</span>
          </div>
        </div>

        {/* Main Content Container with Consistent Gutters */}
        <div className="section-margin-x">
          {/* Reading Width Constraint for Better Readability */}
          <div className="max-w-4xl mx-auto">
            {/* Hero Header - Improved Spacing */}
            <header className="mb-16">
              {/* Category Badge */}
              <div className="mb-8">
                <Badge 
                  className="mb-6 text-small px-4 py-2 font-medium border-none"
                  style={{
                    backgroundColor: 'rgba(4, 4, 91, 0.1)',
                    color: '#04045B'
                  }}
                >
                  {blogPost.category}
                </Badge>
                
                {/* Improved Typography Hierarchy */}
                <h1 className="text-h1 mb-6 leading-tight" style={{ color: '#26231A' }}>
                  {blogPost.title}
                </h1>
                
                {/* Constrained Width Excerpt for Better Readability */}
                <div className="max-w-3xl">
                  <p className="text-body-lg leading-relaxed" style={{ color: '#6F6F6F' }}>
                    {blogPost.excerpt}
                  </p>
                </div>
              </div>

              {/* Enhanced Meta Bar with Cleaner Spacing */}
              <div 
                className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6 p-6 rounded-xl border"
                style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)', borderColor: 'rgba(0, 0, 0, 0.08)' }}
              >
                {/* Author Info with Improved Layout */}
                <div className="flex items-center gap-4">
                  <Avatar className="w-14 h-14 ring-2 ring-white shadow-md">
                    <AvatarImage src={blogPost.authorImage} alt={blogPost.author} />
                    <AvatarFallback className="text-subhead font-medium">{blogPost.author.split(' ').map(n => n[0]).join('')}</AvatarFallback>
                  </Avatar>
                  <div>
                    <div className="text-subhead font-medium mb-1" style={{ color: '#26231A' }}>
                      {blogPost.author}
                    </div>
                    
                    {/* Cleaner Meta Information with Subtle Dividers */}
                    <div className="flex items-center gap-4 text-small" style={{ color: '#6F6F6F' }}>
                      <span className="flex items-center gap-1.5">
                        <Calendar className="w-4 h-4" />
                        {formatDate(blogPost.publishedDate)}
                      </span>
                      
                      <div className="w-1 h-1 rounded-full" style={{ backgroundColor: '#E5E7EB' }}></div>
                      
                      <span className="flex items-center gap-1.5">
                        <Clock className="w-4 h-4" />
                        {blogPost.readTime}
                      </span>
                      
                      <div className="w-1 h-1 rounded-full" style={{ backgroundColor: '#E5E7EB' }}></div>
                      
                      <span className="flex items-center gap-1.5">
                        <Eye className="w-4 h-4" />
                        {blogPost.views.toLocaleString()}
                      </span>
                    </div>
                  </div>
                </div>

                {/* Action Buttons with Better Spacing */}
                <div className="flex items-center gap-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setIsLiked(!isLiked)}
                    className={`transition-colors ${isLiked ? 'text-red-500' : 'text-[#6F6F6F]'}`}
                  >
                    <Heart className={`w-4 h-4 mr-2 ${isLiked ? 'fill-current' : ''}`} />
                    {blogPost.likes + (isLiked ? 1 : 0)}
                  </Button>
                  
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setIsBookmarked(!isBookmarked)}
                    className={`transition-colors ${isBookmarked ? 'text-[#04045B]' : 'text-[#6F6F6F]'}`}
                  >
                    <Bookmark className={`w-4 h-4 ${isBookmarked ? 'fill-current' : ''}`} />
                  </Button>
                  
                  {/* Share Options */}
                  <div className="flex items-center gap-1 ml-2 pl-2 border-l border-[#E5E7EB]">
                    <Button variant="ghost" size="sm" onClick={() => handleShare('twitter')} className="text-[#6F6F6F] hover:text-[#04045B]">
                      <Twitter className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" onClick={() => handleShare('linkedin')} className="text-[#6F6F6F] hover:text-[#04045B]">
                      <Linkedin className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" onClick={() => handleShare('copy')} className="text-[#6F6F6F] hover:text-[#04045B]">
                      <Link className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </div>

              {/* Featured Image with Better Aspect Ratio */}
              <div className="aspect-[16/9] rounded-xl overflow-hidden mt-8 shadow-lg">
                <ImageWithFallback
                  src={blogPost.image}
                  alt={blogPost.title}
                  className="w-full h-full object-cover"
                />
              </div>
            </header>

            {/* Article Body with Enhanced Typography - Full Width */}
            <article className="mb-20">
              {/* Full Width Container - Uses complete available width */}
              <div className="w-full">
                <div 
                  className="prose prose-xl max-w-none blog-article-content w-full"
                  style={{
                    /* Enhanced Typography Hierarchy using Design System */
                    '--tw-prose-body': '#26231A',
                    '--tw-prose-headings': '#26231A',
                    '--tw-prose-lead': '#26231A',
                    '--tw-prose-links': '#04045B',
                    '--tw-prose-bold': '#26231A',
                    '--tw-prose-counters': '#6F6F6F',
                    '--tw-prose-bullets': '#6F6F6F',
                    '--tw-prose-hr': 'rgba(0, 0, 0, 0.1)',
                    '--tw-prose-quotes': '#04045B',
                    '--tw-prose-quote-borders': '#04045B',
                    '--tw-prose-captions': '#6F6F6F',
                    '--tw-prose-code': '#04045B',
                    '--tw-prose-pre-code': '#26231A',
                    '--tw-prose-pre-bg': 'rgba(0, 0, 0, 0.05)',
                    '--tw-prose-th-borders': 'rgba(0, 0, 0, 0.15)',
                    '--tw-prose-td-borders': 'rgba(0, 0, 0, 0.1)',

                    /* Typography Scale using Design System Tokens */
                    fontSize: 'var(--font-body-lg)',
                    lineHeight: '1.75',
                    fontFamily: 'var(--font-family-base)',
                    color: '#26231A',
                    width: '100%'
                  }}
                  dangerouslySetInnerHTML={{ __html: blogPost.content }}
                />
              </div>
            </article>

            {/* Enhanced Tag Pills with Hover States */}
            <div className="mb-16">
              <h3 className="text-subhead mb-6 font-medium" style={{ color: '#26231A' }}>
                Topics covered in this article
              </h3>
              <div className="flex flex-wrap gap-3">
                {blogPost.tags.map((tag) => (
                  <Badge 
                    key={tag} 
                    className="transition-all duration-200 text-body px-4 py-2 font-medium"
                    style={{
                      backgroundColor: 'rgba(4, 4, 91, 0.08)',
                      color: '#04045B',
                      border: '1px solid rgba(4, 4, 91, 0.15)'
                    }}
                  >
                    {tag}
                  </Badge>
                ))}
              </div>
            </div>

            {/* Enhanced Author Bio Card */}
            <Card className="mb-16 shadow-md border-0" style={{ backgroundColor: '#FFFFFF' }}>
              <CardContent className="p-8">
                <div className="flex items-start gap-6">
                  <Avatar className="w-20 h-20 ring-4 ring-white shadow-lg">
                    <AvatarImage src={blogPost.authorImage} alt={blogPost.author} />
                    <AvatarFallback className="text-lg font-medium">{blogPost.author.split(' ').map(n => n[0]).join('')}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <h4 className="text-h4 mb-3 font-semibold" style={{ color: '#26231A' }}>
                      About {blogPost.author}
                    </h4>
                    <p className="text-body leading-relaxed mb-6" style={{ color: '#6F6F6F' }}>
                      {blogPost.authorBio}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

        {/* Related Articles Section with Balanced Grid Layout */}
        <section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}>
          <div className="section-margin-x">
            <div className="max-w-6xl mx-auto">
              <div className="text-center mb-16">
                <div className="branded-tag-system mb-6">
                  <div className="dot"></div>
                  <span className="text">Continue Learning</span>
                </div>
                <h2 className="text-h2 mb-6 font-bold" style={{ color: '#26231A' }}>
                  Explore More Leadership Insights
                </h2>
                <p className="text-body-lg max-w-2xl mx-auto" style={{ color: '#6F6F6F' }}>
                  Discover additional strategies and frameworks to enhance your leadership effectiveness
                </p>
              </div>

              {/* Balanced Card Grid with Equal Spacing */}
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                {relatedPosts.map((post) => (
                  <Card 
                    key={post.id}
                    className="overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer group border-0"
                    onClick={() => navigateTo(`/learning/articles/${post.slug}`)}
                    style={{ backgroundColor: '#FFFFFF' }}
                  >
                    <div className="aspect-[16/10] w-full bg-gray-100 overflow-hidden relative">
                      <ImageWithFallback
                        src={post.image}
                        alt={post.title}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                    </div>
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between mb-3">
                        <Badge 
                          variant="outline" 
                          className="text-small border-none"
                          style={{
                            backgroundColor: 'rgba(4, 4, 91, 0.1)',
                            color: '#04045B'
                          }}
                        >
                          {post.category}
                        </Badge>
                        <span className="text-small" style={{ color: '#6F6F6F' }}>
                          {post.readTime}
                        </span>
                      </div>
                      
                      <h3 
                        className="mb-3 group-hover:text-blue-600 transition-colors line-clamp-2"
                        style={{
                          fontSize: 'var(--font-h4)',
                          fontWeight: 'var(--font-weight-h4)',
                          lineHeight: '1.3',
                          color: '#26231A',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        {post.title}
                      </h3>
                      
                      <p 
                        className="mb-4 line-clamp-3"
                        style={{
                          fontSize: 'var(--font-body)',
                          lineHeight: '1.5',
                          color: '#6F6F6F',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        {post.excerpt}
                      </p>

                      <div className="flex items-center justify-between pt-4 border-t" style={{ borderColor: 'rgba(0, 0, 0, 0.05)' }}>
                        <span className="text-small" style={{ color: '#6F6F6F' }}>
                          {post.author}
                        </span>
                        <span className="text-small" style={{ color: '#6F6F6F' }}>
                          {formatDate(post.publishedDate)}
                        </span>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <CTABannerSection />
      </main>
    </div>
  );
}