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

interface Props {
	title?: string;
	description?: string;
	buttonText?: string;
	buttonLink?: string;
	image?: string;
	imageAlt?: string;
}

const {
	title,
	description,
	buttonText,
	buttonLink,
	image = '/images/product_photos/Memoro-App-Smartphone.jpg',
	imageAlt,
} = Astro.props;

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

// Default values if not provided
const defaultTitle =
	lang === 'de'
		? 'Bereit, Ihre Gespräche zu revolutionieren?'
		: 'Ready to revolutionize your conversations?';
const defaultDescription =
	lang === 'de'
		? 'Starten Sie noch heute mit Memoro und erleben Sie, wie einfach Dokumentation sein kann.'
		: 'Start with Memoro today and experience how simple documentation can be.';
const defaultButtonText = lang === 'de' ? 'Kostenlos herunterladen' : 'Download for free';
const defaultButtonLink = lang === 'de' ? '/de/download' : '/en/download';
const defaultImageAlt =
	lang === 'de'
		? 'Memoro App - Büro Meeting Aufzeichnung'
		: 'Memoro App - Office Meeting Recording';
---

<section class="py-16 md:py-24 bg-background-page">
	<div class="max-w-7xl mx-auto px-4">
		<div class="bg-primary rounded-3xl overflow-hidden">
			<div class="grid md:grid-cols-2 items-center">
				<div class="p-8 md:p-12 order-2 md:order-1">
					<h2 class="text-3xl md:text-4xl font-bold mb-6 text-text-primary text-left">
						{title || defaultTitle}
					</h2>
					<p class="text-lg mb-8 text-text-primary text-left">
						{description || defaultDescription}
					</p>
					<div class="flex flex-col sm:flex-row gap-4">
						<Button
							href={buttonLink || defaultButtonLink}
							variant="secondary"
							size="lg"
							class="!bg-white !text-black hover:!bg-gray-100 !border-white"
						>
							{buttonText || defaultButtonText}
							<Icon name="mdi:arrow-right" class="w-5 h-5 ml-2" />
						</Button>
					</div>
				</div>
				<div class="relative h-full order-1 md:order-2">
					<img
						src={image}
						alt={imageAlt || defaultImageAlt}
						class="w-full h-full object-cover"
						width="600"
						height="400"
						loading="lazy"
						decoding="async"
					/>
				</div>
			</div>
		</div>
	</div>
</section>