<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '$lib/components/ui/card';
</script>

<div class="relative min-h-screen overflow-hidden">
	<!-- Background decorative elements -->
	<div class="absolute inset-0 -z-10">
		<div
			class="absolute -left-40 -top-40 h-80 w-80 rounded-full bg-monaco-500/20 blur-3xl"
		></div>
		<div
			class="absolute -right-40 top-1/3 h-96 w-96 rounded-full bg-monaco-400/10 blur-3xl"
		></div>
		<div
			class="absolute bottom-0 left-1/3 h-72 w-72 rounded-full bg-monaco-300/15 blur-3xl"
		></div>
	</div>

	<!-- Main content -->
	<div class="container mx-auto px-4 py-16">
		<!-- Hero Section -->
		<div class="flex flex-col items-center justify-center text-center">
			<div class="glass-card mb-8 px-6 py-3">
				<span class="text-sm font-medium text-monaco-600">Member Portal 2026</span>
			</div>

			<h1 class="mb-4 text-5xl font-bold tracking-tight text-slate-900 md:text-6xl lg:text-7xl">
				Monaco <span class="text-gradient-monaco">USA</span>
			</h1>

			<p class="mb-8 max-w-2xl text-lg text-slate-600 md:text-xl">
				Americans in Monaco - Your gateway to community events, member resources, and association
				management.
			</p>

			<div class="flex flex-col gap-4 sm:flex-row">
				<Button variant="monaco" size="xl">
					Sign In
				</Button>
				<Button variant="monaco-outline" size="xl">
					Learn More
				</Button>
			</div>
		</div>

		<!-- Features Grid -->
		<div class="mt-24 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
			<Card class="glass-card border-0">
				<CardHeader>
					<div class="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-monaco-100">
						<svg
							class="h-6 w-6 text-monaco-600"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
							/>
						</svg>
					</div>
					<CardTitle>Member Directory</CardTitle>
					<CardDescription>
						Connect with fellow Americans in Monaco through our comprehensive member directory.
					</CardDescription>
				</CardHeader>
			</Card>

			<Card class="glass-card border-0">
				<CardHeader>
					<div class="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-monaco-100">
						<svg
							class="h-6 w-6 text-monaco-600"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
							/>
						</svg>
					</div>
					<CardTitle>Events Calendar</CardTitle>
					<CardDescription>
						Stay updated with social gatherings, meetings, and special events in the community.
					</CardDescription>
				</CardHeader>
			</Card>

			<Card class="glass-card border-0">
				<CardHeader>
					<div class="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-monaco-100">
						<svg
							class="h-6 w-6 text-monaco-600"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
							/>
						</svg>
					</div>
					<CardTitle>Documents & Resources</CardTitle>
					<CardDescription>
						Access meeting minutes, bylaws, and important association documents anytime.
					</CardDescription>
				</CardHeader>
			</Card>

			<Card class="glass-card border-0">
				<CardHeader>
					<div class="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-monaco-100">
						<svg
							class="h-6 w-6 text-monaco-600"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
							/>
						</svg>
					</div>
					<CardTitle>Dues Management</CardTitle>
					<CardDescription>
						Track your membership dues, view payment history, and manage your subscription.
					</CardDescription>
				</CardHeader>
			</Card>

			<Card class="glass-card border-0">
				<CardHeader>
					<div class="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-monaco-100">
						<svg
							class="h-6 w-6 text-monaco-600"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
							/>
						</svg>
					</div>
					<CardTitle>Notifications</CardTitle>
					<CardDescription>
						Receive timely reminders about events, dues, and important announcements.
					</CardDescription>
				</CardHeader>
			</Card>

			<Card class="glass-card border-0">
				<CardHeader>
					<div class="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-monaco-100">
						<svg
							class="h-6 w-6 text-monaco-600"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
							/>
						</svg>
					</div>
					<CardTitle>Secure Access</CardTitle>
					<CardDescription>
						Role-based access ensures members, board, and admins see exactly what they need.
					</CardDescription>
				</CardHeader>
			</Card>
		</div>

		<!-- Stats Section -->
		<div class="mt-24 glass-card p-8">
			<div class="grid gap-8 md:grid-cols-4">
				<div class="text-center">
					<p class="text-4xl font-bold text-monaco-600">150+</p>
					<p class="mt-1 text-sm text-slate-600">Active Members</p>
				</div>
				<div class="text-center">
					<p class="text-4xl font-bold text-monaco-600">50+</p>
					<p class="mt-1 text-sm text-slate-600">Events Per Year</p>
				</div>
				<div class="text-center">
					<p class="text-4xl font-bold text-monaco-600">25+</p>
					<p class="mt-1 text-sm text-slate-600">Years Active</p>
				</div>
				<div class="text-center">
					<p class="text-4xl font-bold text-monaco-600">100%</p>
					<p class="mt-1 text-sm text-slate-600">Community Driven</p>
				</div>
			</div>
		</div>

		<!-- Footer -->
		<footer class="mt-24 text-center text-sm text-slate-500">
			<p>&copy; 2026 Monaco USA. All rights reserved.</p>
			<p class="mt-2">Americans in Monaco since 1999</p>
		</footer>
	</div>
</div>
