/* === StatBar ===
 * Operator-style stat strip with Anton numerals. Sits below the hero.
 */

const StatBar = () => {
  // Same stats.json feed as BreachFeedBlock, same fallback defaults, so the
  // two sections never show conflicting numbers.
  const [stats, setStats] = React.useState(null);
  React.useEffect(() => {
    fetch('./stats.json', { cache: 'no-cache' })
      .then((r) => (r.ok ? r.json() : null))
      .then(setStats)
      .catch(() => {});
  }, []);

  const fmt = (n) => {
    if (typeof n !== 'number' || !isFinite(n)) return null;
    const a = Math.abs(n);
    if (a >= 1e9) return (a / 1e9).toFixed(a >= 1e10 ? 0 : 1).replace(/\.0$/, '') + 'B';
    if (a >= 1e6) return (a / 1e6).toFixed(a >= 1e7 ? 0 : 1).replace(/\.0$/, '') + 'M';
    if (a >= 1e3) return (a / 1e3).toFixed(0) + 'K';
    return String(Math.round(a));
  };
  const dollarsLost = (stats && fmt(stats.dollars_lost))    ? `$${fmt(stats.dollars_lost)}` : '$1.8B';
  const piiLeaked   = (stats && fmt(stats.pii_records))     || '142M';
  const recordsLost = (stats && fmt(stats.records_exposed)) || '377M+';

  return (
  <section style={{
    position: "relative",
    padding: "72px 32px",
    borderBottom: "1px solid var(--obsidian-fog)",
    background: "var(--obsidian-abyss)",
    overflow: "hidden",
  }}>
    {/* Full-bleed loch backdrop — the operator wading the obsidian lake,
        pack in tow. Darkened hard so the numerals stay legible. */}
    <div style={{
      position: "absolute", inset: 0, zIndex: 0,
      backgroundImage: "url('./assets/wallpaper-loch.png')",
      backgroundSize: "cover",
      backgroundPosition: "center 12%",
      opacity: 0.5,
    }}/>
    {/* legibility scrim — heavier at the bottom where the numerals sit */}
    <div style={{
      position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
      background: "linear-gradient(180deg, rgba(7,4,14,0.55) 0%, rgba(7,4,14,0.72) 45%, rgba(7,4,14,0.92) 100%)",
    }}/>
    {/* scanlines to match the rest of the system */}
    <div style={{
      position: "absolute", inset: 0, zIndex: 2, pointerEvents: "none",
      backgroundImage: "repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px)",
      mixBlendMode: "overlay",
    }}/>

    <div style={{
      maxWidth: 1280, margin: "0 auto", position: "relative", zIndex: 3,
      display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32,
    }} className="statbar-grid">
      {[
        { value: dollarsLost, label: "$ Lost (rolling 12mo)" },
        { value: piiLeaked,   label: "PII records leaked (12mo)" },
        { value: recordsLost, label: "Records exposed (12mo)" },
      ].map((s, i) => (
        <div key={i} style={{
          borderLeft: "2px solid var(--neon-magenta)",
          paddingLeft: 18,
        }}>
          <div style={{
            fontFamily: "var(--font-display)", fontSize: 56, lineHeight: 0.9,
            color: "var(--fg-1)", textTransform: "uppercase",
            textShadow: "0 2px 24px rgba(7,4,14,0.9)",
          }}>{s.value}</div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 11,
            color: "var(--fg-2)", letterSpacing: "0.22em", textTransform: "uppercase",
            marginTop: 8,
          }}>// {s.label}</div>
        </div>
      ))}
    </div>

    <style>{`
      @media (max-width: 720px) {
        .statbar-grid { grid-template-columns: 1fr !important; gap: 28px 32px !important; }
      }
    `}</style>
  </section>
  );
};

Object.assign(window, { StatBar });