// kit-foundations.jsx — clear space, min sizes, misuse, wave pattern, voice
// Relies on marks (Badge, Core, Monogram, Wordmark, CT) + kit-ui.

/* ---------- Clear space ---------- */
function ClearSpace() {
  const k = KIT;
  const x = 44; // one unit = the husk-dot diameter, conceptually
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 28, alignItems: 'stretch' }}>
      <div style={{ background: '#fff', borderRadius: 18, border: '1px solid rgba(12,63,58,0.09)',
        padding: 34, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ position: 'relative', padding: x, border: '1px dashed rgba(12,63,58,0.28)', borderRadius: 8 }}>
          <div style={{ position: 'absolute', inset: 0, border: `${x}px solid rgba(26,162,148,0.07)`, borderRadius: 8 }} />
          <Badge s={170} />
          {['top','bottom','left','right'].map((side) => (
            <span key={side} style={{ position: 'absolute', fontFamily: "'Space Grotesk', sans-serif",
              fontSize: 12, fontWeight: 600, color: 'var(--ct-accent)',
              ...(side==='top' && { top: x/2-7, left: '50%', transform: 'translateX(-50%)' }),
              ...(side==='bottom' && { bottom: x/2-7, left: '50%', transform: 'translateX(-50%)' }),
              ...(side==='left' && { left: x/2-4, top: '50%', transform: 'translateY(-50%)' }),
              ...(side==='right' && { right: x/2-4, top: '50%', transform: 'translateY(-50%)' }) }}>x</span>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 18 }}>
        <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 20, fontWeight: 600, color: k.INK2 }}>Give it room to breathe</div>
        <p style={{ margin: 0, fontFamily: "'Outfit', sans-serif", fontSize: 15.5, lineHeight: 1.7, color: k.MUTE }}>
          Keep clear space of at least <b>x</b> on every side, where <b>x</b> equals the diameter of one
          accent dot on the husk ring. Nothing — type, photo edge, or another logo — enters this zone.
          Because the badge is radially symmetric, the margin is equal on all four sides by construction.
        </p>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontFamily: "'Outfit', sans-serif",
          fontSize: 13.5, color: k.FAINT }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(26,162,148,0.18)', border: '1px solid rgba(26,162,148,0.4)' }} />
          tinted band = minimum clear space
        </div>
      </div>
    </div>
  );
}

/* ---------- Minimum sizes ---------- */
function MinSizes() {
  const k = KIT;
  const rows = [
    { mark: 'Primary badge', el: <Badge s={96} />, min: '36 mm / 132 px', use: 'Full lockup with ring text legible' },
    { mark: 'Core mark', el: <Core s={64} />, min: '16 mm / 56 px', use: 'When the ring text would close up' },
    { mark: 'CT monogram', el: <Monogram s={48} />, min: '8 mm / 28 px', use: 'Favicons, lids, app glyphs' },
  ];
  return (
    <div style={{ background: '#fff', borderRadius: 18, border: '1px solid rgba(12,63,58,0.09)', overflow: 'hidden' }}>
      {rows.map((r, i) => (
        <div key={r.mark} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 1fr', alignItems: 'center',
          gap: 20, padding: '24px 30px', borderTop: i ? '1px solid rgba(12,63,58,0.08)' : 'none' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>{r.el}</div>
          <div>
            <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 15, fontWeight: 600, color: '#1a3b36' }}>{r.mark}</div>
            <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13.5, color: k.FAINT, marginTop: 3 }}>{r.use}</div>
          </div>
          <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 14, fontWeight: 600,
            color: 'var(--ct-accent)', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>min {r.min}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Misuse ---------- */
function Misuse() {
  const k = KIT;
  const Dont = ({ children, label }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ position: 'relative', background: '#fff', borderRadius: 16, border: '1px solid rgba(12,63,58,0.09)',
        height: 150, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
        {children}
        <span style={{ position: 'absolute', top: 10, right: 10, width: 22, height: 22, borderRadius: '50%',
          background: '#E2483D', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 14, fontWeight: 700, fontFamily: "'Space Grotesk', sans-serif" }}>✕</span>
      </div>
      <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13.5, color: k.MUTE, textAlign: 'center' }}>{label}</div>
    </div>
  );
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))', gap: 22 }}>
      <Dont label="Don’t stretch or distort"><div style={{ transform: 'scaleX(1.5)' }}><Badge s={104} /></div></Dont>
      <Dont label="Don’t rotate the badge"><div style={{ transform: 'rotate(18deg)' }}><Badge s={104} /></div></Dont>
      <Dont label="Don’t recolor off-palette"><Badge s={104} mono="#8B5CF6" /></Dont>
      <Dont label="Don’t add drop shadows"><div style={{ filter: 'drop-shadow(0 6px 5px rgba(0,0,0,0.45))' }}><Badge s={104} /></div></Dont>
      <Dont label="Don’t crowd the clear space">
        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}><Badge s={104} /><span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, color: k.INK2, fontSize: 13 }}>OPEN!</span></div>
      </Dont>
      <Dont label="Don’t place on busy photos">
        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'repeating-linear-gradient(45deg, #d98f4f, #d98f4f 8px, #b5532a 8px, #b5532a 16px)' }}><Badge s={104} /></div>
      </Dont>
    </div>
  );
}

/* ---------- Wave pattern (brand graphic) ---------- */
function WavePattern({ height = 150, bg, wave, opacity = 1, scale = 1 }) {
  const k = KIT;
  const w = 120 * scale;
  const tile = encodeURIComponent(
    `<svg xmlns='http://www.w3.org/2000/svg' width='${w}' height='${w}' viewBox='0 0 120 120'>` +
    `<path d='M-2,40 C28,22 92,22 122,40 M-2,72 C28,54 92,54 122,72 M-2,104 C28,86 92,86 122,104' ` +
    `fill='none' stroke='${wave}' stroke-width='5' stroke-linecap='round'/></svg>`
  );
  return (
    <div style={{ width: '100%', height, borderRadius: 18, background: bg,
      backgroundImage: `url("data:image/svg+xml,${tile}")`, backgroundSize: `${w}px ${w}px`,
      opacity, border: '1px solid rgba(12,63,58,0.09)' }} />
  );
}

Object.assign(window, { ClearSpace, MinSizes, Misuse, WavePattern });