<?php require_once 'config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Technology – HealthLink</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    *{box-sizing:border-box;margin:0;padding:0;}
    body{font-family:Inter,sans-serif;background:linear-gradient(135deg,#4D8DFF 0%,#1E63E9 45%,#0E3FAE 100%);color:#fff;overflow-x:hidden;min-height:100vh;}
    .top-nav{position:sticky;top:0;z-index:100;height:64px;display:flex;align-items:center;padding:0 40px;background:rgba(6,13,31,.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08);gap:32px;}
    .top-nav .logo img{height:44px;}
    .top-nav .nav-links{display:flex;gap:24px;margin-left:auto;}
    .top-nav .nav-links a{color:rgba(255,255,255,.75);text-decoration:none;font-size:14px;font-weight:600;transition:color .2s;}
    .top-nav .nav-links a:hover,.top-nav .nav-links a.active{color:#fff;}
    .top-nav .nav-btns{display:flex;gap:10px;margin-left:24px;}
    .btn-outline-w{padding:8px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .2s;}
    .btn-outline-w:hover{border-color:rgba(255,255,255,.6);color:#fff;}
    .btn-grad{padding:8px 18px;border-radius:20px;border:none;background:linear-gradient(100deg,#e028d6,#087dff);color:#fff;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;box-shadow:0 0 20px rgba(97,80,255,.4);} 
    .hero{position:relative;padding:100px 40px 80px;text-align:center;overflow:hidden;}
    .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(59,130,246,.25) 0%,transparent 65%);} 
    .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.4);border-radius:20px;padding:6px 18px;font-size:12px;font-weight:600;color:#c084fc;margin-bottom:24px;}
    .hero h1{font-size:56px;font-weight:800;letter-spacing:-2px;line-height:1;margin-bottom:20px;}
    .hero h1 span{background:linear-gradient(90deg,#a855f7,#3b82f6);-webkit-background-clip:text;color:transparent;}
    .hero p{color:rgba(255,255,255,.8);font-size:17px;max-width:620px;margin:0 auto 30px;line-height:1.7;}
    .hero-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
    section{padding:80px 40px;}
    .container{max-width:1200px;margin:0 auto;}
    .sec-label{display:inline-block;background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.4);border-radius:20px;padding:5px 16px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#c084fc;margin-bottom:16px;}
    .sec-label.blue{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.4);color:#60a5fa;}
    h2.sec-title{font-size:40px;font-weight:800;letter-spacing:-1.5px;margin-bottom:12px;}
    h2.sec-title span{background:linear-gradient(90deg,#a855f7,#3b82f6);-webkit-background-clip:text;color:transparent;}
    .sec-sub{color:rgba(255,255,255,.75);font-size:15px;max-width:620px;line-height:1.7;margin-bottom:48px;}
    .feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;}
    .feature-card,.feature-visual{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:32px;box-shadow:0 20px 60px rgba(9,17,41,.25);}
    .feature-card ul{padding-left:18px;color:rgba(255,255,255,.8);line-height:1.8;margin:0;}
    .feature-card li{margin-bottom:8px;}
    .feature-visual img{width:100%;border-radius:18px;display:block;box-shadow:0 18px 50px rgba(0,0,0,.2);} 
    .tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
    .tech-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:32px 28px;transition:transform .3s,border-color .3s,box-shadow .3s;}
    .tech-card:hover{transform:translateY(-8px);border-color:rgba(168,85,247,.5);box-shadow:0 20px 50px rgba(168,85,247,.2);} 
    .tech-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;font-size:22px;}
    .tech-card h4{font-size:17px;font-weight:700;margin-bottom:10px;}
    .tech-card p{color:rgba(255,255,255,.7);font-size:13px;line-height:1.7;margin:0;}
    .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:60px;}
    .stat-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px 20px;text-align:center;}
    .stat-box .num{font-size:36px;font-weight:800;background:linear-gradient(90deg,#a855f7,#3b82f6);-webkit-background-clip:text;color:transparent;}
    .stat-box .lab{color:rgba(255,255,255,.7);font-size:13px;margin-top:6px;}
    .stack-list{display:flex;flex-direction:column;gap:16px;}
    .stack-item{display:flex;align-items:center;gap:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px 24px;transition:border-color .2s;}
    .stack-item:hover{border-color:rgba(99,102,241,.5);} 
    .stack-item .si-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0;}
    .stack-item h5{font-size:15px;font-weight:700;margin:0 0 4px;}
    .stack-item p{color:rgba(255,255,255,.7);font-size:13px;margin:0;}
    .stack-badge{margin-left:auto;background:rgba(168,85,247,.2);border:1px solid rgba(168,85,247,.4);color:#c084fc;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;white-space:nowrap;}
    .sec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
    .sec-item{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px;}
    .sec-item i{font-size:22px;margin-top:2px;flex-shrink:0;}
    .sec-item h5{font-size:15px;font-weight:700;margin:0 0 6px;}
    .sec-item p{color:rgba(255,255,255,.7);font-size:13px;margin:0;line-height:1.6;}
    footer{background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.08);padding:30px 40px;text-align:center;color:rgba(255,255,255,.7);font-size:13px;}
    footer a{color:rgba(255,255,255,.75);text-decoration:none;margin:0 12px;}
    footer a:hover{color:#fff;}
    @media(max-width:991px){.feature-grid{grid-template-columns:1fr;}.tech-grid{grid-template-columns:repeat(2,1fr);} }
    @media(max-width:768px){.tech-grid,.stats-row,.sec-grid{grid-template-columns:1fr;}.hero h1{font-size:36px;}.top-nav{padding:0 16px;}.top-nav .nav-links{display:none;}.top-nav .nav-btns{margin-left:auto;}} 
  </style>
</head>
<body>
<nav class="top-nav">
  <a href="index.php"><img src="DRM.png" alt="HealthLink"></a>
  <div class="nav-links">
    <a href="index.php?open=patientLoginModal">For Patients</a>
    <a href="index.php?open=doctorLoginModal">For Doctors</a>
    <a href="technology.php" class="active">Technology</a>
    <a href="about.php">About</a>
    <a href="contact.php">Contact</a>
  </div>
  <div class="nav-btns">
    <a href="index.php?open=patientLoginModal" class="btn-outline-w">Patient Login</a>
    <a href="index.php?open=registerModal" class="btn-grad">Sign Up</a>
  </div>
</nav>
<div class="hero">
  <div class="hero-badge"><i class="fas fa-microchip"></i> Powered by CarePoint AI</div>
  <h1>The Technology<br>Behind <span>HealthLink</span></h1>
  <p>HealthLink combines AI, secure cloud workflows, and the DRM HealthLink Kiosk to make healthcare faster, smarter, and easier to access in Pakistan.</p>
  <div class="hero-cta">
    <a href="index.php?open=patientLoginModal" class="btn-grad">Open Patient Login</a>
    <a href="index.php?open=doctorLoginModal" class="btn-outline-w">Doctor Login</a>
  </div>
</div>
<section>
  <div class="container">
    <div class="feature-grid">
      <div class="feature-card">
        <div class="sec-label">DRM HealthLink Kiosk</div>
        <h2 class="sec-title">The Smart <span>Machine</span> at the Center</h2>
        <p class="sec-sub">The DRM kiosk acts as a digital front door for clinics and hospitals, helping patients check in, capture vital data, and start their care journey with ease.</p>
        <ul>
          <li>Real-time patient check-in and queue management.</li>
          <li>Vital capture and AI-assisted health triage.</li>
          <li>Secure appointment booking and doctor routing.</li>
          <li>Connected digital records from registration to consultation.</li>
        </ul>
      </div>
      <div class="feature-visual">
        <img src="DRM HealthLink Kiosk image 2.png" alt="DRM HealthLink Kiosk">
      </div>
    </div>
    <div class="stats-row">
      <?php foreach([['99.9%','Uptime SLA'],['<5min','Doctor Response'],['256-bit','Encryption'],['10K+','Records Stored']] as [$n,$l]): ?>
      <div class="stat-box"><div class="num"><?=$n?></div><div class="lab"><?=$l?></div></div>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<section style="padding-top:0;">
  <div class="container">
    <div class="sec-label blue">Core Technologies</div>
    <h2 class="sec-title">What Powers <span>HealthLink</span></h2>
    <p class="sec-sub">Every feature is built on a robust, modern tech stack designed for reliability and performance.</p>
    <div class="tech-grid">
      <?php
      $techs = [
        ['fa-brain','rgba(168,85,247,.2)','rgba(168,85,247,.5)','#c084fc','CarePoint AI Engine','Our proprietary AI analyzes patient symptoms, vitals, and history to provide intelligent health insights and early warning alerts.'],
        ['fa-video','rgba(59,130,246,.2)','rgba(59,130,246,.5)','#60a5fa','HD Telemedicine','End-to-end encrypted video consultations with zero-latency streaming. Works on any device, any browser — no downloads needed.'],
        ['fa-shield-alt','rgba(16,185,129,.2)','rgba(16,185,129,.5)','#6ee7b7','Military-Grade Security','bcrypt password hashing, SQL injection prevention, XSS protection, and role-based access control at every layer.'],
        ['fa-database','rgba(168,85,247,.2)','rgba(168,85,247,.5)','#c084fc','Smart Health Records','Centralized, structured health record storage with instant retrieval. Every record is versioned and audit-logged.'],
        ['fa-bell','rgba(59,130,246,.2)','rgba(59,130,246,.5)','#60a5fa','Real-time Notifications','Multi-channel notification system — in-app, SMS, and email — keeping patients and doctors always in sync.'],
        ['fa-mobile-alt','rgba(244,114,182,.2)','rgba(244,114,182,.5)','#f9a8d4','Mobile-First Design','Fully responsive interface that works seamlessly on smartphones, tablets, and desktops with native-like performance.'],
      ];
      foreach($techs as [$icon,$bg,$border,$color,$title,$desc]): ?>
      <div class="tech-card">
        <div class="tech-icon" style="background:<?=$bg?>;border:1px solid <?=$border?>;"><i class="fas <?=$icon?>" style="color:<?=$color?>;"></i></div>
        <h4><?=$title?></h4>
        <p><?=$desc?></p>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<section style="padding-top:0;">
  <div class="container">
    <div class="sec-label blue">Tech Stack</div>
    <h2 class="sec-title">Built With <span>Modern Tools</span></h2>
    <p class="sec-sub">Industry-standard technologies chosen for security, speed, and scalability.</p>
    <div class="stack-list">
      <?php
      $stack = [
        ['fa-php','rgba(99,102,241,.2)','#818cf8','PHP 8+','Backend','Robust server-side logic with prepared statements and OOP architecture.'],
        ['fa-database','rgba(59,130,246,.2)','#60a5fa','MySQL 8','Database','Relational database with full ACID compliance, indexing, and audit trails.'],
        ['fa-bootstrap','rgba(168,85,247,.2)','#c084fc','Bootstrap 5','Frontend','Responsive UI framework with custom dark-mode design system.'],
        ['fa-lock','rgba(16,185,129,.2)','#6ee7b7','bcrypt + SSL','Security','Password hashing and HTTPS encryption on all data in transit and at rest.'],
        ['fa-server','rgba(244,114,182,.2)','#f9a8d4','Apache / cPanel','Hosting','Production-grade web server with .htaccess security rules.'],
      ];
      foreach($stack as [$icon,$bg,$color,$name,$cat,$desc]): ?>
      <div class="stack-item">
        <div class="si-icon" style="background:<?=$bg?>;"><i class="fab <?=$icon?>" style="color:<?=$color?>;font-size:22px;"></i></div>
        <div><h5><?=$name?></h5><p><?=$desc?></p></div>
        <span class="stack-badge"><?=$cat?></span>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<section style="padding-top:0;">
  <div class="container">
    <div class="sec-label">Security</div>
    <h2 class="sec-title">Your Data is <span>Safe With Us</span></h2>
    <p class="sec-sub">We take security seriously at every level of the platform.</p>
    <div class="sec-grid">
      <?php
      $secs = [
        ['fa-key','#c084fc','Password Security','All passwords are hashed with bcrypt (cost factor 12). Plain-text passwords are never stored or transmitted.'],
        ['fa-shield-virus','#60a5fa','SQL Injection Prevention','Every database query uses prepared statements with parameterized inputs — zero raw SQL from user input.'],
        ['fa-user-lock','#6ee7b7','Role-Based Access','Patients, doctors, and admins each have isolated sessions and permissions. Cross-role access is blocked at every endpoint.'],
        ['fa-file-shield','#f9a8d4','Secure File Uploads','Uploaded documents are validated by type and size, stored outside web root, and served through authenticated endpoints.'],
        ['fa-clock-rotate-left','#c084fc','Audit Logging','Every critical action — login, record access, appointment change — is logged with timestamp and user ID.'],
        ['fa-network-wired','#60a5fa','XSS Protection','All user inputs are sanitized with htmlspecialchars() and strip_tags() before rendering or storage.'],
      ];
      foreach($secs as [$icon,$color,$title,$desc]): ?>
      <div class="sec-item">
        <i class="fas <?=$icon?>" style="color:<?=$color?>;"></i>
        <div><h5><?=$title?></h5><p><?=$desc?></p></div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<footer>
  <div>© <?= date('Y') ?> HealthLink. All rights reserved. Powered by CarePoint AI.</div>
  <div style="margin-top:10px;">
    <a href="index.php">Home</a>
    <a href="about.php">About</a>
    <a href="technology.php">Technology</a>
    <a href="contact.php">Contact</a>
    <a href="privacy.php">Privacy</a>
    <a href="terms.php">Terms</a>
  </div>
</footer>
