import { blogData, commonDescriptions } from '../../data/siteData'

export default function LatestNews() {
  return (
    <section className="py-20 bg-white" id="news">
      <div className="container mx-auto px-4">
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-8">
          <h3 className="text-3xl md:text-4xl font-bold text-title mb-4 font-sans">
            {commonDescriptions.newsTitle}
          </h3>
          <p className="text-text my-3">
            {commonDescriptions.sectionDesc}
          </p>
        </div>

        {/* Blog Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {blogData.map((post, index) => (
            <div
              key={post.id}
              className={`mt-4 ${
                index === 2 ? 'md:col-start-2 lg:col-start-auto' : ''
              }`}
            >
              <div className="grids5-info bg-white rounded-lg overflow-hidden shadow-card hover:shadow-card-hover transition-shadow">
                <a href={post.link} className="d-block zoom block overflow-hidden">
                  <img
                    src={post.image}
                    alt={post.title}
                    className="w-full h-48 object-cover transition-transform duration-500 hover:scale-110"
                  />
                </a>
                <div className="blog-info p-6">
                  <ul className="flex gap-2 mb-2">
                    {post.categories.map((cat, i) => (
                      <li key={i}>
                        <a href="#" className="text-secondary hover:text-primary text-sm">
                          {cat}{i < post.categories.length - 1 ? ',' : ''}
                        </a>
                      </li>
                    ))}
                  </ul>
                  <p className="text-text/60 text-sm mb-2">{post.date}</p>
                  <h4 className="text-lg font-bold mb-3">
                    <a href={post.link} className="text-title hover:text-secondary transition-colors">
                      {post.title}
                    </a>
                  </h4>
                  <p className="text-text mb-4">{post.description}</p>
                  <a
                    href={post.link}
                    className="text-secondary hover:text-primary font-medium transition-colors"
                  >
                    Read More <span className="fa fa-angle-right pl-1" />
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}