import './ChangelogModal.css';

const PRODUCTION = [
  { icon: '🛰️', text: 'Détection satellite Sentinel-2 (10 m, confirmé AFAI + SWIR)' },
  { icon: '📡', text: 'Signal satellite Sentinel-3 (300 m, indicatif — peut inclure du bruit)' },
  { icon: '🌊', text: 'Simulation de dérive J+2 (modèle courant + vent)' },
  { icon: '📍', text: 'Score de risque par spot côtier (distance + densité + tendance)' },
  { icon: '🔔', text: 'Alertes push navigateur par spot' },
  { icon: '🗓️', text: 'Historique 30 jours en mode ligne du temps' },
];

const ROADMAP = [
  { icon: '🏝️', text: 'Distance maritime réelle (évite les faux raccourcis à travers les terres)' },
  { icon: '🤖', text: 'Amélioration de la qualité du signal Sentinel-3 (filtrage brume, aérosols sahariens)' },
  { icon: '📊', text: 'Historique long terme et tendances saisonnières' },
  { icon: '📱', text: 'Application mobile native' },
];

const LIMITATIONS = [
  {
    icon: '☁️',
    title: 'Couverture nuageuse',
    text: 'Sentinel-2 ne voit pas à travers les nuages. En saison des pluies, les données peuvent être absentes plusieurs jours d\'affilée.',
  },
  {
    icon: '📡',
    title: 'Signal Sentinel-3 bruité',
    text: 'Les polygones jaune pâle (S3) peuvent inclure du soleil réfléchi ou des aérosols sahariens — pas toujours des sargasses. Fiez-vous en priorité à l\'orange vif (S2 confirmé).',
  },
  {
    icon: '📏',
    title: 'Distance à vol d\'oiseau',
    text: 'Les distances affichées sont calculées en ligne droite. Un banc à 19 km peut être séparé de vous par une île — la menace réelle dépend des courants.',
  },
  {
    icon: '🕐',
    title: 'Mise à jour ~quotidienne',
    text: 'L\'ingestion satellite est automatique mais dépend de la disponibilité des images (1 à 2 passages par jour selon l\'orbite).',
  },
  {
    icon: '🗺️',
    title: 'Zone couverte',
    text: 'L\'outil couvre actuellement les Petites Antilles (Saint-Martin à la Barbade). Aucune donnée pour la Martinique nord ou la Caraïbe profonde.',
  },
];

export default function ChangelogModal({ onClose }) {
  return (
    <div className="chlog-backdrop" onClick={onClose}>
      <div className="chlog" role="dialog" aria-modal="true" aria-label="Changelog et limitations" onClick={e => e.stopPropagation()}>
        <button className="chlog__close" onClick={onClose} aria-label="Fermer">✕</button>

        <h2 className="chlog__title">À propos</h2>
        <p className="chlog__subtitle">Radar Sargasses Caraïbes — open &amp; gratuit</p>

        <section className="chlog__section">
          <h3 className="chlog__section-title chlog__section-title--green">En production</h3>
          <ul className="chlog__list">
            {PRODUCTION.map((item, i) => (
              <li key={i} className="chlog__item">
                <span className="chlog__item-icon">{item.icon}</span>
                <span>{item.text}</span>
              </li>
            ))}
          </ul>
        </section>

        <section className="chlog__section">
          <h3 className="chlog__section-title chlog__section-title--blue">Prochainement</h3>
          <ul className="chlog__list">
            {ROADMAP.map((item, i) => (
              <li key={i} className="chlog__item chlog__item--muted">
                <span className="chlog__item-icon">{item.icon}</span>
                <span>{item.text}</span>
              </li>
            ))}
          </ul>
        </section>

        <section className="chlog__section">
          <h3 className="chlog__section-title chlog__section-title--orange">Limitations connues</h3>
          <ul className="chlog__list">
            {LIMITATIONS.map((item, i) => (
              <li key={i} className="chlog__limitation">
                <span className="chlog__limitation-header">
                  <span className="chlog__item-icon">{item.icon}</span>
                  <strong>{item.title}</strong>
                </span>
                <span className="chlog__limitation-text">{item.text}</span>
              </li>
            ))}
          </ul>
        </section>

        <p className="chlog__footer">
          Données : ESA Copernicus · Modèle de dérive : courants CMEMS + ERA5
        </p>
      </div>
    </div>
  );
}
