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

// Force dynamic rendering to pick up volume-mounted content
export const dynamic = 'force-dynamic'

export default async function HomePage() {
  const allPosts = getSortedPostsData()
  const featuredPost = getFeaturedPost()
  const recentPosts = allPosts.slice(1, 7) // Skip the first post since it's featured
  const additionalPosts = allPosts.slice(8, 20) // Additional posts for newspaper columns

  return (
    <main className="min-h-screen">
      <BlogHeader />
      
      {/* Featured Post - Full Width Hero */}
      {featuredPost && (
        <FeaturedPostHero post={featuredPost} />
      )}

      {/* Recent Posts - Responsive Newspaper Layout */}
      <section className="w-full px-4 sm:px-8 py-16 border-t border-carbon-200 dark:border-carbon-800">
        {/* Section Header - Newspaper Style */}
        <div className="max-w-6xl mx-auto">
          {recentPosts.length > 0 ? (
            <div className="flex flex-col 2xl:flex-row gap-8">
              {/* Main Content Area - Primary Articles */}
              <div className="flex-1 max-w-6xl mx-auto 2xl:mx-0">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-8">
                  {recentPosts.slice(0, 4).map((post) => (
                    <PostCard key={post.slug} post={post} />
                  ))}
                </div>
              </div>

              {/* Sidebar Articles - Only on 2XL+ screens if more articles available */}
              {/* {recentPosts.length > 4 && (
                <aside className="hidden 2xl:block w-80 space-y-6">
                  <div className="bg-sand-50/50 dark:bg-carbon-900/30 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">
                      More Analysis
                    </h3>
                    <div className="space-y-4">
                      {recentPosts.slice(4, 7).map((post) => (
                        <article key={post.slug} className="group">
                          <a href={`/posts/${post.slug}`} className="block">
                            <div className="mb-1">
                              <span className="text-mulberry-600 dark:text-mulberry-400 text-xs font-bold uppercase tracking-wide">
                                {post.tags?.[0] || 'Analysis'}
                              </span>
                            </div>
                            <h4 className="text-sm font-bold text-carbon-950 dark:text-carbon-100 leading-tight mb-2 group-hover:text-carbon-700 dark:group-hover:text-mulberry-200 transition-colors">
                              {post.title}
                            </h4>
                            <div className="flex items-center text-xxs text-carbon-600 dark:text-carbon-500">
                              <span>{post.author?.name || 'CHORUS Team'}</span>
                              <span className="mx-1">•</span>
                              <span>{post.readingTime} min read</span>
                            </div>
                          </a>
                        </article>
                      ))}
                    </div>
                  </div>
                </aside>
              )} */}
            </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>
          )}
        </div>
      </section>

      {/* Newspaper Column Layout - Additional Articles */}
      {additionalPosts.length > 0 && (
        <section className="w-full px-4 sm:px-8 py-16 border-t border-carbon-200 dark:border-carbon-800 bg-sand-25/20 dark:bg-carbon-950/50">
          <div className="max-w-6xl mx-auto">
            {/* Section Header */}
            <div className="flex items-center mb-12">
              <div className="flex-1 h-px bg-carbon-300 dark:bg-carbon-700"></div>
              <div className="px-6">
                <h2 className="text-2xl md:text-3xl font-bold text-carbon-950 dark:text-carbon-100 text-center">
                  Archive
                </h2>
                <p className="text-center text-carbon-600 dark:text-carbon-500 text-sm mt-1 italic">
                  Deeper insights and analysis
                </p>
              </div>
              <div className="flex-1 h-px bg-carbon-300 dark:bg-carbon-700"></div>
            </div>

            {/* Flexbox Newspaper Columns - 4 Narrow Equal Columns */}
            <div className="hidden lg:flex gap-6">
              {/* Column 1 */}
              <div className="flex-1 space-y-4">
                {additionalPosts.slice(0, 3).map((post) => (
                  <article key={post.slug} className="group border-b border-carbon-200 dark:border-carbon-700 pb-4 mb-4">
                    <a href={`/posts/${post.slug}`} className="block">
                      {/* <div className="mb-2">
                        <span className="text-mulberry-600 dark:text-mulberry-400 text-xs font-bold uppercase tracking-wide">
                          {post.tags?.[0] || 'Analysis'}
                        </span>
                      </div> */}
                      <h3 className="text-sm font-bold text-carbon-950 dark:text-carbon-100 leading-tight mb-2 group-hover:text-carbon-700 dark:group-hover:text-mulberry-200 transition-colors">
                        {post.title}
                      </h3>
                      <div className="mb-chorus-sm flex items-center text-xxs text-carbon-500 dark:text-carbon-600">
                        <span>{post.author?.name || 'CHORUS Team'}</span>
                        <span className="mx-1">•</span>
                        <span>{post.readingTime} min</span>
                      </div>
                      <p className="text-xs text-carbon-600 dark:text-carbon-400 leading-relaxed mb-2 line-clamp-3">
                        {post.description}
                      </p>
                    </a>
                  </article>
                ))}
              </div>

              {/* Column 2 */}
              <div className="flex-1 space-y-4">
                {additionalPosts.slice(3, 6).map((post) => (
                  <article key={post.slug} className="group border-b border-carbon-200 dark:border-carbon-700 pb-4 mb-4">
                    <a href={`/posts/${post.slug}`} className="block">
                      {/* <div className="mb-2">
                        <span className="text-mulberry-600 dark:text-mulberry-400 text-xs font-bold uppercase tracking-wide">
                          {post.tags?.[0] || 'Analysis'}
                        </span>
                      </div> */}
                      <h3 className="text-sm font-bold text-carbon-950 dark:text-carbon-100 leading-tight mb-2 group-hover:text-carbon-700 dark:group-hover:text-mulberry-200 transition-colors">
                        {post.title}
                      </h3>

                      <div className="mb-chorus-sm flex items-center text-xxs text-carbon-500 dark:text-carbon-600">
                        <span>{post.author?.name || 'CHORUS Team'}</span>
                        <span className="mx-1">•</span>
                        <span>{post.readingTime} min</span>
                      </div>
                      <p className="text-xs text-carbon-600 dark:text-carbon-400 leading-relaxed mb-2 line-clamp-3">
                        {post.description}
                      </p>
                    </a>
                  </article>
                ))}
              </div>

              {/* Column 3 */}
              <div className="flex-1 space-y-4">
                {additionalPosts.slice(6, 9).map((post) => (
                  <article key={post.slug} className="group border-b border-carbon-200 dark:border-carbon-700 pb-4 mb-4">
                    <a href={`/posts/${post.slug}`} className="block">
                      {/* <div className="mb-2">
                        <span className="text-mulberry-600 dark:text-mulberry-400 text-xs font-bold uppercase tracking-wide">
                          {post.tags?.[0] || 'Analysis'}
                        </span>
                      </div> */}
                      <h3 className="text-sm font-bold text-carbon-950 dark:text-carbon-100 leading-tight mb-2 group-hover:text-carbon-700 dark:group-hover:text-mulberry-200 transition-colors">
                        {post.title}
                      </h3>

                      <div className="mb-chorus-sm flex items-center text-xxs text-carbon-500 dark:text-carbon-600">
                        <span>{post.author?.name || 'CHORUS Team'}</span>
                        <span className="mx-1">•</span>
                        <span>{post.readingTime} min</span>
                      </div>
                      <p className="text-xs text-carbon-600 dark:text-carbon-400 leading-relaxed mb-2 line-clamp-3">
                        {post.description}
                      </p>
                    </a>
                  </article>
                ))}
              </div>

              {/* Column 4 */}
              <div className="flex-1 space-y-4">
                {additionalPosts.slice(9, 12).map((post) => (
                  <article key={post.slug} className="group border-b border-carbon-200 dark:border-carbon-700 pb-4 mb-4">
                    <a href={`/posts/${post.slug}`} className="block">
                      {/* <div className="mb-2">
                        <span className="text-mulberry-600 dark:text-mulberry-400 text-xs font-bold uppercase tracking-wide">
                          {post.tags?.[0] || 'Analysis'}
                        </span>
                      </div> */}
                      <h3 className="text-sm font-bold text-carbon-950 dark:text-carbon-100 leading-tight mb-2 group-hover:text-carbon-700 dark:group-hover:text-mulberry-200 transition-colors">
                        {post.title}
                      </h3>
                      <div className="mb-chorus-sm flex items-center text-xxs text-carbon-500 dark:text-carbon-600">
                        <span>{post.author?.name || 'CHORUS Team'}</span>
                        <span className="mx-1">•</span>
                        <span>{post.readingTime} min</span>
                      </div>
                      <p className="text-xs text-carbon-600 dark:text-carbon-400 leading-relaxed mb-2 line-clamp-3">
                        {post.description}
                      </p>
                      
                    </a>
                  </article>
                ))}
              </div>
            </div>

            {/* Mobile/Tablet Fallback - Single Column */}
            <div className="lg:hidden space-y-6">
              {additionalPosts.slice(0, 8).map((post) => (
                <article key={post.slug} className="group border-b border-carbon-200 dark:border-carbon-700 pb-4 mb-4">
                  <a href={`/posts/${post.slug}`} className="block">
                    <div className="mb-2">
                      <span className="text-mulberry-600 dark:text-mulberry-400 text-xs font-bold uppercase tracking-wide">
                        {post.tags?.[0] || 'Analysis'}
                      </span>
                    </div>
                    <h3 className="text-lg font-bold text-carbon-950 dark:text-carbon-100 leading-tight mb-3 group-hover:text-carbon-700 dark:group-hover:text-mulberry-200 transition-colors">
                      {post.title}
                    </h3>
                    <p className="text-sm text-carbon-600 dark:text-carbon-400 leading-relaxed mb-3">
                      {post.description}
                    </p>
                    <div className="flex items-center text-xxs text-carbon-500 dark:text-carbon-600">
                      <span>{post.author?.name || 'CHORUS Team'}</span>
                      <span className="mx-2">•</span>
                      <time dateTime={post.date}>
                        {new Date(post.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                      </time>
                      <span className="mx-2">•</span>
                      <span>{post.readingTime} min read</span>
                    </div>
                  </a>
                </article>
              ))}
            </div>
          </div>
        </section>
      )}

      <BlogFooter />
    </main>
  )
}