/* Components section — UI kit showcase */

function ComponentFrame({ title, children, bg, code }) {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const onCopy = () => {
    if (!code) return;
    copy(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };
  const headerBtn = {
    background: 'transparent',
    border: '1px solid var(--border-tertiary)',
    color: 'var(--text-tertiary)',
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    fontWeight: 600,
    padding: '4px 10px',
    borderRadius: 6,
    cursor: 'pointer',
    letterSpacing: '.02em',
  };
  return (
    <div style={{
      border: '1px solid var(--border-secondary)',
      borderRadius: 12,
      overflow: 'hidden',
      background: 'var(--bg-primary)',
    }}>
      <div style={{
        padding: '10px 16px',
        borderBottom: '1px solid var(--border-tertiary)',
        fontSize: 12, fontWeight: 600, color: 'var(--text-tertiary)',
        fontFamily: 'var(--font-mono)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 12,
      }}>
        <span>{title}</span>
        {code && (
          <span style={{ display: 'inline-flex', gap: 6 }}>
            <button type="button" onClick={() => setOpen(o => !o)} style={headerBtn}>
              {open ? 'Hide code' : 'Show code'}
            </button>
            <button type="button" onClick={onCopy} style={headerBtn}>
              {copied ? '✓ Copied' : 'Copy'}
            </button>
          </span>
        )}
      </div>
      <div style={{
        padding: 28, background: bg || 'var(--bg-secondary)',
        display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center',
      }}>
        {children}
      </div>
      {code && open && (
        <pre style={{
          margin: 0,
          padding: 16,
          background: 'var(--brand-50)',
          color: 'var(--text-primary)',
          borderTop: '1px solid var(--border-tertiary)',
          fontFamily: 'var(--font-mono)',
          fontSize: 12,
          lineHeight: 1.6,
          maxHeight: 280,
          overflow: 'auto',
          borderRadius: 0,
        }}>{code}</pre>
      )}
    </div>
  );
}

/* Text input */
function Input({ placeholder = 'Enter site name', prefix, suffix, error, disabled, value, size='md' }) {
  const [v, setV] = useState(value || '');
  return (
    <div style={{
      display: 'flex', alignItems: 'center',
      background: disabled ? 'var(--bg-secondary)' : 'var(--bg-primary)',
      border: `1px solid ${error ? 'var(--error-500)' : 'var(--border-primary)'}`,
      borderRadius: 8, padding: size === 'lg' ? '10px 14px' : '8px 12px',
      fontSize: 14, width: 260,
      boxShadow: error ? '0 0 0 3px rgba(240,68,56,.12)' : '0 1px 2px rgba(16,24,40,.05)',
      opacity: disabled ? 0.6 : 1,
    }}>
      {prefix && (
        <span style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--text-quaternary)', marginRight: 8, flexShrink: 0,
        }}>{prefix}</span>
      )}
      <input
        disabled={disabled}
        placeholder={placeholder}
        value={v}
        onChange={e => setV(e.target.value)}
        style={{ border: 'none', outline: 'none', background: 'transparent',
          flex: 1, fontSize: 14, color: 'var(--text-primary)', fontFamily: 'inherit', minWidth: 0 }}
      />
      {suffix && <span style={{ color: 'var(--text-quaternary)', marginLeft: 8, fontFamily: 'var(--font-mono)', fontSize: 12 }}>{suffix}</span>}
    </div>
  );
}

/* Search icon — sensible 16px prefix for search-style inputs */
function SearchIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  );
}

/* Scale icon — used as a sensible prefix for weight/tonnage inputs */
function ScaleIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 3v18" />
      <path d="M5 21h14" />
      <path d="M5 7h14" />
      <path d="M5 7l-3 7a4 4 0 0 0 6 0L5 7z" />
      <path d="M19 7l-3 7a4 4 0 0 0 6 0l-3-7z" />
    </svg>
  );
}

/* WeightInput — number + unit toggle (tonnes ↔ m³).
   Mirrors the MaterialVolumeInput pattern from the Nexus product
   (apps/web/src/components/application/materials/material-volume-input.tsx),
   simplified for showcase. Auto-converts when a reference density is set. */
function WeightInput({ initialValue = '', initialUnit = 't', density = null, error, disabled, width = 260 }) {
  const [v, setV] = useState(initialValue);
  const [unit, setUnit] = useState(initialUnit);
  const otherUnit = unit === 't' ? 'm³' : 't';

  const switchUnit = () => {
    if (!v || !density) { setUnit(otherUnit); return; }
    const num = parseFloat(v);
    if (Number.isNaN(num)) { setUnit(otherUnit); return; }
    const next = unit === 'm³' ? num * density : num / density;
    setV(String(Number(next.toFixed(2))));
    setUnit(otherUnit);
  };

  return (
    <div style={{
      display: 'flex', alignItems: 'stretch',
      background: disabled ? 'var(--bg-secondary)' : 'var(--bg-primary)',
      border: `1px solid ${error ? 'var(--error-500)' : 'var(--border-primary)'}`,
      borderRadius: 8,
      width, fontSize: 14,
      boxShadow: error ? '0 0 0 3px rgba(240,68,56,.12)' : '0 1px 2px rgba(16,24,40,.05)',
      opacity: disabled ? 0.6 : 1,
      overflow: 'hidden',
    }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--text-quaternary)', paddingLeft: 12,
      }}>
        <ScaleIcon size={16} />
      </span>
      <input
        type="number" inputMode="decimal" min="0"
        disabled={disabled}
        placeholder="0"
        value={v}
        onChange={e => setV(e.target.value)}
        style={{
          border: 'none', outline: 'none', background: 'transparent',
          flex: 1, fontSize: 14, color: 'var(--text-primary)',
          fontFamily: 'inherit', minWidth: 0, padding: '8px 8px 8px 10px',
        }}
      />
      <button
        type="button"
        disabled={disabled}
        onClick={switchUnit}
        title={`Switch to ${otherUnit}${density ? ' (auto-converted)' : ''}`}
        style={{
          border: 'none', borderLeft: '1px solid var(--border-secondary)',
          background: 'var(--bg-secondary)',
          color: 'var(--text-secondary)',
          padding: '0 12px', fontSize: 13, fontWeight: 600,
          fontFamily: 'inherit', cursor: disabled ? 'not-allowed' : 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}
      >
        {unit}
        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
          <path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>
    </div>
  );
}

/* Checkbox */
function Check({ label, checked: c0, note }) {
  const [c, setC] = useState(!!c0);
  return (
    <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer' }}>
      <span onClick={() => setC(!c)} style={{
        width: 18, height: 18, borderRadius: 4,
        background: c ? 'var(--brand-600)' : 'var(--bg-primary)',
        border: `1.5px solid ${c ? 'var(--brand-600)' : 'var(--border-primary)'}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'all .15s', flexShrink: 0, marginTop: 1,
      }}>
        {c && (
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M1 5l3 3 5-7" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
        )}
      </span>
      <span>
        <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-secondary)' }}>{label}</span>
        {note && <div style={{ fontSize: 13, color: 'var(--text-quaternary)', marginTop: 2 }}>{note}</div>}
      </span>
    </label>
  );
}

/* Toggle */
function Toggle({ on: on0, label }) {
  const [on, setOn] = useState(!!on0);
  return (
    <label style={{ display: 'inline-flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
      <span onClick={() => setOn(!on)} style={{
        width: 36, height: 20, borderRadius: 999, position: 'relative',
        background: on ? 'var(--brand-600)' : 'var(--neutral-300)',
        transition: 'background .2s',
      }}>
        <span style={{
          position: 'absolute', top: 2, left: on ? 18 : 2,
          width: 16, height: 16, borderRadius: 999,
          background: '#fff', boxShadow: '0 1px 2px rgba(0,0,0,.2)',
          transition: 'left .2s',
        }} />
      </span>
      {label && <span style={{ fontSize: 14, fontWeight: 500 }}>{label}</span>}
    </label>
  );
}

/* Data table mock */
function DataTable() {
  const rows = [
    { id: 'NR-04182-A', type: 'Crushed concrete 6F2', from: 'Newcastle Quays', to: 'Gateshead Link', t: '28.4t', status: 'Delivered' },
    { id: 'NR-04182-B', type: 'Asphalt planings',     from: 'A1 Western',     to: 'Hexham Depot',  t: '24.1t', status: 'In transit' },
    { id: 'NR-04182-C', type: 'Topsoil, class A',     from: 'Sage Gateshead', to: 'Stockton Plot', t: '18.9t', status: 'Queued' },
    { id: 'NR-04182-D', type: 'Recycled aggregate',   from: 'Tyne Yard 4',    to: 'Jarrow East',   t: '31.2t', status: 'Delivered' },
  ];
  const statusCol = { Delivered: 'success', 'In transit': 'accent', Queued: 'gray' };
  return (
    <div style={{
      background: 'var(--bg-primary)', border: '1px solid var(--border-secondary)',
      borderRadius: 12, overflow: 'hidden',
    }}>
      <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-tertiary)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 16, fontWeight: 600 }}>Today's movements</div>
          <div style={{ fontSize: 13, color: 'var(--text-tertiary)', marginTop: 2 }}>18 April 2026 · 4 loads · 102.6t</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Btn variant="secondary" size="sm">Filter</Btn>
          <Btn variant="primary" size="sm">Export</Btn>
        </div>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
        <thead>
          <tr style={{ background: 'var(--bg-secondary)' }}>
            {['Ref', 'Material', 'From', 'To', 'Weight', 'Status'].map(h => (
              <th key={h} style={{ textAlign: 'left', padding: '10px 20px', fontSize: 12,
                fontWeight: 600, color: 'var(--text-quaternary)', letterSpacing: '.04em',
                textTransform: 'uppercase', borderBottom: '1px solid var(--border-tertiary)' }}>
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map(r => (
            <tr key={r.id} style={{ borderBottom: '1px solid var(--border-tertiary)' }}>
              <td style={{ padding: '14px 20px', fontFamily: 'var(--font-mono)',
                fontSize: 12, color: 'var(--text-tertiary)' }}>{r.id}</td>
              <td style={{ padding: '14px 20px', fontWeight: 500 }}>{r.type}</td>
              <td style={{ padding: '14px 20px', color: 'var(--text-tertiary)' }}>{r.from}</td>
              <td style={{ padding: '14px 20px', color: 'var(--text-tertiary)' }}>{r.to}</td>
              <td style={{ padding: '14px 20px', fontFamily: 'var(--font-mono)',
                fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>{r.t}</td>
              <td style={{ padding: '14px 20px' }}>
                <Badge color={statusCol[r.status]} dot>{r.status}</Badge>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function S_Components() {
  return (
    <Section
      id="components"
      eyebrow="06 · Components"
      title="The kit."
      intro="The building blocks that ship in every Nexus ReGen product. Lean, accessible, built on Untitled UI primitives with our tokens baked in."
    >
      {/* Buttons */}
      <Block title="Buttons" note="Six variants · four sizes">
        <ComponentFrame title="Variants" code={`function Button({ children, variant = 'primary', onClick }) {
  const styles = {
    primary:     { background: 'var(--brand-600)',  color: '#fff',              border: '1px solid var(--brand-700)' },
    accent:      { background: 'var(--accent-400)', color: 'var(--brand-700)',  border: '1px solid var(--accent-500)', fontWeight: 700 },
    secondary:   { background: 'var(--bg-primary)', color: 'var(--text-secondary)', border: '1px solid var(--border-primary)' },
    tertiary:    { background: 'transparent',       color: 'var(--text-secondary)', border: '1px solid transparent' },
    destructive: { background: 'var(--error-500)',  color: '#fff',              border: '1px solid #B42318' },
  }[variant];
  return (
    <button onClick={onClick} style={{
      padding: '10px 16px', borderRadius: 8, fontSize: 14, fontWeight: 600,
      cursor: 'pointer', ...styles,
    }}>{children}</button>
  );
}

// <Button variant="primary">Create load</Button>
// <Button variant="accent">Export ledger</Button>`}>
          <Btn variant="primary">Create load</Btn>
          <Btn variant="accent">Export ledger</Btn>
          <Btn variant="secondary">Cancel</Btn>
          <Btn variant="tertiary">Reset</Btn>
          <Btn variant="destructive">Delete draft</Btn>
          <Btn variant="link">Learn more →</Btn>
        </ComponentFrame>
        <div style={{ height: 12 }} />
        <ComponentFrame title="Sizes" code={`// Button size scale — radius bumps at lg/xl for visual weight
const sizes = {
  sm: { padding: '8px 12px',  fontSize: 14, borderRadius: 8 },
  md: { padding: '10px 16px', fontSize: 14, borderRadius: 8 },
  lg: { padding: '12px 20px', fontSize: 16, borderRadius: 10 },
  xl: { padding: '14px 22px', fontSize: 16, borderRadius: 10 },
};

<button style={{ ...sizes.md, background: 'var(--brand-600)', color: '#fff' }}>
  Medium
</button>
<button disabled style={{ ...sizes.md, opacity: 0.5, cursor: 'not-allowed' }}>
  Disabled
</button>`}>
          <Btn size="sm">Small</Btn>
          <Btn size="md">Medium</Btn>
          <Btn size="lg">Large</Btn>
          <Btn size="xl">Xlarge</Btn>
          <Btn size="md" disabled>Disabled</Btn>
        </ComponentFrame>
      </Block>

      {/* Inputs */}
      <Block title="Inputs">
        <ComponentFrame title="Text fields" code={`function TextInput({ placeholder, prefix, error, disabled, value, onChange }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', width: 260,
      background: disabled ? 'var(--bg-secondary)' : 'var(--bg-primary)',
      border: \`1px solid \${error ? 'var(--error-500)' : 'var(--border-primary)'}\`,
      borderRadius: 8, padding: '8px 12px', fontSize: 14,
      boxShadow: error ? '0 0 0 3px rgba(240,68,56,.12)' : '0 1px 2px rgba(16,24,40,.05)',
    }}>
      {prefix && <span style={{ color: 'var(--text-quaternary)', marginRight: 8 }}>{prefix}</span>}
      <input
        disabled={disabled} placeholder={placeholder} value={value} onChange={onChange}
        style={{ border: 'none', outline: 'none', background: 'transparent', flex: 1, fontSize: 14 }}
      />
    </div>
  );
}`}>
          <Input placeholder="Site name" />
          <Input placeholder="Search by EWC code" prefix={<SearchIcon size={16} />} />
          <Input placeholder="Invalid load reference" error value="NR-12-?" />
          <Input placeholder="Read only" disabled value="NR-2026-04-18" />
        </ComponentFrame>
        <div style={{ height: 12 }} />
        <ComponentFrame title="Weight & volume — toggle units (ported from product MaterialVolumeInput)" code={`/* Number + unit-toggle input. If \`density\` is supplied (t per m³),
   pressing the unit chip auto-converts the value. */
function WeightInput({ density = null, initialValue = '', initialUnit = 't' }) {
  const [v, setV] = useState(initialValue);
  const [unit, setUnit] = useState(initialUnit);
  const other = unit === 't' ? 'm³' : 't';

  const swap = () => {
    const n = parseFloat(v);
    if (density && !Number.isNaN(n)) {
      setV(String(Number((unit === 'm³' ? n * density : n / density).toFixed(2))));
    }
    setUnit(other);
  };

  return (
    <div style={{
      display: 'flex', border: '1px solid var(--border-primary)',
      borderRadius: 8, width: 260, overflow: 'hidden',
      background: 'var(--bg-primary)',
    }}>
      <input type="number" value={v} placeholder="0"
        onChange={e => setV(e.target.value)}
        style={{ border: 'none', outline: 'none', flex: 1, padding: '8px 12px', fontSize: 14 }} />
      <button onClick={swap} style={{
        borderLeft: '1px solid var(--border-secondary)',
        background: 'var(--bg-secondary)', padding: '0 12px',
        fontSize: 13, fontWeight: 600, cursor: 'pointer',
      }}>{unit}</button>
    </div>
  );
}

// <WeightInput initialValue="28.4" initialUnit="t" density={1.6} />`}>
          <WeightInput initialValue="28.4" initialUnit="t" density={1.6} />
          <WeightInput initialValue="42" initialUnit="m³" density={1.6} />
          <WeightInput error initialValue="-12" initialUnit="t" />
        </ComponentFrame>
        <div style={{ height: 12 }} />
        <ComponentFrame title="Selections" code={`function Toggle({ label, defaultOn = false }) {
  const [on, setOn] = useState(defaultOn);
  return (
    <label style={{ display: 'inline-flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
      <span onClick={() => setOn(!on)} style={{
        width: 36, height: 20, borderRadius: 999, position: 'relative',
        background: on ? 'var(--brand-600)' : 'var(--neutral-300)', transition: 'background .2s',
      }}>
        <span style={{
          position: 'absolute', top: 2, left: on ? 18 : 2,
          width: 16, height: 16, borderRadius: 999, background: '#fff',
          boxShadow: '0 1px 2px rgba(0,0,0,.2)', transition: 'left .2s',
        }} />
      </span>
      <span style={{ fontSize: 14, fontWeight: 500 }}>{label}</span>
    </label>
  );
}

function Check({ label, defaultChecked = false }) {
  const [c, setC] = useState(defaultChecked);
  return (
    <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
      <span onClick={() => setC(!c)} style={{
        width: 18, height: 18, borderRadius: 4,
        background: c ? 'var(--brand-600)' : 'var(--bg-primary)',
        border: \`1.5px solid \${c ? 'var(--brand-600)' : 'var(--border-primary)'}\`,
      }} />
      <span style={{ fontSize: 14, fontWeight: 500 }}>{label}</span>
    </label>
  );
}`}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <Check label="Include inert material" note="Concrete, brick, stone" checked />
            <Check label="Include timber" note="Grades A, B, C only" />
            <Check label="Include mixed loads" />
          </div>
          <div style={{ width: 40 }} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Toggle on label="Email digest" />
            <Toggle label="SMS alerts" />
            <Toggle on label="Auto-match hauliers" />
          </div>
        </ComponentFrame>
      </Block>

      {/* Badges */}
      <Block title="Badges & status">
        <ComponentFrame title="Colour × variant" code={`function Badge({ children, color = 'gray', variant = 'subtle', dot }) {
  const palette = {
    gray:    { bg: 'var(--neutral-100)', fg: 'var(--neutral-700)', border: 'var(--neutral-200)', dot: 'var(--neutral-500)' },
    brand:   { bg: 'var(--brand-50)',    fg: 'var(--brand-700)',   border: 'var(--brand-200)',   dot: 'var(--brand-500)' },
    accent:  { bg: 'var(--accent-50)',   fg: 'var(--accent-800)',  border: 'var(--accent-300)',  dot: 'var(--accent-500)' },
    success: { bg: '#ECFDF3', fg: '#067647', border: '#ABEFC6', dot: 'var(--success-500)' },
    warning: { bg: '#FFFAEB', fg: '#B54708', border: '#FEDF89', dot: 'var(--warning-500)' },
    error:   { bg: '#FEF3F2', fg: '#B42318', border: '#FECDCA', dot: 'var(--error-500)' },
  }[color];
  const style = variant === 'solid'
    ? { background: palette.dot, color: '#fff', border: '1px solid transparent' }
    : variant === 'outline'
      ? { background: 'transparent', color: palette.fg, border: \`1px solid \${palette.border}\` }
      : { background: palette.bg, color: palette.fg, border: \`1px solid \${palette.border}\` };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '2px 8px', borderRadius: 999, fontSize: 12, fontWeight: 500, ...style,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: palette.dot }} />}
      {children}
    </span>
  );
}

// <Badge color="success" dot>Verified</Badge>
// <Badge color="brand" variant="solid">v0.1</Badge>`}>
          <Badge color="gray" dot>Draft</Badge>
          <Badge color="brand" dot>Scheduled</Badge>
          <Badge color="accent" dot>Review</Badge>
          <Badge color="success" dot>Verified</Badge>
          <Badge color="warning" dot>Action needed</Badge>
          <Badge color="error" dot>Rejected</Badge>
          <Badge color="brand" variant="solid">v0.1</Badge>
          <Badge color="gray" variant="outline">10 items</Badge>
        </ComponentFrame>
      </Block>

      {/* Cards */}
      <Block title="Cards">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
          {/* Stat card */}
          <Card pad={24}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div style={{ fontSize: 13, color: 'var(--text-tertiary)', fontWeight: 500 }}>Material diverted · April</div>
                <div style={{ fontSize: 40, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 8,
                  fontVariantNumeric: 'tabular-nums' }}>1,284<span style={{ fontSize: 20, color: 'var(--text-quaternary)', marginLeft: 4 }}>t</span></div>
              </div>
              <Badge color="success" dot>+12.4%</Badge>
            </div>
            <div style={{ height: 48, background: 'linear-gradient(to top, var(--brand-50), transparent)',
              marginTop: 20, borderRadius: 6, position: 'relative', overflow: 'hidden' }}>
              <svg width="100%" height="100%" viewBox="0 0 200 48" preserveAspectRatio="none">
                <path d="M0 30 L20 28 L40 32 L60 24 L80 26 L100 18 L120 22 L140 14 L160 16 L180 10 L200 8 L200 48 L0 48 Z" fill="var(--brand-100)" />
                <path d="M0 30 L20 28 L40 32 L60 24 L80 26 L100 18 L120 22 L140 14 L160 16 L180 10 L200 8" stroke="var(--brand-600)" strokeWidth="1.5" fill="none" />
              </svg>
            </div>
          </Card>

          {/* Feature card */}
          <Card pad={24}>
            <div style={{
              width: 40, height: 40, borderRadius: 8, background: 'var(--brand-50)',
              color: 'var(--brand-600)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <ArrowMark size={22} fill="var(--brand-600)" />
            </div>
            <div style={{ fontSize: 17, fontWeight: 600, marginTop: 16, letterSpacing: '-0.01em' }}>Verified chain-of-custody</div>
            <div style={{ fontSize: 14, color: 'var(--text-tertiary)', marginTop: 6, lineHeight: 1.55 }}>
              Every movement digitally signed at weighbridge, yard and site. One ledger, zero
              paperwork gaps.
            </div>
          </Card>

          {/* Brand card */}
          <Card variant="brand" pad={24}>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.12em',
              textTransform: 'uppercase', color: 'var(--accent-400)' }}>This quarter</div>
            <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 12, lineHeight: 1.15 }}>
              8,400 tonnes of waste turned back into product.
            </div>
            <Btn variant="accent" size="sm" style={{ marginTop: 20 }}>Read report →</Btn>
          </Card>
        </div>
      </Block>

      {/* Table */}
      <Block title="Data table" note="Tabular numerals, dense rows, status badges with dots.">
        <DataTable />
      </Block>

      {/* Alerts */}
      <Block title="Alerts">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { c: 'brand', t: 'New verification standard', d: 'ISO 14064-3 evidence is now attached to every ledger export.' },
            { c: 'success', t: 'Load NR-04182-A delivered', d: '28.4t crushed concrete arrived at Gateshead Link at 11:17.' },
            { c: 'warning', t: 'Driver certificate expiring', d: 'B. Okafor · HGV Class 2 · expires in 6 days.' },
            { c: 'error', t: 'Weighbridge offline', d: 'Newcastle Quays node has not reported since 08:12. Check connectivity.' },
          ].map((a, i) => {
            const col = {
              brand:   { bg: 'var(--brand-50)',    bd: 'var(--brand-200)',    fg: 'var(--brand-700)'   },
              success: { bg: '#ECFDF3',            bd: '#ABEFC6',             fg: '#067647'            },
              warning: { bg: '#FFFAEB',            bd: '#FEDF89',             fg: '#B54708'            },
              error:   { bg: '#FEF3F2',            bd: '#FECDCA',             fg: '#B42318'            },
            }[a.c];
            return (
              <div key={i} style={{
                background: col.bg, border: `1px solid ${col.bd}`, borderRadius: 10,
                padding: 16, display: 'grid', gridTemplateColumns: '28px 1fr auto', gap: 12, alignItems: 'flex-start',
              }}>
                <div style={{
                  width: 24, height: 24, borderRadius: 999, background: '#fff', border: `1.5px solid ${col.bd}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', color: col.fg,
                  fontWeight: 700, fontSize: 14,
                }}>!</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: col.fg }}>{a.t}</div>
                  <div style={{ fontSize: 13, color: col.fg, opacity: .85, marginTop: 2, lineHeight: 1.5 }}>{a.d}</div>
                </div>
                <button style={{
                  background: 'transparent', border: 'none', color: col.fg, fontSize: 18,
                  cursor: 'pointer', padding: 4, opacity: .6,
                }}>×</button>
              </div>
            );
          })}
        </div>
      </Block>
    </Section>
  );
}
window.S_Components = S_Components;