@if (staffName()) {
    <button (click)="selectStaffMember(undefined)" class="mb-4 text-blue-500 hover:text-blue-700 underline">← Back to Staff</button>
    <h1 class="text-4xl font-bold">{{getName()}}</h1>
    <img src="https://cdn.nhcarrigan.com/lore/characters/{{staffName()}}.png" alt="{{getName()}}" class="w-full mx-auto mb-1" />
    @for (bio of getBio(); track bio) {
        <p>{{bio}}</p>
    }
}
@if (!staffName()) {
<h1 class="text-4xl font-bold">OUR STAFF</h1>

<img src="https://cdn.nhcarrigan.com/team.png" alt="NHCarrigan Team" class="w-full mx-auto mb-1" />
<p>If you have a problem that cannot be solved by standard technical support, you call a consultant. If you have a problem that threatens to collapse your entire digital infrastructure, ruins your reputation, or exposes secrets that should remain buried, and you have an exorbitant amount of money to spend... you call NHCarrigan.</p>
<p>To the outside world, NHCarrigan is a boutique technology consulting firm—exclusive, reclusive, and miraculously efficient. They have no physical headquarters listed on Google Maps, only a sleek, encrypted web portal. Their clients are Fortune 500 CEOs, government agencies, and desperate power-brokers who whisper that the firm can fix the unfixable overnight.</p>
<p>But those who actually make it through the vetting process realize very quickly that NHCarrigan is not a normal company.</p>
<p>There is a strange, cold precision to the way they operate. They move with the coordination of a military unit and the intimacy of a family. They share a surname, though they share no blood. They are a Coven in pinstripes; an RPG party disguised in haute couture. They are a family forged in trauma and bound by secrets, operating in the liminal space between the modern digital world and the ancient shadows that lie beneath it.</p>
<p>Walk into their inner sanctum, and you will find the team that keeps the lights on:</p>

<div class="staff-member">
  <img src="https://cdn.nhcarrigan.com/profile.png" alt="Naomi Carrigan" class="staff-image" />
  <div class="staff-content">
    <p class="staff-title">The Mother (Chief Hexecutive Officer)</p>
    <p class="staff-quote">I've seen empires fall. Your server crash is manageable.</p>
    <p class="staff-link"><button (click)="selectStaffMember('naomi')" class="underline">[Meet The Ghost]</button></p>
  </div>
</div>

<div class="staff-member">
  <img src="https://cdn.nhcarrigan.com/hikari.png" alt="Hikari Carrigan" class="staff-image" />
  <div class="staff-content">
    <p class="staff-title">The Operator (Chief Operating Officer)</p>
    <p class="staff-quote">I handle the logistics. And the lawyers. And the reality checks.</p>
    <p class="staff-link"><button (click)="selectStaffMember('hikari')" class="underline">[Meet The Shield]</button></p>
  </div>
</div>

<div class="staff-member">
  <img src="https://cdn.nhcarrigan.com/amari.png" alt="Amari Carrigan" class="staff-image" />
  <div class="staff-content">
    <p class="staff-title">The Supporter (Executive Assistant)</p>
    <p class="staff-quote">Need a coffee? A blood bag? A hug? I have all three!</p>
    <p class="staff-link"><button (click)="selectStaffMember('amari')" class="underline">[Meet The Heart]</button></p>
  </div>
</div>

<div class="staff-member">
  <img src="https://cdn.nhcarrigan.com/keiko.png" alt="Keiko Carrigan" class="staff-image" />
  <div class="staff-content">
    <p class="staff-title">The Protector (Chief Security Officer)</p>
    <p class="staff-quote">I've seen empires fall. Your server crash is manageable.</p>
    <p class="staff-link"><button (click)="selectStaffMember('keiko')" class="underline">[Meet The Blade]</button></p>
  </div>
</div>

<div class="staff-member">
  <img src="https://cdn.nhcarrigan.com/yumiko.png" alt="Yumiko Carrigan" class="staff-image" />
  <div class="staff-content">
    <p class="staff-title">The Engineer (Chief Technology Officer)</p>
    <p class="staff-quote">If it works, don't touch it. If it starts smoking, wake me up.</p>
    <p class="staff-link"><button (click)="selectStaffMember('yumiko')" class="underline">[Meet The Static]</button></p>
  </div>
</div>

<div class="staff-member">
  <img src="https://cdn.nhcarrigan.com/tatsumi.png" alt="Tatsumi Carrigan" class="staff-image" />
  <div class="staff-content">
    <p class="staff-title">The Artist (Chief Design Officer)</p>
    <p class="staff-quote">Accessibility is mandatory. Making it look cool is just a bonus.</p>
    <p class="staff-link"><button (click)="selectStaffMember('tatsumi')" class="underline">[Meet The Prism]</button></p>
  </div>
</div>

<div class="staff-member">
  <img src="https://cdn.nhcarrigan.com/reina.png" alt="Reina Carrigan" class="staff-image" />
  <div class="staff-content">
    <p class="staff-title">The Strategist (Chief Legal Officer)</p>
    <p class="staff-quote">Every contract has a loophole. Unless I wrote it.</p>
    <p class="staff-link"><button (click)="selectStaffMember('reina')" class="underline">[Meet The Handshake]</button></p>
  </div>
</div>

<div class="staff-member">
  <img src="https://cdn.nhcarrigan.com/minori.png" alt="Minori Carrigan" class="staff-image" />
  <div class="staff-content">
    <p class="staff-title">The Librarian (Chief Compliance Officer)</p>
    <p class="staff-quote">Access denied. You didn't read the documentation.</p>
    <p class="staff-link"><button (click)="selectStaffMember('minori')" class="underline">[Meet The Codex]</button></p>
    </div>
  </div>
}