const styles = {
  root: { fontFamily: "'Inter', system-ui, sans-serif", backgroundColor: '#ffffff', minHeight: '100vh', padding: '48px 40px' },
  inner: { maxWidth: '800px', margin: '0 auto' },
  header: { marginBottom: '48px', paddingBottom: '32px', borderBottom: '1px solid #e5e5e5' },
  eyebrow: { fontSize: '11px', fontWeight: '600', color: '#a3a3a3', letterSpacing: '0.08em', textTransform: 'uppercase', margin: '0 0 12px 0' },
  title: { fontSize: '22px', fontWeight: '600', color: '#0a0a0a', margin: '0 0 6px 0', letterSpacing: '-0.02em' },
  subtitle: { fontSize: '14px', color: '#737373', margin: '0' },
  statsGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1px', backgroundColor: '#e5e5e5', border: '1px solid #e5e5e5', borderRadius: '10px', overflow: 'hidden', marginBottom: '40px' },
  statCell: { backgroundColor: '#ffffff', padding: '24px' },
  statLabel: { fontSize: '12px', color: '#a3a3a3', margin: '0 0 16px 0', fontWeight: '500' },
  statValue: { fontSize: '26px', fontWeight: '600', color: '#0a0a0a', margin: '0 0 6px 0', letterSpacing: '-0.03em' },
  statMeta: { fontSize: '12px', color: '#525252', margin: '0' },
  section: { marginBottom: '40px' },
  sectionHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '16px' },
  sectionTitle: { fontSize: '14px', fontWeight: '600', color: '#0a0a0a', margin: '0', letterSpacing: '-0.01em' },
  btnOutline: { fontSize: '12px', fontWeight: '500', color: '#0a0a0a', backgroundColor: 'transparent', border: '1px solid #d4d4d4', borderRadius: '6px', padding: '5px 12px', cursor: 'pointer' },
  table: { border: '1px solid #e5e5e5', borderRadius: '10px', overflow: 'hidden' },
  row: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px', borderBottom: '1px solid #f5f5f5' },
  rowLast: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px' },
  rowName: { fontSize: '14px', fontWeight: '600', color: '#0a0a0a', margin: '0 0 2px 0' },
  rowMeta: { fontSize: '12px', color: '#a3a3a3', margin: '0' },
  badge: { fontSize: '11px', fontWeight: '500', color: '#525252', backgroundColor: '#f5f5f5', padding: '3px 10px', borderRadius: '4px', minWidth: '90px', textAlign: 'center', display: 'inline-block' },
  badgeDark: { fontSize: '11px', fontWeight: '500', color: '#ffffff', backgroundColor: '#0a0a0a', padding: '3px 10px', borderRadius: '4px', minWidth: '90px', textAlign: 'center', display: 'inline-block' },
  actions: { display: 'flex', gap: '12px' },
  btnPrimary: { flex: 1, padding: '11px 0', backgroundColor: '#0a0a0a', color: '#ffffff', border: 'none', borderRadius: '8px', fontSize: '13px', fontWeight: '500', cursor: 'pointer' },
  btnSecondary: { flex: 1, padding: '11px 0', backgroundColor: '#ffffff', color: '#0a0a0a', border: '1px solid #d4d4d4', borderRadius: '8px', fontSize: '13px', fontWeight: '500', cursor: 'pointer' },
};

export default function Dashboard() {
  return (
    <div style={styles.root}>
      <div style={styles.inner}>

        <div style={styles.header}>
          <p style={styles.eyebrow}>Workspace</p>
          <h1 style={styles.title}>Overview</h1>
          <p style={styles.subtitle}>May 14, 2026</p>
        </div>

        <div style={styles.statsGrid}>
          <div style={styles.statCell}>
            <p style={styles.statLabel}>Revenue</p>
            <p style={styles.statValue}>$48,295</p>
            <p style={styles.statMeta}>+12.5% this month</p>
          </div>
          <div style={styles.statCell}>
            <p style={styles.statLabel}>Active users</p>
            <p style={styles.statValue}>3,842</p>
            <p style={styles.statMeta}>+8.1% this month</p>
          </div>
          <div style={styles.statCell}>
            <p style={styles.statLabel}>Open issues</p>
            <p style={styles.statValue}>14</p>
            <p style={styles.statMeta}>3 added yesterday</p>
          </div>
        </div>

        <div style={styles.section}>
          <div style={styles.sectionHeader}>
            <h2 style={styles.sectionTitle}>Projects</h2>
            <button style={styles.btnOutline}>New</button>
          </div>

          <div style={styles.table}>
            <div style={styles.row}>
              <div>
                <p style={styles.rowName}>Layers Design System</p>
                <p style={styles.rowMeta}>Updated 2 hours ago</p>
              </div>
              <span style={styles.badge}>In progress</span>
            </div>
            <div style={styles.row}>
              <div>
                <p style={styles.rowName}>Analytics Dashboard</p>
                <p style={styles.rowMeta}>Updated yesterday</p>
              </div>
              <span style={styles.badgeDark}>Shipped</span>
            </div>
            <div style={styles.rowLast}>
              <div>
                <p style={styles.rowName}>Brand Refresh</p>
                <p style={styles.rowMeta}>Updated 3 days ago</p>
              </div>
              <span style={styles.badge}>Review</span>
            </div>
          </div>
        </div>

        <div style={styles.actions}>
          <button style={styles.btnPrimary}>View all projects</button>
          <button style={styles.btnSecondary}>Download report</button>
        </div>

      </div>
    </div>
  );
}