<?php $this->load->view('website/partials/header'); ?>

        <!--Start Breadcrumb Area-->
        <section class="breadcrumb-area">
            <div class="breadcrumb-area-bg" style="background-image: url(<?php echo base_url('assets/website/assets/images/backgrounds/breadcrumb-area-bg.jpg'); ?>);"></div>
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="inner-content">
                            <div class="title" data-aos="fade-right" data-aos-easing="linear" data-aos-duration="500">
                                <h2>Frequently Asked Questions</h2>
                            </div>
                            <div class="breadcrumb-menu" data-aos="fade-left" data-aos-easing="linear" data-aos-duration="500">
                                <ul>
                                    <li><a href="<?php echo site_url(); ?>">Home</a></li>
                                    <li class="active">FAQ</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--End Breadcrumb Area-->


        <!--Start FAQ Section-->
        <section style="padding: 80px 0;">
            <div class="container">
                <div class="row">
                    <div class="col-xl-4" data-aos="fade-right">
                        <p style="color: #667eea; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px;">FAQ</p>
                        <h2 style="font-size: 36px; font-weight: 700; margin-bottom: 20px;">Common Questions</h2>
                        <p style="color: #6c757d; font-size: 16px; line-height: 1.6; margin-bottom: 30px;">Find answers to the most frequently asked questions about our digital banking services. Can't find what you're looking for?</p>
                        <a href="<?php echo site_url('website/contact'); ?>" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 35px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: all 0.3s;">
                            Contact Support
                        </a>
                    </div>

                    <div class="col-xl-8" data-aos="fade-left">
                        <div class="accordion" id="faqAccordion">
                            <!-- FAQ 1 -->
                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleFaqAccordion('faq1')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">How do I log in to my online banking account?</h4>
                                    <svg id="faq1-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s; flex-shrink: 0; margin-left: 15px;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="faq1-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        To access your account, click the "Login" button on our website or open our mobile app. Enter your registered email address and password. For added security, you may be asked to verify your identity via OTP (One-Time Password) sent to your registered email or phone.
                                    </div>
                                </div>
                            </div>

                            <!-- FAQ 2 -->
                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleFaqAccordion('faq2')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">How secure is my money with <?php echo $app_name; ?>?</h4>
                                    <svg id="faq2-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s; flex-shrink: 0; margin-left: 15px;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="faq2-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        Your security is our top priority. We use 256-bit SSL encryption for all transactions, two-factor authentication (2FA) for account access, real-time fraud monitoring, and instant transaction alerts. Your deposits are also protected by FDIC insurance up to $250,000.
                                    </div>
                                </div>
                            </div>

                            <!-- FAQ 3 -->
                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleFaqAccordion('faq3')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">How do I transfer money to another account?</h4>
                                    <svg id="faq3-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s; flex-shrink: 0; margin-left: 15px;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="faq3-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        Simply log in to your account, navigate to "Transfers", select the source account, enter the recipient's account details or select from saved beneficiaries, enter the amount, and confirm with OTP verification. Internal transfers are instant, while external transfers may take 1-3 business days.
                                    </div>
                                </div>
                            </div>

                            <!-- FAQ 4 -->
                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleFaqAccordion('faq4')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">What bills can I pay through <?php echo $app_name; ?>?</h4>
                                    <svg id="faq4-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s; flex-shrink: 0; margin-left: 15px;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="faq4-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        You can pay a wide range of bills including electricity, water, internet, phone bills, TV subscriptions, mobile airtime and data, and many more. We partner with major service providers across the country to ensure convenient bill payments.
                                    </div>
                                </div>
                            </div>

                            <!-- FAQ 5 -->
                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleFaqAccordion('faq5')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">How do virtual cards work?</h4>
                                    <svg id="faq5-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s; flex-shrink: 0; margin-left: 15px;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="faq5-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        Virtual cards are digital debit/credit cards that you can create instantly for online purchases. Each card has its own number, expiry date, and CVV. You can set spending limits, freeze/unfreeze cards, and create multiple cards for different purposes - all from your dashboard.
                                    </div>
                                </div>
                            </div>

                            <!-- FAQ 6 -->
                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleFaqAccordion('faq6')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">Are there any hidden fees?</h4>
                                    <svg id="faq6-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s; flex-shrink: 0; margin-left: 15px;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="faq6-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        No, we believe in transparent pricing. All our fees are clearly displayed before you confirm any transaction. There are no hidden charges, no monthly maintenance fees for basic accounts, and free internal transfers between <?php echo $app_name; ?> accounts.
                                    </div>
                                </div>
                            </div>

                            <!-- FAQ 7 -->
                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleFaqAccordion('faq7')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">What should I do if I forget my password?</h4>
                                    <svg id="faq7-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s; flex-shrink: 0; margin-left: 15px;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="faq7-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        Click on "Forgot Password" on the login page, enter your registered email address, and we'll send you a secure link to reset your password. For security reasons, password reset links expire after 24 hours. If you're still having trouble, contact our 24/7 support team.
                                    </div>
                                </div>
                            </div>

                            <!-- FAQ 8 -->
                            <div style="background: white; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="padding: 20px 25px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleFaqAccordion('faq8')">
                                    <h4 style="font-size: 18px; font-weight: 600; margin: 0; color: #2d3748;">How do I report unauthorized transactions?</h4>
                                    <svg id="faq8-icon" width="24" height="24" fill="#667eea" viewBox="0 0 24 24" style="transition: transform 0.3s; flex-shrink: 0; margin-left: 15px;">
                                        <path d="M7 10l5 5 5-5z"/>
                                    </svg>
                                </div>
                                <div id="faq8-content" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
                                    <div style="padding: 0 25px 20px 25px; color: #6c757d; line-height: 1.6;">
                                        If you notice any unauthorized activity, immediately: 1) Freeze your cards from the dashboard, 2) Contact our 24/7 support at <?php echo $support_phone ?? '+1 (800) 123-4567'; ?>, 3) File a dispute through the app or website. We take fraud seriously and will investigate all reports promptly.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <script>
        // Open first accordion by default
        document.addEventListener('DOMContentLoaded', function() {
            toggleFaqAccordion('faq1');
        });

        function toggleFaqAccordion(id) {
            const content = document.getElementById(id + '-content');
            const icon = document.getElementById(id + '-icon');
            
            if (content.style.maxHeight && content.style.maxHeight !== '0px') {
                content.style.maxHeight = '0';
                icon.style.transform = 'rotate(0deg)';
            } else {
                // Close all other accordions
                const allContents = document.querySelectorAll('[id^="faq"][id$="-content"]');
                const allIcons = document.querySelectorAll('[id^="faq"][id$="-icon"]');
                allContents.forEach(c => c.style.maxHeight = '0');
                allIcons.forEach(i => i.style.transform = 'rotate(0deg)');
                
                // Open clicked accordion
                content.style.maxHeight = content.scrollHeight + 'px';
                icon.style.transform = 'rotate(180deg)';
            }
        }
        </script>
        <!--End FAQ Section-->


        <!--Start Slogan Content Box-->
        <section class="slogan-area">
            <div class="container">
                <div class="slogan-content-box">
                    <div class="slogan-content-box-bg"
                        style="background-image: url(<?php echo base_url('assets/website/assets/images/backgrounds/slogan-content-box-bg.jpg'); ?>);"></div>
                    <div class="inner-title">
                        <h2>Still Have Questions?</h2>
                        <p>Our support team is available 24/7 to help you with any questions or concerns.</p>
                    </div>
                    <div class="btn-box">
                        <a class="btn-one" href="<?php echo site_url('website/contact'); ?>">
                            <span class="txt">Contact Support</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!--End Slogan Content Box-->

<?php $this->load->view('website/partials/footer'); ?>
