src/app/homepage/homepage.component.html

<!-- Modern UI header with logo and PyDetect title -->
<div class="site-header">
 <div class="header-inner">
 <div class="logo-cluster">
 <span (click)="navigateHome()" style="cursor:pointer;display:flex;align-items:center;">
 <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
 </span>
 <!-- Title + Tagline stacked -->
 <div class="title-stack">
 <div class="py-detect-title-header">
 <span class="py-letter p">P</span>
 <span class="py-letter y">Y</span>
 <span class="py-shape"></span>
 <span class="py-letter d">D</span>
 <span class="py-letter e">E</span>
 <span class="py-letter t">T</span>
 <span class="py-letter e2">E</span>
 <span class="py-letter c">C</span>
 <span class="py-letter t2">T</span>
 </div>
 <div class="logo-tagline">Real-Time Behavioral Intelligence Platform</div>
 </div>
 </div>
 <!-- Right-side minimal navigation -->
 <nav class="header-nav" aria-label="Primary">
 <a class="nav-link" [class.active]="selectedNav==='home'" href="#" (click)="navigateHome(); $event.preventDefault()">
 <i class="fas fa-home nav-icon" aria-hidden="true"></i> Home
 </a>
 <span class="nav-sep">|</span>
 <!-- About dropdown (second) -->
 <div class="dropdown">
 <a class="nav-link dropdown-toggle" [class.active]="selectedNav==='mission' || selectedNav==='how-to-use' || selectedNav==='about'" href="#" (click)="markSelected('about'); $event.preventDefault()">
 <i class="fas fa-info-circle nav-icon" aria-hidden="true"></i> About ▾
 </a>
 <div class="dropdown-menu">
 <a class="dropdown-item" [class.active]="selectedNav==='mission'" href="#mission" (click)="scrollToMission($event)">
 <i class="fas fa-bullseye nav-icon" aria-hidden="true"></i> Our mission
 </a>
 <a class="dropdown-item" [class.active]="selectedNav==='how-to-use'" href="#how-to-use" (click)="scrollToHowToUse($event)">
 <i class="fas fa-lightbulb nav-icon" aria-hidden="true"></i> How to use Py-Detect
 </a>
 <a class="dropdown-item" [class.active]="selectedNav==='how-it-works'" href="#how-it-works" (click)="scrollToHowItWorks($event)">
 <i class="fas fa-cogs nav-icon" aria-hidden="true"></i> How it works
 </a>
 <a class="dropdown-item" href="#" (click)="openInfoDialog(); markSelected('about'); $event.preventDefault()">
 <i class="fas fa-book-open nav-icon" aria-hidden="true"></i> Know more
 </a>
 </div>
 </div>
 <span class="nav-sep">|</span>
 <!-- Features (third) -->
 <a class="nav-link" [class.active]="selectedNav==='features'" href="#features" (click)="scrollToFeatures($event)">
 <i class="fas fa-star nav-icon" aria-hidden="true"></i> Features
 </a>
 <span class="nav-sep">|</span>
 <!-- Support (fourth) -->
 <a class="nav-link" [class.active]="selectedNav==='support'" href="mailto:info@pykara.ai?subject=Py-Detect%20Support%20Request" (click)="markSelected('support')">
 <i class="fas fa-life-ring nav-icon" aria-hidden="true"></i> Support
 </a>
 <!-- Language selector inline, after Support -->
 <select class="lang-select header-lang" aria-label="Select language" [value]="selectedLanguage" (change)="onLanguageChange($any($event.target).value)">
 <option value="en">EN</option>
 <option value="en-IN">IN</option>
 </select>
</nav>
 <!-- Top-right auth button -->
 <div class="auth-topright">
   <button class="auth-btn" (click)="openSignIn()" aria-label="Open Sign In"  title="Account">
     <!-- user-circle icon: outer ring with person silhouette -->
     <svg class="auth-btn-svg" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
       <circle cx="32" cy="32" r="30" class="auth-ring" fill="none" stroke-width="2" />
       <circle cx="32" cy="20" r="8" class="auth-head" />
       <path class="auth-body" d="M16 48c0-8.8 7.2-16 16-16s16 7.2 16 16" fill="none" stroke-width="6" stroke-linecap="round" />
     </svg>
   </button>
 </div>
 </div>
</div>

<!-- New Landing Hero + Sections -->
<div class="landing">
 <!-- Hero Section -->
 <div class="hero">
 <h2>Real-Time Truth & Deception Detection</h2>
 <p>
 One intelligent platform for law enforcement, recruiters, and security teams.
 Analyse verbal responses and body language in real-time to detect deception, assess risks, and build trust.
 </p>
 <button class="hero-cta" (click)="scrollToSection($event, 'how-it-works')">How It Works</button>
 </div>
</div>


<!-- Blue Background Wrapper -->
<div class="blue-section">
 <section class="specialisations">
 <!-- Mission Section -->
 <section id="mission" class="mission">
 <h2 class="section-title">OUR MISSION IS SIMPLE & IMPACTFUL</h2>
 <div class="mission-row">
 <div class="mission-left">
   <p>
     Our mission is to help investigators, recruiters, and security professionals identify truth more confidently, reduce deception, and improve decision-making. We aim to support safer communities, fairer recruitment practices, and stronger organisational security.
   </p>
 </div>
 <div class="mission-right">
   <p>
     Through advanced behavioural analysis—examining verbal responses, facial cues, and body language—the platform provides clear insight into consistency, credibility, and potential risks. This enables teams to act with accuracy, clarity, and confidence across a wide range of situations.
   </p>
 </div>
 </div>
 </section>

 <div class="specialisation-cards">
 <!-- Card1 -->
 <div class="card">
 <i class="fas fa-user-secret icon"></i>
 <h3>Behavioural Investigation</h3>
 <p>
   Advanced NLP and computer vision techniques analyse verbal responses, facial cues, and body language in real time, helping professionals detect inconsistencies and understand behavioural patterns more accurately.
 </p>
 </div>

 <!-- Card2 -->
 <div class="card">
 <i class="fas fa-bullseye icon"></i>
 <h3>High Accuracy</h3>
 <p>
   Trained using diverse behavioural signals and real-world scenarios, the system delivers consistent and reliable results across investigations, recruitment workflows, screening processes, and security evaluations.
 </p>
 </div>

 <!-- Card3 -->
 <div class="card">
 <i class="fas fa-shield-alt icon"></i>
 <h3>Secure & Scalable</h3>
 <p>
   Designed with strong data protection standards, the system ensures safe handling of sensitive information while offering seamless scalability for enterprise and government environments.
 </p>
 </div>
 </div>
 </section>
</div>

<!-- How to Use Section -->
<section id="how-to-use" class="how-to-use">
 <h2 class="section-title">How to Use?</h2>
 <p class="section-subtitle">
   The system enables Admins and authorised Users to manage cases, record investigation sessions, and review behavioural findings efficiently.
 </p>

 <div class="use-cards">
 <!-- Step1 -->
 <div class="use-card">
 <i class="fas fa-user-tie icon"></i>
 <h3>1. Admin Creates Case</h3>
 <p>
   The Admin logs in, enters case information, uploads available documents, and assigns the case to the appropriate user.
 </p>
 </div>

 <!-- Step2 -->
 <div class="use-card">
 <i class="fas fa-user-check icon"></i>
 <h3>2. User Views Assignment</h3>
 <p>
   The assigned user logs in, views the case, reviews the details, and prepares for the investigation session.
 </p>
 </div>

 <!-- Step3 -->
 <div class="use-card">
 <i class="fas fa-video icon"></i>
 <h3>3. Investigation Recording</h3>
 <p>
   During questioning, the system presents structured, context-aware questions.
   Verbal responses, facial cues, and body language are recorded in real time.
 </p>
 </div>

 <!-- Step4 -->
 <div class="use-card">
 <i class="fas fa-brain icon"></i>
 <h3>4. AI Analysis</h3>
 <p>
   The system examines speech patterns, tone, facial expressions, and body movements to highlight behavioural indicators, consistency levels, and potential concerns.
 </p>
 </div>

 <!-- Step5 -->
 <div class="use-card">
 <i class="fas fa-file-alt icon"></i>
 <h3>5. Report & Decision</h3>
 <p>
   A clear behavioural report is generated, helping professionals interpret the findings and make confident, evidence-supported decisions.
 </p>
 </div>
 </div>
</section>

<!-- How It Works Section (moved to main page) -->
<section id="how-it-works" class="how-it-works how-expanded">
 <h2 class="section-title how-title">How It Works</h2>
 <div class="how-grid">
 <!-- Intro card -->
 <article class="how-card how-anim fade-in-up" role="article" aria-label="Intro">
 <h3 class="how-heading">Py-Detect – Intelligent Behaviour Analysis Platform</h3>
 <p class="how-text">
 Py-Detect is an advanced digital platform designed to support investigations through structured questioning and automated behavioural analysis. It studies voice, face, and body-language patterns, and produces a clear summary that helps investigators make informed decisions.
 </p>
 </article>

 <!-- Context-Aware Questioning -->
 <article class="how-card how-anim fade-in-up" aria-label="Context-Aware Questioning">
 <h3 class="how-heading">1. Context-Aware Questioning</h3>
 <p class="how-text">The system generates questions by reading the case information entered by the admin. It adapts each follow-up question based on the accused person’s previous answers to maintain relevance and continuity.</p>
 </article>

 <!-- Voice Pattern Analysis -->
 <article class="how-card how-anim fade-in-up" aria-label="Voice Pattern Analysis">
 <h3 class="how-heading">2. Voice Pattern Analysis</h3>
 <ul class="how-list">
 <li>Tone variations</li>
 <li>Stress or pressure points</li>
 <li>Pace and hesitation</li>
 <li>Sudden pitch changes</li>
 </ul>
 <p class="how-text">These cues help identify emotional states and potential inconsistency.</p>
 </article>

 <!-- Facial and Micro-Expression Tracking -->
 <article class="how-card how-anim fade-in-up" aria-label="Facial and Micro-Expression Tracking">
 <h3 class="how-heading">3. Facial and Micro-Expression Tracking</h3>
 <ul class="how-list">
 <li>Eye shifts</li>
 <li>Lip compression</li>
 <li>Brow tension</li>
 <li>Nervous micro-gestures</li>
 </ul>
 <p class="how-text">These signals contribute to behavioural interpretation.</p>
 </article>

 <!-- Body-Language Pattern Detection -->
 <article class="how-card how-anim fade-in-up" aria-label="Body-Language Pattern Detection">
 <h3 class="how-heading">4. Body-Language Pattern Detection</h3>
 <p class="how-text">Posture, hand movements, head position, and response timing are evaluated to understand engagement, confidence, and anxiety levels.</p>
 </article>

 <!-- Combined Insight Summary -->
 <article class="how-card how-anim fade-in-up" aria-label="Combined Insight Summary">
 <h3 class="how-heading">5. Combined Insight Summary</h3>
 <ul class="how-list">
 <li>Structured summary</li>
 <li>Behavioural indicators</li>
 <li>Stress markers</li>
 <li>Consistency score</li>
 <li>Potential risk highlights</li>
 </ul>
 <p class="how-text">It helps investigators review the entire interview at a glance.</p>
 </article>

 <!-- Who Can Use -->
 <article class="how-card how-anim fade-in-up" aria-label="Who Can Use">
 <h3 class="how-heading">Who Can Use Py-Detect?</h3>
 <ul class="how-list">
 <li>Law Enforcement &amp; Investigation Teams</li>
 <li>Legal Professionals</li>
 <li>HR and Corporate Security</li>
 <li>Private Investigation Agencies</li>
 <li>Educational or Counselling Teams</li>
 </ul>
 </article>

 <!-- Why Choose -->
 <article class="how-card how-anim fade-in-up" aria-label="Why Choose">
 <h3 class="how-heading">Why Choose Py-Detect?</h3>
 <ul class="how-list">
 <li>Fast and Efficient</li>
 <li>Non-Invasive and Comfortable</li>
 <li>Reliable and Data-Driven</li>
 <li>Configurable for Different Scenarios</li>
 <li>Secure and Organised</li>
 </ul>
 </article>

 <!-- End-to-End Workflow -->
 <article class="how-card how-anim fade-in-up" aria-label="End-to-End Workflow">
 <h3 class="how-heading">End-to-End Workflow</h3>
 <ol class="how-steps">
 <li>Admin creates a case.</li>
 <li>Investigator receives assigned cases.</li>
 <li>Interview recorded (voice and video).</li>
 <li>AI analyses behaviour and cues.</li>
 <li>Final summary with indicators and scores.</li>
 <li>Dashboards for review.</li>
 </ol>
 </article>

 <!-- Key Features -->
 <article class="how-card how-anim fade-in-up" aria-label="Key Features">
 <h3 class="how-heading">Key Features</h3>
 <ul class="how-list">
 <li>Case Management</li>
 <li>Automated Question Generation</li>
 <li>Voice, Video, and Behaviour Analysis</li>
 <li>Truth Probability Score</li>
 <li>Investigator Panel</li>
 <li>Admin Panel</li>
 </ul>
 </article>
 </div>
</section>

<!-- Features Section -->
<section id="features" class="features">
 <h2 class="section-title">Industries we support</h2>
 <!-- Crime Investigation -->
 <div class="feature-row">
 <div class="feature-text">
 <h2>Crime Investigation</h2>
 <p>
   The system supports law enforcement by analysing suspects’ verbal responses, tone, facial cues, and body language during interrogations. By identifying stress patterns, inconsistencies, and subtle behavioural indicators, investigators gain deeper insights that assist in understanding credibility and uncovering hidden details.
 </p>
 </div>
 <div class="feature-image">
 <img src="assets/3.JPG" alt="Crime Investigation">
 </div>
 </div>

 <!-- Recruitment Analysis -->
 <div class="feature-row reverse">
 <div class="feature-image">
 <img src="assets/6.JPG" alt="Recruitment Analysis">
 </div>
 <div class="feature-text">
 <h2>Recruitment Analysis</h2>
 <p>
   During hiring and screening processes, the system helps recruiters by evaluating candidates’ speech clarity, consistency, and emotional cues. Behavioural patterns and stress indicators are highlighted, enabling more informed, fair, and unbiased hiring decisions.
 </p>
 </div>
 </div>

 <!-- Court Room -->
 <div class="feature-row">
 <div class="feature-text">
   <h2>Courtroom Evaluation</h2>
 <p>
   The system strengthens courtroom proceedings by examining witnesses’ verbal responses, tone, and body movements in real time. By highlighting stress indicators, behavioural inconsistencies, and credibility cues, it supports judges and legal professionals in making clearer, evidence-based assessments.
 </p>
 </div>
 <div class="feature-image">
 <img src="assets/4.JPG" alt="Court Room">
 </div>
 </div>
</section>

<!-- Footer from provided design -->
<footer>
 <p>
 ©2025 Pykara Technologies
 </p>
 <a href="#">Terms</a> |
 <a href="#">Privacy</a> |
 <a href="#">Support</a> |
 <a href="#">Version1.0.0</a>
 <div class="social-icons">
 <a href="#" class="social-icon facebook" aria-label="Facebook">
 <i class="fab fa-facebook-f"></i>
 </a>
 <a href="#" class="social-icon youtube" aria-label="YouTube">
 <i class="fab fa-youtube"></i>
 </a>
 <a href="#" class="social-icon linkedin" aria-label="LinkedIn">
 <i class="fab fa-linkedin-in"></i>
 </a>
 <a href="#" class="social-icon instagram" aria-label="Instagram">
 <i class="fab fa-instagram"></i>
 </a>
 </div>
</footer>

<!-- ===== Auth Modals (unchanged) ===== -->
<div class="modal-backdrop" *ngIf="showSignIn || showSignUp" (click)="closeModal()"></div>
<div class="modal" *ngIf="showSignIn || showSignUp" role="dialog" aria-modal="true">
 <ng-container *ngIf="showSignIn">
 <app-sign-in (switchToSignUp)="openSignUp()" (close)="closeModal()">
 </app-sign-in>
 </ng-container>
 <ng-container *ngIf="showSignUp">
 <app-sign-up (switchToSignIn)="openSignIn()" (close)="closeModal()">
 </app-sign-up>
 </ng-container>
</div>

<!-- ===== Info Dialog ===== -->
<div class="modal-backdrop modal-backdrop--fade" *ngIf="showInfoDialog" (click)="closeInfoDialog()"></div>
<div class="modal dialog-modal dialog-modal--zoom" *ngIf="showInfoDialog" role="dialog" aria-modal="true" aria-label="About Py-Detect">
 <div class="dialog-content" (click)="$event.stopPropagation()">
 <button class="dialog-close" (click)="closeInfoDialog()" aria-label="Close">×</button>

 <h3>How It Works</h3>
 <p>
 The platform asks context-aware questions and analyses verbal, facial, and behavioral cues using computer vision.
 It then generates a clear summary with risk indicators and consistency metrics.
 </p>

 <h3>Who Can Use Py-Detect?</h3>
 <p>Investigators, law enforcement teams, legal professionals, HR and security departments, educators, and any organization that needs accurate behavioral insights.</p>

 <h3>Why Py-Detect?</h3>
 <p>It is fast, non-invasive, configurable for different scenarios, and supports decision-making with reliable, data-driven analysis.</p>
 </div>
</div>