---
import { allDepartmentNews, CATEGORY_LABELS } from '@/data/news';

const categoryOrder = ['media', 'research', 'award', 'event', 'infrastructure'];
---

<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">
      News and awards
    </p>
    <h1 class="mt-3 text-3xl md:text-4xl">CSE in the News</h1>
    <p class="text-muted-foreground mt-4 max-w-2xl">
      Recent media coverage, research highlights, awards, and department
      achievements.
    </p>
  </div>
</section>

<section class="section-padding">
  <div class="container">
    <div class="mb-8 flex flex-wrap gap-2">
      {categoryOrder.map((category) => (
        <a
          href={`#${category}`}
          class="rounded-full border px-3 py-1 text-sm text-muted-foreground transition-colors hover:border-secondary hover:text-foreground"
        >
          {CATEGORY_LABELS[category]}
        </a>
      ))}
    </div>

    <div class="space-y-12">
      {categoryOrder.map((category) => {
        const items = allDepartmentNews.filter((item) => item.category === category);

        if (items.length === 0) return null;

        return (
          <section id={category} class="scroll-mt-24">
            <div class="mb-4 flex items-end justify-between gap-4 border-b pb-3">
              <div>
                <h2 class="text-2xl">{CATEGORY_LABELS[category]}</h2>
                <p class="text-muted-foreground mt-1 text-sm">
                  {items.length} verified item{items.length === 1 ? '' : 's'}
                </p>
              </div>
            </div>

            <div class="grid gap-4">
              {items.map((item) => (
                <article class="rounded-lg border bg-background p-5">
                  <div class="mb-3 flex flex-wrap items-center gap-2">
                    <span class="rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground">
                      {CATEGORY_LABELS[item.category]}
                    </span>
                    <span class="text-muted-foreground text-xs">
                      {item.displayDate}
                    </span>
                  </div>
                  <h3 class="text-xl font-semibold">
                    <a
                      href={item.sourceUrl}
                      target="_blank"
                      rel="noreferrer"
                      class="transition-colors hover:text-secondary"
                    >
                      {item.title}
                    </a>
                  </h3>
                  <p class="text-muted-foreground mt-2">{item.summary}</p>
                  <dl class="mt-4 grid gap-2 text-sm md:grid-cols-[8rem_1fr]">
                    <dt class="text-muted-foreground">People</dt>
                    <dd>{item.people}</dd>
                    <dt class="text-muted-foreground">Source</dt>
                    <dd>
                      <a
                        href={item.sourceUrl}
                        target="_blank"
                        rel="noreferrer"
                        class="underline underline-offset-2"
                      >
                        {item.sourceLabel}
                      </a>
                    </dd>
                  </dl>
                </article>
              ))}
            </div>
          </section>
        );
      })}
    </div>
  </div>
</section>
