# Story 4.5: Section Témoignages (JSON Dynamique)

## Status

Ready for Dev

## Story

**As a** visiteur,
**I want** lire des témoignages de clients ou employeurs,
**so that** j'ai une preuve sociale de la qualité du travail.

## Acceptance Criteria

1. Le fichier `data/testimonials.json` stocke tous les témoignages
2. La structure JSON supporte : id, quote, author_name, author_role, author_company, author_photo, project_slug (optionnel), date, featured (booléen)
3. Une fonction PHP `getTestimonials()` lit et décode le JSON
4. La section témoignages affiche dynamiquement les entrées du JSON
5. Chaque témoignage affiche : citation, nom, rôle/entreprise, photo (si disponible)
6. Si un témoignage est lié à un projet (`project_slug`), un lien vers le projet est affiché
7. Les témoignages `featured: true` peuvent être affichés sur la page d'accueil
8. Si le JSON est vide ou le fichier absent, la section affiche "Témoignages à venir" ou est masquée
9. Le design utilise des guillemets ou un style "citation" reconnaissable

## Tasks / Subtasks

- [] **Task 1 : Créer le fichier testimonials.json** (AC: 1, 2)
  - [] Créer `data/testimonials.json`
  - [] Définir la structure complète
  - [] Ajouter 3 témoignages de test

- [] **Task 2 : Créer les fonctions PHP** (AC: 3)
  - [] `getTestimonials()` - tous les témoignages
  - [] `getFeaturedTestimonials()` - témoignages mis en avant
  - [] `getTestimonialByProject($slug)` - témoignage lié à un projet

- [] **Task 3 : Créer le template testimonial.php** (AC: 5, 9)
  - [] Style citation avec guillemets SVG
  - [] Photo de l'auteur (optionnelle, sinon initiale)
  - [] Nom, rôle, entreprise

- [] **Task 4 : Ajouter la section dans about.php** (AC: 4, 8)
  - [] Grille de témoignages (1→2→3 colonnes)
  - [] Gestion du cas vide (section masquée)

- [] **Task 5 : Lien vers le projet** (AC: 6)
  - [] Si project_slug existe, afficher le lien
  - [] "Voir le projet →" avec icône

- [] **Task 6 : Témoignages sur l'accueil** (AC: 7)
  - [] Afficher 2 témoignages featured sur home.php
  - [] Lien "Voir tous les témoignages"

## Dev Notes

### Structure data/testimonials.json

```json
{
  "testimonials": [
    {
      "id": 1,
      "quote": "Excellent travail ! Le site a été livré dans les délais avec une qualité irréprochable. Communication fluide tout au long du projet.",
      "author_name": "Marie Dupont",
      "author_role": "Directrice Marketing",
      "author_company": "Entreprise XYZ",
      "author_photo": "marie-dupont.webp",
      "project_slug": "ecommerce-xyz",
      "date": "2025-06-15",
      "featured": true
    },
    {
      "id": 2,
      "quote": "Un développeur rigoureux et créatif. Il a su comprendre nos besoins et proposer des solutions adaptées.",
      "author_name": "Jean Martin",
      "author_role": "CEO",
      "author_company": "Startup ABC",
      "author_photo": null,
      "project_slug": "app-gestion",
      "date": "2025-03-20",
      "featured": true
    },
    {
      "id": 3,
      "quote": "Travail soigné et professionnel. Je recommande vivement.",
      "author_name": "Sophie Leroy",
      "author_role": "Gérante",
      "author_company": "Restaurant Le Bon Goût",
      "author_photo": null,
      "project_slug": null,
      "date": "2024-11-10",
      "featured": false
    }
  ]
}
```

### Fonctions PHP (includes/functions.php)

```php
/**
 * Récupère tous les témoignages
 */
function getTestimonials(): array
{
    $data = loadJsonData('testimonials.json');
    return $data['testimonials'] ?? [];
}

/**
 * Récupère les témoignages mis en avant
 */
function getFeaturedTestimonials(): array
{
    return array_filter(getTestimonials(), fn($t) => $t['featured'] === true);
}

/**
 * Récupère le témoignage lié à un projet
 */
function getTestimonialByProject(string $projectSlug): ?array
{
    $testimonials = getTestimonials();
    foreach ($testimonials as $testimonial) {
        if (($testimonial['project_slug'] ?? '') === $projectSlug) {
            return $testimonial;
        }
    }
    return null;
}
```

### Template templates/testimonial.php

```php
<?php
/**
 * Composant témoignage
 * @param array $testimonial Données du témoignage
 * @param bool $showProjectLink Afficher le lien vers le projet
 */

$quote = $testimonial['quote'] ?? '';
$authorName = $testimonial['author_name'] ?? 'Anonyme';
$authorRole = $testimonial['author_role'] ?? '';
$authorCompany = $testimonial['author_company'] ?? '';
$authorPhoto = $testimonial['author_photo'] ?? null;
$projectSlug = $testimonial['project_slug'] ?? null;
$showProjectLink = $showProjectLink ?? true;
?>

<blockquote class="testimonial">
    <!-- Guillemets décoratifs -->
    <svg class="w-8 h-8 text-primary/30 mb-4" fill="currentColor" viewBox="0 0 24 24">
        <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
    </svg>

    <!-- Citation -->
    <p class="text-text-primary text-lg leading-relaxed mb-6 italic">
        "<?= htmlspecialchars($quote) ?>"
    </p>

    <!-- Auteur -->
    <footer class="flex items-center gap-4">
        <?php if ($authorPhoto): ?>
            <img
                src="/assets/img/testimonials/<?= htmlspecialchars($authorPhoto) ?>"
                alt="<?= htmlspecialchars($authorName) ?>"
                class="w-12 h-12 rounded-full object-cover"
                loading="lazy"
            >
        <?php else: ?>
            <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
                <span class="text-primary font-semibold text-lg">
                    <?= strtoupper(substr($authorName, 0, 1)) ?>
                </span>
            </div>
        <?php endif; ?>

        <div>
            <p class="font-semibold text-text-primary"><?= htmlspecialchars($authorName) ?></p>
            <p class="text-sm text-text-muted">
                <?= htmlspecialchars($authorRole) ?>
                <?php if ($authorCompany): ?>
                    <span class="text-text-muted">—</span> <?= htmlspecialchars($authorCompany) ?>
                <?php endif; ?>
            </p>
        </div>
    </footer>

    <!-- Lien vers le projet -->
    <?php if ($showProjectLink && $projectSlug): ?>
        <a href="/projet/<?= htmlspecialchars($projectSlug) ?>" class="inline-flex items-center gap-1 text-primary text-sm mt-4 hover:underline">
            Voir le projet
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </a>
    <?php endif; ?>
</blockquote>
```

### Section dans pages/about.php

```php
<!-- Témoignages -->
<?php $testimonials = getTestimonials(); ?>
<?php if (!empty($testimonials)): ?>
    <section class="section bg-surface">
        <div class="container-content">
            <div class="section-header">
                <h2 class="section-title">Ce Qu'ils Disent</h2>
                <p class="section-subtitle">
                    Retours de clients et collaborateurs.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php foreach ($testimonials as $testimonial): ?>
                    <?php include_template('testimonial', ['testimonial' => $testimonial]); ?>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
<?php endif; ?>
```

### Dossier des Photos

```
assets/img/testimonials/
├── marie-dupont.webp   # 96x96 carré
├── jean-martin.webp
└── ...
```

## Testing

- [] Le fichier JSON est valide (3 témoignages)
- [] `getTestimonials()` retourne les témoignages (3)
- [] `getFeaturedTestimonials()` filtre correctement (2 featured)
- [] La section s'affiche sur la page À propos
- [] Les guillemets SVG et style citation sont visibles
- [] Les initiales s'affichent si pas de photo
- [] Le lien vers le projet fonctionne
- [] Cas vide : section masquée (if !empty)
- [] 2 témoignages featured affichés sur la home

## Dev Agent Record

### Agent Model Used
Claude Opus 4.5 (claude-opus-4-5-20251101)

### File List
| File | Action | Description |
|------|--------|-------------|
| `data/testimonials.json` | Created | 3 témoignages de test |
| `includes/functions.php` | Modified | Fonctions getTestimonials(), getFeaturedTestimonials(), getTestimonialByProject() |
| `templates/testimonial.php` | Created | Template avec guillemets, auteur, lien projet |
| `pages/about.php` | Modified | Section "Ce Qu'ils Disent" |
| `pages/home.php` | Modified | 2 témoignages featured |

### Completion Notes
- Structure JSON complète : id, quote, author_name, author_role, author_company, author_photo, project_slug, date, featured
- 3 fonctions PHP pour accéder aux témoignages
- Template réutilisable avec guillemets SVG décoratifs
- Photo optionnelle : si absente, affiche l'initiale sur fond coloré
- Lien vers projet optionnel (paramètre showProjectLink)
- Section masquée si JSON vide
- 2 témoignages featured sur la home avec lien "Voir tous"
- Note: Les photos peuvent être ajoutées dans `/assets/img/testimonials/`

### Debug Log References
Aucun problème rencontré.

## Change Log

| Date | Version | Description | Author |
|------|---------|-------------|--------|
| 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
| 2026-01-23 | 1.0 | Implémentation complète | James (Dev) |