g1flux/src/components/InfoPanel.tsx

interface InfoPanelProps {
  onClose: () => void;
}

export function InfoPanel({ onClose }: InfoPanelProps) {
  return (
    <>
      {/* Overlay */}
      <div
        className="fixed inset-0 z-[2000] bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Modale */}
      <div className="fixed z-[2001] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[min(520px,calc(100vw-2rem))] max-h-[80vh] overflow-y-auto rounded-2xl bg-[#0f1016] border border-[#2e2f3a] shadow-2xl">

        {/* En-tête */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-[#2e2f3a] sticky top-0 bg-[#0f1016] z-10">
          <div>
            <h2 className="text-[#d4a843] font-semibold text-base">Ğ1Flux</h2>
            <p className="text-[#6b7280] text-xs mt-0.5">Explorateur de transactions Ğ1v2</p>
          </div>
          <button
            onClick={onClose}
            className="text-[#4b5563] hover:text-white text-xl leading-none p-1"
            aria-label="Fermer"
          >
            ✕
          </button>
        </div>

        {/* Contenu */}
        <div className="px-5 py-4 flex flex-col gap-5 text-sm">

          <Section title="Vues cartographiques">
            <Feature icon="🌡" name="Heatmap">
              Densité des transactions géolocalisées. Les zones chaudes concentrent le plus d'activité.
              Basculer avec le bouton <Kbd>Heatmap / Flux</Kbd>.
            </Feature>
            <Feature icon="⟿" name="Flux">
              Arcs entre villes représentant les flux de Ğ1. L'épaisseur indique le volume,
              la couleur la direction dominante.
            </Feature>
          </Section>

          <Section title="Clusters & villes (vue Flux)">
            <Feature icon="⬡" name="Mode Clusters">
              Les villes géographiquement proches sont regroupées en un nœud unique.
              Le chiffre affiché indique le nombre de villes dans le groupe.
            </Feature>
            <Feature icon="·" name="Mode Villes">
              Chaque ville est affichée individuellement, sans regroupement.
              Basculer avec le bouton <Kbd>⬡ Clusters / · Villes</Kbd> (bas gauche de la carte).
            </Feature>
            <Feature icon="●" name="Couleur des nœuds">
              <span className="text-green-400">Vert</span> = receveur net (reçoit plus que ce qu'il émet) ·{' '}
              <span className="text-[#d4a843]">Or</span> = équilibré ·{' '}
              <span className="text-orange-400">Orange</span> = émetteur net.
            </Feature>
            <Feature icon="↗" name="Clic sur un nœud">
              Affiche la liste des villes du cluster avec leur balance individuelle,
              triée par valeur absolue.
            </Feature>
          </Section>

          <Section title="Période">
            <Feature icon="📅" name="Préréglages">
              <Kbd>24h</Kbd> <Kbd>7 jours</Kbd> <Kbd>30 jours</Kbd> — fenêtre glissante jusqu'à maintenant.
            </Feature>
            <Feature icon="✎" name="Personnaliser">
              Saisir une durée de 1 à 365 jours.
            </Feature>
          </Section>

          <Section title="Animation">
            <Feature icon="▶" name="Animer">
              Rejoue les transactions frame par frame sur la période sélectionnée
              (une frame = une journée).
            </Feature>
            <Feature icon="⏩" name="Contrôles">
              Lecture / pause · Navigation frame par frame (<Kbd>◀◀</Kbd> <Kbd>▶▶</Kbd>) ·
              Vitesse <Kbd>×1</Kbd> <Kbd>×2</Kbd> <Kbd>×4</Kbd>.
            </Feature>
          </Section>

          <Section title="Statistiques">
            <Feature icon="📊" name="Panneau latéral">
              Volume total en Ğ1, nombre de transactions, top émetteurs et receveurs,
              répartition géographique. Se met à jour en temps réel et pendant l'animation.
            </Feature>
            <Feature icon="☰" name="Mobile">
              Le panneau est accessible via le bouton <Kbd>☰</Kbd> en haut à gauche.
            </Feature>
            <Feature icon="%" name="% Tx géoloc.">
              Pourcentage des transactions ayant une géolocalisation connue sur la période / frame courante.
            </Feature>
          </Section>

          <Section title="Source de données">
            <Feature icon="●" name="Live Ğ1v2">
              Données temps réel de la blockchain Ğ1v2, actualisées toutes les 30 secondes.
            </Feature>
          </Section>

        </div>
      </div>
    </>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div>
      <h3 className="text-[#d4a843] text-xs font-semibold uppercase tracking-wider mb-2">{title}</h3>
      <div className="flex flex-col gap-2">{children}</div>
    </div>
  );
}

function Feature({ icon, name, children }: { icon: string; name: string; children: React.ReactNode }) {
  return (
    <div className="flex gap-2">
      <span className="text-[#4b5563] w-5 shrink-0 text-center leading-5 mt-0.5">{icon}</span>
      <div>
        <span className="text-white font-medium">{name}</span>
        <span className="text-[#6b7280]"> — </span>
        <span className="text-[#9ca3af]">{children}</span>
      </div>
    </div>
  );
}

function Kbd({ children }: { children: React.ReactNode }) {
  return (
    <span className="inline-block bg-[#1a1b23] border border-[#2e2f3a] rounded px-1 py-0.5 text-[11px] text-[#d4a843] font-mono leading-none">
      {children}
    </span>
  );
}