---
import JeeOpenHousePromo from '@/components/sections/jee-open-house-promo.astro';
import DefaultLayout from '@/layouts/DefaultLayout.astro';
import { ArrowRight, CalendarDays } from 'lucide-react';

const theoryDayRegistrationLink = 'https://forms.gle/sqqoh4JftBfKYA1b8';
---

<DefaultLayout
  title="Deadlines"
  description="Upcoming important dates, sessions, and application deadlines."
>
  <section class="from-primary/5 border-b 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">
        Updates
      </p>
      <h1 class="mt-3 text-3xl font-semibold md:text-5xl">Deadlines</h1>
      <p class="text-muted-foreground mt-4 max-w-2xl text-lg leading-relaxed">
        Upcoming important dates, information sessions, and application-related
        announcements.
      </p>
    </div>
  </section>

  <section class="section-padding">
    <div class="container">
      <div class="mb-6">
        <p class="text-secondary text-sm font-medium">Upcoming</p>
        <h2 class="mt-3 text-2xl font-semibold md:text-3xl">
          Registration deadlines
        </h2>
      </div>

      <article class="rounded-lg border bg-background p-6 shadow-sm">
        <div class="grid gap-6 md:grid-cols-[12rem_1fr_auto] md:items-center">
          <div class="flex items-center gap-3">
            <span class="inline-flex size-11 items-center justify-center rounded-full bg-secondary/10 text-secondary">
              <CalendarDays className="size-5" aria-hidden="true" />
            </span>
            <div>
              <p class="text-muted-foreground text-sm">Deadline</p>
              <p class="text-lg font-semibold">15 Jun 2026</p>
            </div>
          </div>

          <div>
            <h3 class="text-xl font-semibold">
              Theory Day: Foundations of Computer Science
            </h3>
            <p class="text-muted-foreground mt-2 text-sm leading-relaxed">
              Register for the 17 June 2026 Theory Day. Schedule, talk titles,
              and abstracts will be posted on the event page soon.
            </p>
          </div>

          <div class="flex flex-wrap gap-3 md:justify-end">
            <a
              href="/events/theory-day-2026"
              class="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition hover:border-secondary hover:text-secondary"
            >
              Event page
              <ArrowRight className="size-4" aria-hidden="true" />
            </a>
            <a
              href={theoryDayRegistrationLink}
              class="inline-flex items-center gap-2 rounded-full bg-foreground px-4 py-2 text-sm font-medium text-background transition hover:bg-secondary"
              target="_blank"
              rel="noreferrer"
            >
              Register
              <ArrowRight className="size-4" aria-hidden="true" />
            </a>
          </div>
        </div>
      </article>
    </div>
  </section>

  <JeeOpenHousePromo variant="deadlines" />
</DefaultLayout>
