<?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>About Us – 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,.2) 0%,transparent 65%);}
    .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.4);border-radius:20px;padding:6px 18px;font-size:12px;font-weight:600;color:#60a5fa;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,#3b82f6,#a855f7);-webkit-background-clip:text;color:transparent;}
    .hero p{color:rgba(255,255,255,.8);font-size:17px;max-width:560px;margin:0 auto;line-height:1.7;}
    section{padding:80px 40px;}
    .container{max-width:1100px;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:520px;line-height:1.7;margin-bottom:48px;}
    .mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;}
    .mission-text h3{font-size:28px;font-weight:800;margin-bottom:16px;}
    .mission-text p{color:rgba(255,255,255,.8);font-size:15px;line-height:1.8;margin-bottom:16px;}
    .mission-visual{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px;display:flex;flex-direction:column;gap:20px;box-shadow:0 20px 60px rgba(9,17,41,.25);}
    .mv-item{display:flex;align-items:center;gap:16px;}
    .mv-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0;}
    .mv-item h5{font-size:15px;font-weight:700;margin:0 0 4px;}
    .mv-item p{color:rgba(255,255,255,.7);font-size:13px;margin:0;}
    .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
    .val-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:28px;text-align:center;transition:transform .3s,border-color .3s;box-shadow:0 16px 40px rgba(9,17,41,.18);}
    .val-card:hover{transform:translateY(-6px);border-color:rgba(168,85,247,.4);} 
    .val-card i{font-size:32px;margin-bottom:16px;display:block;}
    .val-card h4{font-size:16px;font-weight:700;margin-bottom:8px;}
    .val-card p{color:rgba(255,255,255,.7);font-size:13px;line-height:1.6;margin:0;}
    .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
    .stat-box{background:rgba(255,255,255,.08);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;}
    .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
    .team-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:32px 24px;text-align:center;transition:transform .3s,border-color .3s;box-shadow:0 16px 40px rgba(9,17,41,.18);}
    .team-card:hover{transform:translateY(-6px);border-color:rgba(59,130,246,.4);} 
    .team-avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;font-size:28px;}
    .team-card h4{font-size:16px;font-weight:700;margin-bottom:4px;}
    .team-card .role{color:#60a5fa;font-size:13px;font-weight:600;margin-bottom:10px;}
    .team-card p{color:rgba(255,255,255,.7);font-size:13px;line-height:1.6;margin:0;}
    .cta-box{background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(59,130,246,.15));border:1px solid rgba(168,85,247,.3);border-radius:24px;padding:60px 40px;text-align:center;}
    .cta-box h2{font-size:36px;font-weight:800;margin-bottom:12px;}
    .cta-box p{color:rgba(255,255,255,.8);font-size:16px;margin-bottom:32px;}
    .cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
    .cta-btn{padding:14px 32px;border-radius:30px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;transition:opacity .2s;}
    .cta-btn.primary{background:linear-gradient(90deg,#a855f7,#3b82f6);border:none;color:#fff;box-shadow:0 0 30px rgba(168,85,247,.4);} 
    .cta-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;}
    .cta-btn:hover{opacity:.85;color:#fff;}
    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){.mission-grid,.values-grid,.stats-row,.team-grid{grid-template-columns:1fr;}}
    @media(max-width:768px){.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">Technology</a>
    <a href="about.php" class="active">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-heart"></i> Our Story</div>
  <h1>Healthcare for<br><span>Every Pakistani</span></h1>
  <p>HealthLink was founded with one mission — to make quality healthcare accessible, affordable, and digital for everyone in Pakistan.</p>
</div>
<section>
  <div class="container">
    <div class="mission-grid">
      <div class="mission-text">
        <div class="sec-label blue">Our Mission</div>
        <h3>Bridging the Gap Between<br>Patients & Doctors</h3>
        <p>Pakistan faces a critical shortage of accessible healthcare. Millions of patients struggle to find qualified doctors, manage their health records, or afford timely consultations.</p>
        <p>HealthLink solves this by connecting patients with 500+ verified specialists through a single intelligent platform — from booking to consultation to prescription, all digital.</p>
        <p>Powered by CarePoint AI, we don't just connect — we predict, monitor, and guide your health journey proactively.</p>
      </div>
      <div class="mission-visual">
        <?php
        $mvs = [
          ['fa-bullseye','rgba(168,85,247,.2)','#c084fc','Our Vision','A Pakistan where every citizen has instant access to quality healthcare, regardless of location or income.'],
          ['fa-handshake','rgba(59,130,246,.2)','#60a5fa','Our Promise','Verified doctors, secure data, transparent pricing — no hidden fees, no compromises on quality.'],
          ['fa-rocket','rgba(16,185,129,.2)','#6ee7b7','Our Goal','1 million patients served by 2026, with a network of 5,000+ verified doctors across all major cities.'],
        ];
        foreach($mvs as [$icon,$bg,$color,$title,$desc]): ?>
        <div class="mv-item">
          <div class="mv-icon" style="background:<?=$bg?>;"><i class="fas <?=$icon?>" style="color:<?=$color?>;"></i></div>
          <div><h5><?=$title?></h5><p><?=$desc?></p></div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</section>
<section style="padding-top:0;">
  <div class="container">
    <div class="stats-row">
      <?php foreach([['2023','Founded'],['500+','Verified Doctors'],['10K+','Patients Served'],['15+','Cities Covered']] 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">Our Values</div>
    <h2 class="sec-title">What We <span>Stand For</span></h2>
    <p class="sec-sub">The principles that guide every decision we make at HealthLink.</p>
    <div class="values-grid">
      <?php
      $vals = [
        ['fa-heart','#f9a8d4','Patient First','Every feature, every decision starts with one question: does this make the patient\'s experience better?'],
        ['fa-shield-alt','#6ee7b7','Trust & Safety','We verify every doctor, protect every record, and never compromise on the security of your health data.'],
        ['fa-universal-access','#60a5fa','Accessibility','Quality healthcare should not be a privilege. We work to make HealthLink affordable and available to all.'],
        ['fa-lightbulb','#c084fc','Innovation','We continuously invest in AI, telemedicine, and smart health tools to stay ahead of healthcare challenges.'],
        ['fa-handshake','#fbbf24','Transparency','Clear pricing, honest communication, and no hidden fees — always.'],
        ['fa-leaf','#6ee7b7','Sustainability','Building a healthcare platform that grows responsibly and serves Pakistan for generations to come.'],
      ];
      foreach($vals as [$icon,$color,$title,$desc]): ?>
      <div class="val-card">
        <i class="fas <?=$icon?>" style="color:<?=$color?>;"></i>
        <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">Leadership</div>
    <h2 class="sec-title">The Team Behind <span>HealthLink</span></h2>
    <p class="sec-sub">Passionate professionals dedicated to transforming healthcare in Pakistan.</p>
    <div class="team-grid">
      <?php
      $team = [
        ['fa-user-tie','rgba(168,85,247,.2)','#c084fc','Dr. Imran Malik','Chief Executive Officer','Cardiologist with 15+ years of experience. Passionate about making healthcare accessible through technology.'],
        ['fa-laptop-code','rgba(59,130,246,.2)','#60a5fa','Ahmed Raza','Chief Technology Officer','Full-stack engineer and AI specialist. Architect of the CarePoint AI engine and HealthLink platform.'],
        ['fa-stethoscope','rgba(16,185,129,.2)','#6ee7b7','Dr. Sara Khan','Chief Medical Officer','General physician and health policy expert. Leads doctor verification and clinical quality standards.'],
      ];
      foreach($team as [$icon,$bg,$color,$name,$role,$bio]): ?>
      <div class="team-card">
        <div class="team-avatar" style="background:<?=$bg?>;border:2px solid <?=$color?>;"><i class="fas <?=$icon?>" style="color:<?=$color?>;"></i></div>
        <h4><?=$name?></h4>
        <div class="role"><?=$role?></div>
        <p><?=$bio?></p>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<section style="padding-top:0;">
  <div class="container">
    <div class="cta-box">
      <h2>Join the HealthLink Family</h2>
      <p>Whether you're a patient seeking care or a doctor ready to serve — HealthLink is your platform.</p>
      <div class="cta-btns">
        <a href="index.php?open=registerModal" class="cta-btn primary"><i class="fas fa-user me-2"></i>Register as Patient</a>
        <a href="index.php?open=doctorRegisterModal" class="cta-btn secondary"><i class="fas fa-user-md me-2"></i>Join as Doctor</a>
      </div>
    </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>
