import React from 'react';
import ImageFlex from './ImageFlex.jsx';

// Overlapping image grid that sits below the hero and overlaps upwards by ~1/3.
export default function HeroOverlapGrid({ count = 3 }) {
  const items = Array.from({ length: 3 }, (_, i) => i + 1);

  return (
    <section aria-label="Featured previews" className="relative -mt-10 md:-mt-14 lg:-mt-16 z-20">
      <div className="container">
        <ul className="grid grid-cols-3 gap-4 sm:gap-6 md:gap-8 lg:gap-10">
          {items.map((i) => (
            <li key={i} className="overflow-hidden rounded-xl shadow-card bg-white">
              <ImageFlex
                base={`/assets/thumb-${i}`}
                alt={`Preview ${i}`}
                className="h-28 w-full object-cover md:h-40 lg:h-48"
              />
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}