/* Foundations — spacing, radius, shadow, motion */

function SpacingBar({ label, px }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '10px 0',
      borderBottom: '1px solid var(--border-tertiary)' }}>
      <div style={{ width: 80, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-quaternary)' }}>{label}</div>
      <div style={{ width: 52, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-tertiary)' }}>{px}px</div>
      <div style={{ flex: 1, height: 16, background: 'var(--brand-50)', borderRadius: 2, position: 'relative', overflow: 'hidden' }}>
        <div style={{
          width: px, maxWidth: '100%',
          height: '100%', background: 'var(--brand-500)',
        }} />
      </div>
    </div>
  );
}

function RadiusTile({ name, val }) {
  return (
    <div style={{
      padding: 20,
      background: 'var(--bg-primary)',
      border: '1px solid var(--border-secondary)',
      borderRadius: 12,
      textAlign: 'center',
    }}>
      <div style={{
        width: 76, height: 76, margin: '0 auto',
        background: 'var(--brand-600)',
        borderRadius: val,
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute', top: 6, left: 6,
          width: 14, height: 14,
          background: 'var(--accent-400)',
          borderRadius: Math.max(0, parseInt(val) - 6) + 'px',
        }} />
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, marginTop: 12 }}>{name}</div>
      <div style={{ fontSize: 11, color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)' }}>{val}</div>
    </div>
  );
}

function ShadowTile({ name, val }) {
  return (
    <div style={{
      padding: 28,
      background: 'var(--bg-secondary)',
      borderRadius: 12,
      textAlign: 'center',
    }}>
      <div style={{
        width: 80, height: 80, margin: '0 auto',
        background: '#fff', borderRadius: 12,
        boxShadow: val,
      }} />
      <div style={{ fontSize: 13, fontWeight: 600, marginTop: 20 }}>{name}</div>
      <div style={{ fontSize: 11, color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>shadow-{name}</div>
    </div>
  );
}

function S_Foundations() {
  return (
    <Section
      id="foundations"
      eyebrow="04 · Foundations"
      title="Spacing, radius, elevation."
      intro="A strict 4-point grid. Two radius defaults (8 and 12). A six-step shadow ramp. Everything composable, everything token-named."
    >
      {/* Spacing */}
      <Block title="Spacing scale" note="All padding, gap and margin values come from this scale.">
        <Card pad={24}>
          {[
            ['s-1', 4], ['s-2', 8], ['s-3', 12], ['s-4', 16],
            ['s-5', 20], ['s-6', 24], ['s-8', 32], ['s-10', 40],
            ['s-12', 48], ['s-16', 64], ['s-20', 80], ['s-24', 96],
          ].map(([k, v]) => <SpacingBar key={k} label={k} px={v} />)}
        </Card>
      </Block>

      {/* Spacing guidance */}
      <Block title="When to use which step" note="A practical guide to picking spacing values. Click a row to copy the token.">
        <Card pad={0}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '64px 110px 80px 1fr',
            alignItems: 'center',
            gap: 16,
            padding: '12px 24px',
            borderBottom: '1px solid var(--border-tertiary)',
            background: 'var(--bg-secondary)',
            fontFamily: 'var(--font-mono)',
            fontSize: 11,
            fontWeight: 700,
            letterSpacing: '.08em',
            textTransform: 'uppercase',
            color: 'var(--text-quaternary)',
          }}>
            <div>Step</div>
            <div>Token</div>
            <div>Pixels</div>
            <div>Typical use</div>
          </div>
          {[
            { step: 1, token: '--s-1', px: 4, use: 'Tight chip/badge interior padding, hairlines between related elements' },
            { step: 2, token: '--s-2', px: 8, use: 'Icon-to-label gap, dense list rows' },
            { step: 3, token: '--s-3', px: 12, use: 'Form field interior, small card padding' },
            { step: 4, token: '--s-4', px: 16, use: 'Default gap between siblings, card padding' },
            { step: 5, token: '--s-5', px: 20, use: 'Slightly looser card padding' },
            { step: 6, token: '--s-6', px: 24, use: 'Card padding, mid-density block separation' },
            { step: 8, token: '--s-8', px: 32, use: 'Block separation in a section' },
            { step: 10, token: '--s-10', px: 40, use: 'Section padding L/R, headline → body gap' },
            { step: 12, token: '--s-12', px: 48, use: 'Section vertical rhythm' },
            { step: 16, token: '--s-16', px: 64, use: 'Major content separation' },
            { step: 20, token: '--s-20', px: 80, use: 'Hero padding' },
            { step: 24, token: '--s-24', px: 96, use: 'Page-level top/bottom padding on hero sections' },
          ].map(r => (
            <div
              key={r.step}
              onClick={() => copy(`var(${r.token})`)}
              title="Click to copy var(--s-N)"
              style={{
                display: 'grid',
                gridTemplateColumns: '64px 110px 80px 1fr',
                alignItems: 'center',
                gap: 16,
                padding: '14px 24px',
                borderBottom: '1px solid var(--border-tertiary)',
                cursor: 'pointer',
                transition: 'background .15s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{
                fontSize: 14, fontWeight: 600, color: 'var(--text-primary)',
                fontFamily: 'var(--font-mono)',
              }}>{r.step}</div>
              <code style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 12,
                color: 'var(--brand-600)',
                background: 'var(--bg-tertiary)',
                padding: '2px 8px',
                borderRadius: 6,
                border: '1px solid var(--border-secondary)',
                justifySelf: 'start',
              }}>{r.token}</code>
              <div style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 12,
                color: 'var(--text-tertiary)',
              }}>{r.px}px</div>
              <div style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
                {r.use}
              </div>
            </div>
          ))}
        </Card>
      </Block>

      {/* Grid */}
      <Block title="Layout grid" note="12-column, 1240px max. 80px page gutter at desktop.">
        <Card pad={0} style={{ overflow: 'hidden' }}>
          <div style={{
            padding: 24, background: 'var(--bg-secondary)',
            display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 16,
          }}>
            {Array.from({ length: 12 }).map((_, i) => (
              <div key={i} style={{
                height: 120,
                background: 'rgba(18,21,65,.06)',
                border: '1px dashed var(--brand-300)',
                borderRadius: 4,
              }} />
            ))}
          </div>
          <div style={{ padding: 20, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
            borderTop: '1px solid var(--border-tertiary)' }}>
            {[
              ['Columns', '12'], ['Gutter', '16px'],
              ['Max width', '1240px'], ['Page padding', '40px → 80px'],
            ].map(([k, v]) => (
              <div key={k}>
                <div style={{ fontSize: 11, color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)',
                  letterSpacing: '.06em', textTransform: 'uppercase' }}>{k}</div>
                <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>{v}</div>
              </div>
            ))}
          </div>
        </Card>
      </Block>

      {/* Radius */}
      <Block title="Radius" note="We're deliberately low-radius — it signals industrial, not consumer-cute.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 12 }}>
          <RadiusTile name="None" val="0px" />
          <RadiusTile name="Xs" val="2px" />
          <RadiusTile name="Sm" val="4px" />
          <RadiusTile name="Md" val="6px" />
          <RadiusTile name="Lg" val="8px" />
          <RadiusTile name="Xl" val="12px" />
          <RadiusTile name="2xl" val="16px" />
          <RadiusTile name="Full" val="9999px" />
        </div>
      </Block>

      {/* Shadow */}
      <Block title="Elevation" note="Shadows are soft, never more than 2xl in product UI. 3xl is marketing-only.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12 }}>
          <ShadowTile name="xs" val="0 1px 2px rgba(16,24,40,.05)" />
          <ShadowTile name="sm" val="0 1px 3px rgba(16,24,40,.10), 0 1px 2px -1px rgba(16,24,40,.10)" />
          <ShadowTile name="md" val="0 4px 6px -1px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.06)" />
          <ShadowTile name="lg" val="0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03)" />
          <ShadowTile name="xl" val="0 20px 24px -4px rgba(16,24,40,.08), 0 8px 8px -4px rgba(16,24,40,.03)" />
          <ShadowTile name="2xl" val="0 24px 48px -12px rgba(16,24,40,.18)" />
        </div>
      </Block>

      {/* Motion */}
      <Block title="Motion" note="Purposeful, fast, never bouncy.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12 }}>
          {[
            { n: 'Instant', v: '0ms', u: 'State changes' },
            { n: 'Fast', v: '150ms', u: 'Hover, focus, small toggles' },
            { n: 'Default', v: '250ms', u: 'Most transitions, menus' },
            { n: 'Slow', v: '400ms', u: 'Page transitions, large reveals' },
          ].map(m => (
            <Card key={m.n} pad={20}>
              <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.01em' }}>{m.n}</div>
              <div style={{ fontSize: 13, color: 'var(--text-tertiary)', marginTop: 4 }}>{m.u}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-quaternary)', marginTop: 12 }}>
                {m.v} · cubic-bezier(.2,.8,.2,1)
              </div>
            </Card>
          ))}
        </div>
      </Block>
    </Section>
  );
}
window.S_Foundations = S_Foundations;