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">Blog</div>
            <div className="mg-top-4x-extra-small">
              <h1>Latest news</h1>
            </div>
            <div className="mg-top-5x-extra-small">
              <p>Lorem ipsum dolor sit amet consectetur nec quis suspendisse nulla.</p>
            </div>
          </div>
          <form action="/search" className="form-block _365px position-relative---z-index-1 w-form">
            <label htmlFor="search" className="hidden">Search</label>
            <input className="input w-input" maxLength={256} name="query" placeholder="Search for articles…" type="search" id="search" required />
            <div className="button-inside-input-wrapper left-mbp">
              <input type="submit" className="form-button inside-input light-mode w-button" value="Search" />
            </div>
          </form>
        </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>
  )
}