// Extra brand primitives — the in-app's asymmetric 8-bit frame (2/3px hard
// borders + offset shadow), brought onto the dark marketing surface as an
// accent surface. Use sparingly — these are the "signature" treatment.

// Asymmetric numbered card. The signature brutalist frame from xCIPHR.
// Inverted (white-on-dark) because we're on the marketing surface.
function NumberedCard({ index, title, children }) {
  return (
    <div style={{
      position: 'relative',
      background: SP_COL.black,
      color: SP_COL.white,
      border: `2px solid ${SP_COL.white}`,
      borderRightWidth: 3,
      borderBottomWidth: 3,
      boxShadow: `4px 4px 0 0 ${SP_COL.grayDark}`,
      padding: '22px 20px',
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      }}>
        <span style={{
          fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.35em',
          textTransform: 'uppercase', color: SP_COL.grayLight, fontWeight: 600,
        }}>[ {String(index).padStart(2, '0')} ]</span>
        <span style={{
          width: 8, height: 8, background: SP_COL.white,
          display: 'inline-block',
        }} />
      </div>
      <div style={{
        fontFamily: SP_MONO_W, fontSize: 17, fontWeight: 600,
        lineHeight: 1.25, color: SP_COL.white,
      }}>{title}</div>
      <hr style={{ border: 0, borderTop: `1px solid ${SP_COL.grayDarker}`, margin: 0 }} />
      <div style={{
        fontFamily: SP_MONO_W, fontSize: 13, lineHeight: 1.6, color: SP_COL.grayLight,
      }}>{children}</div>
    </div>
  );
}

// Asymmetric pill / chip — the same frame at micro scale.
function FrameChip({ children, accent = false }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '8px 12px',
      background: accent ? SP_COL.white : SP_COL.black,
      color: accent ? SP_COL.black : SP_COL.white,
      border: `2px solid ${SP_COL.white}`,
      borderRightWidth: 3, borderBottomWidth: 3,
      boxShadow: `3px 3px 0 0 ${SP_COL.grayDark}`,
      fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.35em',
      textTransform: 'uppercase', fontWeight: 600,
    }}>{children}</span>
  );
}

// CLI install block — black background, mono, copy-to-clipboard affordance.
function CLIBlock({ lines }) {
  const [copied, setCopied] = React.useState(false);
  const copy = () => {
    const text = lines.map(l => {
      if (typeof l === 'string') return '$ ' + l;
      if (l.comment) return '# ' + l.comment;
      if (l.output) return '› ' + l.output;
      return '$ ' + (l.text || '');
    }).join('\n');
    if (navigator.clipboard) {
      navigator.clipboard.writeText(text).then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 1200);
      });
    }
  };

  return (
    <div style={{
      position: 'relative',
      border: `1px solid ${SP_COL.grayDark}`,
      borderRadius: 4,
      background: SP_COL.black,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '10px 14px',
        borderBottom: `1px solid ${SP_COL.grayDarker}`,
      }}>
        <span style={{
          fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.35em',
          textTransform: 'uppercase', color: SP_COL.grayLight,
        }}>terminal — install</span>
        <button onClick={copy} style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.3em',
          textTransform: 'uppercase', color: copied ? SP_COL.white : SP_COL.grayDark,
          padding: 0, transition: 'color 150ms ease',
        }}>{copied ? '[ copied ✓ ]' : '[ copy ]'}</button>
      </div>
      <div style={{ padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 6 }}>
        {lines.map((l, i) => {
          const text = l.text || l;
          const isComment = typeof l === 'object' && l.comment;
          const isOutput = typeof l === 'object' && l.output;
          const color = isComment ? SP_COL.grayDark : isOutput ? SP_COL.grayLight : SP_COL.white;
          return (
            <p key={i} style={{
              margin: 0, fontFamily: SP_MONO_W, fontSize: 13, lineHeight: 1.6,
              color,
            }}>
              <span style={{ color: SP_COL.grayDark, marginRight: 8 }}>
                {isComment ? '#' : isOutput ? '›' : '$'}
              </span>
              {isComment ? l.comment : isOutput ? l.output : text}
            </p>
          );
        })}
      </div>
    </div>
  );
}

// Big inline-stat row — telemetry as a wide horizontal strip.
function StatStrip({ items }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${items.length}, 1fr)`,
      border: `1px solid ${SP_COL.white}`,
      background: SP_COL.black,
    }} className="sp-stat-strip">
      {items.map((it, i) => (
        <div key={it.label} style={{
          padding: '18px 18px',
          borderRight: i < items.length - 1 ? `1px solid ${SP_COL.grayDarker}` : 'none',
          display: 'flex', flexDirection: 'column', gap: 6,
        }}>
          <span style={{
            fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.35em',
            textTransform: 'uppercase', color: SP_COL.grayDark, fontWeight: 600,
          }}>{it.label}</span>
          <span style={{
            fontFamily: SP_MONO_W, fontSize: 26, fontWeight: 600,
            color: SP_COL.white, letterSpacing: '-0.005em', lineHeight: 1,
          }}>{it.value}</span>
          {it.foot ? (
            <span style={{
              fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.25em',
              textTransform: 'uppercase', color: SP_COL.grayLight,
            }}>{it.foot}</span>
          ) : null}
        </div>
      ))}
    </div>
  );
}

// Section eyebrow — used to introduce each major section above its title.
function SectionEyebrow({ index, label }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.4em',
      textTransform: 'uppercase', color: SP_COL.grayDark, fontWeight: 600,
    }}>
      <span style={{ color: SP_COL.white }}>[ {String(index).padStart(2, '0')} ]</span>
      <span style={{ flex: 1, height: 1, background: SP_COL.grayDarker }} />
      <span>{label}</span>
    </div>
  );
}

Object.assign(window, { NumberedCard, FrameChip, CLIBlock, StatStrip, SectionEyebrow });