import { For } from 'solid-js';
import { CARD } from '~/components/DashboardShell';

const ROLES = [
  'Photographer',
  'Makeup Artist',
  'Tutor',
  'Developer',
  'Video Editor',
  'UGC Content Creator',
  'Graphic Designer',
  'Social Media Manager',
  'Fitness Trainer',
  'Catering Services',
  'Company',
  'Job Seeker',
  'Customer',
];

export default function ExploreServicesPage() {
  return (
    <div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
      <div style={CARD}>
        <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>Explore Nxtgauge</p>
        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
          Discover available services and role journeys across the platform.
        </p>
      </div>

      <div style={CARD}>
        <p style={{ margin: '0 0 10px', 'font-size': '16px', 'font-weight': '700', color: '#111827' }}>Available Services</p>
        <div style={{ display: 'grid', 'grid-template-columns': 'repeat(3,minmax(0,1fr))', gap: '10px' }}>
          <For each={ROLES}>
            {(name) => (
              <div style={{ border: '1px solid #E5E7EB', 'border-radius': '10px', padding: '10px', background: '#FCFCFD' }}>
                <p style={{ margin: '0', 'font-size': '13px', 'font-weight': '700', color: '#111827' }}>{name}</p>
                <p style={{ margin: '4px 0 0', 'font-size': '12px', color: '#6B7280' }}>Explore this role in dashboard and management flows.</p>
              </div>
            )}
          </For>
        </div>
      </div>
    </div>
  );
}

