// STAT STRIP - key stats / ROI row for the product-page heroes.
// Editorial treatment: big serif figures, hairline rules, brand-red accent mark.
// Two variants: 'hairline' (rule-separated row) and 'cards' (bordered boxes).
// Reads tokens from EdCtx (chrome.jsx). Load AFTER chrome.jsx.
//
// Props:
//   stats   : [{ fig, label, sub }]
//   variant : 'hairline' | 'cards'   (default 'hairline')
//   count   : how many stats to show (default: all)

const { EdCtx: SsCtx, useIsMobile: ssUseIsMobile } = window;

function StatStrip({ stats, variant = 'hairline', count }) {
  const ED = React.useContext(SsCtx);
  const edText = ED.text;
  const isMobile = ssUseIsMobile();
  const items = (count ? stats.slice(0, count) : stats);
  const n = items.length;
  const cols = isMobile ? (n >= 4 ? 2 : 1) : n;

  // Supporting hues (brand teal / yellow / green), cycled per card.
  // `bar` = bright brand hue for the top rule; `fig` = legible shade for the big number.
  const HUES = [
    { bar: ED.teal,   fig: '#008E9C' },
    { bar: ED.yellow, fig: '#C77E00' },
    { bar: ED.green,  fig: '#3DA23A' },
  ];
  const hueAt = (i) => HUES[i % HUES.length];

  const figStyle = { ...edText.display, fontSize: isMobile ? 44 : 60, lineHeight: 0.95, letterSpacing: '-0.03em', margin: 0 };
  const labelStyle = { ...edText.med, fontSize: isMobile ? 20 : 21, color: ED.ink, margin: 0, letterSpacing: '-0.01em', lineHeight: 1.25 };
  const subStyle = { ...edText.sans, fontSize: isMobile ? 13.5 : 13.5, lineHeight: 1.5, color: ED.ink3, margin: 0 };

  const content = (s, hue) => (
    <>
      <p style={{ ...figStyle, color: hue.fig }}>{s.fig}</p>
      <p style={{ ...labelStyle, marginTop: isMobile ? 16 : 20 }}>{s.label}</p>
      {s.sub && <p style={{ ...subStyle, marginTop: 8 }}>{s.sub}</p>}
    </>
  );

  if (variant === 'cards') {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? `repeat(${cols}, 1fr)` : `repeat(${cols}, 276px)`, justifyContent: 'start', gap: isMobile ? 12 : 16 }}>
        {items.map((s, i) => {
          const hue = hueAt(i);
          return (
            <div key={s.label} style={{ border: `1px solid ${ED.rule}`, borderTop: `4px solid ${hue.bar}`, background: ED.bg, padding: isMobile ? '22px 20px 24px' : '28px 28px 32px', display: 'flex', flexDirection: 'column' }}>
              {content(s, hue)}
            </div>
          );
        })}
      </div>
    );
  }

  // hairline
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, borderTop: `1.5px solid ${ED.ink}`, columnGap: 0, rowGap: isMobile ? 28 : 0 }}>
      {items.map((s, i) => {
        const notLastCol = !isMobile && i < n - 1;
        return (
          <div key={s.label} style={{
            padding: isMobile ? '24px 20px 0' : '32px 40px 8px 0',
            borderRight: notLastCol ? `1px solid ${ED.rule}` : 'none',
            marginRight: notLastCol ? 40 : 0,
            display: 'flex', flexDirection: 'column',
          }}>
            {content(s, hueAt(i))}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { StatStrip });