---
import { getCollection } from 'astro:content';
import { getLangFromUrl, t } from '../i18n/utils';
import ServiceCard from './ServiceCard.astro';

const lang = getLangFromUrl(Astro.url);

const allServices = await getCollection('services');
const frServices = allServices
  .filter(s => s.id.startsWith('fr/'))
  .sort((a, b) => a.data.order - b.data.order)
  .slice(0, 3);
---

<section class="services-preview-section">
  <div class="container-site">
    <div class="section-header">
      <h2 class="section-title">{t(lang, 'services.title')}</h2>
      <p class="section-subtitle">{t(lang, 'services.subtitle')}</p>
    </div>

    {frServices.length > 0 ? (
      <div class="services-grid">
        {frServices.map(service => (
          <ServiceCard
            title={service.data.title}
            description={service.data.description}
            icon={service.data.icon}
            slug={service.id}
            featured={service.data.featured}
          />
        ))}
      </div>
    ) : (
      <p class="services-empty">{t(lang, 'services.empty')}</p>
    )}

    <div class="services-cta">
      <a href="/services" class="btn-outline">
        {t(lang, 'services.view_all')}
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
          <line x1="5" y1="12" x2="19" y2="12"/>
          <polyline points="12,5 19,12 12,19"/>
        </svg>
      </a>
    </div>
  </div>
</section>

<style>
  .services-preview-section {
    padding: 5rem 0;
    background-color: #ffffff;
  }

  .section-header {
    text-align: center;
    margin-bottom: 3rem;
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .services-empty {
    text-align: center;
    color: var(--color-gray-dark);
    opacity: 0.6;
    padding: 3rem 0;
  }

  .services-cta {
    margin-top: 2.5rem;
    text-align: center;
  }

  @media (max-width: 900px) {
    .services-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 540px) {
    .services-grid {
      grid-template-columns: 1fr;
    }
  }
</style>
