---
// Features section for Todo 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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
		</svg>`,
		title: 'Projekte & Ordner',
		description:
			'Organisiere deine Aufgaben in farbcodierten Projekten. Behalte den Überblick über Arbeit, Privates und mehr.',
	},
	{
		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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
		</svg>`,
		title: 'Unteraufgaben',
		description:
			'Teile grosse Aufgaben in handhabbare Schritte auf. Verfolge den Fortschritt mit Checklisten.',
	},
	{
		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 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path>
		</svg>`,
		title: 'Kanban-Boards',
		description:
			'Visualisiere deine Workflows mit Drag-and-Drop Kanban-Boards. Perfekt für agile Arbeitsweisen.',
	},
	{
		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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
		</svg>`,
		title: 'Wiederkehrende Tasks',
		description:
			'Erstelle Tasks, die sich automatisch wiederholen - täglich, wöchentlich, monatlich oder nach deinen Regeln.',
	},
	{
		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: 'Smarte Erinnerungen',
		description:
			'Verpasse nie wieder eine Deadline. Push-Benachrichtigungen und E-Mail-Erinnerungen zur rechten Zeit.',
	},
	{
		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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
		</svg>`,
		title: 'Labels & Tags',
		description:
			'Kategorisiere deine Aufgaben mit farbigen Labels. Filtere und finde Tasks blitzschnell.',
	},
];
---

<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">Alles was du brauchst</h2>
			<p class="text-lg text-gray-400">
				Todo bietet alle Funktionen, die du für effektives Task-Management benötigst.
			</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>
