---
interface Props {
  title: string;
  description: string;
  icon?: string;
  slug: string;
  featured?: boolean;
}

const { title, description, icon, slug, featured = false } = Astro.props;

const icons: Record<string, string> = {
  interior: `<svg width="28" height="28" 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="28" height="28" 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="28" height="28" 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="28" height="28" 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="28" height="28" 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>`,
};

const iconSvg = icon ? (icons[icon] ?? icons['interior']) : icons['interior'];
const serviceId = slug.replace('fr/', '');
---

<article class:list={['service-card', { featured }]} id={serviceId}>
  <div class="service-card-icon" aria-hidden="true" set:html={iconSvg} />
  <div class="service-card-body">
    <h3 class="service-card-title">{title}</h3>
    <p class="service-card-desc">{description}</p>
    <a href={`/services#${serviceId}`} class="service-card-link">
      En savoir plus
      <svg width="14" height="14" 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>
</article>

<style>
  .service-card {
    background-color: #ffffff;
    border: 1.5px solid var(--color-brand-100);
    border-radius: 8px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  }

  .service-card:hover {
    box-shadow: 0 8px 24px rgba(49, 71, 50, 0.1);
    transform: translateY(-2px);
    border-color: var(--color-brand-400);
  }

  .service-card.featured {
    border-color: var(--color-brand-300);
    background-color: var(--color-brand-50);
  }

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

  .service-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1;
  }

  .service-card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-brand-600);
    line-height: 1.25;
  }

  .service-card-desc {
    font-size: 0.9375rem;
    color: var(--color-gray-dark);
    line-height: 1.6;
    opacity: 0.85;
    flex: 1;
  }

  .service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-brand-600);
    transition: gap 0.2s ease;
    margin-top: auto;
    padding-top: 0.25rem;
  }

  .service-card-link:hover {
    gap: 0.625rem;
  }
</style>
