---
import BaseLayout from '../layouts/BaseLayout.astro';
import CTABanner from '../components/CTABanner.astro';
import { getCollection, render } from 'astro:content';
import { getLangFromUrl, t } from '../i18n/utils';

const lang = getLangFromUrl(Astro.url);

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

const icons: Record<string, string> = {
  interior: `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></svg>`,
  exterior: `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 22V12l10-10 10 10v10"/><path d="M15 22v-4a3 3 0 0 0-6 0v4"/><path d="M22 22H2"/></svg>`,
  commercial: `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>`,
  decoration: `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>`,
  renovation: `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>`,
};

return Astro.redirect('/404');

---

<BaseLayout
  title={t(lang, 'nav.services')}
  description="Découvrez tous nos services de peinture et décoration à Laval et sur la Rive-Nord : peinture intérieure et extérieure, commerciale, décoration d'intérieur et rénovation."
  canonical="/services"
>
  <!-- Page header -->
  <section class="page-header">
    <div class="container-site">
      <nav class="breadcrumb" aria-label="Fil d'Ariane">
        <a href="/">{t(lang, 'nav.accueil')}</a>
        <span aria-hidden="true">›</span>
        <span aria-current="page">{t(lang, 'nav.services')}</span>
      </nav>
      <h1 class="page-title">{t(lang, 'services.title')}</h1>
      <p class="page-subtitle">{t(lang, 'services.subtitle')}</p>
    </div>
  </section>

  <!-- Services listing -->
  <section class="services-listing">
    <div class="container-site">
      {services.length > 0 ? (
        services.map(async (service) => {
          const { Content } = await render(service);
          const iconSvg = service.data.icon ? (icons[service.data.icon] ?? icons['interior']) : icons['interior'];
          const serviceId = service.id.replace('fr/', '');
          return (
            <article class="service-detail" id={serviceId}>
              <div class="service-detail-header">
                <div class="service-detail-icon" set:html={iconSvg} />
                <div>
                  <h2 class="service-detail-title">{service.data.title}</h2>
                  <p class="service-detail-lead">{service.data.description}</p>
                </div>
              </div>
              <div class="service-detail-content prose">
                <Content />
              </div>
              <div class="service-detail-cta">
                <a href="/soumission" class="btn-primary">
                  {t(lang, 'cta.soumission.short')}
                </a>
              </div>
            </article>
          );
        })
      ) : (
        <p class="services-empty">{t(lang, 'services.empty')}</p>
      )}
    </div>
  </section>

  <CTABanner />
</BaseLayout>

<style>
  .page-header {
    background-color: var(--color-brand-50);
    border-bottom: 1.5px solid var(--color-brand-100);
    padding: 3rem 0 2.5rem;
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-brand-400);
    margin-bottom: 1rem;
  }

  .breadcrumb a {
    color: var(--color-brand-600);
    transition: opacity 0.2s ease;
  }

  .breadcrumb a:hover {
    opacity: 0.7;
  }

  .breadcrumb span[aria-current] {
    color: var(--color-gray-dark);
    opacity: 0.7;
  }

  .page-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--color-brand-600);
    margin-bottom: 0.75rem;
  }

  .page-subtitle {
    font-size: 1.125rem;
    color: var(--color-gray-dark);
    opacity: 0.75;
    max-width: 560px;
  }

  .services-listing {
    padding: 4rem 0 5rem;
  }

  .service-detail {
    padding: 3rem 0;
    border-bottom: 1.5px solid var(--color-brand-100);
  }

  .service-detail:last-of-type {
    border-bottom: none;
  }

  .service-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .service-detail-icon {
    width: 64px;
    height: 64px;
    background-color: var(--color-brand-600);
    color: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .service-detail-title {
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    color: var(--color-brand-600);
    margin-bottom: 0.5rem;
  }

  .service-detail-lead {
    font-size: 1.0625rem;
    color: var(--color-gray-dark);
    opacity: 0.8;
    line-height: 1.6;
    max-width: 640px;
  }

  .service-detail-content {
    max-width: 720px;
    margin-bottom: 2rem;
  }

  /* Prose styles */
  .prose :global(h2) {
    font-size: 1.25rem;
    color: var(--color-brand-600);
    font-family: var(--font-display);
    margin: 1.5rem 0 0.75rem;
  }

  .prose :global(ul) {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .prose :global(li) {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--color-gray-dark);
    opacity: 0.85;
  }

  .prose :global(li)::before {
    content: '—';
    color: var(--color-brand-400);
    flex-shrink: 0;
    font-weight: 700;
  }

  .prose :global(p) {
    font-size: 1rem;
    color: var(--color-gray-dark);
    opacity: 0.8;
    line-height: 1.7;
    margin-bottom: 1rem;
  }

  .service-detail-cta {
    margin-top: 1rem;
  }

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

  @media (max-width: 640px) {
    .service-detail-header {
      flex-direction: column;
      gap: 1rem;
    }

    .prose :global(ul) {
      grid-template-columns: 1fr;
    }
  }
</style>
