<script lang="ts">
	import ContactCard from '$lib/components/layout/ContactCard.svelte';
	import { Map, MapMarker, MapControls, MarkerContent, MarkerPopup } from '$lib/components/ui/map';
	import { onMount, tick } from 'svelte';

	type ContactInfo = {
		name: string;
		role: string;
		phone: string;
		email: string;
		profilePicUrl?: string;
	};

	let contact = $state<ContactInfo | null>(null);
	let loading = $state(true);

	onMount(async () => {
		try {
			const res = await fetch('/api/contact');
			if (res.ok) {
				contact = await res.json();
			}
		} catch (err) {
			console.error('Failed to load contact info:', err);
		} finally {
			loading = false;
		}

		await tick();
		window.dispatchEvent(new Event('resize'));
	});
</script>

<section class="py-12">
	<h1 class="mb-8 text-center font-['Playfair_Display'] text-4xl font-bold">Contact Me</h1>
	<div class="mx-auto grid max-w-[744px] gap-6 px-4 lg:grid-cols-2">
		<div class="h-[376px]">
			{#if loading}
				<div
					class="mx-auto max-w-sm animate-pulse rounded-lg border-2 border-gray-200 bg-white p-6"
				>
					<div class="mb-4 flex justify-center">
						<div class="h-24 w-24 rounded-full bg-gray-200"></div>
					</div>
					<div class="mb-4 text-center">
						<div class="mx-auto mb-2 h-6 w-40 rounded bg-gray-200"></div>
						<div class="mx-auto h-4 w-32 rounded bg-gray-200"></div>
					</div>
				</div>
			{:else if contact}
				<ContactCard
					name={contact.name}
					role={contact.role}
					phone={contact.phone}
					email={contact.email}
					instagram="crussell"
					address="41 Pollock Walk, Dunfermline KY12 9DA"
					profileImage={contact.profilePicUrl ||
						'https://images.icon-icons.com/5/PNG/256/MSN_messenger_user_156.png'}
				/>
			{:else}
				<ContactCard
					name="Chelsea Russell"
					role="Owner / Beauty Specialist"
					phone="+44 8008135"
					email="chelsea@emailaddress.com"
					instagram="crussell"
					address="41 Pollock Walk, Dunfermline KY12 9DA"
				/>
			{/if}
		</div>

		<div
			class="map-card mx-auto h-[376px] w-full max-w-sm overflow-hidden rounded-lg border-2 border-gray-200 bg-white lg:mx-0 lg:max-w-none"
		>
			<Map theme="light" center={[-3.476464162450991, 56.0781854944036]} zoom={15}>
				<MapMarker longitude={-3.476464162450991} latitude={56.0781854944036}>
					<MarkerContent>
						<div
							class="flex items-center justify-center rounded-full bg-primary p-2 text-primary-foreground shadow-lg"
						>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="h-5 w-5"
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
								stroke-linejoin="round"
							>
								<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
								<circle cx="12" cy="10" r="3" />
							</svg>
						</div>
					</MarkerContent>
					<MarkerPopup>
						<div class="p-2 text-sm">
							<p class="font-semibold">41 Pollock Walk</p>
							<p class="text-muted-foreground">Dunfermline KY12 9DA</p>
						</div>
					</MarkerPopup>
				</MapMarker>
				<MapControls position="bottom-right" showZoom />
			</Map>
		</div>
	</div>
</section>
