---
// Features section for Clock landing page

const features = [
	{
		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
		</svg>`,
		title: 'Pomodoro Timer',
		description:
			'Arbeite in fokussierten 25-Minuten-Intervallen mit automatischen Pausen. Steigere deine Konzentration.',
	},
	{
		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
		</svg>`,
		title: 'Zeiterfassung',
		description:
			'Tracke deine Arbeitszeit auf Projekte und Aufgaben. Detaillierte Berichte und Statistiken.',
	},
	{
		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
		</svg>`,
		title: 'Focus Sessions',
		description:
			'Starte dedizierte Focus-Sessions und eliminiere Ablenkungen. Perfekt fur Deep Work.',
	},
	{
		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
		</svg>`,
		title: 'Erinnerungen',
		description: 'Sanfte Erinnerungen fur Pausen und Arbeitsende. Schutze deine Work-Life-Balance.',
	},
	{
		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
		</svg>`,
		title: 'Detaillierte Reports',
		description:
			'Wochentliche und monatliche Ubersichten. Exportiere deine Daten als CSV oder PDF.',
	},
	{
		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
		</svg>`,
		title: 'Alle Gerate',
		description: 'Web-App, iOS und Android. Deine Zeit wird uber alle Gerate synchronisiert.',
	},
];
---

<section id="features" class="bg-dark-surface">
	<div class="container">
		<!-- Section header -->
		<div class="mx-auto mb-16 max-w-3xl text-center">
			<span class="mb-4 inline-block text-sm font-medium uppercase tracking-wider text-primary-400">
				Funktionen
			</span>
			<h2 class="mb-6 text-3xl font-bold md:text-4xl lg:text-5xl">Produktiver arbeiten</h2>
			<p class="text-lg text-gray-400">
				Clock bietet alle Tools, die du fur effektives Zeitmanagement brauchst.
			</p>
		</div>

		<!-- Features grid -->
		<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
			{
				features.map((feature) => (
					<div class="group rounded-xl border border-dark-border bg-dark-card p-6 transition-all duration-300 hover:border-primary-500/50 hover:bg-dark-card/80">
						<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-500/10 text-primary-400 transition-colors group-hover:bg-primary-500/20">
							<Fragment set:html={feature.icon} />
						</div>
						<h3 class="mb-3 text-xl font-semibold">{feature.title}</h3>
						<p class="text-gray-400">{feature.description}</p>
					</div>
				))
			}
		</div>
	</div>
</section>