// StatutPage - page Statut système Ktkarena
// Statut réel, déduit de /api/stats (façade même-origine du site) :
//   source "live"     → API principale joignable   → OPÉRATIONNEL
//   source "fallback" → API injoignable depuis le site → DÉGRADÉ
//   erreur réseau     → statut INCONNU (on n'affiche rien d'inventé)
// Pendant la bêta privée : pas de pourcentages d'uptime ni d'historique
// d'incidents fabriqués — uniquement ce qu'on peut prouver.
const C = ({ children, style }) =>
<div className="ktk-container" style={style}>{children}</div>;

const Eyebrow = ({ children, dark }) =>
<span className="ktk-eyebrow" style={{ color: dark ? '#3a5a18' : 'var(--signature)', fontSize: "16px" }}>
    {children}
  </span>;


/* ---------- Données ---------- */
const SERVICES = [
{ k: 'api', n: '01', t: 'API · BACKEND PRINCIPAL',
  d: "Endpoints REST, WebSocket, authentification, paris, paiements" },
{ k: 'ios', n: '02', t: 'APP MOBILE · IOS',
  d: "Application iPhone, distribution via App Store" },
{ k: 'android', n: '03', t: 'APP MOBILE · ANDROID',
  d: "Application Android, distribution via Play Store" },
{ k: 'momo', n: '04', t: 'PAIEMENTS · MOBILE MONEY',
  d: "Orange Money, MTN Mobile Money, Wave" },
{ k: 'card', n: '05', t: 'PAIEMENTS · CARTE BANCAIRE',
  d: "Visa, Mastercard via Stripe" },
{ k: 'stable', n: '06', t: 'PAIEMENTS · STABLECOIN',
  d: "USDC via Yellow Card, Kotani Pay" },
{ k: 'push', n: '07', t: 'NOTIFICATIONS · PUSH',
  d: "Notifications iOS et Android" },
{ k: 'support', n: '08', t: 'SUPPORT · CHAT EN APP',
  d: "Chat support intégré à l'application" }];


/* ---------- Statut global via /api/stats ---------- */
const useApiStatus = () => {
  const [status, setStatus] = React.useState('checking');
  React.useEffect(() => {
    let cancelled = false;
    fetch('/api/stats')
      .then((r) => { if (!r.ok) throw new Error('bad status'); return r.json(); })
      .then((d) => { if (!cancelled) setStatus(d.source === 'live' ? 'ok' : 'deg'); })
      .catch(() => { if (!cancelled) setStatus('unknown'); });
    return () => { cancelled = true; };
  }, []);
  return status;
};

const PILL = {
  checking: { text: 'VÉRIFICATION EN COURS…', dot: 'rgba(244,239,230,0.4)' },
  ok: { text: 'TOUS LES SYSTÈMES OPÉRATIONNELS', dot: 'var(--signature)' },
  deg: { text: 'API PRINCIPALE INJOIGNABLE · ON EST DESSUS', dot: '#FBBF24' },
  unknown: { text: 'STATUT INDISPONIBLE POUR LE MOMENT', dot: 'rgba(244,239,230,0.4)' }
};

/* ============== S1 HERO ============== */
const S1 = ({ status }) => {
  const pill = PILL[status] || PILL.checking;
  return (
    <section className="stp-hero" style={{
      background: 'var(--charbon-profond)',
      padding: '140px 32px 80px',
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', top: '-10%', right: '-8%',
        width: 540, height: 540,
        background: 'radial-gradient(circle, rgba(212,255,63,0.06) 0%, transparent 60%)',
        filter: 'blur(40px)', pointerEvents: 'none'
      }} />
      <C>
        <Eyebrow>STATUT · VÉRIFIÉ EN DIRECT</Eyebrow>
        <div style={{ marginTop: 28 }}>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(44px, 5.2vw, 80px)',
            fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.025em',
            margin: 0, color: 'var(--fg-on-dark)'
          }}>
            L'état des services,<br />
            en toute{' '}
            <span className="accent" style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--signature)' }}>
              transparence.
            </span>
          </h1>
          <div className="stp-status-pill" style={{
            marginTop: 28,
            display: 'inline-flex', alignItems: 'center', gap: 14,
            padding: '12px 18px',
            border: '1px solid var(--hairline-on-dark)',
            borderRadius: 9999,
            background: 'rgba(20,20,22,0.6)'
          }}>
            <span className="pulse-dot" style={{
              width: 14, height: 14, borderRadius: 9999,
              background: pill.dot,
              boxShadow: status === 'ok' ? '0 0 12px var(--signature)' : 'none'
            }} />
            <span className="stp-status-text" style={{
              fontFamily: 'var(--font-mono)', fontSize: 13,
              color: 'var(--fg-on-dark)', letterSpacing: '0.04em'
            }}>
              {pill.text}
            </span>
          </div>
          <p style={{
            marginTop: 24, maxWidth: '58ch',
            fontSize: 16, lineHeight: 1.6,
            color: 'var(--fg-on-dark-muted)'
          }}>
            Ce statut est déduit en direct de la disponibilité réelle de notre API.
            Pendant la bêta privée, on n'affiche ni pourcentages d'uptime ni
            historiques reconstitués : uniquement ce qu'on peut vérifier.
          </p>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .stp-hero { padding: 120px 24px 72px !important; }
          }
          @media (max-width: 480px) {
            .stp-hero { padding: 100px 20px 64px !important; }
            .stp-hero h1 { font-size: clamp(34px, 10.5vw, 44px) !important; }
            .stp-status-pill { gap: 10px !important; padding: 10px 14px !important; }
            .stp-status-text { font-size: 11px !important; }
          }
        `}</style>
      </C>
    </section>);
};


/* ============== S2 ÉTAT DES SERVICES ============== */
const SevPill = ({ status }) => {
  const map = {
    ok: { bg: 'var(--signature-soft)', fg: '#314c14', label: 'OPÉRATIONNEL' },
    deg: { bg: 'rgba(251,191,36,0.18)', fg: '#7a5208', label: 'DÉGRADÉ' },
    checking: { bg: 'rgba(10,10,11,0.06)', fg: 'rgba(10,10,11,0.55)', label: 'VÉRIFICATION…' },
    unknown: { bg: 'rgba(10,10,11,0.06)', fg: 'rgba(10,10,11,0.55)', label: 'INCONNU' }
  };
  const s = map[status] || map.checking;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 12px', borderRadius: 9999,
      fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
      letterSpacing: '0.08em',
      background: s.bg, color: s.fg
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 9999,
        background: s.fg, opacity: 0.7 }} />
      {s.label}
    </span>);
};

const S2 = ({ status }) =>
<section className="ktk-block-bottom surface-light stp-sec" style={{ padding: '120px 32px 160px' }}>
    <C>
      <Eyebrow dark>PAR SERVICE</Eyebrow>
      <h2 style={{
      fontFamily: 'var(--font-display)',
      fontSize: 'clamp(40px, 5vw, 72px)',
      fontWeight: 900, lineHeight: 0.98, letterSpacing: '-0.03em',
      margin: '20px 0 16px', maxWidth: 1100, color: 'var(--charbon-profond)'
    }}>
        L'état détaillé de{' '}
        <span className="accent" style={{ fontWeight: 400, fontStyle: 'italic' }}>chaque composant.</span>
      </h2>
      <p style={{
      marginTop: 12, marginBottom: 56, maxWidth: '62ch',
      fontSize: 15, lineHeight: 1.6, color: 'rgba(10,10,11,0.6)'
    }}>
        Le badge reflète la disponibilité globale constatée à l'instant du
        chargement de cette page.
      </p>

      <div style={{
      background: 'var(--creme-pur)',
      borderRadius: 20, overflow: 'hidden',
      boxShadow: '0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(10,10,11,0.06)'
    }}>
        {SERVICES.map((s, i) =>
      <div key={s.k} className="svc-row" style={{
        display: 'grid',
        gridTemplateColumns: '40px minmax(220px,1.4fr) minmax(0,2.6fr) minmax(160px,auto)',
        gap: 24, alignItems: 'center',
        padding: '24px 28px',
        borderTop: i === 0 ? 'none' : '1px solid rgba(10,10,11,0.08)'
      }}>
            <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 12,
          color: 'rgba(10, 10, 11, 0.65)', letterSpacing: '0.06em'
        }}>{s.n}</span>
            <div>
              <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15,
            letterSpacing: '0.02em', color: 'var(--charbon-profond)'
          }}>{s.t}</div>
            </div>
            <div style={{
          fontSize: 13, lineHeight: 1.45,
          color: 'rgba(10,10,11,0.6)'
        }}>{s.d}</div>
            <div style={{
          display: 'flex', alignItems: 'center',
          justifyContent: 'flex-end'
        }}>
              <SevPill status={status} />
            </div>
          </div>
      )}
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .svc-row {
            grid-template-columns: 32px 1fr auto !important;
            gap: 12px 18px !important;
          }
          .svc-row > :nth-child(3) { grid-column: 2 / 3; font-size: 12px !important; }
        }
        @media (max-width: 720px) {
          .svc-row { padding: 20px 16px !important; gap: 10px 14px !important; }
        }
      `}</style>
    </C>
  </section>;


/* ============== S3 INCIDENTS ============== */
const S3 = () =>
<section className="stp-sec" style={{ background: 'var(--charbon-profond)', padding: '160px 32px' }}>
    <C>
      <Eyebrow>HISTORIQUE</Eyebrow>
      <h2 style={{
      fontFamily: 'var(--font-display)',
      fontSize: 'clamp(40px, 5vw, 72px)',
      fontWeight: 900, lineHeight: 0.98, letterSpacing: '-0.03em',
      margin: '20px 0 24px', maxWidth: 1100, color: 'var(--fg-on-dark)'
    }}>
        Aucun incident{' '}
        <span className="accent" style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--signature)' }}>à ce jour.</span>
      </h2>
      <p style={{
      fontSize: 19, lineHeight: 1.55, color: 'var(--fg-on-dark-muted)',
      maxWidth: '60ch', margin: 0
    }}>
        Depuis l'ouverture de la bêta privée, aucun incident majeur n'a impacté
        les testeurs. Le jour où ça arrivera, tout sera documenté ici, en toute
        transparence : durée, impact, cause racine et résolution.
      </p>
    </C>
  </section>;


/* ============== S4 NOTIFICATIONS ============== */
const CHANNELS = [
{ ic: '✉', t: "Email d'alerte",
  p: "Reçois un email à chaque démarrage d'incident majeur, et à sa résolution.",
  cta: "M'inscrire par email" },
{ ic: '◇', t: "Flux RSS",
  p: "Pour les power users : flux Atom standard à intégrer dans ton agrégateur préféré.",
  cta: "Voir le flux RSS" },
{ ic: '⌘', t: "Webhook",
  p: "Pour intégrer notre statut à ton propre dashboard (Slack, Discord, monitoring custom).",
  cta: "Configurer un webhook" }];


const S4 = () =>
<section className="ktk-block-bottom ktk-section-signature stp-sec" style={{ padding: '140px 32px' }}>
    <C>
      <span className="ktk-eyebrow" style={{ color: 'var(--signature)', fontSize: "16px" }}>RESTER INFORMÉ</span>
      <h2 style={{
      fontFamily: 'var(--font-display)',
      fontSize: 'clamp(40px, 5vw, 72px)',
      fontWeight: 900, lineHeight: 0.98, letterSpacing: '-0.03em',
      margin: '20px 0 24px', maxWidth: 900, color: 'var(--fg-on-dark)'
    }}>
        On t'avertit{' '}
        <span className="accent" style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--signature)' }}>avant que tu remarques.</span>
      </h2>
      <p style={{
      fontSize: 21, lineHeight: 1.55, color: 'rgba(244,239,230,0.78)',
      maxWidth: '60ch', margin: '0 0 64px'
    }}>
        Inscris-toi pour recevoir une notification dès qu'un incident démarre, et une autre quand il est résolu. Aucun spam, juste les infos qui comptent.
      </p>

      <div className="stp-ch-grid" style={{
      display: 'grid', gap: 20,
      gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))'
    }}>
        {CHANNELS.map((c, i) =>
      <div key={i} className="ch-card" style={{
        background: 'var(--charbon-eleve)',
        border: '1px solid rgba(244,239,230,0.12)',
        color: 'var(--fg-on-dark)',
        borderRadius: 20,
        padding: 32,
        display: 'flex', flexDirection: 'column', gap: 18
      }}>
            <div style={{
          width: 48, height: 48, borderRadius: 12,
          background: 'var(--signature-soft)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--signature)',
          fontSize: 22, fontWeight: 600
        }}>{c.ic}</div>
            <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: 24, letterSpacing: '-0.015em',
          color: 'var(--fg-on-dark)', margin: 0
        }}>{c.t}</h3>
            <p style={{
          fontSize: 17, lineHeight: 1.55,
          color: 'var(--fg-on-dark-muted)', margin: 0, flex: 1
        }}>{c.p}</p>
            <a href="#" style={{
          color: 'var(--signature)', textDecoration: 'none',
          fontWeight: 500, fontSize: 14,
          borderBottom: '1px solid var(--signature)',
          alignSelf: 'flex-start', paddingBottom: 4
        }}>{c.cta} →</a>
          </div>
      )}
      </div>
    </C>
  </section>;


const StatutPage = () => {
  const status = useApiStatus();
  return (
    <>
      <S1 status={status} />
      <S2 status={status} />
      <S3 />
      <S4 />
      {/* Responsive partagé - paddings de sections et titres sur mobile */}
      <style>{`
        @media (max-width: 720px) {
          .stp-sec { padding: 88px 24px !important; }
        }
        @media (max-width: 480px) {
          .stp-sec { padding: 72px 20px !important; }
          .stp-sec h2 { font-size: clamp(32px, 9.5vw, 40px) !important; }
          .stp-ch-grid { grid-template-columns: 1fr !important; }
          .stp-ch-grid .ch-card { padding: 24px 20px !important; }
        }
      `}</style>
    </>);
};


window.StatutPage = StatutPage;