'use client';

import { ArrowUpRight } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import * as Badge from '@/components/ui/badge';

const posts = [
  {
    id: '1',
    href: '/blog/streamlining-onboarding-at-lumina',
    image: 'https://alignui.com/images/blocks/blog-8-image-1.jpg',
    title: 'Streamlining Onboarding at Lumina',
    date: 'May 12, 2025',
    dateTime: '2025-05-12',
  },
  {
    id: '2',
    href: '/blog/building-a-culture-of-recognition',
    image: 'https://alignui.com/images/blocks/blog-8-image-2.jpg',
    title: 'Building a Culture of Recognition',
    date: 'May 14, 2025',
    dateTime: '2025-05-14',
  },
  {
    id: '3',
    href: '/blog/the-impact-of-ai-on-people-ops',
    image: 'https://alignui.com/images/blocks/blog-8-image-3.jpg',
    title: 'The Impact of AI on People Ops',
    date: 'Aug 12, 2025',
    dateTime: '2025-08-12',
  },
  {
    id: '4',
    href: '/blog/maximizing-employee-engagement',
    image: 'https://alignui.com/images/blocks/blog-8-image-4.jpg',
    title: 'Maximizing Employee Engagement',
    date: 'Sep 23, 2025',
    dateTime: '2025-09-23',
  },
];

export default function PeopleOpsLearningBlogGrid() {
  return (
    <section className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 lg:px-7'>
        <div className='flex flex-col items-center gap-8 lg:gap-14'>
          <div className='mx-auto flex w-full flex-col items-start gap-4 lg:items-center'>
            <div className='flex w-full flex-col items-start gap-2 lg:items-center lg:gap-3'>
              <Badge.Root
                variant='lighter'
                className='bg-bg-weak-50 text-label-sm text-text-sub-600 h-7 w-fit gap-1 rounded-[9px] py-1 pr-2.5 pl-[7px] normal-case'
              >
                <span
                  className='bg-primary-base size-1.5 shrink-0 rounded-full'
                  aria-hidden='true'
                />
                Blog &amp; Insights
              </Badge.Root>
              <h2 className='text-title-h4 text-text-strong-950 lg:text-title-h2 font-[550] lg:text-center'>
                Smarter people ops start learning
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600 lg:max-w-[504px] lg:text-center'>
              Learn how top teams drive results through better campaigns,{' '}
              <span className='text-label-md text-text-sub-600'>
                sharper sales tactics, and data-backed decisions.
              </span>
            </p>
            <Link
              href='/blog'
              className='text-label-md text-text-strong-950 group flex w-fit items-center gap-1'
            >
              See all blogs
              <ArrowUpRight
                className='size-5 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5'
                aria-hidden='true'
              />
            </Link>
          </div>

          <div className='-mx-6 w-[calc(100%+48px)] lg:mx-0 lg:w-full'>
            <div
              className='flex items-start gap-5 overflow-x-auto px-6 lg:gap-6 lg:overflow-visible lg:px-0'
              style={{ scrollbarWidth: 'none' }}
            >
              {posts.map((post) => (
                <Link
                  key={post.id}
                  href={post.href}
                  className='group flex w-[288px] shrink-0 flex-col gap-4 lg:w-auto lg:flex-1'
                >
                  <div className='relative aspect-square w-full overflow-hidden rounded-[28px]'>
                    <Image
                      src={post.image}
                      alt={post.title}
                      fill
                      sizes='(min-width: 1280px) 288px, (min-width: 1024px) 25vw, 288px'
                      className='object-cover transition-transform duration-500 ease-out group-hover:scale-[1.03]'
                    />
                  </div>
                  <div className='flex w-full flex-col gap-1'>
                    <h3 className='text-label-md text-text-strong-950'>
                      {post.title}
                    </h3>
                    <time
                      dateTime={post.dateTime}
                      className='text-paragraph-sm text-text-soft-400 truncate'
                    >
                      {post.date}
                    </time>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}