---
import { CSE_STAFF, CSE_STAFF_SOURCE } from '@/data/staff';
import DefaultLayout from '@/layouts/DefaultLayout.astro';
---

<DefaultLayout title="Staff" description="Administrative and technical staff of the CSE department">
  <section class="from-primary/5 bg-gradient-to-b to-transparent py-16 md:py-20">
    <div class="container">
      <p class="text-secondary text-sm font-medium uppercase tracking-wider">People</p>
      <h1 class="mt-3 text-3xl md:text-4xl">Staff</h1>
      <p class="text-muted-foreground mt-4 max-w-2xl">
        Technical staff supporting the CSE department labs and operations.
      </p>
    </div>
  </section>

  <section class="section-padding">
    <div class="container">
      <div class="grid gap-4 md:grid-cols-2">
        {CSE_STAFF.map((member) => (
          <article class="rounded-lg border bg-background p-4">
            <div class="flex gap-4">
              <img
                src={member.image}
                alt={member.name}
                class="size-24 shrink-0 rounded-lg bg-muted object-cover"
                loading="lazy"
                referrerpolicy="no-referrer"
              />
              <div class="min-w-0">
                <h2 class="text-lg font-semibold">{member.name}</h2>
                <p class="text-muted-foreground mt-1 text-sm">
                  {member.designation}
                </p>
                <dl class="mt-4 grid gap-1 text-sm">
                  <div>
                    <dt class="text-muted-foreground inline">Email: </dt>
                    <dd class="inline">{member.emailUser}@iitgn.ac.in</dd>
                  </div>
                  {member.office && (
                    <div>
                      <dt class="text-muted-foreground inline">Office: </dt>
                      <dd class="inline">{member.office}</dd>
                    </div>
                  )}
                </dl>
              </div>
            </div>
          </article>
        ))}
      </div>
      <p class="text-muted-foreground mt-6 text-sm">
        Source: <a class="underline underline-offset-2" href={CSE_STAFF_SOURCE} target="_blank" rel="noreferrer">IITGN staff directory</a>
      </p>
    </div>
  </section>
</DefaultLayout>
