<!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">

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

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

/* COVER */
.cover{
position:fixed;inset:0;
background:url("assets/images/cover1.jpeg") center/cover no-repeat;
display:flex;justify-content:center;align-items:center;text-align:center;z-index:1000;
}
.invite img{width:120px;margin-bottom:18px;}
.small{font-size:34px;color:#111;margin-bottom:12px;}

/* PREMIUM GOLD SHIMMER NAMES */
.names {
    font-family: 'Great Vibes';
    font-size: 64px;
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
    to { background-position: 200% center; }
}

.date{margin:20px 0 40px;letter-spacing:4px;color:#a67c00;}
.open-btn{
background:linear-gradient(135deg,#f7e7b4,#d4af37);
border:none;padding:16px 90px;border-radius:999px;
font-size:15px;letter-spacing:3px;cursor:pointer;
}

/* SLIDES */
.slides{position:fixed;inset:0;display:none;overflow-y:auto;scroll-snap-type:y mandatory;}
.slide{height:100vh;scroll-snap-align:start;position:relative;}
.slide video{width:100%;height:100%;object-fit:cover;}

/* SWIPE UP HINT */
.swipe-up {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    z-index: 10;
    font-size: 14px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}
.hand-emoji {
    display: block;
    font-size: 24px;
    animation: bounce 1.5s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-15px);}
    60% {transform: translateY(-7px);}
}

/* FALLING HEARTS */
.heart {
    position: fixed;
    top: -20px;
    font-size: 20px;
    user-select: none;
    pointer-events: none;
    z-index: 9999;
    animation: fall linear forwards;
}
@keyframes fall {
    to { transform: translateY(105vh) rotate(360deg); }
}

/* SLIDE 3 */
.slide-3{
background:radial-gradient(circle at top,#1d3666,#0b1b33);
padding:100px 20px 220px;
display:flex;justify-content:center;
}
.card{
background:rgba(12,25,50,.9);
border:1px solid rgba(212,175,55,.45);
border-radius:28px;
padding:40px 30px;
max-width:420px;width:100%;
text-align:center;
}
.card h2{color:#f7e7b4;margin-bottom:26px;}

.timer{display:flex;justify-content:center;gap:12px;margin-bottom:30px;}
.time-box{
background:#0b1b33;border:1px solid rgba(212,175,55,.4);
border-radius:14px;padding:16px 12px;min-width:70px;
}
.time-box span{font-size:26px;color:#f7e7b4;}
.time-box small{font-size:10px;color:#d6caa3;}

.divider{
width:70%;height:1px;margin:30px auto;
background:linear-gradient(to right,transparent,#d4af37,transparent);
}

.guest-title{font-size:22px;color:#f7e7b4;}
.guest-text{font-size:14px;color:#e6dfc6;margin-bottom:20px;}

.wish-btn{
padding:10px 25px;
border-radius:40px;
background:linear-gradient(135deg,#fff4cc,#d4af37);
border:none;cursor:pointer;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
animation: wishBreathing 1.2s ease-in-out infinite;
box-shadow: 0 0 15px rgba(255,244,204,0.6);
}

@keyframes wishBreathing {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.1); filter: brightness(1.3); box-shadow: 0 0 25px rgba(212,175,55,0.8); }
  100% { transform: scale(1); filter: brightness(1); }
}

.remark{
margin-top:40px;
font-family:'Great Vibes',cursive;
font-size:18px;
letter-spacing:1px;
color:rgba(247,231,180,0.55);
}

/* BOTTOM BAR */
.bottom-bar{
position:fixed;bottom:-120px;left:0;right:0;
background:rgba(255,255,255,.98);
display:flex;justify-content:space-around;
padding:14px 0;border-radius:26px 26px 0 0;
transition:.4s;z-index:3000;
box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
}
.bottom-bar.show{bottom:0;}
.bar-item{text-align:center;font-size:12px;cursor:pointer; padding: 0 10px; color:#333; text-decoration:none;}
.bar-item span{display:block;font-size:22px;}

.bar-item.rsvp-attn {
    color: #b8860b;
    font-weight: 800;
    position: relative;
    background: rgba(212, 175, 55, 0.15);
    border-radius: 12px;
    padding: 5px 15px;
    animation: rsvpSuperHighlight 1s ease-in-out infinite alternate;
}

@keyframes rsvpSuperHighlight {
  from { transform: scale(1); box-shadow: 0 0 0px rgba(212, 175, 55, 0); }
  to { transform: scale(1.15); box-shadow: 0 0 15px rgba(212, 175, 55, 0.6); background: rgba(212, 175, 55, 0.25); color: #8b0000; }
}

/* OVERLAYS */
.rsvp-overlay{
position:fixed;inset:0;
background:rgba(0,0,0,.45);
display:none;justify-content:center;align-items:flex-end;
z-index:5000;
}
.rsvp-box{
background:#fff;width:100%;max-width:420px;
border-radius:26px 26px 0 0;
padding:26px 22px 30px;
color: #333;
}

.rsvp-title{text-align:center;font-size:22px;margin-bottom:20px; color:#0b1b33;}
.rsvp-actions{display:flex;gap:14px;}
.rsvp-btn{
flex:1;padding:14px;border-radius:14px;
border:2px solid #ccc;font-size:15px;
background:#fff;cursor:pointer;
}
.rsvp-btn.go{border-color:#4caf50;color:#4caf50;}
.rsvp-btn.no{border-color:#e53935;color:#e53935;}

.form-group{margin-bottom:14px;}
.form-group input{
width:100%;padding:14px;border-radius:12px;
border:1px solid #ccc;font-size:14px;
}

.send-btn{
width:100%;padding:14px;border:none;
border-radius:30px;background:#6c5ce7;
color:#fff;font-size:15px;
margin-bottom: 10px;
}

.back-btn{
padding:8px 18px;margin-bottom:16px;
border-radius:30px;border:1px solid #d4af37;
background:transparent;color:#d4af37;
cursor:pointer;
}

.success{display:none;text-align:center;}
.success-ring{
width:72px;height:72px;border-radius:50%;
border:2px solid rgba(212,175,55,0.75);
margin:25px auto 15px;
display:flex;align-items:center;justify-content:center;
}
.success-icon{width:36px;height:36px;}
.success-icon path{
fill:none;stroke:#d4af37;stroke-width:4;
stroke-linecap:round;stroke-linejoin:round;
}
.success-text{font-size:18px;color:#333;}

.mute-btn{
position:fixed;top:15px;right:15px;
width:42px;height:42px;border-radius:50%;
border:none;background:#fff;z-index:6000;
}

.notgoing-text{text-align:center;color:#555;font-size:15px;line-height:1.8;margin-bottom:20px;}

</style>
</head>

<body>

<div class="cover" id="cover">
  <div class="invite">
    <img src="assets/images/ganesha.png">
    <div class="small">Wedding Dinner</div>
    <div class="names">Kartik & Thana</div>
    <div class="date">14 MARCH 2026</div>
    <button class="open-btn" onclick="openInvite()">OPEN</button>
  </div>
</div>

<div class="slides" id="slides">
    <section class="slide">
        <video autoplay muted loop playsinline><source src="assets/video/invite.mp4"></video>
        <div class="swipe-up"><span class="hand-emoji">☝️</span><span>Swipe Up</span></div>
    </section>

    <section class="slide">
        <video autoplay muted loop playsinline><source src="assets/video/slide2nd.mp4"></video>
    </section>

    <section class="slide slide-3" id="slide3">
        <div class="card">
            <h2>COUNTING DAYS</h2>
            <div class="timer">
                <div class="time-box"><span id="d">0</span><small>DAYS</small></div>
                <div class="time-box"><span id="h">0</span><small>HOURS</small></div>
                <div class="time-box"><span id="m">0</span><small>MIN</small></div>
                <div class="time-box"><span id="s">0</span><small>SEC</small></div>
            </div>
            <div class="divider"></div>
            <div class="guest-title">GUESTBOOK</div>
            <div class="guest-text">Share your love and blessings 💛</div>
            <button class="wish-btn" onclick="openWish()">Leave a Wish (Click Here)</button>
            <div class="remark">created by Kartik Zinda</div>
        </div>
    </section>
</div>

<div class="bottom-bar" id="bottomBar">
    <div class="bar-item rsvp-attn" onclick="openRSVP()"><span>📝</span>RSVP</div>
    <div class="bar-item" onclick="openOverlay('contactOverlay')"><span>📞</span>Contact</div>
    <div class="bar-item" onclick="openOverlay('locationOverlay')"><span>📍</span>Location</div>
</div>

<div class="rsvp-overlay" id="contactOverlay">
<div class="rsvp-box">
<button class="back-btn" onclick="closeOverlay('contactOverlay')">← Back</button>
<div class="rsvp-title">Contact</div>

<div style="margin-bottom:18px;">
<strong>Raja</strong><br>
<a href="tel:+60165530499" style="margin-right:15px; text-decoration:none; color:#0b1b33;">📞 Call</a>
<a href="https://wa.me/60165530499" target="_blank" style="text-decoration:none; color:#25D366;">
<img src="assets/images/whatsapp.png" width="22" style="vertical-align:middle;"> WhatsApp
</a>
</div>

<div style="margin-bottom:18px;">
<strong>Satis</strong><br>
<a href="tel:+60102126547" style="margin-right:15px; text-decoration:none; color:#0b1b33;">📞 Call</a>
<a href="https://wa.me/60102126547" target="_blank" style="text-decoration:none; color:#25D366;">
<img src="assets/images/whatsapp.png" width="22" style="vertical-align:middle;"> WhatsApp
</a>
</div>

<div style="margin-bottom:18px;">
<strong>Sugunan</strong><br>
<a href="tel:+60142840226" style="margin-right:15px; text-decoration:none; color:#0b1b33;">📞 Call</a>
<a href="https://wa.me/60142840226" target="_blank" style="text-decoration:none; color:#25D366;">
<img src="assets/images/whatsapp.png" width="22" style="vertical-align:middle;"> WhatsApp
</a>
</div>

<div style="margin-bottom:18px;">
<strong>Muniandy</strong><br>
<a href="tel:+60169764916" style="margin-right:15px; text-decoration:none; color:#0b1b33;">📞 Call</a>
<a href="https://wa.me/60169764916" target="_blank" style="text-decoration:none; color:#25D366;">
<img src="assets/images/whatsapp.png" width="22" style="vertical-align:middle;"> WhatsApp
</a>
</div>
</div>
</div>

<div class="rsvp-overlay" id="rsvpOverlay">
    <div class="rsvp-box">
        <div id="step1">
            <button class="back-btn" onclick="closeRSVP()">← Back</button>
            <div class="rsvp-title">RSVP</div>
            <div class="rsvp-actions">
                <button class="rsvp-btn go" onclick="showForm()">✔ Going</button>
                <button class="rsvp-btn no" onclick="notGoing()">✖ Not Going</button>
            </div>
        </div>
        <div id="step2" style="display:none">
            <button class="back-btn" onclick="resetRSVP()">← Back</button>
            <div class="rsvp-title">We can't wait to celebrate with you 💛</div>
            <div class="form-group"><input id="guestName" placeholder="Your Name"></div>
            <div class="form-group"><input id="guestPax" type="number" value="1" min="1"></div>
            <button class="send-btn" onclick="submitRSVP()">Send</button>
        </div>
        <div id="stepNo" style="display:none">
            <button class="back-btn" onclick="resetRSVP()">← Back</button>
            <div class="rsvp-title">No Worries at All<br><span style="font-size:0.8em; font-weight:normal;">(Leave your wish)</span> 😊</div>
            <p class="notgoing-text">Thank you for taking the time.<br>Your presence will be missed, but your blessings are always welcome. 🤍</p>
            <button class="send-btn" onclick="closeRSVP()">Close</button>
        </div>
        <div id="success" class="success">
            <div class="success-ring"><svg class="success-icon" viewBox="0 0 52 52"><path d="M14 27 L22 35 L38 18"></path></svg></div>
            <h3 class="success-text">Thank you for your response 💛</h3>
        </div>
    </div>
</div>

<div class="rsvp-overlay" id="wishOverlay">
    <div class="rsvp-box">
        <div id="wishFormContainer">
            <button class="back-btn" onclick="closeWish()">← Back</button>
            <div class="rsvp-title">Leave a Wish 💛</div>
            <div class="form-group"><input id="wishName" placeholder="Your Name"></div>
            <div class="form-group"><input id="wishMessage" placeholder="Your Message"></div>
            <button class="send-btn" onclick="submitWish()">Send Wish</button>
        </div>
        
        <div id="wishSuccess" class="success">
            <div class="success-ring"><svg class="success-icon" viewBox="0 0 52 52"><path d="M14 27 L22 35 L38 18"></path></svg></div>
            <h3 class="success-text" style="font-family:'Great Vibes'; font-size: 28px; color:#b8860b;">Thank you so much!</h3>
            <p style="font-size: 14px; margin-top: 10px;">Your beautiful wishes have been received with love. 💛</p>
        </div>
    </div>
</div>

<div class="rsvp-overlay" id="locationOverlay">
    <div class="rsvp-box">
        <button class="back-btn" onclick="closeOverlay('locationOverlay')">← Back</button>
        <div class="rsvp-title">Location</div>
        <p class="notgoing-text">BKCC, Shah Alam, Selangor</p>
        <button class="send-btn" style="background:#4285F4;" onclick="window.open('https://maps.google.com/?q=BKCC+Shah+Alam')">Google Maps</button>
        <button class="send-btn" style="background:#33CCFF;" onclick="window.open('https://www.waze.com/ul?ll=3.0084,101.5204&navigate=yes')">Waze</button>
    </div>
</div>

<audio id="bgMusic" loop><source src="assets/music/wedding.mp3"></audio>
<button class="mute-btn" onclick="toggleMusic()">🔇</button>

<script>
document.addEventListener("DOMContentLoaded",function(){
    const cover=document.getElementById("cover");
    const slides=document.getElementById("slides");
    const slide3=document.getElementById("slide3");
    const bottomBar=document.getElementById("bottomBar");
    const bgMusic=document.getElementById("bgMusic");

    let heartInterval, heartsActive = false;

    window.openInvite=function(){
        cover.style.display="none";
        slides.style.display="block";
        bgMusic.play().catch(()=>{});
        startHearts();
    };

    window.toggleMusic=function(){bgMusic.paused?bgMusic.play():bgMusic.pause();};
    window.openRSVP=()=>document.getElementById('rsvpOverlay').style.display="flex";
    window.closeRSVP=()=>{document.getElementById('rsvpOverlay').style.display="none";resetRSVP();};
    window.showForm=()=>{step1.style.display="none";step2.style.display="block";};
    window.notGoing=()=>{step1.style.display="none";stepNo.style.display="block";};
    window.resetRSVP=()=>{step1.style.display="block";step2.style.display="none";stepNo.style.display="none";success.style.display="none";};

    window.submitRSVP=()=>{
        if(!guestName.value.trim()) return alert("Enter your name");
        const fd=new FormData();
        fd.append("name",guestName.value);
        fd.append("pax",guestPax.value);
        fd.append("status","Going");
        fetch("api/save_rsvp.php",{method:"POST",body:fd}).then(()=>{
            step2.style.display="none";success.style.display="block";setTimeout(closeRSVP,2000);
        });
    };

    window.openWish=()=>{
        document.getElementById('wishFormContainer').style.display = "block";
        document.getElementById('wishSuccess').style.display = "none";
        wishOverlay.style.display="flex";
    };
    window.closeWish=()=>wishOverlay.style.display="none";

    window.submitWish=()=>{
        const name = document.getElementById("wishName").value.trim();
        const msg = document.getElementById("wishMessage").value.trim();
        
        if(!name || !msg) return alert("Please leave your name and a short wish.");
        
        const fd=new FormData();
        fd.append("name", name);
        fd.append("message", msg);
        
        fetch("api/save_wish.php",{method:"POST",body:fd}).then(()=>{
            // PREMIUM TRANSITION
            document.getElementById('wishFormContainer').style.display = "none";
            document.getElementById('wishSuccess').style.display = "block";
            
            // TRIGGER GOLD & SILVER CONFETTI
            confetti({
                particleCount: 150,
                spread: 70,
                origin: { y: 0.6 },
                colors: ['#bf953f', '#fcf6ba', '#b38728', '#ffffff']
            });

            // Clear inputs
            document.getElementById("wishName").value = "";
            document.getElementById("wishMessage").value = "";
            
            // Auto close after 4 seconds to let them see confetti
            setTimeout(closeWish, 4000);
        }).catch(err => {
            alert("Something went wrong. Please try again.");
        });
    };

    window.openOverlay=id=>document.getElementById(id).style.display="flex";
    window.closeOverlay=id=>document.getElementById(id).style.display="none";

    function createHeart() {
        if(!heartsActive) return;
        const heart = document.createElement('div');
        heart.classList.add('heart');
        heart.innerHTML = '❤️';
        heart.style.left = Math.random() * 100 + "vw";
        heart.style.animationDuration = Math.random() * 3 + 2 + "s";
        document.body.appendChild(heart);
        setTimeout(() => heart.remove(), 5000);
    }
    function startHearts() { heartsActive = true; if(!heartInterval) heartInterval = setInterval(createHeart, 400); }
    function stopHearts() { heartsActive = false; }

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

    slides.addEventListener("scroll",()=>{
        const isAtSlide3 = slides.scrollTop >= slide3.offsetTop - 100;
        bottomBar.classList.toggle("show", isAtSlide3);
        if(isAtSlide3) stopHearts(); else startHearts();
    });
});
</script>
</body>
</html>