<?php
$page_title = 'HR Services';
require_once __DIR__ . '/header.php';
?>

<div class="grid-3">
  <!-- Reimbursement Claim -->
  <div class="card" style="text-align:center;">
    <div style="width:60px;height:60px;border-radius:50%;background:#e0f2fe;color:#0ea5e9;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px;">
      <i class="fas fa-money-check-alt"></i>
    </div>
    <h3 style="margin:0 0 8px;color:#0f172a;">Reimbursement Claim</h3>
    <p style="color:#64748b;font-size:.85rem;margin-bottom:16px;">Submit expenses for approval</p>
    <button class="btn-primary" style="width:100%;padding:10px;background:#2557d6;color:#fff;border:none;border-radius:6px;cursor:pointer;">Apply Now</button>
  </div>

  <!-- Loan / Advance -->
  <div class="card" style="text-align:center;">
    <div style="width:60px;height:60px;border-radius:50%;background:#dcfce7;color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px;">
      <i class="fas fa-hand-holding-usd"></i>
    </div>
    <h3 style="margin:0 0 8px;color:#0f172a;">Loan / Advance</h3>
    <p style="color:#64748b;font-size:.85rem;margin-bottom:16px;">Request salary advance</p>
    <button class="btn-primary" style="width:100%;padding:10px;background:#2557d6;color:#fff;border:none;border-radius:6px;cursor:pointer;">Request Advance</button>
  </div>

  <!-- Bonafide Certificate -->
  <div class="card" style="text-align:center;">
    <div style="width:60px;height:60px;border-radius:50%;background:#fef3c7;color:#d97706;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px;">
      <i class="fas fa-certificate"></i>
    </div>
    <h3 style="margin:0 0 8px;color:#0f172a;">Bonafide Certificate</h3>
    <p style="color:#64748b;font-size:.85rem;margin-bottom:16px;">Request employment proof</p>
    <button class="btn-primary" style="width:100%;padding:10px;background:#2557d6;color:#fff;border:none;border-radius:6px;cursor:pointer;">Request Certificate</button>
  </div>

  <!-- NOC Request -->
  <div class="card" style="text-align:center;">
    <div style="width:60px;height:60px;border-radius:50%;background:#fee2e2;color:#ef4444;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px;">
      <i class="fas fa-file-signature"></i>
    </div>
    <h3 style="margin:0 0 8px;color:#0f172a;">NOC Request</h3>
    <p style="color:#64748b;font-size:.85rem;margin-bottom:16px;">Apply for No Objection Certificate</p>
    <button class="btn-primary" style="width:100%;padding:10px;background:#2557d6;color:#fff;border:none;border-radius:6px;cursor:pointer;">Apply NOC</button>
  </div>

  <!-- ID Card Request -->
  <div class="card" style="text-align:center;">
    <div style="width:60px;height:60px;border-radius:50%;background:#f3e8ff;color:#9333ea;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px;">
      <i class="fas fa-id-badge"></i>
    </div>
    <h3 style="margin:0 0 8px;color:#0f172a;">ID Card Request</h3>
    <p style="color:#64748b;font-size:.85rem;margin-bottom:16px;">Request for a new or replacement ID</p>
    <button class="btn-primary" style="width:100%;padding:10px;background:#2557d6;color:#fff;border:none;border-radius:6px;cursor:pointer;">Request ID</button>
  </div>

  <!-- Referral Candidate -->
  <div class="card" style="text-align:center;">
    <div style="width:60px;height:60px;border-radius:50%;background:#f1f5f9;color:#475569;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px;">
      <i class="fas fa-user-plus"></i>
    </div>
    <h3 style="margin:0 0 8px;color:#0f172a;">Employee Referral</h3>
    <p style="color:#64748b;font-size:.85rem;margin-bottom:16px;">Refer candidates for open roles</p>
    <button class="btn-primary" style="width:100%;padding:10px;background:#2557d6;color:#fff;border:none;border-radius:6px;cursor:pointer;">Refer a Candidate</button>
  </div>
</div>

<?php require_once __DIR__ . '/footer.php'; ?>
