---
import { getLangFromUrl, useTranslations } from '../i18n/utils';
import { Icon } from 'astro-icon/components';
import PhoneFrame from './PhoneFrame.astro';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);

const features = [
	{
		title: lang === 'de' ? 'Intelligente Transkription' : 'Intelligent Transcription',
		description:
			lang === 'de'
				? 'Präzise Spracherkennung mit automatischer Sprechertrennung für bis zu 12 Personen. Unterstützt 24 Sprachen und Dialekte.'
				: 'Precise speech recognition with automatic speaker separation for up to 12 people. Supports 24 languages and dialects.',
		image: '/images/screenshots/Memoro-Screenshot-MemoDetailPage-Memo-Transcript.PNG',
		icon: 'mdi:microphone',
	},
	{
		title: lang === 'de' ? 'KI-gestützte Zusammenfassungen' : 'AI-Powered Summaries',
		description:
			lang === 'de'
				? 'Verwandelt lange Gespräche in strukturierte Zusammenfassungen mit Schlüsselpunkten, Aktionspunkten und wichtigen Erkenntnissen.'
				: 'Transforms long conversations into structured summaries with key points, action items, and important insights.',
		image: '/images/screenshots/Memoro-Screenshot-MemoDetailPage-Memo-Memories.PNG',
		icon: 'mdi:brain',
	},
	{
		title: lang === 'de' ? 'Intelligente Organisation' : 'Smart Organization',
		description:
			lang === 'de'
				? 'Farbcodierte Tags, erweiterte Suche und detaillierte Statistiken helfen Ihnen, den Überblick über alle Ihre Aufnahmen zu behalten.'
				: 'Color-coded tags, advanced search, and detailed statistics help you keep track of all your recordings.',
		image: '/images/screenshots/Memoro-Screenshot-Tags-Screen.PNG',
		icon: 'mdi:tag-multiple',
	},
	{
		title: lang === 'de' ? 'Vorlagen & Blueprints' : 'Templates & Blueprints',
		description:
			lang === 'de'
				? 'Nutzen Sie vordefinierte Vorlagen für Meetings, Interviews, Brainstorming-Sessions und mehr für optimale Ergebnisse.'
				: 'Use predefined templates for meetings, interviews, brainstorming sessions, and more for optimal results.',
		image: '/images/screenshots/Memoro-Screenshot-Recording-Blueprint-Selected.PNG',
		icon: 'mdi:file-document-outline',
	},
];
---

<section class="py-16 md:py-24 bg-background-page">
	<div class="max-w-7xl mx-auto px-4">
		<div class="text-center mb-16">
			<h2 class="text-heading-mobile md:text-heading text-text-primary mb-4">
				{
					lang === 'de'
						? 'Leistungsstarke Funktionen für jeden Bedarf'
						: 'Powerful Features for Every Need'
				}
			</h2>
			<p class="text-lg text-text-secondary max-w-3xl mx-auto">
				{
					lang === 'de'
						? 'Memoro kombiniert modernste KI-Technologie mit durchdachtem Design für die beste Erfahrung bei der Gesprächsdokumentation.'
						: 'Memoro combines cutting-edge AI technology with thoughtful design for the best conversation documentation experience.'
				}
			</p>
		</div>

		<div class="space-y-24">
			{
				features.map((feature, index) => (
					<div
						class={`grid md:grid-cols-2 gap-12 items-center ${index % 2 === 1 ? 'md:flex-row-reverse' : ''}`}
					>
						<div class={index % 2 === 1 ? 'md:order-2' : ''}>
							<div class="mb-4">
								<Icon name={feature.icon} class="w-12 h-12 text-primary" />
							</div>
							<h3 class="text-2xl font-bold text-text-primary mb-4">{feature.title}</h3>
							<p class="text-lg text-text-secondary mb-6">{feature.description}</p>
						</div>
						<div class={`${index % 2 === 1 ? 'md:order-1' : ''} flex justify-center`}>
							<PhoneFrame src={feature.image} alt={feature.title} class="max-w-sm" />
						</div>
					</div>
				))
			}
		</div>
	</div>
</section>