/* === BreachFeedBlock ===
 * Section 04 — the live breach feed. Compact teaser: 4 recent disclosures
 * in a terminal-style ledger, RSS subscribe CTA, link to the full feed.
 * Cyan accent (data / telemetry) per design-system convention.
 */

const RECENT_BREACHES = [
  {
    sev: "critical",
    date: "08 May 26",
    org: "INSTRUCTURE CANVAS",
    records: "275M",
    sector: "Education",
  },
  {
    sev: "critical",
    date: "02 May 26",
    org: "MCDONALD'S",
    records: "64M",
    sector: "Retail",
  },
  {
    sev: "high",
    date: "28 Apr 26",
    org: "VERCEL",
    records: "TBD",
    sector: "Tech",
  },
  {
    sev: "critical",
    date: "19 Apr 26",
    org: "PIH HEALTH",
    records: "3M",
    sector: "Healthcare",
  },
];

const SEV_TONE = {
  critical: { color: "var(--signal-alert)", tone: "alert" },
  high:     { color: "var(--neon-magenta)", tone: "warn" },
  medium:   { color: "var(--signal-warn)",  tone: "warn" },
  info:     { color: "var(--neon-cyan)",    tone: "ok" },
};

const BreachFeedBlock = () => {
  // Fetch live stats from the aggregator's stats.json (sibling of breach-feed.xml
  // at the project root). Falls back to the static defaults below if the file
  // isn't reachable — first run, local filesystem, network error, etc.
  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 id="feed" style={{
    padding: "120px 32px",
    background: "linear-gradient(180deg, #0B1530 0%, var(--obsidian-void) 100%)",
    borderTop: "1px solid var(--obsidian-fog)",
    borderBottom: "1px solid var(--obsidian-fog)",
    position: "relative", overflow: "hidden",
  }}>
    {/* cyan corner bloom */}
    <div style={{
      position: "absolute", top: -160, left: -160, width: 480, height: 480,
      borderRadius: "50%",
      background: "radial-gradient(circle, rgba(var(--neon-cyan-rgb),0.16), transparent 60%)",
      pointerEvents: "none",
    }}/>
    <div style={{
      maxWidth: 1280, margin: "0 auto",
      display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 64, alignItems: "start",
      position: "relative",
    }}>
      {/* Left column — thesis + impact stats + CTA */}
      <div>
        <Eyebrow color="var(--neon-cyan)">// Section 04 · Breach Feed //</Eyebrow>
        <h2 className="ol-block-title" style={{
          fontFamily: "var(--font-display)", fontSize: 64, lineHeight: 0.95,
          textTransform: "uppercase", margin: "12px 0 20px",
          color: "var(--fg-1)",
        }}>
          The case for <span style={{ color: "var(--neon-cyan)", textShadow: "var(--glow-cyan)" }}>taking back control</span>
        </h2>
        <p style={{
          fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.55,
          color: "var(--fg-2)", maxWidth: 520, margin: "0 0 32px",
        }}>
          Doctor's notes, health records, phone numbers, credit cards, addresses,
          names and more...you've been told to entrust them to anyone who asks. 
          The pattern speaks for itself — Don't stand in the breach, decide who  
          actually needs your data.
        </p>

        {/* Impact stats — read from stats.json when available, static fallback otherwise. */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, auto)", gap: 32,
          marginBottom: 32,
        }}>
          {[
            { value: dollarsLost, label: "$ Lost (rolling 12mo)", color: "var(--neon-magenta)", glow: "var(--glow-magenta-sm)" },
            { value: piiLeaked,   label: "PII records leaked",    color: "var(--neon-amber)",   glow: "var(--glow-amber)" },
            { value: recordsLost, label: "Records exposed (6mo)", color: "var(--neon-cyan)",    glow: "var(--glow-cyan)" },
          ].map((s, i) => (
            <div key={i}>
              <div style={{
                fontFamily: "var(--font-terminal)", fontSize: 36, lineHeight: 1,
                color: s.color, textShadow: s.glow,
                letterSpacing: "0.04em",
              }}>{s.value}</div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10,
                color: "var(--fg-3)", letterSpacing: "0.22em",
                textTransform: "uppercase", marginTop: 6,
              }}>// {s.label} //</div>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <a href="../../../breach-feed.xml" target="_blank" rel="noopener" style={{ textDecoration: "none" }}>
            <Button variant="secondary">Subscribe — RSS →</Button>
          </a>
          <a href="../../../Breach Feed.html" target="_blank" rel="noopener" style={{
            fontFamily: "var(--font-mono)", fontSize: 11,
            color: "var(--neon-cyan)", letterSpacing: "0.22em",
            textTransform: "uppercase", textDecoration: "none",
            borderBottom: "1px dashed currentColor", paddingBottom: 2,
          }}>View full feed</a>
        </div>
      </div>

      {/* Right column — terminal ledger */}
      <div style={{
        position: "relative",
        background: "rgba(0,0,0,0.6)",
        border: "1px solid var(--neon-cyan)",
        boxShadow: "var(--glow-cyan)",
        padding: 28,
      }}>
        <CornerTicks corners="tl tr bl br" color="var(--neon-cyan)" size={18}/>

        {/* terminal header */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          marginBottom: 18, paddingBottom: 14,
          borderBottom: "1px solid rgba(var(--neon-cyan-rgb), 0.3)",
        }}>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--neon-cyan)", letterSpacing: "0.28em",
            textTransform: "uppercase",
          }}>// OL-BREACH.FEED · LIVE //</span>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--signal-ok)", letterSpacing: "0.22em",
            textTransform: "uppercase",
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: "50%",
              background: "var(--signal-ok)", boxShadow: "var(--glow-ok)",
              animation: "ol-pulse 1.6s ease-in-out infinite",
            }}></span>
            polling
          </span>
        </div>

        {/* entries */}
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {RECENT_BREACHES.map((b, i) => {
            const t = SEV_TONE[b.sev];
            return (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "auto auto 1fr auto",
                gap: 16, alignItems: "center",
                padding: "10px 0",
                borderBottom: i < RECENT_BREACHES.length - 1
                  ? "1px dashed var(--obsidian-fog)" : "none",
              }}>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 9,
                  color: t.color, letterSpacing: "0.24em", textTransform: "uppercase",
                  padding: "3px 8px", border: `1px solid ${t.color}`, lineHeight: 1,
                  whiteSpace: "nowrap",
                }}>{b.sev}</span>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  color: "var(--fg-3)", letterSpacing: "0.1em",
                  whiteSpace: "nowrap",
                }}>{b.date}</span>
                <span style={{
                  fontFamily: "var(--font-display)", fontSize: 18,
                  color: "var(--fg-1)", textTransform: "uppercase",
                  letterSpacing: "0.01em", lineHeight: 1,
                  overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
                }}>{b.org}</span>
                <span style={{
                  fontFamily: "var(--font-terminal)", fontSize: 20,
                  color: "var(--neon-cyan)", textShadow: "0 0 6px rgba(var(--neon-cyan-rgb), 0.6)",
                  letterSpacing: "0.02em", lineHeight: 1,
                  whiteSpace: "nowrap",
                }}>{b.records}</span>
              </div>
            );
          })}
        </div>

        {/* truncation marker removed — the full feed lives at the link above
            and isn't paywalled. The point of this section is the thesis,
            not a sales funnel. */}
      </div>
    </div>

    <style>{`
      @keyframes ol-pulse { 50% { opacity: 0.35; transform: scale(0.7); } }
      @media (max-width: 820px) {
        #feed > div:last-child { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
  );
};

Object.assign(window, { BreachFeedBlock });