@extends('layouts.app')

@section('title', 'index')

@section('content')

<style>

.help-header{
    position:relative;
    background:linear-gradient(135deg,#0d2c67,#1f4ca8);
    border-radius:15px;
    padding:25px;
    margin:30px 0;
    text-align:center;
}

.page-title{
    color:#000;
    font-size:36px;
    font-weight:700;
    margin:0;
}

.help-image{
    text-align:center;
    margin-bottom:25px;
}

.help-image img{
    width:100%;
    max-width:260px;
}

.main-heading{
    text-align:center;
    font-size:34px;
    font-weight:700;
    margin-bottom:30px;
}

/* ACCORDION */

.accordion{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.accordion-item{
    border:none;
}

.accordion-item:not(:last-child){
    border-bottom:1px solid #ececec;
}

.accordion-button{
    background:#fff;
    font-size:18px;
    font-weight:600;
    padding:18px 20px;
    box-shadow:none !important;
    transition:.3s;
}

.accordion-button:hover{
    background:#f7faff;
}

.accordion-button:not(.collapsed){
    background:#fff;
    color:#000;
}

.accordion-body{
    background:#fafafa;
    padding:20px;
    line-height:1.8;
}

.icon-circle{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#dff8e8;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:15px;
    color:#0d2c67;
    flex-shrink:0;
}

/* CONTACT SECTION */

.contact-box{
    margin-top:40px;
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.contact-title{
    font-size:28px;
    font-weight:700;
    /*color:#0d2c67;*/
    margin-bottom:20px;
}

.contact-icons{
    display:flex;
    gap:15px;
}

.contact-icons a{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#dff8e8;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#0d2c67;
    font-size:22px;
    transition:.3s;
}

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

/* WHATSAPP FLOAT */

.whatsapp-btn{
    position:fixed;
    right:20px;
    bottom:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:28px;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
    z-index:999;
}

/* MOBILE */

@media(max-width:768px){
    
    .help-image img {
        max-width: 170px;
    }

    .help-header{
        padding:20px 15px;
    }

    .page-title{
        font-size:28px;
    }

    .back-btn{
        position:static;
        transform:none;
        margin-bottom:15px;
        display:inline-flex;
        padding: 0px 0px;
        font-weight: bold;
    }

    .main-heading{
        font-size:24px;
    }

    .accordion-button{
        font-size:16px;
        padding:15px;
    }

    .contact-title{
        font-size:22px;
    }

    .icon-circle{
        width:36px;
        height:36px;
        margin-right:10px;
    }
}

</style>

<div class="container py-3">
    
    <div class="page-title d-flex align-items-center gap-2">
        <a href="javascript:void(0);" onclick="goBack()" class="text-dark">
            <i class="bi bi-arrow-left"></i>
        </a>
        <h1 class="mb-0">Help Center</h1>
    </div>
    
    <!-- <div class="help-header mt-3 d-block d-md-none">-->
    <!--    <h1 class="page-title">-->
    <!--        Help Center-->
    <!--    </h1>-->
    <!--</div>-->

    <!-- Header -->

    <!--<div class="help-header d-none d-md-block">-->

    <!--    <a href="javascript:void(0);" onclick="goBack()" class="back-btn">-->
    <!--        <i class="bi bi-arrow-left"></i>-->
    <!--        Back-->
    <!--    </a>-->

    <!--    <h1 class="page-title">-->
    <!--        Help Center-->
    <!--    </h1>-->

    <!--</div>-->

    <!-- Image -->

    <div class="help-image mt-3">
        <img src="https://cdn-icons-png.flaticon.com/512/4140/4140048.png" alt="Help Center">
    </div>

    <!-- Heading -->

    <h2 class="main-heading">
        Hello, how can we help you?
    </h2>

    <!-- Accordion -->

    <div class="accordion" id="helpAccordion">

        <!-- FAQ -->

        <div class="accordion-item">
            <h2 class="accordion-header">

                <button class="accordion-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#faqContent">

                    <span class="icon-circle">
                        <i class="bi bi-patch-question"></i>
                    </span>

                    FAQs

                </button>

            </h2>

            <div id="faqContent"
                 class="accordion-collapse collapse"
                 data-bs-parent="#helpAccordion">

                <div class="accordion-body">

                    <strong>Q:</strong> How do I request a quote?<br>
                    <strong>A:</strong> Click the Request Quote button and fill out the form.

                    <hr>

                    <strong>Q:</strong> How do I contact support?<br>
                    <strong>A:</strong> Use the contact options below.

                </div>

            </div>
        </div>

        <!-- Contact -->

        <div class="accordion-item">
            <h2 class="accordion-header">

                <button class="accordion-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#contactContent">

                    <span class="icon-circle">
                        <i class="bi bi-telephone"></i>
                    </span>

                    Contact Us

                </button>

            </h2>

            <div id="contactContent"
                 class="accordion-collapse collapse"
                 data-bs-parent="#helpAccordion">

                <div class="accordion-body">

                    Phone: +91 90008 33744<br>
                    Email: info@iqpro.com

                </div>

            </div>
        </div>

        <!-- Terms -->

        <div class="accordion-item">
            <h2 class="accordion-header">

                <button class="accordion-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#termsContent">

                    <span class="icon-circle">
                        <i class="bi bi-file-earmark-text"></i>
                    </span>

                    Terms & Conditions

                </button>

            </h2>

            <div id="termsContent"
                 class="accordion-collapse collapse"
                 data-bs-parent="#helpAccordion">

                <div class="accordion-body">

                    Our Terms & Conditions content goes here.

                </div>

            </div>
        </div>

        <!-- Privacy -->

        <div class="accordion-item">
            <h2 class="accordion-header">

                <button class="accordion-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#privacyContent">

                    <span class="icon-circle">
                        <i class="bi bi-shield-check"></i>
                    </span>

                    Privacy Policy

                </button>

            </h2>

            <div id="privacyContent"
                 class="accordion-collapse collapse"
                 data-bs-parent="#helpAccordion">

                <div class="accordion-body">

                    Our Privacy Policy content goes here.

                </div>

            </div>
        </div>

    </div>

    <!-- Contact Box -->

    <div class="contact-box">

        <h3 class="contact-title">
            Get in touch with us right now!
        </h3>

        <div class="contact-icons">

            <a href="tel:+919000833744">
                <i class="bi bi-telephone"></i>
            </a>

            <a href="mailto:info@iqpro.com">
                <i class="bi bi-envelope"></i>
            </a>

            <a href="https://wa.me/919000833744" target="_blank">
                <i class="bi bi-whatsapp"></i>
            </a>

        </div>

    </div>

</div>


<script>
function goBack() {
    window.history.back();
}
</script>



@endsection
