<?php

$pageTitle = 'संपर्क करें';
include 'includes/header.php';

$faqs = [];

$result = mysqli_query(
    $conn,
    "SELECT *
     FROM faqs
     ORDER BY id ASC"
);

while ($row = mysqli_fetch_assoc($result)) {
    $faqs[] = $row;
}


?>


<?php
if (isset($_SESSION['success'])) {
    unset($_SESSION['success']);
?>

    <div id="successPopup" class="success-popup">

        <i class="bi bi-check-circle-fill"></i>

        <span>
            आपका संदेश सफलतापूर्वक भेज दिया गया है।
        </span>

    </div>

<?php } ?>

<?php
if (isset($_SESSION['error'])) {
?>
    <div id="errorPopup" class="success-popup" style="background: #ff0019;">

        <i class="bi bi-check-circle-fill"></i>

        <span>
            <?php
            echo $_SESSION['error'];
            unset($_SESSION['error']);
            ?>
        </span>

    </div>

<?php } ?>


<style>
    .success-popup {
        position: fixed;
        top: 30px;
        right: 30px;

        background: #16a34a;
        color: #fff;

        padding: 16px 24px;

        border-radius: 12px;

        display: flex;
        align-items: center;
        gap: 10px;

        font-weight: 600;

        z-index: 99999;

        box-shadow: 0 10px 25px rgba(0, 0, 0, .15);

        animation: slideIn .4s ease;
    }

    .success-popup i {
        font-size: 22px;
    }

    @keyframes slideIn {

        from {
            opacity: 0;
            transform: translateX(50px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }

    }

    .fade-out {
        opacity: 0;
        transition: .5s;
    }
</style>

<script>
    setTimeout(function() {

        let popup =
            document.getElementById('successPopup') ||
            document.getElementById('errorPopup');

        if (popup) {

            popup.classList.add('fade-out');

            setTimeout(function() {

                popup.remove();

            }, 500);

        }

    }, 3000);


    if (window.location.search.includes('success=1')) {

        window.history.replaceState({},
            document.title,
            window.location.pathname
        );

    }
</script>


<!-- =========================================
     CONTACT HERO SECTION START
========================================= -->

<section class="contact-hero-section">

    <div class="container">

        <!-- BREADCRUMB -->
        <div class="contact-breadcrumb">

            <a href="index.php">होम</a>

            <span>/</span>

            <span>संपर्क</span>

        </div>

        <!-- HERO CONTENT -->
        <div class="contact-hero-content">

            <div class="contact-hero-icon">

                <i class="bi bi-postcard-heart-fill"></i>

            </div>

            <h1>

                संपर्क करें

            </h1>

            <p>

                खबर भेजें, विज्ञापन के लिए पूछें, शिकायत दर्ज करें — हम 24 घंटे आपके लिए तैयार हैं।

            </p>

        </div>

    </div>

</section>

<style>
    /* =========================================
       CONTACT HERO SECTION
    ========================================= */

    .contact-hero-section {
        padding: 90px 0;
        background: linear-gradient(90deg, #09162f, #1e293b);
        text-align: center;
    }

    .contact-breadcrumb {
        margin-bottom: 30px;
        font-size: 14px;
        color: #cbd5e1;
    }

    .contact-breadcrumb a {
        color: #fff;
        text-decoration: none;
    }

    .contact-breadcrumb span {
        margin: 0 6px;
    }

    .contact-hero-icon {
        width: 80px;
        height: 80px;
        border-radius: 22px;
        background: linear-gradient(135deg, #e11d48, #ff3d71);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 25px;
        color: #fff;
        font-size: 34px;
        box-shadow: 0 10px 25px rgba(233, 30, 99, 0.35);
    }

    .contact-hero-content h1 {
        font-size: 60px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 18px;
    }

    .contact-hero-content p {
        max-width: 700px;
        margin: auto;
        color: #cbd5e1;
        font-size: 18px;
        line-height: 1.9;
    }

    /* RESPONSIVE */

    @media(max-width:768px) {

        .contact-hero-section {
            padding: 70px 0;
        }

        .contact-hero-content h1 {
            font-size: 40px;
        }

        .contact-hero-content p {
            font-size: 16px;
        }

        .contact-hero-icon {
            width: 70px;
            height: 70px;
            font-size: 28px;
        }
    }
</style>



<!-- =========================================
     CONTACT DETAILS SECTION START
========================================= -->

<section class="contact-details-section">

    <div class="container">

        <div class="row g-4">

            <div class="col-12">

                <div class="contact-card">

                    <div class="contact-card-icon">
                        <i class="bi bi-telephone-fill"></i>
                    </div>

                    <div class="contact-card-content">

                        <h3>
                            <?php echo $contactDetails[1]['title'] ?? ''; ?>
                        </h3>

                        <a>
                            <?php echo $contactDetails[1]['subtitle'] ?? ''; ?>
                        </a>

                    </div>

                </div>

            </div>

            <div class="col-12">

                <div class="contact-card">

                    <div class="contact-card-icon">
                        <i class="bi bi-envelope-fill"></i>
                    </div>

                    <div class="contact-card-content">

                        <h3>
                            <?php echo $contactDetails[2]['title'] ?? ''; ?>
                        </h3>

                        <a>
                            <?php echo $contactDetails[2]['subtitle'] ?? ''; ?>
                        </a>

                    </div>

                </div>

            </div>

            <div class="col-12">

                <div class="contact-card">

                    <div class="contact-card-icon">
                        <i class="bi bi-geo-alt-fill"></i>
                    </div>

                    <div class="contact-card-content">

                        <h3>
                            <?php echo $contactDetails[3]['title'] ?? ''; ?>
                        </h3>

                        <a>
                            <?php echo $contactDetails[3]['subtitle'] ?? ''; ?>
                        </a>

                    </div>

                </div>

            </div>

            <div class="col-12">

                <div class="contact-card">

                    <div class="contact-card-icon">
                        <i class="bi bi-clock-fill"></i>
                    </div>

                    <div class="contact-card-content">

                        <h3>
                            <?php echo $contactDetails[4]['title'] ?? ''; ?>
                        </h3>

                        <a>
                            <?php echo $contactDetails[4]['subtitle'] ?? ''; ?>
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

<style>
    /* =========================================
       CONTACT DETAILS SECTION
    ========================================= */

    .contact-details-section {
        padding: 70px 0;
        background: #f3f4f6;
    }

    .contact-card {
        background: #fff;
        border-radius: 24px;
        padding: 25px 30px;
        display: flex;
        align-items: center;
        gap: 25px;
        transition: 0.35s;
        box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    }

    .contact-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    }

    .contact-card-content {
        flex: 1;
    }

    .contact-card-icon {
        width: 66px;
        height: 66px;
        border-radius: 18px;
        background: linear-gradient(135deg, #e11d48, #d81b60);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        color: #fff;
        font-size: 28px;
    }

    .contact-card h3 {
        font-size: 28px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 20px;
    }

    .contact-card a {
        display: block;
        text-decoration: none;
        color: #e11d48 !important;
        font-weight: 700;
        margin-bottom: 10px;
        transition: 0.3s;
    }

    .contact-card a:hover {
        color: #111827;
    }

    .contact-card p {
        color: #e11d48;
        font-weight: 700;
        line-height: 1.9;
        margin-bottom: 10px;
    }

    /* RESPONSIVE */

    @media(max-width:768px) {

        .contact-details-section {
            padding: 50px 0;
        }

        .contact-card {
            padding: 35px 20px;
            border-radius: 20px;
        }

        .contact-card h3 {
            font-size: 22px;
        }

        .contact-card-icon {
            width: 58px;
            height: 58px;
            border-radius: 16px;
            font-size: 24px;
        }
    }
</style>


<!-- =========================================
     CONTACT FORM SECTION START
========================================= -->

<section class="contact-form-section">

    <div class="container">

        <!-- SECTION TITLE -->
        <div class="contact-form-heading">

            <h2>
                संदेश भेजें
            </h2>

            <p>
                सभी * चिह्नित फील्ड भरना अनिवार्य है।
            </p>

        </div>

        <div class="row g-4">

            <!-- CONTACT FORM -->
            <div class="col-lg-8">

                <div class="contact-form-box">

                    <!-- FORM -->
                    <form action="submit_contact.php" method="POST">

                        <!-- FORM FIELDS -->
                        <div class="row g-4">

                            <!-- NAME -->
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label>
                                        पूरा नाम *
                                    </label>

                                    <input type="text" name="name" placeholder="जैसे: राजेश शर्मा" required>

                                </div>

                            </div>

                            <!-- EMAIL -->
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label>
                                        ईमेल पता *
                                    </label>

                                    <input type="email" name="email" placeholder="your@email.com" required>

                                </div>

                            </div>

                            <!-- PHONE -->
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label>
                                        मोबाइल नंबर
                                    </label>

                                    <input type="text" name="mobile" placeholder="+91 9XXXXXXXXX">
                                </div>

                            </div>

                            <!-- SUBJECT -->
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label>
                                        विषय *
                                    </label>

                                    <input type="text" name="subject" placeholder="संदेश का विषय" required>

                                </div>

                            </div>

                            <!-- MESSAGE -->
                            <div class="col-12">

                                <div class="form-group">

                                    <label>
                                        आपका संदेश *
                                    </label>

                                    <textarea name="message" rows="6" placeholder="यहाँ अपना संदेश लिखें..." required></textarea>

                                </div>

                            </div>

                            <!-- BUTTON -->
                            <div class="col-12">

                                <button type="submit"
                                    class="send-message-btn">

                                    <i class="bi bi-send-fill"></i>

                                    संदेश भेजें

                                </button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

            <!-- SIDEBAR -->
            <div class="col-lg-4">

                <!-- MAP -->
                <div class="contact-sidebar-box">

                    <h3 class="sidebar-contact-title">
                        हमारा स्थान
                    </h3>

                    <div class="map-box">

                        <iframe
                            src="https://maps.google.com/maps?q=ajmer&t=&z=13&ie=UTF8&iwloc=&output=embed"
                            allowfullscreen=""
                            loading="lazy">
                        </iframe>

                    </div>

                </div>

                <!-- SOCIAL -->
                <div class="contact-sidebar-box text-center">

                    <h3 class="sidebar-contact-title social-title">
                        सोशल मीडिया
                    </h3>

                    <div class="contact-social-icons">

                        <a href="<?php echo $contactDetails[7]['subtitle'] ?? ''; ?>" class="facebook-bg" target="_blank">
                            <i class="bi bi-facebook"></i>
                        </a>

                        <a href="<?php echo $contactDetails[8]['subtitle'] ?? ''; ?>" class="instagram-bg" target="_blank">
                            <i class="bi bi-instagram"></i>
                        </a>

                        <a href="<?php echo $contactDetails[6]['subtitle'] ?? ''; ?>" class="youtube-bg" target="_blank">
                            <i class="bi bi-youtube"></i>
                        </a>

                        <a href="https://wa.me/<?php echo $contactDetails[5]['subtitle'] ?? ''; ?>" class="whatsapp-bg" target="_blank">
                            <i class="bi bi-whatsapp"></i>
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

<style>
    /* =========================================
       CONTACT FORM SECTION
    ========================================= */

    .contact-form-section {
        padding: 80px 0;
        background: #f3f4f6;
    }

    /* HEADING */

    .contact-form-heading {
        margin-bottom: 45px;
    }

    .contact-form-heading h2 {
        font-size: 58px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 14px;
    }

    .contact-form-heading p {
        color: #64748b;
        font-size: 17px;
    }

    /* FORM BOX */

    .contact-form-box {
        background: #fff;
        border-radius: 28px;
        padding: 45px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    /* =========================================
       TOPIC RADIO BUTTONS
    ========================================= */

    .contact-topic-wrapper {
        margin-bottom: 40px;
    }

    .contact-topic-wrapper label {
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 18px;
    }

    .contact-topic-list {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .topic-option {
        position: relative;
        cursor: pointer;
        margin: 0 !important;
    }

    .topic-option input {
        display: none;
    }

    .topic-option span {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 22px;
        border: 1px solid #dbe2ea;
        border-radius: 40px;
        background: #fff;
        color: #111827;
        font-size: 14px;
        font-weight: 700;
        transition: 0.3s;
    }

    .topic-option input:checked+span {
        background: #e11d48;
        color: #fff;
        border-color: #e11d48;
        box-shadow: 0 8px 20px rgba(233, 30, 99, 0.2);
    }

    .topic-option span:hover {
        border-color: #e11d48;
    }

    /* =========================================
       FORM
    ========================================= */

    .form-group label {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 12px;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        border: 1px solid #dbe2ea;
        border-radius: 16px;
        padding: 16px 18px;
        font-size: 15px;
        outline: none;
        transition: 0.3s;
        background: #fff;
    }

    .form-group input:focus,
    .form-group textarea:focus {
        border-color: #e11d48;
        box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.08);
    }

    /* BUTTON */

    .send-message-btn {
        border: none;
        background: linear-gradient(135deg, #e11d48, #ff3d71);
        color: #fff;
        padding: 16px 30px;
        border-radius: 40px;
        font-size: 15px;
        font-weight: 700;
        transition: 0.3s;
    }

    .send-message-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px rgba(233, 30, 99, 0.25);
    }

    .send-message-btn i {
        margin-right: 8px;
    }

    /* =========================================
       SIDEBAR
    ========================================= */

    .contact-sidebar-box {
        background: #fff;
        border-radius: 26px;
        padding: 28px;
        margin-bottom: 24px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .sidebar-contact-title {
        font-size: 32px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 28px;
        position: relative;
        padding-bottom: 14px;
    }

    .sidebar-contact-title::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 80px;
        height: 3px;
        background: #e11d48;
        border-radius: 20px;
    }

    /* MAP */

    .map-box {
        overflow: hidden;
        border-radius: 20px;
    }

    .map-box iframe {
        width: 100%;
        height: 360px;
        border: 0;
    }

    /* SOCIAL */

    .social-title {
        text-align: center;
    }

    .social-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .contact-social-icons {
        display: flex;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .contact-social-icons a {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        font-size: 20px;
        transition: 0.3s;
    }

    .contact-social-icons a:hover {
        transform: translateY(-5px);
    }

    /* COLORS */

    .facebook-bg {
        background: #1877f2;
    }

    .instagram-bg {
        background: #e1306c;
    }

    .youtube-bg {
        background: #ff0000;
    }

    .twitter-bg {
        background: #000;
    }

    .whatsapp-bg {
        background: #25D366;
    }

    /* =========================================
       RESPONSIVE
    ========================================= */

    @media(max-width:991px) {

        .contact-form-box {
            padding: 30px;
        }

        .contact-form-heading h2 {
            font-size: 46px;
        }
    }

    @media(max-width:768px) {

        .contact-form-section {
            padding: 60px 0;
        }

        .contact-form-heading {
            margin-bottom: 35px;
        }

        .contact-form-heading h2 {
            font-size: 38px;
        }

        .contact-form-heading p {
            font-size: 15px;
            line-height: 1.8;
        }

        .contact-form-box {
            padding: 22px;
            border-radius: 22px;
        }

        .contact-sidebar-box {
            padding: 22px;
            border-radius: 22px;
        }

        .sidebar-contact-title {
            font-size: 24px;
        }

        .map-box iframe {
            height: 300px;
        }

        .office-time-item {
            flex-direction: column;
            gap: 8px;
        }

        .office-time-item span {
            text-align: left;
        }
    }
</style>


<!-- =========================================
     FAQ SECTION START
========================================= -->

<section class="faq-section">

    <div class="container">

        <!-- SECTION TITLE -->
        <div class="faq-heading">

            <h2>
                अक्सर पूछे जाने वाले सवाल
            </h2>

            <p>
                कुछ सामान्य सवालों के जवाब यहाँ मिलेंगे
            </p>

        </div>

        <!-- FAQ WRAPPER -->
        <div class="faq-wrapper">

            <?php foreach ($faqs as $index => $faq): ?>

                <div class="faq-item <?php if ($index == 0) echo 'active-faq'; ?>">

                    <div class="faq-question">

                        <h3>

                            <?php echo $faq['question']; ?>

                        </h3>

                        <div class="faq-icon">

                            <i class="bi bi-chevron-down"></i>

                        </div>

                    </div>

                    <div class="faq-answer">

                        <p>

                            <?php echo $faq['answer']; ?>

                        </p>

                    </div>

                </div>

            <?php endforeach; ?>

        </div>

    </div>

</section>

<style>
    /* =========================================
       FAQ SECTION
    ========================================= */

    .faq-section {
        padding: 90px 0;
        background: #f3f4f6;
    }

    /* HEADING */

    .faq-heading {
        text-align: center;
        margin-bottom: 55px;
    }

    .faq-heading h2 {
        font-size: 58px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 14px;
    }

    .faq-heading p {
        font-size: 17px;
        color: #64748b;
    }

    /* WRAPPER */

    .faq-wrapper {
        max-width: 1100px;
        margin: auto;
    }

    /* FAQ ITEM */

    .faq-item {
        background: #fff;
        border-radius: 22px;
        margin-bottom: 18px;
        overflow: hidden;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
        transition: 0.3s;
    }

    .faq-item:hover {
        transform: translateY(-3px);
    }

    /* QUESTION */

    .faq-question {
        padding: 28px 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .faq-question h3 {
        font-size: 22px;
        font-weight: 700;
        color: #111827;
        margin: 0;
        line-height: 1.6;
    }

    /* ICON */

    .faq-icon {
        min-width: 42px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #fff1f5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #e11d48;
        font-size: 16px;
        transition: 0.3s;
    }

    .faq-icon i {
        transition: 0.3s;
    }

    /* ANSWER */

    .faq-answer {
        display: none;
        padding: 0 32px 30px;
    }

    .faq-answer p {
        font-size: 16px;
        line-height: 1.9;
        color: #64748b;
        margin: 0;
    }

    /* ACTIVE */

    .active-faq .faq-answer {
        display: block;
    }

    .active-faq .faq-icon {
        background: #e11d48;
        color: #fff;
    }

    .active-faq .faq-icon i {
        transform: rotate(180deg);
    }

    /* =========================================
       RESPONSIVE
    ========================================= */

    @media(max-width:991px) {

        .faq-heading h2 {
            font-size: 46px;
        }

        .faq-question h3 {
            font-size: 20px;
        }
    }

    @media(max-width:768px) {

        .faq-section {
            padding: 65px 0;
        }

        .faq-heading {
            margin-bottom: 40px;
        }

        .faq-heading h2 {
            font-size: 36px;
        }

        .faq-heading p {
            font-size: 15px;
        }

        .faq-question {
            padding: 22px;
            gap: 20px;
        }

        .faq-question h3 {
            font-size: 17px;
            line-height: 1.7;
        }

        .faq-answer {
            padding: 0 22px 22px;
        }

        .faq-answer p {
            font-size: 15px;
            line-height: 1.9;
        }

        .faq-icon {
            width: 38px;
            height: 38px;
            min-width: 38px;
            font-size: 14px;
        }
    }
</style>

<script>
    // FAQ TOGGLE

    const faqItems = document.querySelectorAll('.faq-item');

    faqItems.forEach(item => {

        const question = item.querySelector('.faq-question');

        question.addEventListener('click', () => {

            // CLOSE OTHER ITEMS
            faqItems.forEach(faq => {

                if (faq !== item) {

                    faq.classList.remove('active-faq');

                }

            });

            // TOGGLE CURRENT
            item.classList.toggle('active-faq');

        });

    });
</script>



<?php include 'includes/footer.php'; ?>