import React from 'react'
import './SharedPages.css'

function EcoGuide() {
  return (
    <div className="shared-page">
      <header className="page-header">
        <i className="fas fa-map"></i>
        <h1>Guide d'Écoconception pour un Projet SAE</h1>
        <p className="subtitle">Méthodologie complète pour intégrer l'écoconception</p>
      </header>

      <section className="content-section">
        <h2><i className="fas fa-bullseye"></i> Objectif</h2>
        <p>
          Intégrer l'écoconception à chaque étape du projet, de la conception à la livraison, 
          en utilisant les outils et référentiels analysés (RGESN, RGAA, EcoIndex, Lighthouse, WAVE).
        </p>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-calendar-alt"></i> Organisation et Planning Type (4 semaines)</h2>
        
        <div style={{display: 'grid', gap: '2rem'}}>
          <div style={{padding: '2rem', background: 'linear-gradient(135deg, #2d6a4f, #52b788)', color: 'white', borderRadius: '12px'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem'}}>
              <div style={{
                width: '60px',
                height: '60px',
                background: 'rgba(255,255,255,0.2)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '1.8rem',
                fontWeight: 'bold'
              }}>1</div>
              <h3 style={{margin: 0, fontSize: '1.5rem'}}>Semaine 1 : Cadrage et Conception</h3>
            </div>
            
            <div style={{display: 'grid', gap: '1.5rem'}}>
              <div>
                <h4 style={{marginTop: 0, color: 'white'}}>Tâches écoconception</h4>
                <ul>
                  <li>Définir les objectifs écoresponsables du projet (ex: "-30% CO₂ vs moyenne secteur")</li>
                  <li>Choisir un hébergeur vert (Infomaniak, GreenGeeks, OVH bas carbone)</li>
                  <li>Concevoir une architecture sobre (statique si possible, SSG/SSR, API légère)</li>
                  <li>Rédiger une checklist personnalisée des bonnes pratiques</li>
                  <li>Nommer un référent écoconception dans l'équipe</li>
                </ul>
              </div>
              
              <div>
                <h4 style={{marginTop: 0, color: 'white'}}>Livrables / Outils</h4>
                <ul>
                  <li>📄 Charte d'écoconception du projet</li>
                  <li>🌐 Comparatif d'hébergeurs (Green Web Foundation)</li>
                  <li>🏗️ Schéma d'architecture technique</li>
                  <li>✅ Checklist RGESN personnalisée</li>
                </ul>
              </div>
            </div>
          </div>

          <div style={{padding: '2rem', background: 'linear-gradient(135deg, #52b788, #74c69d)', color: 'white', borderRadius: '12px'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem'}}>
              <div style={{
                width: '60px',
                height: '60px',
                background: 'rgba(255,255,255,0.2)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '1.8rem',
                fontWeight: 'bold'
              }}>2</div>
              <h3 style={{margin: 0, fontSize: '1.5rem'}}>Semaine 2 : Design et Maquettes</h3>
            </div>
            
            <div style={{display: 'grid', gap: '1.5rem'}}>
              <div>
                <h4 style={{marginTop: 0, color: 'white'}}>Tâches écoconception</h4>
                <ul>
                  <li>Concevoir des maquettes sobres (limiter animations, couleurs, polices)</li>
                  <li>Valider l'accessibilité dès les maquettes (contrastes, structure)</li>
                  <li>Prévoir un mode sombre pour économiser l'énergie (écrans OLED)</li>
                  <li>Limiter à 2 familles de polices maximum (privilégier system fonts)</li>
                  <li>Optimiser les images dès le design (taille, format)</li>
                </ul>
              </div>
              
              <div>
                <h4 style={{marginTop: 0, color: 'white'}}>Livrables / Outils</h4>
                <ul>
                  <li>🎨 Maquettes Figma/Adobe XD sobres</li>
                  <li>🎨 WebAIM Contrast Checker (validation contrastes)</li>
                  <li>📊 Rapport d'accessibilité des maquettes</li>
                  <li>📐 Guide de style écoconçu</li>
                </ul>
              </div>
            </div>
          </div>

          <div style={{padding: '2rem', background: 'linear-gradient(135deg, #74c69d, #95d5b2)', color: 'white', borderRadius: '12px'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem'}}>
              <div style={{
                width: '60px',
                height: '60px',
                background: 'rgba(255,255,255,0.2)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '1.8rem',
                fontWeight: 'bold'
              }}>3</div>
              <h3 style={{margin: 0, fontSize: '1.5rem'}}>Semaine 3 : Développement</h3>
            </div>
            
            <div style={{display: 'grid', gap: '1.5rem'}}>
              <div>
                <h4 style={{marginTop: 0, color: 'white'}}>Tâches écoconception</h4>
                <ul>
                  <li>Développer en respectant la checklist (code, images, requêtes)</li>
                  <li>Optimiser toutes les images (WebP/AVIF, compression, lazy loading)</li>
                  <li>Minifier CSS/JS, supprimer code mort</li>
                  <li>Limiter les librairies externes (privilégier Vanilla JS si possible)</li>
                  <li>Tester régulièrement l'empreinte environnementale (EcoIndex, Lighthouse)</li>
                </ul>
              </div>
              
              <div>
                <h4 style={{marginTop: 0, color: 'white'}}>Livrables / Outils</h4>
                <ul>
                  <li>💻 Code commenté et optimisé</li>
                  <li>🔍 Lighthouse, EcoIndex (tests continus)</li>
                  <li>📈 Tableau de suivi des indicateurs (poids, CO₂, requêtes)</li>
                  <li>📦 Build optimisé (Webpack, Vite)</li>
                </ul>
              </div>
            </div>
          </div>

          <div style={{padding: '2rem', background: 'linear-gradient(135deg, #95d5b2, #b7e4c7)', color: 'white', borderRadius: '12px'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem'}}>
              <div style={{
                width: '60px',
                height: '60px',
                background: 'rgba(255,255,255,0.2)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '1.8rem',
                fontWeight: 'bold'
              }}>4</div>
              <h3 style={{margin: 0, fontSize: '1.5rem'}}>Semaine 4 : Tests, Optimisation, Livraison</h3>
            </div>
            
            <div style={{display: 'grid', gap: '1.5rem'}}>
              <div>
                <h4 style={{marginTop: 0, color: 'white'}}>Tâches écoconception</h4>
                <ul>
                  <li>Auditer le projet final (écoconception + accessibilité)</li>
                  <li>Corriger les derniers points bloquants</li>
                  <li>Tester avec lecteur d'écran (NVDA, VoiceOver)</li>
                  <li>Rédiger une documentation d'écoconception pour mainteneurs</li>
                  <li>Communiquer sur les efforts écoresponsables (badge, footer)</li>
                </ul>
              </div>
              
              <div>
                <h4 style={{marginTop: 0, color: 'white'}}>Livrables / Outils</h4>
                <ul>
                  <li>📋 Rapport d'audit final (RGESN, RGAA, WAVE)</li>
                  <li>✅ Liste des optimisations réalisées</li>
                  <li>📚 Fiche mémo des bonnes pratiques</li>
                  <li>🎯 Documentation technique</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-list-check"></i> Checklist d'écoconception à intégrer dès la conception</h2>
        
        <div style={{display: 'grid', gap: '2rem'}}>
          <div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #2d6a4f'}}>
            <h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>1️⃣ Cadrage et Gouvernance</h3>
            <ul>
              <li>☐ Définir des objectifs écoresponsables clairs (ex: "-30% poids vs moyenne secteur")</li>
              <li>☐ Nommer un référent écoconception dans l'équipe</li>
              <li>☐ Intégrer l'écoconception dans le cahier des charges</li>
              <li>☐ Choisir un hébergeur vert (Infomaniak, GreenGeeks, OVH bas carbone)</li>
              <li>☐ Prévoir un budget temps pour les audits et optimisations</li>
            </ul>
          </div>

          <div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #52b788'}}>
            <h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>2️⃣ Design et Expérience Utilisateur</h3>
            <ul>
              <li>☐ Limiter le nombre de polices (max 2 familles, privilégier system fonts)</li>
              <li>☐ Éviter les animations inutiles (autoplay, vidéos en fond, carrousels)</li>
              <li>☐ Utiliser des couleurs sobres et vérifier les contrastes (WCAG AA: 4.5:1)</li>
              <li>☐ Concevoir des maquettes légères (éviter images haute résolution inutiles)</li>
              <li>☐ Prévoir un mode sombre pour réduire consommation énergétique (OLED)</li>
            </ul>
          </div>

          <div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #74c69d'}}>
            <h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>3️⃣ Développement Frontend</h3>
            <ul>
              <li>☐ Optimiser les images (WebP/AVIF, compression TinyPNG, lazy loading)</li>
              <li>☐ Minifier et regrouper les fichiers CSS/JS</li>
              <li>☐ Limiter l'usage de librairies externes (privilégier Vanilla JS)</li>
              <li>☐ Cacher le contenu non critique (chargement différé des iframes)</li>
              <li>☐ Utiliser un système de cache efficace (Cache-Control headers)</li>
            </ul>
          </div>

          <div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #95d5b2'}}>
            <h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>4️⃣ Développement Backend</h3>
            <ul>
              <li>☐ Choisir un langage/framework sobre (éviter surdimensionnement)</li>
              <li>☐ Optimiser les requêtes base de données (index, limiter jointures)</li>
              <li>☐ Mettre en place une API légère (éviter surdimensionnement JSON)</li>
              <li>☐ Désactiver les logs inutiles en production</li>
            </ul>
          </div>

          <div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #b7e4c7'}}>
            <h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>5️⃣ Hébergement et Infrastructure</h3>
            <ul>
              <li>☐ Vérifier que l'hébergeur utilise des énergies renouvelables</li>
              <li>☐ Configurer un CDN pour réduire latence et transferts</li>
              <li>☐ Activer la compression Gzip/Brotli sur le serveur</li>
              <li>☐ Planifier des sauvegardes optimisées (pas de redondances inutiles)</li>
            </ul>
          </div>

          <div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #d8f3dc'}}>
            <h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>6️⃣ Tests et Validation</h3>
            <ul>
              <li>☐ Auditer régulièrement avec EcoIndex/Website Carbon (empreinte)</li>
              <li>☐ Tester avec Lighthouse (performances, accessibilité)</li>
              <li>☐ Valider l'accessibilité avec WAVE et lecteurs d'écran</li>
              <li>☐ Corriger les erreurs bloquantes avant la livraison</li>
              <li>☐ Documenter les choix d'écoconception pour mainteneurs futurs</li>
            </ul>
          </div>

          <div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #40916c'}}>
            <h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>7️⃣ Livraison et Communication</h3>
            <ul>
              <li>☐ Rédiger une fiche d'écoconception pour les utilisateurs</li>
              <li>☐ Communiquer sur les efforts (badge "Site bas carbone", mention footer)</li>
              <li>☐ Prévoir un suivi post-livraison (audit trimestriel)</li>
            </ul>
          </div>
        </div>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-tools"></i> Outils Recommandés</h2>
        
        <div className="table-responsive">
          <table>
            <thead>
              <tr>
                <th>Besoin</th>
                <th>Outils / Référentiels</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><strong>Audit écoconception</strong></td>
                <td>EcoIndex, Website Carbon, GreenIT Analysis Method</td>
              </tr>
              <tr>
                <td><strong>Audit accessibilité</strong></td>
                <td>WAVE, RGAA, Lighthouse Accessibility</td>
              </tr>
              <tr>
                <td><strong>Optimisation images</strong></td>
                <td>TinyPNG, Squoosh, ImageOptim</td>
              </tr>
              <tr>
                <td><strong>Test de performances</strong></td>
                <td>Lighthouse, WebPageTest, GTmetrix</td>
              </tr>
              <tr>
                <td><strong>Hébergement vert</strong></td>
                <td>Green Web Foundation, The Green Web Directory</td>
              </tr>
              <tr>
                <td><strong>Contraste de couleurs</strong></td>
                <td>WebAIM Contrast Checker, Stark (Figma)</td>
              </tr>
              <tr>
                <td><strong>Documentation</strong></td>
                <td>Notion, Markdown, GitHub Wiki</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-lightbulb"></i> Conseils pour Réussir</h2>
        
        <div style={{display: 'grid', gap: '1.5rem'}}>
          {[
            {
              icon: 'fa-users',
              title: 'Impliquez toute l\'équipe',
              content: 'L\'écoconception n\'est pas seulement l\'affaire des développeurs. Designers, chefs de projet et rédacteurs doivent aussi adopter ces bonnes pratiques.'
            },
            {
              icon: 'fa-sort-amount-down',
              title: 'Priorisez',
              content: 'Concentrez-vous d\'abord sur les actions à fort impact et faciles à mettre en œuvre (ex: optimisation des images, choix de l\'hébergeur).'
            },
            {
              icon: 'fa-file-alt',
              title: 'Documentez',
              content: 'Notez chaque choix d\'écoconception et ses justifications pour faciliter la maintenance future.'
            },
            {
              icon: 'fa-vial',
              title: 'Testez tôt et souvent',
              content: 'Intégrez les audits dès les premières maquettes et à chaque sprint de développement.'
            },
            {
              icon: 'fa-graduation-cap',
              title: 'Sensibilisez',
              content: 'Expliquez à vos utilisateurs ou clients pourquoi ces efforts sont importants (ex: via une page "Notre engagement écoresponsable").'
            }
          ].map((tip, index) => (
            <div key={index} style={{
              display: 'grid',
              gridTemplateColumns: 'auto 1fr',
              gap: '1.5rem',
              padding: '1.5rem',
              background: 'var(--bg)',
              borderRadius: '8px',
              alignItems: 'flex-start'
            }}>
              <div style={{
                width: '50px',
                height: '50px',
                background: 'var(--primary)',
                color: 'white',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '1.5rem',
                flexShrink: 0
              }}>
                <i className={`fas ${tip.icon}`}></i>
              </div>
              <div>
                <h4 style={{marginTop: 0, color: 'var(--primary-dark)'}}>{tip.title}</h4>
                <p style={{margin: 0}}>{tip.content}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-chart-line"></i> Fiche de Suivi Hebdomadaire</h2>
        
        <div className="table-responsive">
          <table>
            <thead>
              <tr>
                <th>Semaine</th>
                <th>Actions écoconception réalisées</th>
                <th>Indicateurs (avant/après)</th>
                <th>Prochaines étapes</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><strong>1</strong></td>
                <td>Choix de l'hébergeur vert, rédaction de la checklist</td>
                <td>-</td>
                <td>Maquettes sobres</td>
              </tr>
              <tr>
                <td><strong>2</strong></td>
                <td>Optimisation des maquettes, test de contraste</td>
                <td>Contraste: 2.3:1 → 7.8:1 ✓</td>
                <td>Développement</td>
              </tr>
              <tr>
                <td><strong>3</strong></td>
                <td>Minification CSS/JS, lazy loading images</td>
                <td>Poids: 2.5 MB → 1.2 MB (-52%)</td>
                <td>Audit final</td>
              </tr>
              <tr>
                <td><strong>4</strong></td>
                <td>Correction des erreurs Lighthouse, documentation</td>
                <td>Score Lighthouse: 72 → 95 (+23 pts)</td>
                <td>Livraison</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section className="content-section">
        <h2><i className="fas fa-star"></i> Pourquoi ce guide est utile ?</h2>
        
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1.5rem'}}>
          <div style={{padding: '1.5rem', background: '#d4edda', borderRadius: '8px', borderLeft: '4px solid var(--success)'}}>
            <h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
              <i className="fas fa-calendar-check"></i> Intégration progressive
            </h4>
            <p style={{margin: 0}}>Permet d'intégrer l'écoconception de manière progressive et réaliste sur un mois</p>
          </div>

          <div style={{padding: '1.5rem', background: '#cfe2ff', borderRadius: '8px', borderLeft: '4px solid var(--info)'}}>
            <h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
              <i className="fas fa-tools"></i> Outils concrets
            </h4>
            <p style={{margin: 0}}>S'appuie sur des outils concrets et des référentiels officiels (RGESN, RGAA)</p>
          </div>

          <div style={{padding: '1.5rem', background: '#fff3cd', borderRadius: '8px', borderLeft: '4px solid var(--warning)'}}>
            <h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
              <i className="fas fa-comments"></i> Justification
            </h4>
            <p style={{margin: 0}}>Prépare à justifier les choix face à un client ou un jury</p>
          </div>

          <div style={{padding: '1.5rem', background: '#d1ecf1', borderRadius: '8px', borderLeft: '4px solid #0dcaf0'}}>
            <h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
              <i className="fas fa-book"></i> Documentation
            </h4>
            <p style={{margin: 0}}>Habitue à documenter et communiquer sur les démarches écoresponsables</p>
          </div>
        </div>
      </section>

      <div className="conclusion-banner">
        <i className="fas fa-check-circle"></i>
        <div>
          <strong>Méthodologie complète</strong>
          <p>Ce guide présente une méthode pour intégrer l'écoconception et l'accessibilité à chaque étape d'un projet. 
          Cette méthodologie permet de créer des services numériques sobres, performants, accessibles et responsables.</p>
        </div>
      </div>
    </div>
  )
}

export default EcoGuide