---
type Link = {
  label: string;
  href: string;
};

type Props = {
  eyebrow?: string;
  title: string;
  description: string;
  summary: string;
  highlights: string[];
  links: Link[];
};

const {
  eyebrow = 'Academics',
  title,
  description,
  summary,
  highlights,
  links,
} = Astro.props;
---

<section class="border-b bg-muted/40">
  <div class="container py-14 md:py-18">
    <p class="text-sm font-medium text-secondary">
      Department of Computer Science &amp; Engineering, IIT Gandhinagar
    </p>
    <div class="mt-5 grid gap-8 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start">
      <div class="max-w-3xl">
        <h1 class="text-3xl font-semibold leading-tight md:text-5xl">
          {title}
        </h1>
        <p class="mt-5 text-lg leading-relaxed text-muted-foreground">
          {description}
        </p>
      </div>
      <aside class="rounded-lg border border-border bg-card p-5 shadow-sm">
        <p class="font-semibold">More information</p>
        <div class="mt-4 space-y-3">
          {
            links.map((link) => (
              <a
                href={link.href}
                class="block text-sm font-medium text-primary underline-offset-4 hover:underline"
                target={link.href.startsWith('http') ? '_blank' : undefined}
                rel={link.href.startsWith('http') ? 'noreferrer' : undefined}
              >
                {link.label} -&gt;
              </a>
            ))
          }
        </div>
      </aside>
    </div>
  </div>
</section>

<section class="section-padding">
  <div class="container">
    <div class="max-w-3xl">
      <p class="text-sm font-medium text-secondary">{eyebrow}</p>
      <h2 class="mt-3 text-2xl font-semibold md:text-3xl">
        Overview
      </h2>
      <p class="mt-3 leading-relaxed text-muted-foreground">
        {summary}
      </p>
    </div>

    <div class="mt-8 grid gap-4 md:grid-cols-2">
      {
        highlights.map((highlight) => (
          <article class="rounded-lg border border-border bg-card p-5 shadow-sm">
            <p class="leading-relaxed text-muted-foreground">{highlight}</p>
          </article>
        ))
      }
    </div>
  </div>
</section>
