@extends(getTemplate() . '.layouts.app')

@push('styles_top')
    <style>
        :root {
            --faq-primary: #ff6b00;
            --faq-primary-dark: #b94d01;
            --faq-secondary: #6c757d;
        }

        .accordion-button:not(.collapsed) {
            background-color: var(--faq-primary);
            ;
            color: white;
            font-weight: 500;
        }

        .category-nav .nav-link.active {
            background-color: var(--faq-primary);
            color: white;
            font-weight: bold;
        }

        .category-nav .nav-link {
            color: white;
        }

        .contact-info {
            background-color: var(--bs-accordion-btn-bg);
            padding: 20px;
            border-radius: 8px;
            margin-top: 30px;
        }

        .pricing-table {
            font-size: 0.9rem;
        }

        .list-circle {
            list-style-type: circle;
            padding-left: 20px;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 2rem;
            transition: color 0.3s ease;
            display: flex;
            justify-content: center;
            text-align: center;
        }

        .faq-section {
            margin: 6rem 0;
            scroll-margin-top: 100px;
        }

        .faq-section:first-of-type {
            margin-top: 0;
        }

        .bg-overlay {
            background: linear-gradient(135deg, var(--faq-primary) 0%, var(--faq-primary-dark) 100%);
            min-height: 300px;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .bg-overlay::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
            animation: rotate 30s linear infinite;
        }

        @media (max-width: 768px) {
            .bg-overlay::before {
                top: -25%;
                left: -25%;
                width: 150%;
                height: 100%;
            }
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>

    <style>
        .border-fade {
            border: 1px solid var(--faq-primary) !important;
            transition: border-color 0.3s ease-out;
        }

        .border-fade.fade-out {
            border-color: transparent !important;
        }
    </style>
@endpush

@section('content')
    <section class="bg-overlay position-relative mb-5">
        <div class="container text-center text-white position-relative">
            <h1 class="display-4 fw-bold mb-4">Frequently Asked Questions</h1>
        </div>
    </section>

    <!-- Quick Navigation -->
    <div class="container mb-5">
        <nav class="category-nav">
            <ul class="nav nav-pills justify-content-center gap-2">
                <li class="nav-item">
                    <a class="nav-link active" href="#general">General</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#pricing">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#courses">Courses</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#technical">Technical</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#instructor">Instructor</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#implementation">Implementation</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#compliance">Compliance</a>
                </li>
            </ul>
        </nav>
    </div>
    <!-- FAQ Content -->
    <div class="container mb-5">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <!-- General Questions -->
                <div class="faq-section" id="general">
                    <h2 class="section-title">General Questions</h2>
                    <div class="accordion" id="accordionGeneral">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#general1">
                                    What is The Orange Card?
                                </button>
                            </h2>
                            <div id="general1" class="accordion-collapse collapse show" data-bs-parent="#accordionGeneral">
                                <div class="accordion-body">
                                    The Orange Card is Australia's premier Learning Management System (LMS) specializing in
                                    compliance training and professional development. We transform regulatory requirements
                                    into opportunities for growth and cultural development, serving businesses across
                                    Australia.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#general2">
                                    Who is The Orange Card for?
                                </button>
                            </h2>
                            <div id="general2" class="accordion-collapse collapse" data-bs-parent="#accordionGeneral">
                                <div class="accordion-body">
                                    <ul class="list-unstyled">
                                        <li>• Australian businesses of all sizes</li>
                                        <li>• Organizations requiring compliance training</li>
                                        <li>• Individual learners seeking professional development</li>
                                        <li>• Training instructors and content creators</li>
                                        <li>• HR managers and training coordinators</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#general3">
                                    Why choose The Orange Card?
                                </button>
                            </h2>
                            <div id="general3" class="accordion-collapse collapse" data-bs-parent="#accordionGeneral">
                                <div class="accordion-body">
                                    <ul class="list-unstyled">
                                        <li>• Australian compliance expertise</li>
                                        <li>• User-centric design</li>
                                        <li>• Cutting-edge technology with AI-driven analytics</li>
                                        <li>• Comprehensive support</li>
                                        <li>• Scalable solutions</li>
                                        <li>• SCORM 1.2 compliance</li>
                                        <li>• 50+ years of combined education experience</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pricing Section -->
                <div class="faq-section" id="pricing">
                    <h2 class="section-title">Pricing & Plans</h2>
                    <div class="accordion" id="accordionPricing">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#pricing1">
                                    What pricing options are available?
                                </button>
                            </h2>
                            <div id="pricing1" class="accordion-collapse collapse" data-bs-parent="#accordionPricing">
                                <div class="accordion-body">
                                    <p class="text-muted">All prices exclude GST</p>

                                    <h5>LAUNCH Package (Small Business):</h5>
                                    <ul class="list-unstyled mb-3">
                                        <li>• Up to 19 employees</li>
                                        <li>• $285/month</li>
                                        <li>• $15 per person</li>
                                        <li>• Monthly billing</li>
                                        <li>• No volume discount</li>
                                    </ul>

                                    <h5>SCALE Package (Medium Business):</h5>
                                    <ul class="list-unstyled mb-3">
                                        <li>• 20-199 employees</li>
                                        <li>• From $2,898.82/month</li>
                                        <li>• $14.57 per person</li>
                                        <li>• 3% volume discount</li>
                                        <li>• Monthly billing</li>
                                    </ul>

                                    <h5>TRANSFORM Package (Enterprise):</h5>
                                    <ul class="list-unstyled">
                                        <li>• 200+ employees</li>
                                        <li>• Custom pricing</li>
                                        <li>• Volume discounts up to 40%</li>
                                        <li>• Flexible billing options</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#pricing2">
                                    What features are included in each plan?
                                </button>
                            </h2>
                            <div id="pricing2" class="accordion-collapse collapse" data-bs-parent="#accordionPricing">
                                <div class="accordion-body">
                                    <h5>LAUNCH Package includes:</h5>
                                    <ul class="list-unstyled mb-3">
                                        <li>• Basic compliance courses</li>
                                        <li>• Automated reminders</li>
                                        <li>• Simple reporting</li>
                                        <li>• Essential support</li>
                                        <li>• Standard course templates</li>
                                        <li>• Basic analytics</li>
                                    </ul>

                                    <h5>SCALE Package includes:</h5>
                                    <ul class="list-unstyled mb-3">
                                        <li>• Advanced compliance courses</li>
                                        <li>• Custom course creation</li>
                                        <li>• Advanced analytics</li>
                                        <li>• Multi-department management</li>
                                        <li>• Priority support</li>
                                        <li>• API access</li>
                                        <li>• Role-based assignments</li>
                                    </ul>

                                    <h5>TRANSFORM Package includes:</h5>
                                    <ul class="list-unstyled">
                                        <li>• Full platform customization</li>
                                        <li>• White-label options</li>
                                        <li>• Global compliance</li>
                                        <li>• Enterprise integration</li>
                                        <li>• Dedicated support team</li>
                                        <li>• Custom development</li>
                                        <li>• Unlimited users</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Courses Section -->
                <div class="faq-section" id="courses">
                    <h2 class="section-title">Courses & Content</h2>
                    <div class="accordion" id="accordionCourses">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#courses1">
                                    What courses do you currently offer?
                                </button>
                            </h2>
                            <div id="courses1" class="accordion-collapse collapse" data-bs-parent="#accordionCourses">
                                <div class="accordion-body">
                                    <h5>Current Compliance Modules:</h5>
                                    <ul class="list-unstyled mb-3">
                                        <li>• RESPECT@WORK Empowering Respect</li>
                                        <li>• RESPECT@WORK Positive Duty</li>
                                        <li>• Closing Loopholes: Right to Disconnect</li>
                                        <li>• Next Steps: AOD (Alcohol and Other Drugs)</li>
                                    </ul>

                                    <h5>Upcoming Modules:</h5>
                                    <ul class="list-unstyled">
                                        <li>• Cybersecurity Made Simple</li>
                                        <li>• Mastering Email Etiquette Fundamentals</li>
                                        <li>• Disability Awareness</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#courses2">
                                    Can I customize courses for my organization?
                                </button>
                            </h2>
                            <div id="courses2" class="accordion-collapse collapse" data-bs-parent="#accordionCourses">
                                <div class="accordion-body">
                                    <p>Yes, we offer customized learning paths and interactive content tailored to your
                                        organization's specific needs. Our platform allows for:</p>
                                    <ul class="list-unstyled">
                                        <li>• Custom course creation</li>
                                        <li>• Branded content</li>
                                        <li>• Industry-specific modifications</li>
                                        <li>• Role-based learning paths</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Technical Section -->
                <div class="faq-section" id="technical">
                    <h2 class="section-title">Technical & Support</h2>
                    <div class="accordion" id="accordionTechnical">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#technical1">
                                    What technical support do you provide?
                                </button>
                            </h2>
                            <div id="technical1" class="accordion-collapse collapse"
                                data-bs-parent="#accordionTechnical">
                                <div class="accordion-body">
                                    <ul class="list-unstyled">
                                        <li>• 24/7 Technical Operations</li>
                                        <li>• 12-hour Standard Response Time</li>
                                        <li>• Australian-based support team</li>
                                        <li>• Multi-channel assistance</li>
                                        <li>• Personalized guidance</li>
                                        <li>• Advanced cybersecurity</li>
                                        <li>• Custom software development</li>
                                        <li>• Business process automation</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#technical2">
                                    Is the platform mobile-friendly?
                                </button>
                            </h2>
                            <div id="technical2" class="accordion-collapse collapse"
                                data-bs-parent="#accordionTechnical">
                                <div class="accordion-body">
                                    Yes, our LMS offers full mobile optimization for learning on-the-go, allowing users to
                                    access training content from any device.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#technical3">
                                    How secure is the platform?
                                </button>
                            </h2>
                            <div id="technical3" class="accordion-collapse collapse"
                                data-bs-parent="#accordionTechnical">
                                <div class="accordion-body">
                                    <p>We maintain the highest standards of data security through:</p>
                                    <ul class="list-unstyled">
                                        <li>• Partnership with Logismos for advanced cybersecurity</li>
                                        <li>• Regular security updates</li>
                                        <li>• Secure data storage</li>
                                        <li>• Encrypted communications</li>
                                        <li>• Regular system monitoring</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Instructor Section -->
                <div class="faq-section" id="instructor">
                    <h2 class="section-title">Instructor Program</h2>
                    <div class="accordion" id="accordionInstructor">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#instructor1">
                                    How does the instructor marketplace work?
                                </button>
                            </h2>
                            <div id="instructor1" class="accordion-collapse collapse"
                                data-bs-parent="#accordionInstructor">
                                <div class="accordion-body">
                                    <h5>Revenue Structure:</h5>
                                    <ul class="list-unstyled mb-3">
                                        <li>• 70/30 revenue sharing model</li>
                                        <li>• Monthly payments</li>
                                        <li>• Performance tracking</li>
                                        <li>• Analytics dashboard</li>
                                    </ul>

                                    <h5>Support Provided:</h5>
                                    <ul class="list-unstyled">
                                        <li>• Course creation tools</li>
                                        <li>• Marketing support</li>
                                        <li>• Technical assistance</li>
                                        <li>• Content guidelines</li>
                                        <li>• Community features</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#instructor2">
                                    How do I become an instructor?
                                </button>
                            </h2>
                            <div id="instructor2" class="accordion-collapse collapse"
                                data-bs-parent="#accordionInstructor">
                                <div class="accordion-body">
                                    <p>Instructors can join our platform by:</p>
                                    <ul class="list-unstyled">
                                        <li>• Applying through our website</li>
                                        <li>• Meeting our quality standards</li>
                                        <li>• Creating approved content</li>
                                        <li>• Following our content guidelines</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Implementation Section -->
                <div class="faq-section" id="implementation">
                    <h2 class="section-title">Implementation & Integration</h2>
                    <div class="accordion" id="accordionImplementation">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#implementation1">
                                    How does the implementation process work?
                                </button>
                            </h2>
                            <div id="implementation1" class="accordion-collapse collapse"
                                data-bs-parent="#accordionImplementation">
                                <div class="accordion-body">
                                    <p>We provide:</p>
                                    <ul class="list-unstyled">
                                        <li>• Dedicated onboarding support</li>
                                        <li>• System setup assistance</li>
                                        <li>• User training</li>
                                        <li>• Custom integration support</li>
                                        <li>• Technical documentation</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#implementation2">
                                    Does the platform integrate with other systems?
                                </button>
                            </h2>
                            <div id="implementation2" class="accordion-collapse collapse"
                                data-bs-parent="#accordionImplementation">
                                <div class="accordion-body">
                                    <p>Yes, we offer:</p>
                                    <ul class="list-unstyled">
                                        <li>• API access (higher tiers)</li>
                                        <li>• Custom integration capabilities</li>
                                        <li>• SCORM 1.2 compliance</li>
                                        <li>• Third-party software compatibility</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Compliance Section -->
                <div class="faq-section" id="compliance">
                    <h2 class="section-title">Compliance & Reporting</h2>
                    <div class="accordion" id="accordionCompliance">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#compliance1">
                                    What reporting features are available?
                                </button>
                            </h2>
                            <div id="compliance1" class="accordion-collapse collapse"
                                data-bs-parent="#accordionCompliance">
                                <div class="accordion-body">
                                    <ul class="list-unstyled">
                                        <li>• Automated compliance reporting</li>
                                        <li>• Real-time tracking</li>
                                        <li>• Progress monitoring</li>
                                        <li>• Performance metrics</li>
                                        <li>• Custom report generation</li>
                                        <li>• Department-specific reporting</li>
                                        <li>• Analytics dashboard</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#compliance2">
                                    How are certificates managed?
                                </button>
                            </h2>
                            <div id="compliance2" class="accordion-collapse collapse"
                                data-bs-parent="#accordionCompliance">
                                <div class="accordion-body">
                                    <ul class="list-unstyled">
                                        <li>• Digital certificate issuance</li>
                                        <li>• Automated tracking</li>
                                        <li>• Compliance monitoring</li>
                                        <li>• Record keeping</li>
                                        <li>• Easy access and sharing</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="contact-info">
                    <h2 class="section-title">Contact Information</h2>
                    <p><strong>Phone:</strong> +61 (08) 6256 5540</p>
                    <p><strong>Email:</strong> <a href="mailto:sales@theorangecard.com.au">sales@theorangecard.com.au</a>
                    </p>
                    <p><strong>Address:</strong> LAKESIDE CORPORATE Suite 10/24 Parkland Road OSBORNE PARK WA 6017</p>
                    <p><strong>Website:</strong> <a href="https://www.theorangecard.com.au"
                            target="_blank">www.theorangecard.com.au</a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Section -->
    <div class="bg-light py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6 text-center">
                    <h2 class="section-title">Still have questions?</h2>
                    <p class="mb-4">Contact our support team for assistance</p>
                    <a href="mailto:sales@theorangecard.com.au" class="btn btn-primary">Contact Us</a>
                    <p class="mt-3">
                        <a href="https://www.theorangecard.com.au" class="btn btn-outline-primary">Request a Demo</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts_bottom')
<script>
    function smoothScroll(targetY, duration) {
        const startY = window.scrollY || window.pageYOffset;
        const difference = targetY - startY;
        const startTime = performance.now();

        function step() {
            const progress = (performance.now() - startTime) / duration;

            if (progress < 1) {
                // Using a simpler linear animation for maximum compatibility
                window.scrollTo(0, startY + (difference * progress));
                window.requestAnimationFrame(step);
            } else {
                window.scrollTo(0, targetY);
            }
        }

        window.requestAnimationFrame(step);
    }

    document.querySelectorAll('.category-nav a').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();

            // Remove active class from all links
            document.querySelectorAll('.category-nav .nav-link').forEach(link => {
                link.classList.remove('active'); 
            });

            // Add active class to clicked link
            this.classList.add('active');

            // Get target section
            const targetSection = document.querySelector(this.getAttribute('href'));
            
            // Calculate target position
            const targetPosition = targetSection.getBoundingClientRect().top + window.pageYOffset;

            // Add visual feedback classes
            document.querySelectorAll('.faq-section').forEach(title => {
                title.classList.remove('border-fade');
                title.classList.remove('rounded');
                title.classList.remove('fade-out');
            });
            
            targetSection.classList.add('border-fade');
            targetSection.classList.add('rounded');

            // Perform scroll with fallbacks
            try {
                if ('scrollBehavior' in document.documentElement.style) {
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                } else {
                    // Fallback for older browsers/systems
                    smoothScroll(targetPosition, 500); // 500ms duration
                }
            } catch (e) {
                // Ultimate fallback if everything else fails
                window.scrollTo(0, targetPosition);
            }

            // Fade out border after 1 second
            setTimeout(() => {
                targetSection.classList.add('fade-out');
                
                // Clean up classes after transition completes
                setTimeout(() => {
                    targetSection.classList.remove('border-fade');
                    targetSection.classList.remove('rounded');
                    targetSection.classList.remove('fade-out');
                }, 300);
            }, 1000);
        });
    });
</script>
@endpush