import { BLOG_POSTS } from "@/lib/blog-data"
import BlogCard from "@/components/BlogCard"

export default function HeroSection() {
  const featured = BLOG_POSTS.slice(0, 2)

  return (
    <section className="section top overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div data-w-id="1d4184ff-9d8d-d0a9-7964-1fe6bc1712ef" style={{ opacity: "0", filter: "blur(8px)" }} className="title-left-content-right">
          <div className="inner-container _480px">
            <div className="subtitle">产品洞察</div>
            <div className="mg-top-4x-extra-small">
              <h1>把 DAL Code 的产品判断、能力边界和建设路径讲清楚</h1>
            </div>
            <div className="mg-top-5x-extra-small">
              <p>
                这里不是泛 AI 新闻聚合，而是围绕 Intent-to-Code、Mission Mode、Smart Routing、
                Skills 与中文开发者工作流持续输出的产品文章。
              </p>
            </div>
          </div>
          <div className="inner-container _355px position-relative---z-index-1">
            <p>
              当前首批上线 {BLOG_POSTS.length} 篇文章，按产品定位、Agent 与平台能力三个主题组织，
              方便快速理解 DAL Code 到底解决什么问题。
            </p>
            <div className="mg-top-2x-extra-small">
              <p className="text-color-neutral-500">
                推荐先读置顶两篇，再继续往下看多模型路由、Open Core 与 Skills 平台的完整逻辑。
              </p>
            </div>
          </div>
        </div>
        <div className="mg-top-regular">
          <div data-w-id="1d4184ff-9d8d-d0a9-7964-1fe6bc1712fd" style={{ opacity: "0", filter: "blur(8px)" }} className="w-dyn-list">
            <div role="list" className="w-dyn-items">
              {featured.map((post) => (
                <BlogCard key={post.slug} post={post} variant="featured" />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}