@extends('frontend.layout.app')

@section('content')
<div class="container content-page">
    <div class="support-page">
        <h1 class="page-title">Support & Help Center</h1>
        <p class="page-intro">We're here to help you get the most out of {{ optional($settings)->website_name ?? config('app.name') }} — virtual numbers, OTP verification, and Boost Socials (SMM).</p>

        <div class="page-body">
            <section>
                <h2>Get in Touch</h2>
                <p>Have a question or need assistance? We're here to help!</p>
                <div class="contact-box">
                    <p><strong>Email Support:</strong> <a href="mailto:support@website.com">support@website.com</a></p>
                    <p><strong>Response Time:</strong> We typically respond within 24-48 hours</p>
                    <p><strong>Business Hours:</strong> Monday - Friday, 9:00 AM - 6:00 PM (EST)</p>
                </div>
            </section>

            <section>
                <h2>Frequently Asked Questions</h2>

                <div class="faq-container">
                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>How do I get started?</h3>
                            <i class="ti ti-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>After signing up:</p>
                            <ol>
                                <li>Add balance to your account (pay-as-you-go or choose a plan)</li>
                                <li><strong>Virtual numbers:</strong> Select a country and get a virtual number; use it when an app or website asks for phone verification. Receive OTPs and SMS in your dashboard.</li>
                                <li><strong>Boost Socials (SMM):</strong> Go to Boost Socials, choose a category and service (e.g. followers, likes, views), enter your link and quantity, and place your order. Same wallet for both services.</li>
                            </ol>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>How do I order followers, likes, or views?</h3>
                            <i class="ti ti-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Go to <strong>Boost Socials</strong> in your dashboard. Choose a category (e.g. Instagram, TikTok), select a service (followers, likes, views, etc.), enter your profile or post link and quantity, then place your order. You can also use the Mass order tab to submit multiple lines (service_id|quantity|link). Payment is deducted from the same wallet you use for virtual numbers.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>Which countries can I get virtual numbers for?</h3>
                            <i class="ti ti-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>We offer virtual numbers in 50+ countries. Log in to your dashboard to see the full list of available countries and get a number in the region you need.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>How fast do I receive OTPs and SMS?</h3>
                            <i class="ti ti-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Messages are delivered to your dashboard within seconds. As soon as a service sends an SMS or OTP to your virtual number, it appears in your account.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>Can I cancel my subscription?</h3>
                            <i class="ti ti-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Yes, you can cancel your subscription at any time. To cancel, please contact our support team at <a href="mailto:support@website.com">support@website.com</a> and we'll help you cancel your subscription. Your access will continue until the end of your current billing period after cancellation.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">
                            <h3>Is there a free trial?</h3>
                            <i class="ti ti-chevron-down faq-icon"></i>
                        </div>
                        <div class="faq-answer">
                            <p>Yes! New users get a free trial period to explore all features. Check your dashboard for trial details.</p>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <h2>Resources</h2>
                <ul>
                    <li><a href="{{ route('home') }}">Home & Features</a></li>
                    <li><a href="{{ route('frontend.terms') }}">Terms of Service</a></li>
                    <li><a href="{{ route('frontend.privacy') }}">Privacy Policy</a></li>
                </ul>
            </section>

            <section>
                <h2>Report an Issue</h2>
                <p>If you encounter any bugs or technical issues, please contact us at <a href="mailto:support@website.com">support@website.com</a> with:</p>
                <ul>
                    <li>A detailed description of the issue</li>
                    <li>Steps to reproduce the problem</li>
                    <li>Screenshots (if applicable)</li>
                    <li>Your browser and device information</li>
                </ul>
            </section>
        </div>
    </div>
</div>
@endsection
