---
import pourquoi from '../content/settings/pourquoi.json';

const iconPaths: Record<string, string> = {
  shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
  clock: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M12 6v6l4 2',
  check: 'M20 6L9 17l-5-5',
  team: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75',
  star: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',
  location: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z M15 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0z',
};

function getIconPath(icon: string): string {
  return iconPaths[icon] ?? iconPaths.check;
}
---

<section class="why-section">
  <div class="container-site">
    <div class="section-header">
      <h2 class="section-title">{pourquoi.title}</h2>
      <p class="section-subtitle">{pourquoi.subtitle}</p>
    </div>
    <div class="why-grid">
      {pourquoi.cards.map((card) => (
        <div class="why-card">
          <div class="why-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              {card.icon === 'clock' ? (
                <>
                  <circle cx="12" cy="12" r="10"/>
                  <polyline points="12,6 12,12 16,14"/>
                </>
              ) : card.icon === 'team' ? (
                <>
                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                  <circle cx="9" cy="7" r="4"/>
                  <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                  <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                </>
              ) : card.icon === 'location' ? (
                <>
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                  <circle cx="12" cy="10" r="3"/>
                </>
              ) : (
                <path d={getIconPath(card.icon)}/>
              )}
            </svg>
          </div>
          <h3>{card.title}</h3>
          <p>{card.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .why-section {
    padding: 5rem 0;
    background-color: var(--color-brand-50);
  }

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

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

  .why-card {
    background-color: #ffffff;
    border: 1.5px solid var(--color-brand-100);
    border-radius: 8px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

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

  .why-card h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brand-600);
  }

  .why-card p {
    font-size: 0.9rem;
    color: var(--color-gray-dark);
    opacity: 0.8;
    line-height: 1.6;
  }

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

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