// Brand-aligned content blocks for evidence / stats / quotes — used across
// the homepage AND the about / how-it-works pages.

// Big stat block with a left "image slot" (placeholder where the user can
// drop an image, e.g. the YubiKey photo on the FBI quote).
function ImageStatBlock({ src, alt = '', children, source, sourceHref }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '220px 1fr', gap: 28,
      alignItems: 'center',
    }} className="sp-image-stat">
      <div style={{
        width: '100%', aspectRatio: '4 / 3',
        background: SP_COL.grayDarker,
        border: `1px solid ${SP_COL.white}`,
        position: 'relative', overflow: 'hidden',
      }}>
        {src ? (
          <img src={src} alt={alt} style={{
            width: '100%', height: '100%', objectFit: 'cover',
            filter: 'grayscale(1) contrast(1.05)',
          }} />
        ) : (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.4em',
            textTransform: 'uppercase', color: SP_COL.grayDark,
          }}>[ image · {alt || 'placeholder'} ]</div>
        )}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{
          fontFamily: SP_MONO_W, fontSize: 'clamp(18px, 1.8vw, 22px)',
          lineHeight: 1.45, color: SP_COL.white, fontWeight: 500,
        }}>{children}</div>
        {source ? (
          <p style={{
            margin: 0, fontFamily: SP_MONO_W, fontSize: 10,
            letterSpacing: '0.3em', textTransform: 'uppercase',
            color: SP_COL.grayDark,
          }}>
            › Source: {sourceHref ? (
              <a href={sourceHref} target="_blank" rel="noopener noreferrer"
                 style={{ color: SP_COL.grayLight, textDecoration: 'none',
                          borderBottom: `1px solid ${SP_COL.grayDarker}` }}>{source}</a>
            ) : source}
          </p>
        ) : null}
      </div>
    </div>
  );
}

// Two-column section title — eyebrow + headline + body, used to introduce
// content pages (About, How it works).
function PageHeader({ eyebrow, title, lede }) {
  return (
    <header style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <span style={{
        fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.4em',
        textTransform: 'uppercase', color: SP_COL.grayDark, fontWeight: 600,
      }}>{eyebrow}</span>
      <h1 style={{
        fontFamily: SP_MONO_W, fontSize: 'clamp(34px, 5vw, 56px)',
        lineHeight: 1.1, fontWeight: 600, margin: 0,
        color: SP_COL.white, letterSpacing: '-0.01em', textWrap: 'balance',
      }}>{title}</h1>
      {lede ? (
        <p style={{
          fontFamily: SP_MONO_W, fontSize: 16, lineHeight: 1.65,
          color: SP_COL.grayLight, margin: 0, maxWidth: 760,
        }}>{lede}</p>
      ) : null}
    </header>
  );
}

// Plain content card — a softer dark card, no green halo, used for long-form
// page content (about, founder bio, legal). Same family as OutlineCard but
// without the offset ghost behind it.
function ContentCard({ title, children }) {
  return (
    <div style={{
      border: `1px solid ${SP_COL.white}`, borderRadius: 4,
      background: SP_COL.black, padding: '28px 28px',
    }}>
      {title ? (
        <>
          <h2 style={{
            fontFamily: SP_MONO_W, fontSize: 'clamp(20px, 2vw, 24px)',
            lineHeight: 1.2, fontWeight: 600, color: SP_COL.white,
            margin: '0 0 14px 0', letterSpacing: '-0.005em',
          }}>{title}</h2>
          <hr style={{ border: 0,
                       borderTop: `1px solid ${SP_COL.grayDarker}`,
                       margin: '0 0 18px 0' }} />
        </>
      ) : null}
      <div style={{
        fontFamily: SP_MONO_W, fontSize: 14, lineHeight: 1.7,
        color: SP_COL.grayLight,
      }}>{children}</div>
    </div>
  );
}

Object.assign(window, { ImageStatBlock, PageHeader, ContentCard });