<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kartik & Thana | Wedding Dinner</title>

<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cinzel:wght@500;600&display=swap" rel="stylesheet">

<style>
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
height:100%;
font-family:'Cinzel',serif;
background:#0b1b33;
overflow:hidden;
}

/* SLIDES */
.slides{
position:fixed;inset:0;
overflow-y:auto;
scroll-snap-type:y mandatory;
}
.slide{
height:100vh;
scroll-snap-align:start;
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
}

/* CARD */
.card{
background:rgba(12,25,50,.95);
border:1px solid rgba(212,175,55,.5);
border-radius:28px;
padding:40px 20px;
max-width:420px;width:100%;
text-align:center;
color:#f7e7b4;
}

/* TIMER */
.timer{
display:flex;
justify-content:center;
gap:12px;
margin:20px 0;
}
.time-box{
background:#111;
border:1px solid #d4af37;
border-radius:12px;
padding:15px;
min-width:65px;
}
.time-box span{
font-size:22px;
display:block;
}

/* GUESTBOOK BUTTON */
.wish-btn{
padding:14px 42px;
border-radius:40px;
background:linear-gradient(135deg,#f9e8b8,#d4af37);
border:none;
font-size:15px;
cursor:pointer;
margin-top:20px;
}

/* BOTTOM BAR */
.bottom-bar{
position:fixed;
bottom:0;left:0;right:0;
background:#fff;
display:flex;
justify-content:space-around;
padding:14px 0;
border-top-left-radius:26px;
border-top-right-radius:26px;
z-index:2000;
}
.bar-item{
font-size:14px;
cursor:pointer;
}

/* MODALS */
.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
display:none;
justify-content:center;
align-items:flex-end;
z-index:3000;
}
.modal{
background:#fff;
width:100%;
max-width:420px;
border-radius:26px 26px 0 0;
padding:20px;
}
input,textarea{
width:100%;
padding:12px;
margin-bottom:12px;
border-radius:12px;
border:1px solid #ccc;
}
.send-btn{
width:100%;
padding:12px;
border:none;
border-radius:30px;
background:#6c5ce7;
color:#fff;
font-size:15px;
}

/* SWIPE HINT */
#swipeHint{
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#fff;
text-align:center;
z-index:5000;
}
#swipeHint .arrow{
font-size:55px;
animation:updown 1s infinite alternate;
}
@keyframes updown{
from{transform:translateY(0)}
to{transform:translateY(-15px)}
}
</style>
</head>

<body>

<div class="slides">

<section class="slide">
<div class="card">

<h2>COUNTING DAYS</h2>

<div class="timer">
<div class="time-box"><span id="d">0</span>DAYS</div>
<div class="time-box"><span id="h">0</span>HOURS</div>
<div class="time-box"><span id="m">0</span>MIN</div>
<div class="time-box"><span id="s">0</span>SEC</div>
</div>

<hr style="margin:25px 0;border-color:#d4af37;opacity:.3">

<h3>GUESTBOOK</h3>
<p>Share your love & blessings 💛</p>

<button class="wish-btn" onclick="openWish()">✨ Leave a Wish</button>

</div>
</section>

</div>

<!-- BOTTOM BAR -->
<div class="bottom-bar">
<div class="bar-item" onclick="openRSVP()">📄 RSVP</div>
<div class="bar-item">📞 Contact</div>
<div class="bar-item">📍 Location</div>
<div class="bar-item">📅 Calendar</div>
</div>

<!-- RSVP MODAL -->
<div class="overlay" id="rsvpOverlay">
<div class="modal">
<h3>RSVP</h3>
<input id="rsvpName" placeholder="Your Name">
<input id="rsvpPax" type="number" value="1" min="1">
<button class="send-btn" onclick="submitRSVP()">Send</button>
</div>
</div>

<!-- WISH MODAL -->
<div class="overlay" id="wishOverlay">
<div class="modal">
<h3>Leave a Wish 💛</h3>
<input id="wishName" placeholder="Your Name">
<textarea id="wishMessage" placeholder="Your Blessings..."></textarea>
<button class="send-btn" onclick="submitWish()">Send Wish</button>
</div>
</div>

<!-- SWIPE HINT -->
<div id="swipeHint">
<div class="arrow">⬆️</div>
<p style="font-size:20px;margin:20px 0;">
Psst... The story continues below 😄  
(Yes, scroll!)
</p>
<button onclick="closeSwipe()" class="send-btn" style="width:auto;padding:12px 40px;">
OKAY
</button>
</div>

<script>

/* OPEN MODALS */
function openRSVP(){
document.getElementById("rsvpOverlay").style.display="flex";
}
function openWish(){
document.getElementById("wishOverlay").style.display="flex";
}

/* SUBMIT RSVP */
function submitRSVP(){
fetch("api/save_rsvp.php",{
method:"POST",
headers:{"Content-Type":"application/x-www-form-urlencoded"},
body:`name=${encodeURIComponent(rsvpName.value)}&pax=${encodeURIComponent(rsvpPax.value)}`
})
.then(()=>{alert("RSVP saved 💛");location.reload();});
}

/* SUBMIT WISH */
function submitWish(){
fetch("api/save_wish.php",{
method:"POST",
headers:{"Content-Type":"application/x-www-form-urlencoded"},
body:`name=${encodeURIComponent(wishName.value)}&message=${encodeURIComponent(wishMessage.value)}`
})
.then(()=>{alert("Blessing sent 💛");location.reload();});
}

/* SWIPE HINT */
function closeSwipe(){
document.getElementById("swipeHint").style.display="none";
localStorage.setItem("swipeSeen","1");
}
if(localStorage.getItem("swipeSeen")){
document.getElementById("swipeHint").style.display="none";
}

/* COUNTDOWN */
const target=new Date("March 14, 2026 19:30:00").getTime();
setInterval(()=>{
const now=new Date().getTime();
const diff=target-now;
if(diff<0)return;
d.innerText=Math.floor(diff/(1000*60*60*24));
h.innerText=Math.floor((diff%(1000*60*60*24))/(1000*60*60));
m.innerText=Math.floor((diff%(1000*60*60))/(1000*60));
s.innerText=Math.floor((diff%(1000*60))/1000);
},1000);

</script>

</body>
</html>