/* Typography section */

function TypeRow({ label, size, lh, weight, tracking, sample }) {
  return (
    <div
      onClick={() => copy(`${size}/${lh}`)}
      style={{
        display: 'grid',
        gridTemplateColumns: '180px 1fr',
        alignItems: 'baseline',
        gap: 32,
        padding: '24px 0',
        borderBottom: '1px solid var(--border-tertiary)',
        cursor: 'pointer',
      }}
    >
      <div style={{ fontSize: 13, color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)', lineHeight: 1.5 }}>
        <div style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14 }}>
          {label}
        </div>
        <div style={{ marginTop: 6 }}>
          {size}px / {lh}px · {weight}{tracking ? ` · ${tracking}` : ''}
        </div>
      </div>
      <div style={{
        fontSize: size, lineHeight: `${lh}px`, fontWeight: weight,
        letterSpacing: tracking || 'normal',
        color: 'var(--text-primary)',
      }}>
        {sample}
      </div>
    </div>
  );
}

function WeightCard({ w, name }) {
  return (
    <Card pad={24} style={{ textAlign: 'center' }}>
      <div style={{ fontSize: 64, fontWeight: w, lineHeight: 1, color: 'var(--text-primary)', letterSpacing: '-0.02em' }}>Nr</div>
      <div style={{ fontSize: 12, fontWeight: 600, marginTop: 12, color: 'var(--text-primary)' }}>{name}</div>
      <div style={{ fontSize: 11, color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>{w}</div>
    </Card>
  );
}

function S_Type() {
  return (
    <Section
      id="type"
      eyebrow="03 · Typography"
      title="Inter, set tight."
      intro="One family, nine scale steps, three weights in active rotation. We use display sizes sparingly and let dense body copy do the real work of explaining material flows, compliance detail and the numbers behind the claim."
    >
      {/* Family */}
      <Block title="Family">
        <Card pad={0}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', minHeight: 260 }}>
            <div style={{ padding: 40, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              borderRight: '1px solid var(--border-tertiary)' }}>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', color: 'var(--text-quaternary)', textTransform: 'uppercase' }}>Primary</div>
                <div style={{ fontSize: 112, fontWeight: 600, lineHeight: 1, letterSpacing: '-0.04em',
                  color: 'var(--text-primary)', marginTop: 12 }}>Inter</div>
                <div style={{ fontSize: 15, color: 'var(--text-tertiary)', marginTop: 16, maxWidth: 480, lineHeight: 1.5 }}>
                  Variable sans by Rasmus Andersson. Neutral, highly legible at small sizes, extensive
                  language coverage — suited to dense data tables and terse UI labels.
                </div>
              </div>
              <div style={{ display: 'flex', gap: 24, marginTop: 24 }}>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)' }}>USE</div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>All body, UI, display</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)' }}>FALLBACK</div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>system-ui, Segoe UI, Arial</div>
                </div>
              </div>
            </div>
            <div style={{ padding: 40, background: 'var(--bg-secondary)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', color: 'var(--text-quaternary)', textTransform: 'uppercase' }}>Monospace</div>
                <div style={{ fontSize: 56, fontWeight: 500, fontFamily: 'var(--font-mono)', lineHeight: 1.1, color: 'var(--text-primary)', marginTop: 12 }}>JetBrains Mono</div>
                <div style={{ fontSize: 14, color: 'var(--text-tertiary)', marginTop: 16, maxWidth: 340, lineHeight: 1.5 }}>
                  For code, IDs, reference numbers, and any data that needs to tabulate cleanly.
                </div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-secondary)',
                marginTop: 24 }}>
                NR-2026-04-18-4102
              </div>
            </div>
          </div>
        </Card>
      </Block>

      {/* Weights */}
      <Block title="Weights in rotation" note="We lean on 400/500/600. Reserve 700+ for numerals and display.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 12 }}>
          <WeightCard w={300} name="Light" />
          <WeightCard w={400} name="Regular" />
          <WeightCard w={500} name="Medium" />
          <WeightCard w={600} name="Semibold" />
          <WeightCard w={700} name="Bold" />
          <WeightCard w={800} name="Extrabold" />
          <WeightCard w={900} name="Black" />
        </div>
      </Block>

      {/* Scale */}
      <Block title="Scale" note="Names match Tailwind + Untitled UI's display-* / text-* tokens.">
        <Card pad={'0 32px'}>
          <TypeRow label="display-2xl" size={72} lh={90} weight={600} tracking="-1.44px" sample="Materially smarter." />
          <TypeRow label="display-xl" size={60} lh={72} weight={600} tracking="-1.2px" sample="Plan, source, move, prove." />
          <TypeRow label="display-lg" size={48} lh={60} weight={600} tracking="-0.96px" sample="One platform. Every project." />
          <TypeRow label="display-md" size={36} lh={44} weight={600} tracking="-0.72px" sample="Every tonne tracked. Every decision auditable." />
          <TypeRow label="display-sm" size={30} lh={38} weight={600} sample="The UK's materials management platform for construction." />
          <TypeRow label="display-xs" size={24} lh={32} weight={600} sample="From first estimate to final report." />
          <TypeRow label="text-xl" size={20} lh={30} weight={500} sample="Every tonne tracked. Every decision auditable. Every report defensible." />
          <TypeRow label="text-lg" size={18} lh={28} weight={400} sample="Every tonne tracked. Every decision auditable. Every report defensible." />
          <TypeRow label="text-md" size={16} lh={24} weight={400} sample="Every tonne tracked. Every decision auditable. Every report defensible." />
          <TypeRow label="text-sm" size={14} lh={20} weight={400} sample="Every tonne tracked. Every decision auditable. Every report defensible." />
          <TypeRow label="text-xs" size={12} lh={18} weight={400} sample="Every tonne tracked. Every decision auditable. Every report defensible." />
        </Card>
      </Block>

      {/* Type scale — exact role values */}
      <Block title="Type scale" note="Exact values for every text role. Click a row to copy the CSS shorthand.">
        <Card pad={0}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '160px 1fr 220px 110px',
            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>Role</div>
            <div>Sample</div>
            <div>Size · LH · Weight · Tracking</div>
            <div>Class</div>
          </div>
          {[
            {
              role: 'Display (hero)',
              cls: '.t-display',
              size: 'clamp(48px, 6.5vw, 84px)',
              lh: 1.02,
              weight: 600,
              tracking: '-0.03em',
              sample: 'Materially smarter.',
              snippet: "font: 600 clamp(48px, 6.5vw, 84px)/1.02 'Inter', sans-serif; letter-spacing: -0.03em;",
              previewSize: 56,
            },
            {
              role: 'H2',
              cls: '.t-h2',
              size: '40px',
              lh: 1.1,
              weight: 600,
              tracking: '-0.02em',
              sample: 'Section heading.',
              snippet: "font: 600 40px/1.1 'Inter', sans-serif; letter-spacing: -0.02em;",
              previewSize: 32,
            },
            {
              role: 'H3',
              cls: '.t-h3',
              size: '18px',
              lh: 'normal',
              weight: 600,
              tracking: '0',
              sample: 'Block title.',
              snippet: "font: 600 18px/normal 'Inter', sans-serif; letter-spacing: 0;",
              previewSize: 18,
            },
            {
              role: 'Body',
              cls: '.t-body',
              size: '16px',
              lh: 1.6,
              weight: 400,
              tracking: '0',
              sample: 'Every tonne tracked. Every decision auditable.',
              snippet: "font: 400 16px/1.6 'Inter', sans-serif; letter-spacing: 0;",
              previewSize: 16,
            },
            {
              role: 'Body small',
              cls: '.t-body-sm',
              size: '14px',
              lh: 1.55,
              weight: 400,
              tracking: '0',
              sample: 'Supporting copy and dense list rows.',
              snippet: "font: 400 14px/1.55 'Inter', sans-serif; letter-spacing: 0;",
              previewSize: 14,
            },
            {
              role: 'Caption',
              cls: '.t-caption',
              size: '13px',
              lh: 1.5,
              weight: 500,
              tracking: '0',
              sample: 'Metadata, helper text.',
              snippet: "font: 500 13px/1.5 'Inter', sans-serif; letter-spacing: 0;",
              previewSize: 13,
            },
            {
              role: 'Eyebrow',
              cls: '.t-eyebrow',
              size: '11px',
              lh: 1,
              weight: 700,
              tracking: '.12em',
              sample: 'SECTION EYEBROW',
              snippet: "font: 700 11px/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase;",
              previewSize: 11,
              uppercase: true,
            },
            {
              role: 'Code / mono',
              cls: '.t-mono',
              size: '13px',
              lh: 1.5,
              weight: 500,
              tracking: '0',
              sample: 'NR-2026-04-18-4102',
              snippet: "font: 500 13px/1.5 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0;",
              previewSize: 13,
              mono: true,
            },
          ].map(r => (
            <div
              key={r.role}
              onClick={() => copy(r.snippet)}
              title="Click to copy CSS"
              style={{
                display: 'grid',
                gridTemplateColumns: '160px 1fr 220px 110px',
                alignItems: 'center',
                gap: 16,
                padding: '18px 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)' }}>
                {r.role}
              </div>
              <div style={{
                fontSize: r.previewSize,
                lineHeight: typeof r.lh === 'number' ? r.lh : 1.2,
                fontWeight: r.weight,
                letterSpacing: r.tracking !== '0' ? r.tracking : 'normal',
                color: 'var(--text-primary)',
                fontFamily: r.mono ? 'var(--font-mono)' : 'var(--font-body)',
                textTransform: r.uppercase ? 'uppercase' : 'none',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}>
                {r.sample}
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 12,
                color: 'var(--text-tertiary)',
                lineHeight: 1.5,
              }}>
                {r.size} · {r.lh} · {r.weight} · {r.tracking}
              </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.cls}
              </code>
            </div>
          ))}
        </Card>
      </Block>

      {/* Feature */}
      <Block title="Typographic voice" note="Tight display, generous body, tabular numbers.">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <Card pad={32} style={{ background: 'var(--brand-600)', color: '#fff', border: 'none' }}>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--accent-400)' }}>Display</div>
            <div style={{ fontSize: 56, lineHeight: 1.05, fontWeight: 600, letterSpacing: '-0.028em', marginTop: 16 }}>
              Compliance is the<br />problem we solve.
            </div>
            <div style={{ fontSize: 14, color: 'var(--brand-200)', marginTop: 20, fontFamily: 'var(--font-mono)' }}>
              60px · semibold · -2.8% tracking
            </div>
          </Card>
          <Card pad={32}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--text-quaternary)' }}>Body</div>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--text-secondary)', margin: '16px 0 0', maxWidth: 480 }}>
              Nexus ReGen gives construction teams one place to plan, source, move and prove every
              material on every project. When a load of crushed concrete leaves Site A at&nbsp;
              <span style={{ fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums' }}>08:42</span>
              &nbsp;and arrives at Site B at <span style={{ fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums' }}>11:17</span>,
              weighing <span style={{ fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums' }}>28.4t</span>,
              that's what the ledger reads — and that's what the audit shows. Clients save{' '}
              <span style={{ fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums' }}>26%</span> on average.
            </p>
            <div style={{ fontSize: 12, color: 'var(--text-quaternary)', marginTop: 20, fontFamily: 'var(--font-mono)' }}>
              16px · regular · 1.65 line-height · tabular numerals for figures
            </div>
          </Card>
        </div>
      </Block>

      {/* Rules */}
      <Block title="Hard rules">
        <Card pad={24}>
          <ul style={{ margin: 0, paddingLeft: 24, fontSize: 15, lineHeight: 1.7, color: 'var(--text-secondary)' }}>
            <li>Display sizes (30px+) <b>never</b> go below 600 weight.</li>
            <li>Body text runs <b>400 or 500</b>. Never 300 below 18px — it disappears.</li>
            <li>All numbers in tables and data displays use <Code>font-variant-numeric: tabular-nums</Code>.</li>
            <li>Don't track out all-caps labels beyond <Code>0.12em</Code>.</li>
            <li>Max measure for paragraphs: <b>72 characters</b>. Use <Code>text-wrap: pretty</Code>.</li>
            <li>Never italicise Inter — we use weight or colour for emphasis instead.</li>
          </ul>
        </Card>
      </Block>
    </Section>
  );
}
window.S_Type = S_Type;