<?php session_start(); ?>

<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> নাফ ডায়াগনস্টিক সেন্টার</title>
<link rel="icon" type="image/x-icon" href="assets/myimages/logo-naf.jpg">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;600;800&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
</head>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:'Noto Sans Bengali', sans-serif;
    padding-top:80px;
}

html{
    scroll-behavior: smooth;
}
section, .section, .hero, .doctors, .cta{
    scroll-margin-top: 90px;
}
/* NAVBAR */
.navbar{
    position:fixed;
    width:100%;
    top:0;
    background:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    z-index:999;
}
.navbar{
    transition:0.3s;
}

.navbar.scrolled{
    background:#16a34a;
    color:white;
backdrop-filter:blur(10px);
    box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

.navbar.scrolled a{
    color:white;
}

/* Desktop menu */
.menu{
    display:flex;
}

.menu a{
    margin:0 10px;
    text-decoration:none;
    color:#333;
    font-weight:600;
    transition:.3s;
}

.menu a:hover{
    color:#16a34a;
}
.menu a.active{
    color:#16a34a;
    border-bottom:2px solid #16a34a;
}

/* Mobile button */
.menu-toggle{
    display:none;
    font-size:25px;
    cursor:pointer;
}

/* MOBILE */
@media (max-width:768px){

    .menu{
        position:absolute;
        top:60px;
        left:0;
        width:100%;
        background:white;
        flex-direction:column;
        display:none;
        box-shadow:0 5px 10px rgba(0,0,0,0.1);
    }

    .menu a{
        padding:15px;
        border-bottom:1px solid #eee;
    }

    .menu.show{
        display:flex;
        animation:slideDown 0.3s ease;
    }

    .menu-toggle{
        display:block;
    }
}

/* Animation */
@keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* HERO SLIDER */
.hero {
    position: relative;
    width: 100%;
    height: 600px; /* desktop height */
    overflow: hidden;
}

/* Tablet */
@media (max-width: 992px) {
    .hero {
        height: 500px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .hero {
        height: 350px;
    }
}
.slide{
    position:absolute;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat; /* 🔥 IMPORTANT */
    opacity:0;
    transform:scale(1.05);
    transition:opacity 1s ease-in-out, transform 6s ease;
}

.slide.active{
    opacity:1;
    transform:scale(1);
}
.hero h1{
    font-size:50px;
}

@media (max-width:768px){
    .hero h1{
        font-size:28px;
    }
    .hero p{
        font-size:14px;
    }
}
.hero-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
    color:white;
    z-index:2;
    width:90%;
}

.hero::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5); /* dark overlay */
    z-index:1;
}
.btn{
    padding:12px 25px;
    margin-top:20px;
    display:inline-block;
    border-radius:6px;
    text-decoration:none;
}
.btn-red{
    background:#ef4444;
    color:white;
    font-weight:600;
}

.btn-white{
    border:2px solid white;
    color:white;
    font-weight:600;
}
/* SERVICES */
.section{
    padding:100px 20px;
    text-align:center;
    background:#f8fafc;
}

.section-title{
    font-size:32px;
    margin-bottom:50px;
    font-weight:800;
}

.cards{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
}

.card{
    width:260px;
    padding:30px 20px;
    border-radius:16px;
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(10px);
    border:1px solid rgba(0,0,0,0.05);
    transition:all 0.4s ease;
    position:relative;
    overflow:hidden;
}

/* Glow effect */
.card::before{
    content:"";
    position:absolute;
    width:200%;
    height:200%;
    background:linear-gradient(45deg, transparent, rgba(22,163,74,0.2), transparent);
    top:-100%;
    left:-100%;
    transition:0.6s;
}

.card:hover::before{
    top:0;
    left:0;
}

.card:hover{
    transform:translateY(-12px) scale(1.03);
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
    border-color:#16a34a;
}

/* ICON */
.icon{
    font-size:40px;
    margin-bottom:15px;
    transition:0.4s;
}

.card:hover .icon{
    transform:rotate(10deg) scale(1.2);
}

/* TEXT */
.card h3{
    font-size:20px;
    margin-bottom:10px;
}

.card p{
    font-size:14px;
    color:#555;
    margin-bottom:15px;
}

/* LINK */
.card a{
    text-decoration:none;
    color:#16a34a;
    font-weight:600;
    transition:0.3s;
}

.card a:hover{
    letter-spacing:1px;
}

/* MOBILE */
@media (max-width:768px){
    .card{
        width:90%;
    }
}
/* DOCTOR SECTION */
.doctors{
    background:url('assets/myimages/doctor-bg.jpg') center/cover no-repeat;
    position:relative;
    padding:100px 20px;
    color:white;
}

.doctors::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
}

.doctors h2{
    position:relative;
    text-align:center;
    margin-bottom:50px;
    font-size:32px;
}

/* GRID */
.doctor-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
    position:relative;
}

/* CARD */
.doctor-card{
    width:220px;
    border-radius:15px;
    overflow:hidden;
    background:white;
    color:black;
    transition:0.4s;
    position:relative;
    cursor:pointer;
}

.doctor-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

/* INFO */
.doctor-info{
    padding:15px;
    text-align:center;
}

.doctor-info h3{
    font-size:16px;
    margin-bottom:8px;
}

.doctor-info p{
    font-size:13px;
    color:#555;
    height:50px;
    overflow:hidden;
}

/* BUTTON */
.doctor-info a{
    display:inline-block;
    margin-top:10px;
    padding:8px 15px;
    background:#16a34a;
    color:white;
    text-decoration:none;
    border-radius:6px;
    transition:0.3s;
}

/* HOVER EFFECT */
.doctor-card:hover{
    transform:translateY(-12px) scale(1.05);
    box-shadow:0 20px 40px rgba(0,0,0,0.3);
}

.doctor-card:hover img{
    transform:scale(1.1);
}

.doctor-card img{
    transition:0.4s;
}

.doctor-card:hover a{
    background:#15803d;
}

/* RESPONSIVE */
@media(max-width:768px){
    .doctor-card{
        width:90%;
    }
}
/* FLOATING ANIMATION */
@keyframes float{
    0%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
    100%{transform:translateY(0)}
}

/* CARD BASE */
.doctor-card{
    width:220px;
    border-radius:18px;
    overflow:hidden;
    background:rgba(255,255,255,0.95);
    color:black;
    transition:0.4s;
    position:relative;
    animation:float 4s ease-in-out infinite;
}

/* GLOW BORDER */
.doctor-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:18px;
    padding:2px;
    background:linear-gradient(120deg,#16a34a,transparent,#16a34a);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition:0.4s;
}

.doctor-card:hover::before{
    opacity:1;
}

/* IMAGE EFFECT */
.doctor-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:0.5s;
}

.doctor-card:hover img{
    transform:scale(1.15);
    filter:brightness(0.8);
}

/* INFO */
.doctor-info{
    padding:15px;
    text-align:center;
    position:relative;
    z-index:2;
}

/* TEXT ANIMATION */
.doctor-info h3{
    font-size:16px;
    margin-bottom:8px;
    transition:0.3s;
}

.doctor-card:hover h3{
    color:#16a34a;
}
/* OVERLAY EFFECT */
.doctor-card::after{
    content:"View Profile";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(22,163,74,0.8);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:16px;
    opacity:0;
    transition:0.4s;
}

.doctor-card:hover::after{
    opacity:1;
}
/* BUTTON PREMIUM */
.doctor-info a{
    display:inline-block;
    margin-top:12px;
    padding:8px 18px;
    background:linear-gradient(45deg,#16a34a,#22c55e);
    color:white;
    text-decoration:none;
    border-radius:50px;
    font-size:13px;
    position:relative;
    overflow:hidden;
}

/* BUTTON SHINE */
.doctor-info a::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:-100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.6),transparent);
    transition:0.5s;
}

.doctor-info a:hover::before{
    left:100%;
}

/* HOVER EFFECT */
.doctor-card:hover{
    transform:translateY(-15px) scale(1.07);
    box-shadow:0 25px 60px rgba(0,0,0,0.35);
}
.contact-box{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.contact-card{
    width:250px;
    padding:25px;
    border-radius:12px;
    background:white;
    text-decoration:none;
    color:#333;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    transition:0.4s;
}

.contact-card:hover{
    transform:translateY(-10px);
    background:#16a34a;
    color:white;
}
.complaint-form{
    max-width:500px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.complaint-form input,
.complaint-form select,
.complaint-form textarea{
    padding:12px;
    border-radius:8px;
    border:1px solid #ddd;
    outline:none;
}

.complaint-form button{
    padding:12px;
    background:#16a34a;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
    transition:0.3s;
}

.complaint-form button:hover{
    background:#15803d;
}
.cta{
    background:linear-gradient(45deg,#16a34a,#22c55e);
    color:white;
    padding:60px 20px;
    text-align:center;
}

.cta h2{
    font-size:30px;
    margin-bottom:10px;
}

.cta-btn{
    display:inline-block;
    margin-top:15px;
    padding:12px 25px;
    background:white;
    color:#16a34a;
    border-radius:50px;
    text-decoration:none;
    font-weight:bold;
    transition:0.3s;
}

.cta-btn:hover{
    transform:scale(1.1);
}
/* BACKDROP */
.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:0.4s;
    backdrop-filter:blur(6px);
}

.modal.active{
    opacity:1;
    visibility:visible;
}

/* BOX */
.modal-box{
    background:rgba(255,255,255,0.9);
    padding:30px;
    width:350px;
    border-radius:15px;
    transform:scale(0.7);
    transition:0.4s;
    position:relative;
}

.modal.active .modal-box{
    transform:scale(1);
}

/* CLOSE */
.close-btn{
    position:absolute;
    top:10px;
    right:15px;
    font-size:20px;
    cursor:pointer;
}

/* INPUT */
.input-group{
    position:relative;
    margin:15px 0;
}

.input-group input,
.input-group select{
    width:100%;
    padding:10px;
    border:none;
    border-bottom:2px solid #ccc;
    outline:none;
    background:transparent;
}

/* FLOAT LABEL */
.input-group label{
    position:absolute;
    top:10px;
    left:5px;
    color:#999;
    transition:0.3s;
}

.input-group input:focus + label,
.input-group input:valid + label{
    top:-10px;
    font-size:12px;
    color:#16a34a;
}

/* BUTTON */
.submit-btn{
    width:100%;
    padding:12px;
    background:linear-gradient(45deg,#16a34a,#22c55e);
    border:none;
    color:white;
    border-radius:8px;
    cursor:pointer;
    transition:0.3s;
}

.submit-btn:hover{
    transform:scale(1.05);
}
/* MODAL FIX */
.modal{
    z-index:9999; /* 🔥 very high */
}

/* HERO FIX */
.hero-content{
    z-index:2;
}

/* NAVBAR (optional safe) */
.navbar{
    z-index:1000;
}
.success-popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:0.4s;
    z-index:9999;
}

.success-popup.active{
    opacity:1;
    visibility:visible;
}

.success-box{
    background:white;
    padding:30px;
    border-radius:12px;
    text-align:center;
    transform:scale(0.7);
    transition:0.4s;
}

.success-popup.active .success-box{
    transform:scale(1);
}

.success-box h3{
    color:#16a34a;
    margin-bottom:10px;
}

.success-box button{
    margin-top:15px;
    padding:10px 20px;
    border:none;
    background:#16a34a;
    color:white;
    border-radius:6px;
    cursor:pointer;
}
.complaint-popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:0.4s;
    z-index:9999;
}

.complaint-popup.active{
    opacity:1;
    visibility:visible;
}

.complaint-box{
    background:white;
    padding:30px;
    border-radius:15px;
    text-align:center;
    transform:scale(0.7);
    transition:0.4s;
}

.complaint-popup.active .complaint-box{
    transform:scale(1);
}
</style>



<body>

<!-- NAVBAR -->
<div class="navbar">
    <h3>নাফ ডায়াগনস্টিক সেন্টার</h3>
    <div class="menu" id="menu">
        <a href="#">Home</a>
        <a href="#doctor">Doctor</a>
        <a href="#appointment">Appointment</a>

        <?php if(isset($_SESSION['userId'])) { ?>
            <a href="https://diagnostic.webbee.shop/diagnostic/search.php">Report</a>
        <?php } else { ?>
            <a href="login.php">Report</a>
        <?php } ?>

        <a href="contact.php">Contact</a>
    </div>

    <div class="menu-toggle" onclick="toggleMenu()">☰</div>
</div>

<div class="hero">

    <div class="slide active" style="background:url('assets/myimages/slider1.jpg')"></div>
    <div class="slide" style="background:url('assets/myimages/slider2.jpg')"></div>
    <div class="slide" style="background:url('assets/myimages/slider3.jpg')"></div>
    <div class="slide" style="background:url('assets/myimages/slider4.jpg')"></div>
    <div class="slide" style="background:url('assets/myimages/slider5.jpg')"></div>
<div class="hero-content">
    <h1>
        প্রিমিয়াম <span style="color:#22c55e">মেডিকেল</span> সেবা
    </h1>

    <p>আপনার স্বাস্থ্য আমাদের দায়িত্ব</p>

    <a href="#" class="btn btn-red">বিস্তারিত জানুন</a>
    <a href="#" onclick="openModal()">অ্যাপয়েন্টমেন্ট নিন</a>
</div>
</div>

<div class="section" id="doctor">
    <h2 class="section-title">আমাদের সেবা</h2>

    <div class="cards">

        <div class="card" data-aos="fade-up" data-aos-delay="200">
            <div class="icon">👨‍⚕️</div>
            <h3>যোগ্য ডাক্তার</h3>
            <p>আমাদের রয়েছে দক্ষ ডাক্তারদের টিম যারা সবসময় সেবা দিতে প্রস্তুত।</p>
            <a href="#">বিস্তারিত জানুন →</a>
        </div>

        <div class="card" data-aos="fade-down" data-aos-delay="200">
            <div class="icon">🩺</div>
            <h3>নিয়মিত চেকআপ</h3>
            <p>যেকোন সময় আমাদের ডায়াগনস্টিক সেন্টারে এসে চেকআপ করাতে পারবেন।</p>
            <a href="#">বিস্তারিত জানুন →</a>
        </div>

        <div class="card" data-aos="fade-up" data-aos-delay="200">
            <div class="icon">🧪</div>
            <h3>ল্যাব টেস্ট</h3>
            <p>আমাদের রয়েছে আধুনিক ডিজিটাল ল্যাব টেস্ট সুবিধা।</p>
            <a href="#">বিস্তারিত জানুন →</a>
        </div>

        <div class="card" data-aos="fade-down" data-aos-delay="200">
            <div class="icon">⏰</div>
            <h3>২৪ ঘন্টা সার্ভিস</h3>
            <p>আমরা ২৪ ঘন্টা কাস্টমার সার্ভিস দিয়ে থাকি।</p>
            <a href="#">বিস্তারিত জানুন →</a>
        </div>

    </div>
    </div>
<div class="section doctors" id="appointment">
    <h2 data-aos="fade-down">আমাদের অভিজ্ঞ ডাক্তার দল</h2>

    <div class="doctor-grid">

<?php
include('connect.php');

$res = $connect->query("SELECT * FROM doctors WHERE status=1");

while($row = $res->fetch_assoc()){
?>

<div class="doctor-card" data-aos="fade-up">

   <img src="assets/uploadImage/<?= $row['image'] ?>">

    <div class="doctor-info">
        <h3><?= $row['name'] ?></h3>
        <p><?= $row['department'] ?></p>

        <a href="#" onclick="openModal('<?= $row['name'] ?>')">
            অ্যাপয়েন্টমেন্ট নিন
        </a>
    </div>

</div>

<?php } ?>

    </div>
</div>

<div class="section" id="contact">
    <h2 class="section-title">যোগাযোগ করুন</h2>

    <div class="contact-box">

        <a href="https://www.facebook.com/nafdiagnosticcenter" class="contact-card">
            <h3>📘 Facebook</h3>
            <p>আমাদের ফেসবুক পেজে যোগাযোগ করুন</p>
        </a>

        <a href="https://wa.me/01829041228" class="contact-card">
            <h3>💬 WhatsApp</h3>
            <p>সরাসরি WhatsApp এ মেসেজ দিন</p>
        </a>

        <a href="mailto:nafdiagnosticcenter@gmail.com" class="contact-card">
            <h3>📧 Email</h3>
            <p>nafdiagnosticcenter@gmail.com</p>
        </a>

    </div>
</div>
<div class="section" id="complaint">
    <h2 class="section-title">অভিযোগ জানান</h2>

    <form action="save_complaint.php" method="POST" class="complaint-form">

        <input type="text" name="name" placeholder="আপনার নাম" required>
        <input type="text" name="address" placeholder="ঠিকানা" required>
        <input type="text" name="phone" placeholder="মোবাইল নাম্বার" required>

        <select name="type" required>
            <option value="">অভিযোগের ধরন</option>
            <option value="lab">ল্যাব</option>
            <option value="staff">স্টাফ</option>
            <option value="doctor">ডাক্তার</option>
            <option value="other">অন্যান্য</option>
        </select>

        <textarea name="details" placeholder="বিস্তারিত লিখুন" required></textarea>

        <button type="submit">সাবমিট করুন</button>

    </form>
</div>
<div class="cta" id="appointment">
    <h2>আজই অ্যাপয়েন্টমেন্ট বুক করুন</h2>
    <p>📞 +8801829041228</p>
<h4>Developed BY WEBBEE Developer <a href="https://nurhossan.netlify.app">Nur Hossan</a></h4>
    <a href="#" onclick="openModal()" class="cta-btn">এখনই বুক করুন</a>
</div>
<div class="modal" id="appointmentModal">
    <div class="modal-box">

        <span class="close-btn" onclick="closeModal()">×</span>

        <h2>অ্যাপয়েন্টমেন্ট নিন</h2>

        <form action="save_appointment.php" method="POST">

            <div class="input-group">
                <input type="text" name="patient_name" required>
                <label>আপনার নাম</label>
            </div>

            <div class="input-group">
                <input type="text" name="phone" required>
                <label>মোবাইল নাম্বার</label>
            </div>

            <div class="input-group">
                <select name="doctor_id" id="doctorSelect" required>
                    <option value="">ডাক্তার নির্বাচন করুন</option>
                    <option value="ডা. রুহুল আমিন (সুজন)">ডা. রুহুল আমিন</option>
                    <option value="ডা. ফারজানা সুমি">ডা. ফারজানা সুমি</option>
                    <option value="ডা. সাজেদ সরওয়ার সাইমুম">ডা. সাজেদ</option>
                    <option value="ডা. মোহাম্মদ সোহেল">ডা. সোহেল</option>
                    <option value="ডা. নীলিমা হক বীথি">ডা. নীলিমা</option>
                </select>
            </div>

            <div class="input-group">
                <input type="date" name="date" required>
            </div>

            <div class="input-group">
                <input type="time" name="time" required>
            </div>
            <p>Developed By <a href="https://nurhossan.netlify.app">WEBBEE</a></p>
            <button type="submit" class="submit-btn">সাবমিট করুন</button>

        </form>
    </div>
</div>
<div class="success-popup" id="successPopup">
    <div class="success-box">
        <h3>✅ অ্যাপয়েন্টমেন্ট সফল হয়েছে</h3>
        <p>আমরা শীঘ্রই আপনার সাথে যোগাযোগ করবো</p>
        <button onclick="closeSuccess()">ঠিক আছে</button>
    </div>
</div>
<!-- complain success pop up -->
<div class="complaint-popup" id="complaintPopup">
    <div class="complaint-box">
        <div class="checkmark">✔</div>
        <h3>অভিযোগ সফলভাবে জমা হয়েছে</h3>
        <p>আমরা দ্রুত বিষয়টি পর্যালোচনা করবো</p>
        <button onclick="closeComplaint()">ঠিক আছে</button>
    </div>
</div>
<!-- SLIDER SCRIPT -->
<script>
let slides = document.querySelectorAll('.slide');
let index = 0;

function showSlide(i){
    slides.forEach(s => s.classList.remove('active'));
    slides[i].classList.add('active');
}

setInterval(()=>{
    index++;
    if(index >= slides.length) index = 0;
    showSlide(index);
}, 4000);

function toggleMenu(){
    document.getElementById("menu").classList.toggle("show");
}
window.addEventListener("scroll", function(){
    let navbar = document.querySelector(".navbar");
    if(window.scrollY > 50){
        navbar.classList.add("scrolled");
    } else {
        navbar.classList.remove("scrolled");
    }
});
let links = document.querySelectorAll(".menu a");

links.forEach(link=>{
    if(link.href === window.location.href){
        link.classList.add("active");
    }
});

function openModal(){
    document.getElementById("appointmentModal").classList.add("active");
}

function closeModal(){
    document.getElementById("appointmentModal").classList.remove("active");
}
function openModal(){
    document.getElementById("appointmentModal").classList.add("active");
}

function closeModal(){
    document.getElementById("appointmentModal").classList.remove("active");
}
function closeSuccess(){
    document.getElementById("successPopup").classList.remove("active");
}

// URL check
window.onload = function(){
    const params = new URLSearchParams(window.location.search);

    if(params.get("success") === "1"){
        document.getElementById("successPopup").classList.add("active");
    }
}
const sections = document.querySelectorAll("section, .section, .hero, .doctors, .cta");
const navLinks = document.querySelectorAll(".menu a");

window.addEventListener("scroll", () => {
    let current = "";

    sections.forEach(sec => {
        const secTop = sec.offsetTop - 100;
        if(scrollY >= secTop){
            current = sec.getAttribute("id");
        }
    });

    navLinks.forEach(a => {
        a.classList.remove("active");
        if(a.getAttribute("href") === "#" + current){
            a.classList.add("active");
        }
    });
});
function closeComplaint(){
    document.getElementById("complaintPopup").classList.remove("active");
}

window.addEventListener("load", function(){
    const params = new URLSearchParams(window.location.search);

    if(params.get("complaint") === "1"){
        document.getElementById("complaintPopup").classList.add("active");
    }
});
function openModal(doctorName){
    document.getElementById("appointmentModal").classList.add("active");

    let select = document.getElementById("doctorSelect");
    select.value = doctorName;
}

</script>
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>

<script>
AOS.init({
    duration: 1000,
    once: true
});


</script>
</body>
</html>