<script setup lang="ts">
const roles = [
	{
		id: 'r1',
		title: 'Frontend Engineer',
		summary: 'Focus on UI, UX and frontend platform integrations.',
	},
	{
		id: 'r2',
		title: 'Product Manager',
		summary: 'Define goals, priorities, and track success metrics.',
	},
	{
		id: 'r3',
		title: 'Customer Success',
		summary: 'Onboard customers and reduce time-to-value.',
	},
];
</script>

<template>
	<div class="page-wrap">
		<header class="page-header">
			<h1>Role Profiles</h1>
			<p class="lead">
				Pre-built role templates and suggested onboarding paths.
			</p>
		</header>

		<section class="profiles">
			<div v-for="role in roles" :key="role.id" class="profile-card">
				<h3>{{ role.title }}</h3>
				<p>{{ role.summary }}</p>
				<div class="actions">
					<router-link :to="`/onboarding`" class="cta-small"
						>Use Template</router-link
					>
				</div>
			</div>
		</section>
	</div>
</template>

<style scoped>
.profiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}
.profile-card {
	background: #fff;
	padding: 0.75rem;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.actions {
	margin-top: 0.75rem;
}
.cta-small {
	background: #4f46e5;
	color: #fff;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	text-decoration: none;
}
</style>
