@extends('layouts.app')

@section('title', 'Veriqo - How It Works')

@section('content')
      
    <!-- main content -->
    <main class="page-content">

        <!-- page banner -->
        <section class="page_banner animate__animated animate__fadeInLeft animate__delay-0.5s">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <div class="page_banner_content">
                            <h1>Your AI Shadow Board in 60 Seconds</h1>
                            <p>Transform complex business decisions into clear, actionable insights with VERIQO's revolutionary AI executive panel.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- how it work -->
         <section class="how_work_step">
            <div class="container">
                <div class="how_work_step_inr">
                    <h2>How It Works</h2>
                    <div class="work_step_list">
                        <div class="work_step_item">
                            <div class="work_step_icon animate-on-scroll" data-animation="fadeInLeft">
                                <img src="assets/image/work_step_1.png" width="120" alt="" srcset="">
                            </div>
                            <div class="work_step_content animate-on-scroll" data-animation="fadeInRight">
                                <h3>Submit Your Decision (15 seconds)</h3>
                                <p>Enter your strategic question or upload context documents. Examples: “Should we acquire StartupX for £50M?” or “Enter Asian markets vs. EU expansion?”</p>
                            </div>
                        </div>
                        <div class="work_step_item">
                            <div class="work_step_icon animate-on-scroll" data-animation="fadeInLeft">
                                <img src="assets/image/work_step_2.png" width="120" alt="" srcset="">
                            </div>
                            <div class="work_step_content animate-on-scroll" data-animation="fadeInRight">
                                <h3>AI Shadow Board Analysis (45 seconds)</h3>
                                <div class="work_step_content_point">
                                    <p>Five specialized AI executives analyze simultaneously across financial, legal, strategic, risk, and research dimensions.</p>
                                    <ul>
                                        <li>
                                            <p>CFO (GPT-4): Financial modeling, ROI analysis, capital allocation</p>
                                        </li>
                                        <li>
                                            <p>Legal Counsel (Claude): Regulatory compliance, legal risks, contracts</p>
                                        </li>
                                        <li>
                                            <p>Strategy Officer (Llama3): Competitive positioning, market dynamics, vision</p>
                                        </li>
                                        <li>
                                            <p>Risk Officer (Mistral): Enterprise risks, geopolitical factors, vulnerabilities</p>
                                        </li>
                                        <li>
                                            <p>Research Director (Perplexity): Real-time market data, competitive intelligence</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="work_step_item">
                            <div class="work_step_icon animate-on-scroll" data-animation="fadeInLeft">
                                <img src="assets/image/work_step_3.png" width="120" alt="" srcset="">
                            </div>
                            <div class="work_step_content animate-on-scroll" data-animation="fadeInRight">
                                <h3>Consensus Synthesis (Real-time)</h3>
                                <p>Proprietary orchestration engine integrates perspectives into a unified executive memo with consensus recommendations, dissenting viewpoints, and risk assessments.</p>
                            </div>
                        </div>
                        <div class="work_step_item">
                            <div class="work_step_icon animate-on-scroll" data-animation="fadeInLeft">
                                <img src="assets/image/work_step_4.png" width="120" alt="" srcset="">
                            </div>
                            <div class="work_step_content animate-on-scroll" data-animation="fadeInRight">
                                <h3>Instant Delivery</h3>
                                <p>Comprehensive analysis delivered as a structured executive report, ready for board presentation.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         </section>

        <!-- why Ai Modal -->
        <section class="why_ai_modal animate-on-scroll" data-animation="fadeInUp">
            <div class="container">
                <div class="ai_modal_inr">
                    <h2>Why 5 AI Models?</h2>
                    <div class="why_ai_model_list">
                        <div class="company_info_list_item">
                            <div class="item_info_content">
                                <h3>No Single Bias</h3>
                                <label>Diverse perspectives ensure robust analysis</label>
                            </div>
                        </div>
                        <div class="company_info_list_item">
                            <div class="item_info_content">
                                <h3>CDomain ExpertiseFO</h3>
                                <label>Each model optimized for specific functions</label>
                            </div>
                        </div>
                        <div class="company_info_list_item">
                            <div class="item_info_content">
                                <h3>Consensus Building</h3>
                                <label>Multiple viewpoints create reliable recommendations</label>
                            </div>
                        </div>
                        <div class="company_info_list_item">
                            <div class="item_info_content">
                                <h3>Speed at Scale</h3>
                                <label>Parallel processing delivers board-quality analysis instantly</label>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-md-9">
                            <div class="hero_info_box">
                                <img src="./assets/image/unlock.png" width="20" alt="" srcset="">
                                <span>Strategic decisions processed securely and immediately deleted. Complete confidentiality guaranteed.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection
  
  <script src="./assets/js/jquery.min.js"></script>
  <script src="./assets/js/bs.min.js"></script>
  <script src="./assets/js/custom.js"></script>
  <script>
    $(document).ready(function() {

        // Check if user is logged in (has JWT token in localStorage)
      var accessToken = localStorage.getItem('access_token');
      
    //   if (!accessToken) {
    //     // User is not logged in, redirect to index.html
    //     window.location.href = './index.html';
    //   }
      
      // Replace profile images with user initial
      function updateProfileInitial() {
        try {
          // Get user data from localStorage
          var userDataStr = localStorage.getItem('user');
          if (!userDataStr) {
            return; // No user data available
          }
          
          var userData = JSON.parse(userDataStr);
          var fullName = userData.full_name || '';
          
          // Get first alphabet letter (A-Z), ignoring all non-alphabet characters (Google-like behavior)
          var firstLetter = '';
          if (fullName && fullName.trim().length > 0) {
            var trimmedName = fullName.trim();
            // Find first A-Z letter (case-insensitive), skip hyphens, symbols, numbers, etc.
            var match = trimmedName.match(/[a-zA-Z]/);
            if (match) {
              firstLetter = match[0].toUpperCase();
            } else {
              firstLetter = '?'; // No letters found (e.g., "---", "@#$")
            }
          } else {
            firstLetter = '?'; // Fallback if no name
          }
          
          // Replace all profile images with initial div
          $('.profile img[src*="/profile.png"]').each(function() {
            $(this).replaceWith('<div class="profile-initial">' + firstLetter + '</div>');
          });
          
          // Add click handler for profile initial to toggle dropdown
          $('.profile-initial').on('click', function(e) {
            e.stopPropagation();
            // Get the closest profile container and find its dropdown
            var $profileContainer = $(this).closest('.profile');
            var $dropdown = $profileContainer.find('.profile_dropdown');
            // Toggle the dropdown with slide animation (same as custom.js)
            $dropdown.slideToggle(200);
          });
        } catch (error) {
          console.error('Error updating profile initial:', error);
        }
      }
      
      // Call function to update profile initial
      updateProfileInitial();

        function updateNavbarAuthUI() {
            var accessToken = localStorage.getItem('access_token');

            if (accessToken) {
                // Hide "Sign In", show profile dropdown
                $('#signInButton').hide();
                $('#profileSection').show();
            } else {
                // Show "Sign In", hide profile dropdown
                $('#signInButton').show();
                $('#profileSection').hide();
            }
        }
        updateNavbarAuthUI();

    });
    $('#logoutBtn, .logout-btn').on('click', function (e) {
            e.preventDefault();
            handleLogout();
        });

        function showConfirmationModal(message, onConfirm, onCancel) {
            $('#confirmationMessage').text(message);
            $('#confirmationModal').fadeIn(300);

            // Remove any existing handlers to prevent duplicates
            $('#confirmationYesBtn, #confirmationNoBtn').off('click');

            // Yes button handler
            $('#confirmationYesBtn').on('click', function () {
                $('#confirmationModal').fadeOut(300);
                if (onConfirm) {
                    onConfirm();
                }
            });

            // No button handler
            $('#confirmationNoBtn').on('click', function () {
                $('#confirmationModal').fadeOut(300);
                if (onCancel) {
                    onCancel();
                }
            });

            // Close on overlay click (optional - you can remove this if you don't want it)
            $('#confirmationModal').on('click', function (e) {
                if ($(e.target).hasClass('confirmation-modal')) {
                    $('#confirmationModal').fadeOut(300);
                    if (onCancel) {
                        onCancel();
                    }
                }
            });
        }

        function handleLogout() {
            showConfirmationModal('Are you sure you want to logout?', function () {
                // User confirmed - proceed with logout
                // Clear all authentication data from localStorage and sessionStorage
                localStorage.removeItem('access_token');
                localStorage.removeItem('user');
                localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
                sessionStorage.removeItem('access_token');
                sessionStorage.removeItem('user');

                // Note: We keep remembered_email and remembered_password in localStorage
                // so they persist after logout (only cleared if Remember Me was unchecked)

                // Redirect to index.html (refresh page to show sign in button)
                window.location.href = './index.html';
            });
        }
  </script>
</body>
</html>