@extends('layouts.ui')

@section('content')
        <!--Page Header Start-->
        <section class="page-header">
            <div class="page-header-bg" style="background-image: url(assets/images/backgrounds/page-header-bg.jpg)">
            </div>
            <div class="container">
                <div class="page-header__inner">
                    <h2>How It Works</h2>
                    <ul class="thm-breadcrumb list-unstyled">
                        <li><a href="{{ url('/') }}">Home</a></li>
                        <li><span>/</span></li>
                        <li>How It Works</li>
                    </ul>
                </div>
            </div>
        </section>
        <!--Page Header End-->

        <!--How It Works Intro Start-->
        <section class="about-four">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-5">
                        <div class="about-four__left">
                            <div class="about-four__img">
                                <img src="assets/images/resources/about-four-img-1.jpg" alt="How MindBridge Works">
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-7">
                        <div class="about-four__right">
                            <div class="section-title text-left">
                                <span class="section-title__tagline">system architecture</span>
                                <h2 class="section-title__title">A Unified Digital Pathway for <span>Mental Health Care</span></h2>
                            </div>
                            <p class="about-four__text">
                                MindBridge operates as an integrated triage and consultation platform. It bridges the gap between self-guided mental health awareness and licensed clinical care in Cameroon through a four-stage digital pipeline: anonymous assessment, risk-stratified feedback, verified consultations, and localized facility routing.
                            </p>
                            <ul class="list-unstyled about-four__points">
                                <li>
                                    <div class="icon">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="text">
                                        <p><strong>Zero-Barrier Access:</strong> Complete validated screening tools without mandatory account registration.</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="text">
                                        <p><strong>Clinical Standards:</strong> Integrates international psychometric frameworks (PHQ-9, GAD-7, AUDIT, WHO-5).</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="text">
                                        <p><strong>Automated Safety Protocol:</strong> Instantly detects acute distress indicators and overrides standard workflows with crisis intervention routing.</p>
                                    </div>
                                </li>
                            </ul>
                            <div class="about-four__btn-box">
                                <a href="{{ url('/assessments') }}" class="thm-btn about-four__btn">Start Free Screening</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--How It Works Intro End-->

        <!--4 Steps Workflow Start-->
        <section class="services-four services-four--page">
            <div class="container">
                <div class="section-title section-title--home-four text-center">
                    <span class="section-title__tagline"><span class="section-title__tagline__icon"><i class="delogis-icons-two-brain"></i></span>Operational Pipeline</span>
                    <h2 class="section-title__title">The 4-Step User Journey</h2>
                </div>
                <div class="row gutter-y-30">
                    <!-- Step 1 -->
                    <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="00ms">
                        <div class="services-four__single">
                            <div class="services-four__single__content">
                                <div class="services-four__single__shape"></div>
                                <div class="services-four__single__icon">
                                    <span class="delogis-icons-two-brain"></span>
                                </div>
                                <h3 class="services-four__single__title"><a href="{{ url('/assessments') }}">1. Self-Screening</a></h3>
                                <p class="services-four__single__text">Users select standardized evaluation modules for depression, anxiety, or substance use, completed in under 5 minutes.</p>
                                <a href="{{ url('/assessments') }}" class="services-four__single__rm">Explore Assessments</a>
                            </div>
                            <div class="services-four__single__bottom">
                                <div class="services-four__single__img">
                                    <img src="assets/images/services/services-4-1.jpg" alt="Self-Screening Step">
                                </div>
                                <a href="{{ url('/assessments') }}" class="services-four__single__btn"><i class="delogis-icons-two-right-arrow"></i></a>
                            </div>
                        </div>
                    </div>

                    <!-- Step 2 -->
                    <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="100ms">
                        <div class="services-four__single">
                            <div class="services-four__single__content">
                                <div class="services-four__single__shape"></div>
                                <div class="services-four__single__icon">
                                    <span class="delogis-icons-two-heart"></span>
                                </div>
                                <h3 class="services-four__single__title"><a href="{{ url('/crisis-support') }}">2. Triage & Score</a></h3>
                                <p class="services-four__single__text">Algorithms calculate score severities, delivering immediate diagnostic context alongside actionable wellness recommendations.</p>
                                <a href="{{ url('/crisis-support') }}" class="services-four__single__rm">View Severity Levels</a>
                            </div>
                            <div class="services-four__single__bottom">
                                <div class="services-four__single__img">
                                    <img src="assets/images/services/services-4-2.jpg" alt="Triage and Scoring Step">
                                </div>
                                <a href="{{ url('/crisis-support') }}" class="services-four__single__btn"><i class="delogis-icons-two-right-arrow"></i></a>
                            </div>
                        </div>
                    </div>

                    <!-- Step 3 -->
                    <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="200ms">
                        <div class="services-four__single">
                            <div class="services-four__single__content">
                                <div class="services-four__single__shape"></div>
                                <div class="services-four__single__icon">
                                    <span class="icon-meeting"></span>
                                </div>
                                <h3 class="services-four__single__title"><a href="{{ url('/specialists') }}">3. Consultations</a></h3>
                                <p class="services-four__single__text">Clients choose verified psychologists or psychiatrists for scheduled appointments via chat, audio, or video.</p>
                                <a href="{{ url('/specialists') }}" class="services-four__single__rm">Find a Practitioner</a>
                            </div>
                            <div class="services-four__single__bottom">
                                <div class="services-four__single__img">
                                    <img src="assets/images/services/services-4-3.jpg" alt="Consultations Step">
                                </div>
                                <a href="{{ url('/specialists') }}" class="services-four__single__btn"><i class="delogis-icons-two-right-arrow"></i></a>
                            </div>
                        </div>
                    </div>

                    <!-- Step 4 -->
                    <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="300ms">
                        <div class="services-four__single">
                            <div class="services-four__single__content">
                                <div class="services-four__single__shape"></div>
                                <div class="services-four__single__icon">
                                    <span class="delogis-icons-two-self-confidence"></span>
                                </div>
                                <h3 class="services-four__single__title"><a href="{{ url('/facilities') }}">4. Care Network</a></h3>
                                <p class="services-four__single__text">For specialized or emergency care, the system maps users directly to physical clinics and hospital psychiatric units across Cameroon.</p>
                                <a href="{{ url('/facilities') }}" class="services-four__single__rm">View Facility Map</a>
                            </div>
                            <div class="services-four__single__bottom">
                                <div class="services-four__single__img">
                                    <img src="assets/images/services/services-4-4.jpg" alt="Care Network Step">
                                </div>
                                <a href="{{ url('/facilities') }}" class="services-four__single__btn"><i class="delogis-icons-two-right-arrow"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--4 Steps Workflow End-->

        <!--Assessment Matrix Table Section Start-->
        <section class="about-four bg-light py-5">
            <div class="container">
                <div class="section-title text-center mb-5">
                    <span class="section-title__tagline">Objective Framework</span>
                    <h2 class="section-title__title">Assessment Protocols & System Actions</h2>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered align-middle bg-white shadow-sm">
                        <thead class="table-dark">
                            <tr>
                                <th scope="col" style="width: 20%;">Instrument</th>
                                <th scope="col" style="width: 25%;">Primary Domain</th>
                                <th scope="col" style="width: 25%;">Score Ranges</th>
                                <th scope="col" style="width: 30%;">Automated Platform Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>PHQ-9</strong></td>
                                <td>Depression Severity</td>
                                <td>0–4 (Minimal), 5–14 (Mild/Mod), 15–27 (Severe)</td>
                                <td>Displays psychoeducation; prompts specialist booking for scores $\ge$10.</td>
                            </tr>
                            <tr>
                                <td><strong>GAD-7</strong></td>
                                <td>General Anxiety Disorder</td>
                                <td>0–4 (Minimal), 5–9 (Mild), 10–21 (Mod/Severe)</td>
                                <td>Provides coping toolkits; flags for therapy intake for scores $\ge$10.</td>
                            </tr>
                            <tr>
                                <td><strong>AUDIT / DAST-10</strong></td>
                                <td>Substance & Alcohol Use</td>
                                <td>Binary & Categorical Risk Tiers</td>
                                <td>Routes to confidential addiction recovery specialists and support groups.</td>
                            </tr>
                            <tr class="table-warning">
                                <td><strong>Safety Override</strong></td>
                                <td>Suicidal Ideation / Acute Harm</td>
                                <td>Item 9 Positive Response (PHQ-9)</td>
                                <td><strong>Immediate Crisis Alert:</strong> Displays hotlines, emergency contacts, and local facility maps.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
        <!--Assessment Matrix Table Section End-->

        <!--Technical Safeguards Grid Start-->
        <section class="why-choose-one py-5">
            <div class="container">
                <div class="row">
                    <div class="col-xl-4">
                        <div class="why-choose-one__left">
                            <div class="section-title text-left">
                                <span class="section-title__tagline">Technical Architecture</span>
                                <h2 class="section-title__title">Data Privacy & Platform Security</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-8">
                        <div class="why-choose-one__right">
                            <ul class="why-choose-one__list list-unstyled">
                                <li>
                                    <div class="why-choose-one__single">
                                        <div class="icon">
                                            <span class="icon-online-business"></span>
                                        </div>
                                        <div class="title">
                                            <h3><a href="#">End-to-End Encryption</a></h3>
                                            <p class="mt-2 text-muted" style="font-size: 0.85rem;">All consultation messages, audio streams, and clinical records are protected via SSL/TLS encryption protocols.</p>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="icon-box">
                                        <div class="why-choose-one__single">
                                            <div class="icon">
                                                <span class="icon-rating"></span>
                                            </div>
                                            <div class="title">
                                                <h3><a href="#">Bilingual Engine</a></h3>
                                                <p class="mt-2 text-muted" style="font-size: 0.85rem;">Seamless switching between English and French across all interactive tools, UI forms, and resource repositories.</p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="why-choose-one__single">
                                        <div class="icon">
                                            <span class="icon-psychologist"></span>
                                        </div>
                                        <div class="title">
                                            <h3><a href="#">Practitioner Verification</a></h3>
                                            <p class="mt-2 text-muted" style="font-size: 0.85rem;">Multi-step identity and credential auditing before granting specialist access to patient consultation queues.</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--Technical Safeguards Grid End-->

        <!--CTA Callout Start-->
        <section class="cta-two">
            <div class="container">
                <div class="cta-two__inner">
                    <div class="cta-two__img">
                        <img src="assets/images/resources/cta-two-img.jpg" alt="Crisis Support Action">
                        <div class="cta-two__icon">
                            <span class="icon-psychologist-1"></span>
                        </div>
                    </div>
                    <div class="cta-two__text">
                        <p>In Need of Immediate Assistance or Medical Intervention?
                            <br> Access Urgent Helplines & Accredited Care Facilities</p>
                    </div>
                    <div class="cta-two__btn-box">
                        <a href="{{ url('/facilities') }}" class="cta-two__btn thm-btn">Emergency Contacts Directory</a>
                    </div>
                </div>
            </div>
        </section>
        <!--CTA Callout End-->

        <!--FAQ Accordion Start-->
        <section class="faq-one">
            <div class="faq-one__bg" style="background-image: url(assets/images/backgrounds/faq-one-bg.png);"></div>
            <div class="container">
                <div class="row">
                    <div class="col-xl-6">
                        <div class="faq-one__left">
                            <div class="section-title text-left">
                                <span class="section-title__tagline">Operational Protocols</span>
                                <h2 class="section-title__title">Frequently Asked Questions About System Operations</h2>
                            </div>
                            <div class="faq-one__img-and-points">
                                <div class="faq-one__img">
                                    <img src="assets/images/resources/faq-one-img.jpg" alt="System Operations">
                                </div>
                                <ul class="faq-one__points list-unstyled">
                                    <li>
                                        <div class="icon">
                                            <span class="icon-right-arrow"></span>
                                        </div>
                                        <div class="content">
                                            <h3>Non-Diagnostic Boundary</h3>
                                            <p>Screening tests identify symptom severity tiers but do not construct official psychiatric diagnoses without a practitioner consultation.</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icon">
                                            <span class="icon-right-arrow"></span>
                                        </div>
                                        <div class="content">
                                            <h3>Bandwidth Adaptation</h3>
                                            <p>The web platform is optimized for low-bandwidth connections across urban and suburban environments in Cameroon.</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="faq-one__right">
                            <div class="accrodion-grp" data-grp-name="faq-one-accrodion">
                                <div class="accrodion active">
                                    <div class="accrodion-title">
                                        <h4>How does the system ensure evaluation data remain private?</h4>
                                    </div>
                                    <div class="accrodion-content">
                                        <div class="inner">
                                            <p>Anonymous assessments do not write personally identifiable information (PII) to persistent storage. Session state data is discarded upon completion unless explicitly saved by an authenticated user.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accrodion">
                                    <div class="accrodion-title">
                                        <h4>What operational trigger activates emergency overrides?</h4>
                                    </div>
                                    <div class="accrodion-content">
                                        <div class="inner">
                                            <p>If a user indicates self-harm intent or severe distress in any psychometric question, standard UI pathways pause and present a prominent alert modal listing emergency hotlines and nearby medical facilities.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accrodion">
                                    <div class="accrodion-title">
                                        <h4>Can users schedule appointments without taking a test?</h4>
                                    </div>
                                    <div class="accrodion-content">
                                        <div class="inner">
                                            <p>Yes. The screening phase is completely optional. Users may directly filter through the practitioner directory and request consultation appointments at any time.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accrodion">
                                    <div class="accrodion-title">
                                        <h4>How are medical practitioners onboarded and audited?</h4>
                                    </div>
                                    <div class="accrodion-content">
                                        <div class="inner">
                                            <p>Practitioners must submit medical license documentation, academic certification, and proof of standing with national regulatory bodies in Cameroon before their profiles go live on the platform.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--FAQ Accordion End-->
@endsection

@push('scripts')
  <!-- Alpine View Controller Script -->
@endpush