chorus-ping-blog/components/FeaturedPostHero.tsx

import Link from 'next/link'
import { BlogPost } from '@/types/blog'

interface FeaturedPostHeroProps {
  post: BlogPost
}

export default function FeaturedPostHero({ post }: FeaturedPostHeroProps) {
  const formattedDate = new Date(post.date).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long', 
    day: 'numeric'
  })

  return (
    <article className="group border-y-2 border-carbon-300 dark:border-carbon-700 bg-gradient-to-r from-white via-sand-50 to-white dark:from-carbon-950 dark:via-mulberry-950/30 dark:to-carbon-950 transition-all duration-300">
      <Link href={`/posts/${post.slug}`} className="block">
        <div className="max-w-6xl mx-auto px-8 py-12">
          {/* Newspaper-style header */}
          <div className="flex items-center space-x-4 mb-6">
            <div className="h-px bg-carbon-400 dark:bg-carbon-600 flex-1"></div>
            <div className="bg-carbon-900 dark:bg-mulberry-700 text-white dark:text-mulberry-100 px-4 py-1 text-xs font-bold uppercase tracking-wider">
              Featured Article
            </div>
            <div className="h-px bg-carbon-400 dark:bg-carbon-600 flex-1"></div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
            {/* Main content - spans 2 columns on large screens */}
            <div className="lg:col-span-2">
              {/* Newspaper-style kicker */}
              <div className="mb-4">
                <span className="text-mulberry-700 dark:text-mulberry-400 text-sm font-bold uppercase tracking-wide">
                  {post.tags?.[0] || 'Contextual AI'}
                </span>
              </div>

              {/* Large headline */}
              <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-carbon-950 dark:text-carbon-100 leading-tight mb-6 group-hover:text-carbon-700 dark:group-hover:text-mulberry-200 transition-colors">
                {post.title}
              </h1>

              {/* Subhead/description */}
              <p className="text-xl md:text-2xl text-carbon-700 dark:text-carbon-300 leading-relaxed mb-6 font-light">
                {post.description}
              </p>

              {/* Byline and meta */}
              <div className="flex items-center space-x-6 text-sm">
                <div className="flex items-center space-x-3">
                  <div className="w-10 h-10 bg-gradient-to-br from-mulberry-400 to-ocean-500 rounded-full flex items-center justify-center">
                    <span className="text-carbon-950 font-bold text-sm">
                      {post.author?.name?.charAt(0) || 'C'}
                    </span>
                  </div>
                  <div>
                    <p className="text-carbon-950 dark:text-carbon-100 font-semibold">
                      By {post.author?.name || 'CHORUS Team'}
                    </p>
                    {post.author?.role && (
                      <p className="text-carbon-600 dark:text-carbon-500 text-xs">
                        {post.author.role}
                      </p>
                    )}
                  </div>
                </div>

                <div className="h-4 w-px bg-carbon-400 dark:bg-carbon-600"></div>

                <div className="text-carbon-600 dark:text-carbon-500">
                  <time dateTime={post.date} className="font-medium">
                    {formattedDate}
                  </time>
                  <span className="mx-2">•</span>
                  <span>{post.readingTime} min read</span>
                </div>
              </div>
            </div>

            {/* Sidebar - article highlights */}
            <div className="lg:col-span-1">
              <div className="bg-sand-100/50 dark:bg-carbon-900/50 border border-carbon-200 dark:border-carbon-800 p-6 rounded-lg">
                <h3 className="font-bold text-carbon-950 dark:text-carbon-100 mb-4 text-lg border-b border-carbon-300 dark:border-carbon-700 pb-2">
                  In This Article
                </h3>
                <ul className="space-y-2 text-sm text-carbon-700 dark:text-carbon-300">
                  <li className="flex items-start space-x-2">
                    <span className="text-mulberry-600 dark:text-mulberry-400 mt-1">•</span>
                    <span>Key insights into AI orchestration</span>
                  </li>
                  <li className="flex items-start space-x-2">
                    <span className="text-mulberry-600 dark:text-mulberry-400 mt-1">•</span>
                    <span>Real-world implementation strategies</span>
                  </li>
                  <li className="flex items-start space-x-2">
                    <span className="text-mulberry-600 dark:text-mulberry-400 mt-1">•</span>
                    <span>Future implications for the industry</span>
                  </li>
                </ul>
                
                {/* Tags */}
                <div className="mt-6 pt-4 border-t border-carbon-300 dark:border-carbon-700">
                  <p className="text-xs text-carbon-600 dark:text-carbon-500 mb-2 font-medium uppercase tracking-wide">
                    Topics
                  </p>
                  <div className="flex flex-wrap gap-1">
                    {post.tags?.slice(0, 4).map((tag) => (
                      <span key={tag} className="bg-carbon-200 dark:bg-carbon-800 text-carbon-700 dark:text-carbon-300 px-2 py-1 text-xs rounded font-medium">
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Link>
    </article>
  )
}