---
import { CSE_STAFF } from '@/data/staff';
import DefaultLayout from '@/layouts/DefaultLayout.astro';
import { Mail } from 'lucide-react';
---

<DefaultLayout title="Staff" description="Administrative and technical staff of the CSE department">
  <section class="from-primary/5 bg-gradient-to-b to-transparent pb-8 pt-16 md:pb-8 md:pt-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="pb-10 pt-6 md:pb-14 md:pt-8 lg:pb-16">
    <div class="container">
      <div class="grid gap-4 md:grid-cols-2">
        {CSE_STAFF.map((member) => (
          <article class="flex gap-4 rounded-lg border bg-background p-4">
            <img
              src={member.image}
              alt={member.name}
              class="size-14 shrink-0 rounded-lg bg-muted object-cover"
              loading="lazy"
              referrerpolicy="no-referrer"
            />
            <div class="min-w-0 flex-1">
              <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                  <h2 class="text-sm font-semibold leading-snug">
                    {member.name}
                  </h2>
                  <p class="text-muted-foreground text-xs">
                    {member.designation}
                  </p>
                </div>
                <a
                  href={`mailto:${member.emailUser}@iitgn.ac.in`}
                  class="text-muted-foreground hover:text-secondary shrink-0 transition-colors"
                  aria-label={`Email ${member.name}`}
                  title="Email"
                >
                  <Mail className="size-3.5" aria-hidden="true" />
                </a>
              </div>
              <dl class="mt-3 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>
          </article>
        ))}
      </div>
    </div>
  </section>
</DefaultLayout>
