export default function BlogSection() {
  const posts = [
    {
      id: 1,
      image: 'https://k8boaqmtfy4jtiib.public.blob.vercel-storage.com/stock/blogs-1-1.webp',
      title: 'Enhancing Accessibility with ARIA in React',
      excerpt: 'Discover the latest trends in SaaS that are shaping the future of digital solutions and can benefit your business.',
      category: 'Industry Insights',
      authorName: 'Sienna Hewitt',
      date: 'March 15, 2024',
      authorAvatar: 'https://images.pexels.com/photos/1520760/pexels-photo-1520760.jpeg?auto=compress&cs=tinysrgb&w=128',
      href: '#',
    },
    {
      id: 2,
      image: 'https://k8boaqmtfy4jtiib.public.blob.vercel-storage.com/stock/blogs-1-2.webp',
      title: 'Designing Scalable UI with Tailwind CSS',
      excerpt: 'Learn the best practices for creating web applications that can handle millions of users without breaking.',
      category: 'Web Development',
      authorName: 'Ashwin Santiago',
      date: 'March 12, 2024',
      authorAvatar: 'https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=128',
      href: '#',
    },
    {
      id: 3,
      image: 'https://k8boaqmtfy4jtiib.public.blob.vercel-storage.com/stock/blogs-1-3.webp',
      title: 'TypeScript Tips: Advanced Typing Patterns',
      excerpt: 'How to create and maintain design systems that grow with your product and team while ensuring consistency.',
      category: 'Design Systems',
      authorName: 'Natali Craig',
      date: 'March 10, 2024',
      authorAvatar: 'https://images.pexels.com/photos/698532/pexels-photo-698532.jpeg?auto=compress&cs=tinysrgb&w=128',
      href: '#',
    },
  ];

  return (
    <section className="py-16 lg:py-32">
      <div className="mx-auto w-full max-w-2xl px-4 sm:px-6 lg:max-w-7xl">
        <div className="mx-auto max-w-2xl text-center [&>p]:mx-auto [&>p]:max-w-xl">
          <h2 className="text-4xl/tight font-bold tracking-tight">Latest Insights</h2>
          <p className="text-muted-foreground mt-4 text-lg/8">Sed eu quam id quam tristique pharetra a at tortor veil dolarto. Suspendisse lorem odio sit amet libero facilisis.</p>
        </div>
        <div className="mt-12 grid gap-12 lg:mt-16 lg:grid-cols-3">
          {posts.map((post) => {
            return (
              <div key={post.id} className="flex flex-col">
                <img src={post.image} alt={post.title} className="aspect-[16/9] rounded-2xl object-cover object-center shadow-xs" />
                <div className="mt-6 inline-flex items-center gap-4">
                  <p className="text-muted-foreground text-xs font-medium">{post.category}</p>
                </div>
                <h3 className="mt-3 text-lg/snug font-semibold tracking-tight hover:opacity-85">
                  <a href={post.href}>{post.title}</a>
                </h3>
                <p className="text-muted-foreground mt-3 flex-1 text-sm/6">{post.excerpt}</p>
                <div className="[&>div>p:nth-child(2)]:text-muted-foreground mt-6 inline-flex w-auto gap-4 text-left [&>div]:text-sm/5.5 [&>div>p:first-child]:font-medium [&>img]:size-10 [&>img]:rounded-full [&>img]:object-cover">
                  <img src={post.authorAvatar} alt={post.authorName} />
                  <div>
                    <p>{post.authorName}</p>
                    <p>{post.date}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}