src/app/app.component.html

<!-- Top Navigation -->
<header class="topbar header-bar" role="banner" aria-label="Top navigation">
  <a class="brand brand__link" (click)="goHome()" style="cursor: pointer;">
    <img src="assets/pykara-logo.png" alt="Pykara Technologies logo" class="brand__logo-img" />
    <span class="brand__name"><strong>Py</strong>-Match</span>
  </a>

  <!-- Hamburger Menu Toggle for Mobile -->
  <button class="mobile-menu-toggle" (click)="showMobileNav = true" aria-label="Open mobile menu">
    <i class="fa-solid fa-bars"></i>
  </button>

  <!-- Center Navigation - Desktop -->
  <nav class="primary-nav header__nav" aria-label="Primary">
    <!-- Role Main Navigation -->
    <div class="nav-item-wrapper">
      <a (click)="toggleRoleSubnav()" class="nav-link nav-link--icon">
        <i class="fa-solid fa-layer-group"></i>
        <span>ROLE</span>
      </a>

      <!-- Role Sub Navigation -->
      <div class="sub-nav" *ngIf="showRoleSubnav" (mouseleave)="hideRoleSubnav()">
        <!-- Marriage Role -->
        <div class="role-submenu">
          <a (click)="toggleRoleMenu('marriage')" class="sub-nav-link role-header">
            <i class="fa-solid fa-ring"></i>
            <span>MARRIAGE</span>
            <i class="fa-solid fa-chevron-right" [class.rotated]="activeRoleMenu === 'marriage'"></i>
          </a>
          <div class="role-options" *ngIf="activeRoleMenu === 'marriage'">
            <!-- Progress Indicator -->
            <div class="progress-indicator">
              <div class="progress-text">Progress: {{ getProgressPercentage() }}%</div>
              <div class="progress-bar-container">
                <div class="progress-bar" [style.width]="getProgressPercentage() + '%'"></div>
              </div>
            </div>

            <a (click)="navigateToProfile('marriage')"
               class="sub-nav-link"
               [class.disabled]="!isStepEnabled('profile')"
               [class.completed]="profileCompleted"
               [attr.aria-disabled]="!isStepEnabled('profile')">
              <i class="fa-solid fa-user"></i>
              <span>Your Profile</span>
              <span *ngIf="isSignedIn && profileCompleted" class="completed-check" title="Completed">
                <i class="fa-solid fa-check" aria-hidden="true"></i>
              </span>
              <span *ngIf="(!isSignedIn) || (!isStepEnabled('profile') && !profileCompleted)" class="step-lock" title="Locked">
                <i class="fa-solid fa-lock" aria-hidden="true"></i>
              </span>
            </a>
            <a (click)="navigateToExpectations('marriage')"
               class="sub-nav-link"
               [class.disabled]="!isStepEnabled('expectations')"
               [class.completed]="expectationsCompleted"
               [attr.aria-disabled]="!isStepEnabled('expectations')">
              <i class="fa-solid fa-bullseye"></i>
              <span>Your Expectations</span>
              <span *ngIf="isSignedIn && expectationsCompleted" class="completed-check" title="Completed">
                <i class="fa-solid fa-check" aria-hidden="true"></i>
              </span>
              <span *ngIf="(!isSignedIn) || (!isStepEnabled('expectations') && !expectationsCompleted)" class="step-lock" title="Locked">
                <i class="fa-solid fa-lock" aria-hidden="true"></i>
              </span>
            </a>
            <a (click)="navigateToAssessment('marriage')"
               class="sub-nav-link"
               [class.disabled]="!isStepEnabled('assessment')"
               [class.completed]="assessmentCompleted"
               [attr.aria-disabled]="!isStepEnabled('assessment')">
              <i class="fa-solid fa-clipboard-list"></i>
              <span>Take Assessment</span>
              <span *ngIf="isSignedIn && assessmentCompleted" class="completed-check" title="Completed">
                <i class="fa-solid fa-check" aria-hidden="true"></i>
              </span>
              <span *ngIf="(!isSignedIn) || (!isStepEnabled('assessment') && !assessmentCompleted)" class="step-lock" title="Locked">
                <i class="fa-solid fa-lock" aria-hidden="true"></i>
              </span>
            </a>
            <a (click)="navigateToMatchingProfile('marriage')"
               class="sub-nav-link"
               [class.disabled]="!isStepEnabled('matching')"
               [class.completed]="matchingCompleted"
               [attr.aria-disabled]="!isStepEnabled('matching')">
              <i class="fa-solid fa-chart-pie"></i>
              <span>Your Matching Profile</span>
              <span *ngIf="isSignedIn && matchingCompleted" class="completed-check" title="Completed">
                <i class="fa-solid fa-check" aria-hidden="true"></i>
              </span>
              <span *ngIf="(!isSignedIn) || (!isStepEnabled('matching') && !matchingCompleted)" class="step-lock" title="Locked">
                <i class="fa-solid fa-lock" aria-hidden="true"></i>
              </span>
            </a>
          </div>
        </div>

        <!-- Interview Role -->
        <div class="role-submenu">
          <a (click)="toggleRoleMenu('interview')" class="sub-nav-link role-header">
            <i class="fa-solid fa-user-tie"></i>
            <span>INTERVIEW</span>
            <i class="fa-solid fa-chevron-right" [class.rotated]="activeRoleMenu === 'interview'"></i>
          </a>
          <div class="role-options" *ngIf="activeRoleMenu === 'interview'">
            <a (click)="navigateToProfile('interview')" class="sub-nav-link">
              <i class="fa-solid fa-user"></i>
              <span>Candidate Profile</span>
            </a>
            <a (click)="navigateToJobRequirements()" class="sub-nav-link">
              <i class="fa-solid fa-briefcase"></i>
              <span>Job Requirements</span>
            </a>
            <a (click)="navigateToInterviewAssessment()" class="sub-nav-link">
              <i class="fa-solid fa-clipboard-check"></i>
              <span>Skills Assessment</span>
            </a>
            <a (click)="navigateToCandidateMatching()" class="sub-nav-link">
              <i class="fa-solid fa-users"></i>
              <span>Find Candidates</span>
            </a>
          </div>
        </div>

        <!-- Partnership Role -->
        <div class="role-submenu">
          <a (click)="toggleRoleMenu('partnership')" class="sub-nav-link role-header">
            <i class="fa-solid fa-handshake"></i>
            <span>PARTNERSHIP</span>
            <i class="fa-solid fa-chevron-right" [class.rotated]="activeRoleMenu === 'partnership'"></i>
          </a>
          <div class="role-options" *ngIf="activeRoleMenu === 'partnership'">
            <a (click)="navigateToProfile('partnership')" class="sub-nav-link">
              <i class="fa-solid fa-user-tie"></i>
              <span>Partner Profile</span>
            </a>
            <a (click)="navigateToBusinessGoals()" class="sub-nav-link">
              <i class="fa-solid fa-bullseye"></i>
              <span>Business Goals</span>
            </a>
            <a (click)="navigateToPartnershipAssessment()" class="sub-nav-link">
              <i class="fa-solid fa-chart-line"></i>
              <span>Compatibility Assessment</span>
            </a>
            <a (click)="navigateToPartnerMatching()" class="sub-nav-link">
              <i class="fa-solid fa-search"></i>
              <span>Find Partners</span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- FEATURES link with icon -->
    <a *ngIf="isIntroPage" (click)="scrollToFeatures()" class="nav-link nav-link--icon" aria-label="Jump to features section">
      <i class="fa-solid fa-grid" aria-hidden="true"></i>
      <span>FEATURES</span>
    </a>
    <a *ngIf="isIntroPage" (click)="scrollToJourney()" class="nav-link nav-link--icon" aria-label="Jump to how it works section">
      <i class="fa-solid fa-timeline" aria-hidden="true"></i><span>HOW IT WORKS</span>
    </a>

    <!-- Additional Navigation Links -->
    <a href="https://pykara.ai/" target="_blank" rel="noopener" class="nav-link nav-link--icon">
      <i class="fa-solid fa-building"></i><span>ABOUT US</span>
    </a>
    <a href="https://pykara.ai/contact-us/" target="_blank" rel="noopener" class="nav-link nav-link--icon">
      <i class="fa-solid fa-envelope"></i><span>CONTACT</span>
    </a>
    <a (click)="scrollToFAQ()" class="nav-link nav-link--icon" style="cursor: pointer;">
      <i class="fa-solid fa-circle-question"></i><span>FAQ</span>
    </a>
    <a (click)="openChatbot()" class="nav-link nav-link--icon" style="cursor: pointer;">
      <i class="fa-solid fa-robot"></i><span>SUPPORT</span>
    </a>
  </nav>

  <!-- Right Actions - Desktop -->
  <nav class="actions header__actions" aria-label="User actions">
    <ng-container *ngIf="!isSignedIn; else signedInBlock">
      <button type="button" class="btn btn-signup" (click)="onOpenSignUp()">Sign up</button>
      <button type="button" class="btn btn-signin" (click)="onOpenSignIn()">Sign in</button>
    </ng-container>
    <ng-template #signedInBlock>
      <!-- User Name Display with Tooltip -->
      <div class="user-display" [title]="userFullName">
        {{ userInitials }}
      </div>
      <button type="button" class="btn btn-signin" (click)="onSignOut()">Sign out</button>
    </ng-template>
  </nav>

  <!-- Mobile Navigation Overlay -->
  <div *ngIf="showMobileNav" class="mobile-nav-overlay">
    <button class="close-mobile-nav" (click)="showMobileNav = false" aria-label="Close mobile menu">
      <i class="fa-solid fa-times"></i>
    </button>

    <nav class="mobile-nav" aria-label="Mobile navigation">
      <!-- Role Section -->
      <div class="mobile-nav-section">
        <a (click)="toggleRoleMenuMobile('marriage')" class="mobile-nav-link role-header">
          <i class="fa-solid fa-layer-group"></i>
          <span>ROLE</span>
          <i class="fa-solid fa-chevron-right" [class.rotated]="activeRoleMenuMobile === 'marriage'"></i>
        </a>

        <!-- Marriage Role Submenu -->
        <div class="mobile-submenu" *ngIf="activeRoleMenuMobile === 'marriage'">
          <div class="progress-indicator">
            <div class="progress-text">Progress: {{ getProgressPercentage() }}%</div>
            <div class="progress-bar-container">
              <div class="progress-bar" [style.width]="getProgressPercentage() + '%'"></div>
            </div>
          </div>

          <a (click)="navigateToProfile('marriage'); showMobileNav = false"
             class="mobile-nav-link sub-nav-link"
             [class.disabled]="!isStepEnabled('profile')"
             [class.completed]="profileCompleted">
            <i class="fa-solid fa-user"></i>
            <span>Your Profile</span>
            <span *ngIf="isSignedIn && profileCompleted" class="completed-check">
              <i class="fa-solid fa-check"></i>
            </span>
            <span *ngIf="(!isSignedIn) || (!isStepEnabled('profile') && !profileCompleted)" class="step-lock">
              <i class="fa-solid fa-lock"></i>
            </span>
          </a>

          <a (click)="navigateToExpectations('marriage'); showMobileNav = false"
             class="mobile-nav-link sub-nav-link"
             [class.disabled]="!isStepEnabled('expectations')"
             [class.completed]="expectationsCompleted">
            <i class="fa-solid fa-bullseye"></i>
            <span>Your Expectations</span>
            <span *ngIf="isSignedIn && expectationsCompleted" class="completed-check">
              <i class="fa-solid fa-check"></i>
            </span>
            <span *ngIf="(!isSignedIn) || (!isStepEnabled('expectations') && !expectationsCompleted)" class="step-lock">
              <i class="fa-solid fa-lock"></i>
            </span>
          </a>

          <a (click)="navigateToAssessment('marriage'); showMobileNav = false"
             class="mobile-nav-link sub-nav-link"
             [class.disabled]="!isStepEnabled('assessment')"
             [class.completed]="assessmentCompleted">
            <i class="fa-solid fa-clipboard-list"></i>
            <span>Take Assessment</span>
            <span *ngIf="isSignedIn && assessmentCompleted" class="completed-check">
              <i class="fa-solid fa-check"></i>
            </span>
            <span *ngIf="(!isSignedIn) || (!isStepEnabled('assessment') && !assessmentCompleted)" class="step-lock">
              <i class="fa-solid fa-lock"></i>
            </span>
          </a>

          <a (click)="navigateToMatchingProfile('marriage'); showMobileNav = false"
             class="mobile-nav-link sub-nav-link"
             [class.disabled]="!isStepEnabled('matching')"
             [class.completed]="matchingCompleted">
            <i class="fa-solid fa-chart-pie"></i>
            <span>Your Matching Profile</span>
            <span *ngIf="isSignedIn && matchingCompleted" class="completed-check">
              <i class="fa-solid fa-check"></i>
            </span>
            <span *ngIf="(!isSignedIn) || (!isStepEnabled('matching') && !matchingCompleted)" class="step-lock">
              <i class="fa-solid fa-lock"></i>
            </span>
          </a>
        </div>
      </div>

      <!-- Other Navigation Links -->
      <a *ngIf="isIntroPage" (click)="scrollToFeatures(); showMobileNav = false" class="mobile-nav-link">
        <i class="fa-solid fa-grid"></i>
        <span>FEATURES</span>
      </a>

      <a *ngIf="isIntroPage" (click)="scrollToJourney(); showMobileNav = false" class="mobile-nav-link">
        <i class="fa-solid fa-timeline"></i>
        <span>HOW IT WORKS</span>
      </a>

      <a href="https://pykara.ai/" target="_blank" rel="noopener" class="mobile-nav-link">
        <i class="fa-solid fa-building"></i>
        <span>ABOUT US</span>
      </a>

      <a href="https://pykara.ai/contact-us/" target="_blank" rel="noopener" class="mobile-nav-link">
        <i class="fa-solid fa-envelope"></i>
        <span>CONTACT</span>
      </a>

      <a (click)="scrollToFAQ(); showMobileNav = false" class="mobile-nav-link">
        <i class="fa-solid fa-circle-question"></i>
        <span>FAQ</span>
      </a>

      <a (click)="openChatbot(); showMobileNav = false" class="mobile-nav-link">
        <i class="fa-solid fa-robot"></i>
        <span>SUPPORT</span>
      </a>

      <!-- Auth Buttons for Mobile -->
      <div class="mobile-auth-buttons" *ngIf="!isSignedIn">
        <button type="button" class="btn btn-signup mobile-btn" (click)="onOpenSignUp(); showMobileNav = false">Sign up</button>
        <button type="button" class="btn btn-signin mobile-btn" (click)="onOpenSignIn(); showMobileNav = false">Sign in</button>
      </div>

      <div class="mobile-user-info" *ngIf="isSignedIn">
        <div class="mobile-user-display">
          <div class="user-display">{{ userInitials }}</div>
          <div class="mobile-user-name">{{ userFullName }}</div>
        </div>
        <button type="button" class="btn btn-signin mobile-btn" (click)="onSignOut(); showMobileNav = false">Sign out</button>
      </div>
    </nav>
  </div>

  <!-- Assessment Already Taken Popup -->
  <div class="popup-overlay" *ngIf="showAssessmentPopup">
    <div class="popup-container">
      <div class="popup-header">
        <div class="popup-icon">
          <i class="fa-solid fa-check-circle"></i>
        </div>
        <h3 class="popup-title">Assessment Completed</h3>
      </div>

      <div class="popup-content">
        <p>You have already taken the assessment.</p>
        <p>If you like, please explore your matching profile to see your compatible matches.</p>
      </div>

      <div class="popup-actions">
        <button type="button" class="btn btn-primary" (click)="navigateToMatchingFromPopup()">
          <i class="fa-solid fa-user-group"></i> Explore Matching Profile
        </button>
        <button type="button" class="btn btn-secondary" (click)="goHomeFromPopup()">
          <i class="fa-solid fa-home"></i> Go Home
        </button>
      </div>
    </div>
  </div>

  <!-- Sign Out Popup -->
  <div *ngIf="showSignOutPopup" class="popup-overlay">
    <div class="popup-container signout-popup" role="alert" aria-live="polite">
      <div class="signout-popup__content">
        <!-- Tick Animation -->
        <div class="tick-animation">
          <div class="tick-circle">
            <svg class="tick-svg" viewBox="0 0 100 100">
              <circle class="tick-circle-bg" cx="50" cy="50" r="45"></circle>
              <path class="tick-path" d="M30,50 L45,65 L70,35" fill="none"></path>
            </svg>
          </div>
        </div>

        <h3 class="signout-popup__title">You have been signed out</h3>
        <p class="signout-popup__thankyou">Thank you</p>
      </div>

      <div class="signout-popup__footer">
        <div class="signout-popup__powered-by">
          <span>POWERED BY</span>
          <div class="signout-popup__logo">
            <img src="assets/pykara-logo.png" alt="Pykara Technologies" class="signout-popup__logo-img" />
            <span class="signout-popup__brand-name">Pykara Technologies</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Main Content -->
<router-outlet></router-outlet>

<!-- Global Auth Modal -->
<div *ngIf="authModal" class="modal-backdrop auth-modal-backdrop" (click)="closeAuthModal($event)">
  <div class="modal-panel modal-panel--white auth-modal-container" role="dialog" aria-modal="true"
       [attr.aria-label]="authModal === 'signin' ? 'Sign in' : 'Sign up'"
       (click)="$event.stopPropagation()">
    <button type="button" class="modal-close" (click)="closeAuthModal()" aria-label="Close">×</button>

    <div class="auth-modal-content">
      <app-sign-in *ngIf="authModal === 'signin'"
                   (switchToSignUp)="onOpenSignUp()"
                   (signInSuccess)="onSignInSuccess()"></app-sign-in>
      <app-sign-up *ngIf="authModal === 'signup'"
                   (switchToSignIn)="onOpenSignIn()"
                   (signUpSuccess)="onSignUpSuccess()"></app-sign-up>
    </div>
  </div>
</div>
<!-- Chatbot Toggle Button -->
<button *ngIf="isIntroPage" class="chatbot-toggle" (click)="openChatbot()" aria-label="Open Support Chatbot">
  <i class="fa-solid fa-robot"></i>
</button>

<!-- Chatbot Modal -->
<div *ngIf="showChatbot" class="chatbot-modal" (click)="closeChatbot($event)">
  <div class="chatbot-container" role="dialog" aria-modal="true" aria-label="Support Chatbot" (click)="$event.stopPropagation()">

    <!-- Chatbot Header -->
    <header class="chatbot-header">
      <div class="chatbot-header__left">
        <div class="chatbot-avatar" aria-hidden="true">
          <i class="fa-solid fa-robot"></i>
        </div>
        <div class="chatbot-header__titles">
          <h3 class="chatbot-title">How can I help you today?</h3>
        </div>
      </div>
      <button class="close-chatbot" (click)="closeChatbot()" aria-label="Close chatbot">
        <i class="fa-solid fa-times"></i>
      </button>
    </header>

    <!-- Chatbot Body -->
    <div class="chatbot-body">

      <!-- Chat Messages -->
      <div class="chat-messages" #chatMessages aria-live="polite" aria-atomic="false">

        <!-- Welcome Message -->
        <div class="message bot-message">
          <img src="assets/pykara-logo.png" alt="Pykara logo" class="message-avatar" />
          <div class="message-content">
            <p>Hello! I'm your Py-Match assistant. I can help you with:</p>
            <p>• Matching process questions</p>
            <p>• Technical support</p>
            <p>• Account assistance</p>
            <p>What would you like to know?</p>
          </div>
        </div>

      </div>

      <!-- Quick Questions -->
      <div class="quick-questions" role="list">
        <button type="button" class="quick-question-btn"
                (click)="askQuickQuestion('How does the matching process work?')"
                aria-label="How does the matching process work?">
          How matching works?
        </button>
        <button type="button" class="quick-question-btn"
                (click)="askQuickQuestion('What personality models do you use?')"
                aria-label="What personality models do you use?">
          Personality models
        </button>
        <button type="button" class="quick-question-btn"
                (click)="askQuickQuestion('How do I reset my password?')"
                aria-label="How do I reset my password?">
          Reset password
        </button>
        <button type="button" class="quick-question-btn"
                (click)="askQuickQuestion('Contact support team')"
                aria-label="Contact support team">
          Contact support
        </button>
      </div>

      <!-- Chat Input -->
      <div class="chat-input-container" role="form" aria-label="Send a message to support">
        <input type="text"
               class="chat-input"
               placeholder="Type your message here..."
               #chatInput
               (keyup.enter)="sendMessage(chatInput)"
               aria-label="Type your message">
        <button class="send-button" (click)="sendMessage(chatInput)" aria-label="Send message">
          <i class="fa-solid fa-paper-plane"></i>
          <span class="send-text">Send</span>
        </button>
      </div>
    </div>
  </div>
</div>