import Link from 'next/link';
import Image from 'next/image';
import { services } from '@/lib/services';
import LayoutContainer from '@/components/layout/LayoutContainer';
import styles from './ServicesGrid.module.css';

export default function ServicesGrid() {
  return (
    <section className={styles.servicesSection}>
      <LayoutContainer>
        <h2 className={styles.title}>Услуги</h2>
        <div className={styles.grid}>
          {services.map((service) => (
            <Link
              key={service.slug}
              href={`/services/${service.slug}`}
              className={styles.card}
            >
              <div className={styles.imageWrapper}>
                <Image
                  src={service.coverImage}
                  alt={service.title}
                  fill
                  className={styles.image}
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  loading="lazy"
                />
                <div className={styles.overlay} />
              </div>
              <div className={styles.content}>
                <h3 className={styles.cardTitle}>{service.title}</h3>
                <span className={styles.linkText}>Подробнее →</span>
              </div>
            </Link>
          ))}
        </div>
      </LayoutContainer>
    </section>
  );
}

