---
/**
 * Shared Contact Section component
 * Displays contact information (email, phone, address) in a clean layout.
 */
import Container from '../atoms/Container.astro';
import SectionHeader from '../atoms/SectionHeader.astro';
import Card from '../atoms/Card.astro';

interface Props {
	title: string;
	subtitle?: string;
	email?: string;
	phone?: string;
	address?: string;
	class?: string;
	id?: string;
}

const { title, subtitle, email, phone, address, class: className = '', id } = Astro.props;

const hasContactInfo = email || phone || address;
---

<section id={id} class:list={['py-16 md:py-24', className]}>
	<Container size="md">
		<SectionHeader title={title} subtitle={subtitle} />

		{
			hasContactInfo && (
				<div class="max-w-2xl mx-auto">
					<Card variant="bordered" padding="lg">
						<div class="space-y-6">
							{email && (
								<div class="flex items-start gap-4">
									<div class="w-10 h-10 rounded-lg bg-[var(--color-primary)] bg-opacity-10 flex items-center justify-center flex-shrink-0">
										<svg
											class="w-5 h-5 text-[var(--color-primary)]"
											fill="none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
											/>
										</svg>
									</div>
									<div>
										<p class="text-sm font-medium text-[var(--color-text-muted)] mb-1">E-Mail</p>
										<a
											href={`mailto:${email}`}
											class="text-[var(--color-text-primary)] hover:text-[var(--color-primary)] transition-colors"
										>
											{email}
										</a>
									</div>
								</div>
							)}

							{phone && (
								<div class="flex items-start gap-4">
									<div class="w-10 h-10 rounded-lg bg-[var(--color-primary)] bg-opacity-10 flex items-center justify-center flex-shrink-0">
										<svg
											class="w-5 h-5 text-[var(--color-primary)]"
											fill="none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
											/>
										</svg>
									</div>
									<div>
										<p class="text-sm font-medium text-[var(--color-text-muted)] mb-1">Telefon</p>
										<a
											href={`tel:${phone.replace(/\s/g, '')}`}
											class="text-[var(--color-text-primary)] hover:text-[var(--color-primary)] transition-colors"
										>
											{phone}
										</a>
									</div>
								</div>
							)}

							{address && (
								<div class="flex items-start gap-4">
									<div class="w-10 h-10 rounded-lg bg-[var(--color-primary)] bg-opacity-10 flex items-center justify-center flex-shrink-0">
										<svg
											class="w-5 h-5 text-[var(--color-primary)]"
											fill="none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
											/>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
											/>
										</svg>
									</div>
									<div>
										<p class="text-sm font-medium text-[var(--color-text-muted)] mb-1">Adresse</p>
										<p class="text-[var(--color-text-primary)] whitespace-pre-line">{address}</p>
									</div>
								</div>
							)}
						</div>
					</Card>
				</div>
			)
		}
	</Container>
</section>