import { getSortedPostsData, getFeaturedPosts } from '@/lib/blog'
import BlogHeader from '@/components/BlogHeader'
import BlogFooter from '@/components/BlogFooter'
import PostCard from '@/components/PostCard'

export default function HomePage() {
  const allPosts = getSortedPostsData()
  const featuredPosts = getFeaturedPosts()
  const recentPosts = allPosts.slice(0, 6)

  return (
    <main className="min-h-screen">
      <BlogHeader />
      
      {/* Hero Section */}
      <section className="blog-container py-16">
        <div className="max-w-3xl mx-auto text-center">
          <h1 className="text-h1 font-logo text-carbon-950 dark:text-mulberry-100 mb-6">
            Informed Agentic AI
          </h1>
          <p className="text-xl text-carbon-700 dark:text-carbon-300 leading-relaxed">
            Deep dives into AI orchestration, agent coordination, and the future of 
            intelligent systems from the team building CHORUS.
          </p>
        </div>
      </section>

      {/* Featured Posts */}
      {featuredPosts.length > 0 && (
        <section className="blog-container py-8">
          <h2 className="text-h3 font-logo text-carbon-950 dark:text-carbon-100 mb-8">Featured Posts</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {featuredPosts.map((post) => (
              <PostCard key={post.slug} post={post} featured={true} />
            ))}
          </div>
        </section>
      )}

      {/* Recent Posts */}
      <section className="blog-container py-12">
        <h2 className="text-h3 font-logo text-carbon-950 dark:text-carbon-100 mb-8">Recent Posts</h2>
        {recentPosts.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {recentPosts.map((post) => (
              <PostCard key={post.slug} post={post} />
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <div className="w-16 h-16 bg-carbon-200 dark:bg-carbon-800 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg className="w-8 h-8 text-carbon-600 dark:text-carbon-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
              </svg>
            </div>
            <h3 className="text-h5 font-semibold text-carbon-950 dark:text-carbon-200 mb-2">Coming Soon</h3>
            <p className="text-carbon-600 dark:text-carbon-400 max-w-md mx-auto">
              We're preparing some excellent content about contextual AI and agent orchestration. 
              Check back soon for our first posts!
            </p>
          </div>
        )}
      </section>

      <BlogFooter />
    </main>
  )
}