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

const StatBar = () => (
  <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(4, 1fr)", gap: 32,
    }} className="statbar-grid">
      {[
        { value: "17",     label: "Breaches tracked" },
        { value: "372M+",  label: "Records exposed" },
        { value: "7",      label: "Sectors hit" },
        { value: "3",      label: "Critical disclosures" },
      ].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: repeat(2, 1fr) !important; gap: 28px 32px !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { StatBar });