<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Wedding Invitation</title>
		<script src="https://cdn.tailwindcss.com"></script>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
		/>
		<style>
			/* Smooth transition for page switching */
			.hidden {
				display: none;
			}
			.fade {
				opacity: 0;
				transform: translateY(20px);
				transition: opacity 1.8s ease, transform 1.8s ease;
			}
			.fade.visible {
				opacity: 1;
				transform: translateY(0);
			}
			/* Background styles */
			.bg-splash {
				background-image: url('https://via.placeholder.com/800x1200');
				background-size: cover;
				background-position: center;
			}
			.bg-invitation {
				background-image: url('https://via.placeholder.com/1200x800');
				background-size: cover;
				background-position: center;
			}
			/* Center splash content */
			#splash-page .relative {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
			}
			/* Smooth scroll for page */
			html {
				scroll-behavior: smooth;
			}
			input[type='range'][orient='vertical'] {
				writing-mode: vertical-lr;
				direction: rtl;
				appearance: slider-vertical;
				vertical-align: bottom;
			}
		</style>
	</head>
	<body
		class="flex flex-col items-center justify-center min-h-screen bg-gray-50"
	>
		<!-- Main Container -->
		<div id="main-container" class="w-full mx-auto">
			<!-- Splash Page -->
			<div
				id="splash-page"
				class="fade visible flex items-center justify-center h-screen text-center bg-white bg-splash relative"
			>
				<div class="absolute inset-0 bg-black bg-opacity-50"></div>
				<div class="relative z-10 mx-auto p-6">
					<h1 class="text-2xl md:text-4xl font-semibold text-white">
						The Wedding Of
					</h1>
					<div
						class="w-32 h-32 mx-auto rounded-full border-4 border-white mt-6 overflow-hidden"
					>
						<img src="https://via.placeholder.com/100" alt="Couple Photo" />
					</div>
					<h2 class="text-3xl md:text-5xl font-bold text-white mt-4">
						Anissa & Hamzah
					</h2>
					<p class="text-white mt-2 text-lg">Selasa, 10 Desember 2024</p>
					<p class="text-white">Kepada Yth.</p>
					<p class="text-xl font-bold text-white">Penerima Undangan</p>
					<div class="text-center mt-6">
						<button
							id="open-invitation-btn"
							class="bg-pink-500 text-white px-6 py-3 rounded-full shadow-lg"
						>
							Buka Undangan
						</button>
					</div>
				</div>
			</div>

			<!-- Invitation Page -->
			<div
				id="invitation-page"
				class="hidden fade bg-white shadow-md rounded-lg bg-invitation"
			>
				<button
					id="close-invitation-btn"
					class="fade absolute top-5 left-5 p-2 z-10"
				>
					<i class="fas fa-arrow-left text-gray-700"></i>
				</button>

				<!-- Auto Scroll Control UI -->
				<section id="auto-vertical-scroll" class="sticky z-50 top-1/3 fade">
					<div class="fixed right-2 flex flex-col fade">
						<input
							orient="vertical"
							type="range"
							id="speed-slider"
							min="0"
							max="10"
							value="0"
							class="h-16"
						/>
					</div>
				</section>

				<!-- // UsersPacketEventInformationAPI struct payload
				type UsersPacketEventInformationAPI struct {
					MotherName         *string    `json:"mother_name,omitempty" gorm:"type:varchar(64)"`                    // Mother Name
					FatherName         *string    `json:"father_name,omitempty" gorm:"type:varchar(64)"`                    // Father Name
					NickName           *string    `json:"nick_name,omitempty" gorm:"type:varchar(64)"`                      // Nick Name
					FullName           *string    `json:"full_name,omitempty" gorm:"type:varchar(64)"`                      // Full Name
					OtherName          *string    `json:"other_name,omitempty" gorm:"type:varchar(128)"`                    // Parent Name
					OtherInformation   *string    `json:"other_information,omitempty" gorm:"type:varchar(64)"`              // Other Information
					ShortDescription   *string    `json:"short_description,omitempty" gorm:"type:text"`                     // Short Description
					Description        *string    `json:"description,omitempty" gorm:"type:text"`                           // Description
					MultimediaID       *uuid.UUID `json:"multimedia_id,omitempty" gorm:"type:varchar(36)"`                  // Multimedia ID
					GenderID           *uuid.UUID `json:"gender_id,omitempty" gorm:"type:varchar(36)"`                      // Gender ID
					SocialMediaID      *uuid.UUID `json:"social_media_id,omitempty" gorm:"type:varchar(36)"`                // SocialMedia ID
					AddressID          *uuid.UUID `json:"address_id,omitempty" gorm:"type:varchar(36)"`                     // Address ID
					UsersPacketEventID *uuid.UUID `json:"users_packet_event_id,omitempty" gorm:"type:varchar(36);not null"` // UsersPacketEvent ID
				} -->
				<!-- Detail Pasangan -->
				<section
					id="detail"
					class="min-h-[50vh] text-center justify-center items-center fade"
				>
					<h2 class="text-2xl font-bold pt-10">Detail Pasangan</h2>
					<p class="text-lg mt-2">
						Kami dengan bahagia mengundang Anda untuk merayakan hari bahagia kami.
					</p>
					<div class="flex justify-center gap-8 mt-6 fade">
						<div class="text-center fade">
							<img
								src="https://png.pngtree.com/png-clipart/20220915/ourmid/pngtree-gambar-muslimah-faceless-sederhana-png-image_6176320.png"
								alt="Bride"
								class="rounded-full mx-auto w-24 h-24"
							/>
							<p class="mt-2 text-lg font-semibold fade">Fulanah bin Abdul</p>
							<p class="text-sm text-gray-500 fade">Putri dari Bapak Abdul</p>
						</div>
						<div class="text-center fade">
							<img
								src="https://cdn.icon-icons.com/icons2/3952/PNG/512/faceless_profile_avatar_believer_muslim_man_icon_251082.png"
								alt="Groom"
								class="rounded-full mx-auto w-24 h-24"
							/>
							<p class="mt-2 text-lg font-semibold fade">Fulan bin Hasan</p>
							<p class="text-sm text-gray-500 fade">Putra dari Bapak Hasan</p>
						</div>
					</div>
				</section>

				<!-- // UsersPacketEventAgendaAPI for payload
				type UsersPacketEventAgendaAPI struct {
					Name               *string    `json:"name,omitempty" gorm:"type:varchar(36)"`                           // Name
					Location           *string    `json:"location,omitempty" gorm:"type:varchar(36)"`                       // Location
					Description        *string    `json:"description,omitempty" gorm:"type:text"`                           // Description
					ShortDescription   *string    `json:"short_description,omitempty" gorm:"type:varchar(256)"`             // ShortDescription
					Address            *Address   `json:"address,omitempty" gorm:"foreignKey:AddressID"`                    // Address
					Schedule           *Schedule  `json:"schedule,omitempty" gorm:"foreignKey:ScheduleID"`                  // Schedule
					ScheduleID         *uuid.UUID `json:"-" gorm:"type:varchar(36)"`                                        // Schedule ID
					AddressID          *uuid.UUID `json:"-" gorm:"type:varchar(36)"`                                        // Address ID
					UsersPacketEventID *uuid.UUID `json:"users_packet_event_id,omitempty" gorm:"type:varchar(36);not null"` // UsersPacketEvent ID
				} -->
				<!-- Waktu dan Tempat -->
				<section
					id="acara"
					class="max-h-[50vh] text-center py-8 bg-gray-100 rounded-md fade"
				>
					<h2 class="text-2xl font-bold">Waktu dan Tempat</h2>
					<p class="text-lg mt-2">Kami berharap kehadiran Anda dalam acara kami:</p>
					<div class="mt-6 fade">
						<p class="text-lg font-semibold">Akad Nikah</p>
						<p class="text-sm text-gray-500">Selasa, 12 Desember 2024</p>
						<p class="text-sm text-gray-500">Masjid Agung Bogor</p>
					</div>
					<div class="mt-6 fade">
						<p class="text-lg font-semibold">Resepsi</p>
						<p class="text-sm text-gray-500">Sabtu, 14 Desember 2024</p>
						<p class="text-sm text-gray-500">Gedung Balai Kartini</p>
					</div>
				</section>

				<!-- // UsersPacketEventStoryAPI struct payload
				type UsersPacketEventStoryAPI struct {
					Title              *string      `json:"location,omitempty" gorm:"type:varchar(36)"`                         // Title
					Description        *string      `json:"description,omitempty" gorm:"type:varchar(4000)"`                    // Description
					Date               *strfmt.Date `json:"date,omitempty" gorm:"type:date" format:"date" swaggertype:"string"` // Date
					UsersPacketEventID *uuid.UUID   `json:"users_packet_event_id,omitempty" gorm:"type:varchar(36);not null"`   // UsersPacketEvent ID
				} -->
				<!-- Cerita Pasangan -->
				<section id="cerita" class="min-h-[50vh] py-8 fade">
					<h2 class="text-2xl font-bold text-center">Cerita Kami</h2>
					<div class="mt-6 space-y-4 fade">
						<div class="flex items-center fade">
							<p class="w-1/4 text-right text-gray-500">Januari 2021</p>
							<div class="w-3/4 pl-4 fade">
								<p class="text-lg font-semibold">Kenalan</p>
								<p class="text-sm text-gray-500">
									Pertama kali bertemu dalam sebuah acara.
								</p>
							</div>
						</div>
					</div>
					<div class="mt-6 space-y-4 fade">
						<div class="flex items-center fade">
							<p class="w-1/4 text-right text-gray-500">Januari 2021</p>
							<div class="w-3/4 pl-4 fade">
								<p class="text-lg font-semibold">Kenalan</p>
								<p class="text-sm text-gray-500">
									Pertama kali bertemu dalam sebuah acara.
								</p>
							</div>
						</div>
					</div>
					<div class="mt-6 space-y-4 fade">
						<div class="flex items-center fade">
							<p class="w-1/4 text-right text-gray-500">Januari 2021</p>
							<div class="w-3/4 pl-4 fade">
								<p class="text-lg font-semibold">Kenalan</p>
								<p class="text-sm text-gray-500">
									Pertama kali bertemu dalam sebuah acara.
								</p>
							</div>
						</div>
					</div>
				</section>

				<!-- // UsersPacketEventGalleryAPI for payload
				type UsersPacketEventGalleryAPI struct {
					MultimediaID       *uuid.UUID `json:"multimedia_id,omitempty" gorm:"type:varchar(36)"`                  // Multimedia ID
					UsersPacketEventID *uuid.UUID `json:"users_packet_event_id,omitempty" gorm:"type:varchar(36);not null"` // UsersPacketEvent ID
				} -->
				<!-- Gallery -->
				<section id="gallery" class="min-h-[50vh] py-8 bg-gray-100 rounded-md fade">
					<h2 class="text-2xl font-bold text-center pb-4">Gallery</h2>
					<div id="gallery-container" class="flex overflow-auto pb-4">
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
						<img
							src="https://via.placeholder.com/300"
							class="px-2 rounded-md fade max-w-md"
						/>
					</div>
				</section>

				<!-- Agenda -->
				<section id="agenda" class="min-h-[50vh] text-center py-8 fade">
					<h2 class="text-2xl font-bold">Agenda Acara</h2>
					<div class="mt-6 fade">
						<p class="text-lg font-semibold">10:00 AM - Akad Nikah</p>
						<p class="text-sm text-gray-500">Masjid Agung Bogor</p>
					</div>
					<div class="mt-6 fade">
						<p class="text-lg font-semibold">12:00 PM - Resepsi</p>
						<p class="text-sm text-gray-500">Gedung Balai Kartini</p>
					</div>
				</section>

				<!-- Gift -->
				<section id="gift" class="min-h-[50vh] text-center py-8 fade bg-gray-100">
					<h2 class="text-2xl font-bold">Daftar Hadiah</h2>
					<p class="text-lg mt-4">
						Klik tombol di bawah untuk melihat daftar hadiah yang diinginkan.
					</p>
					<div class="text-center mt-4">
						<a
							href="https://linktoyourgifts.com"
							class="bg-green-500 text-white px-6 py-3 rounded-full shadow-lg"
							>Lihat Daftar Hadiah</a
						>
					</div>
				</section>

				<!-- Guest (RSVP) -->
				<section id="rsvp" class="min-h-[50vh] py-8 fade">
					<h2 class="text-2xl font-bold text-center fade">RSVP</h2>
					<form class="mt-6 text-center fade">
						<input
							type="text"
							placeholder="Nama Lengkap"
							class="border px-4 py-2 rounded-md w-full max-w-sm mx-auto fade"
						/>
						<div class="mt-4 fade">
							<button class="bg-pink-500 text-white px-6 py-3 rounded-md fade">
								Kirim
							</button>
						</div>
					</form>
				</section>

				<!-- Payment -->
				<section id="payment" class="min-h-[50vh] py-8 fade bg-gray-100">
					<h2 class="text-2xl font-bold text-center">Donasi atau Hadiah</h2>
					<div class="text-center mt-4">
						<a
							href="https://linktopayment.com"
							class="bg-blue-500 text-white px-6 py-3 rounded-full shadow-lg"
							>Beri Hadiah</a
						>
					</div>
				</section>

				<!-- Quote -->
				<section id="quote" class="min-h-[50vh] py-8 fade">
					<h2 class="text-2xl font-bold text-center">Kutipan Pasangan</h2>
					<p class="text-lg mt-4 text-center">
						"Cinta adalah komitmen yang tak terhingga."
					</p>
				</section>

				<!-- Information -->
				<section
					id="information"
					class="min-h-[50vh] py-8 bg-gray-100 rounded-md fade"
				>
					<h2 class="text-2xl font-bold text-center">Informasi Tambahan</h2>
					<p class="text-lg mt-4 text-center">
						Transportasi dan akomodasi akan disediakan.
					</p>
				</section>
				<!-- <section class="pb-12"></section> -->
			</div>
		</div>

		<!-- Footer Navigation -->
		<div
			id="footer-nav"
			class="fixed bottom-0 w-full bg-white py-4 shadow-md hidden"
		>
			<div class="flex justify-around">
				<button
					class="flex flex-col items-center text-gray-700"
					onclick="scrollToSection('detail')"
				>
					<span class="text-sm">Detail</span>
				</button>
				<button
					class="flex flex-col items-center text-gray-700"
					onclick="scrollToSection('acara')"
				>
					<span class="text-sm">Acara</span>
				</button>
				<button
					class="flex flex-col items-center text-gray-700"
					onclick="scrollToSection('agenda')"
				>
					<span class="text-sm">Agenda</span>
				</button>
				<button
					class="flex flex-col items-center text-gray-700"
					onclick="scrollToSection('gift')"
				>
					<span class="text-sm">Hadiah</span>
				</button>
				<button
					class="flex flex-col items-center text-gray-700"
					onclick="scrollToSection('rsvp')"
				>
					<span class="text-sm">RSVP</span>
				</button>
			</div>
		</div>

		<script>
			const speedSlider = document.getElementById('speed-slider');
			speedSlider.addEventListener('input', (event) => {
				scrollSpeed = parseInt(event.target.value);
			});

			// Auto scroll behavior
			const scrollVerticalInterval = setInterval(() => {
				window.scrollBy(0, speedSlider.value);
			}, 50);

			const galleryContainer = document.getElementById('gallery-container');
			let scrollAmount = 0;
			const scrollInterval = setInterval(() => {
				galleryContainer.scrollLeft += 5;
				scrollAmount += 5;
				if (
					scrollAmount >=
					galleryContainer.scrollWidth - galleryContainer.clientWidth
				) {
					scrollAmount = 0;
					galleryContainer.scrollLeft = 0;
				}
			}, 60);

			const splashPage = document.getElementById('splash-page');
			const invitationPage = document.getElementById('invitation-page');
			const openInvitationBtn = document.getElementById('open-invitation-btn');
			const closeInvitationBtn = document.getElementById('close-invitation-btn');
			const footerNav = document.getElementById('footer-nav');
			const fadeElements = document.querySelectorAll('.fade');

			const observer = new IntersectionObserver((entries) => {
				entries.forEach((entry) => {
					if (entry.isIntersecting) {
						entry.target.classList.add('visible');
						observer.unobserve(entry.target);
					}
				});
			});

			openInvitationBtn.addEventListener('click', () => {
				splashPage.classList.add('hidden');
				invitationPage.classList.remove('hidden');
				footerNav.classList.remove('hidden');
				invitationPage.classList.add('visible');
				fadeElements.forEach((el) => observer.observe(el));
			});

			closeInvitationBtn.addEventListener('click', () => {
				splashPage.classList.remove('hidden');
				invitationPage.classList.add('hidden');
				footerNav.classList.add('hidden');
				invitationPage.classList.remove('visible');
				const footerFadeElements = footerNav.querySelectorAll('.fade');
				const invitationPageFadeElements = invitationPage.querySelectorAll('.fade');
				footerFadeElements.forEach((el) => el.classList.remove('visible'));
				invitationPageFadeElements.forEach((el) => el.classList.remove('visible'));
			});

			function scrollToSection(sectionId) {
				const section = document.getElementById(sectionId);
				section.scrollIntoView({ behavior: 'smooth', block: 'start' });
			}
		</script>
	</body>
</html>
