---
import Layout from "../layouts/Layout.astro";
import SignIn from "../components/SignIn.tsx";
---

<Layout title="Welcome">
	<div id="auth-container">
		<SignIn client:load onSuccess={() => {}} requiredRole="guest" />
	</div>

	<div id="content-container" class="hidden">
		<div class="flex flex-col gap-8 max-w-5xl mx-auto p-6">
			<img src="/logo.jpg" alt="" height="250" width="250" class="rounded-full mx-auto">
			<!-- Header -->
			<div class="text-center space-y-4">
				<div class="text-5xl font-normal" style="font-family: 'Great Vibes', cursive;"><span class="text-2xl">❤️</span> Natasha + Ixabat <span class="text-3xl">❤️</span></div>
				<p class="text-xl text-gray-600">We hope you can join us in celebration on</p>
				<p class="text-2xl font-semibold">Saturday, June 7, 2025</p>
			</div>

			<!-- Event Details Cards -->
			<div class="flex flex-col md:flex-row gap-6">
				<!-- Ceremony Card -->
				<div class="card bg-base-100 shadow-xl flex-1 border-2 border-primary">
					<div class="card-body">
						<h2 class="card-title text-2xl justify-center">Ceremony</h2>
						<div class="text-center space-y-2">
							<p class="text-xl">1:00 PM</p>
							<p>Preston Avenue Community Church</p>
							<p class="text-gray-600">2216 Preston Avenue, Saskatoon, SK</p>
							<a 
								href="https://maps.google.com/?q=2216+Preston+Avenue+Saskatoon+SK" 
								target="_blank" 
								class="btn btn-outline btn-sm mt-2"
							>
								View on Map
							</a>
						</div>
					</div>
				</div>

				<!-- Reception Card -->
				<div class="card bg-base-100 shadow-xl flex-1 border-2 border-primary">
					<div class="card-body">
						<h2 class="card-title text-2xl justify-center">Reception</h2>
						<div class="text-center space-y-2">
							<p class="text-xl">5:00 PM</p>
							<p>Saskatoon Christian School</p>
							<p class="text-gray-600">55 Glazier Road, Corman Park, SK</p>
							<a 
								href="https://maps.google.com/?q=55+Glazier+Road+Corman+Park+SK" 
								target="_blank" 
								class="btn btn-outline btn-sm mt-2"
							>
								View on Map
							</a>
						</div>
					</div>
				</div>
			</div>

			<!-- RSVP Section -->
			<div class="text-center space-y-4">
				<p class="text-lg">Please RSVP whether you're able to come or not by <span class="font-semibold">April 1</span></p>
				<div class="flex flex-col sm:flex-row gap-4 justify-center">
					<a href="/rsvp" class="btn btn-primary btn-lg">
						RSVP Now
					</a>
					<a href="/registry" class="btn btn-secondary btn-lg">
						Wedding Registry
					</a>
					<a href="/faq" class="btn btn-accent btn-lg">
						FAQ
					</a>
				</div>
			</div>
		</div>
	</div>
</Layout>

<script>
	import { hasRole, isAuthenticated } from "../utils/auth-client";

	function updateVisibility() {
		const authContainer = document.getElementById("auth-container");
		const contentContainer = document.getElementById("content-container");

		if (isAuthenticated() && hasRole("guest")) {
			authContainer?.classList.add("hidden");
			contentContainer?.classList.remove("hidden");
		} else {
			authContainer?.classList.remove("hidden");
			contentContainer?.classList.add("hidden");
		}
	}

	// Check auth state on page load
	updateVisibility();

	// Add event listener for custom event from SignIn component
	document.addEventListener("auth-success", updateVisibility);
</script>