[slug].astro

---
import Rosow1 from '@assets/events/forschungsraum/rosow_01.jpg';
import Rosow2 from '@assets/events/forschungsraum/rosow_02.jpg';
import Rosow3 from '@assets/events/forschungsraum/rosow_03.jpg';
import Rosow4 from '@assets/events/forschungsraum/rosow_04.jpg';
import Rosow5 from '@assets/events/forschungsraum/rosow_05.jpg';
import Rosow6 from '@assets/events/forschungsraum/rosow_06.jpg';
import ArrowLeft from '@assets/icons/ArrowLeft.svelte';
import CalendarIcon from '@assets/icons/CalendarIcon.svelte';
import HandWithMoney from '@assets/icons/HandWithMoney.svelte';
import LocationPin from '@assets/icons/LocationPin.svelte';
import People from '@assets/icons/People.svelte';
import Button from '@components/Button.astro';
import { eventData, type EventPage } from '@data';
import Layout from '@layouts/Layout.astro';
import { Image } from 'astro:assets';

let { event }: { event: EventPage } = Astro.props;

export async function getStaticPaths() {
  let events = await eventData.getAllPages();

  return events.map((event) => {
    return {
      params: { slug: event.slug },
      props: { event },
    };
  });
}

// SSR does not use getStaticPaths so the props will be empty
if (event == null && process.env.PREVIEW_DEPLOYMENT === 'true') {
  event = (await getStaticPaths().then(
    (paths) => paths.find((p) => p.params.slug === Astro.params.slug)?.props.event,
  )) as EventPage;
}

const locationPictures = [
  {
    alt: 'Ein 2-stöckiges rotes Backsteinhaus mit Garten und Windrädern am Horizont.',
    src: Rosow1,
  },
  {
    alt: 'Die Sonne scheint von hinten durch ein Baumhaus. Im rechten Vordergrund steht ein lila blühender Fliederbusch.',
    src: Rosow2,
  },
  { alt: 'Ein blühender Apfelbaum steht im Garten vor einem roten Backsteinhaus.', src: Rosow3 },
  { alt: 'Die Sonne geht hinter Windrädern unter, mit Blick über ein Getreidefeld.', src: Rosow4 },
  { alt: 'Zelte stehen zwischen Büschen und Bäumen im Garten.', src: Rosow5 },
  {
    alt: 'Menschen sitzen und stehen um ein Lagerfeuer. Oben hängt eine Discokugel, die blau angeleuchtet wird.',
    src: Rosow6,
  },
];
---

<Layout title={event.title}>
  <Image
    class="h-[27rem] w-full object-cover"
    loading="eager"
    {...event.heroImage}
    sizes="100vw"
    widths={[325, 721, 920, 1080, 1290, 1480, 1640, 1780, 1920, 2048]}
  />
  <div class="pr-4 lg:pr-20">
    <div class="flex h-12 w-full items-center rounded-br-xl bg-yellow-500/60 lg:text-xl">
      <a class="p-3" href="/events">
        <ArrowLeft />
        <span class="sr-only">Zur vorherigen Seite</span>
      </a>
      Veranstaltungen
    </div>
  </div>

  <div class="mx-auto max-w-[80rem] px-4 pt-12 lg:px-20 lg:text-xl">
    <h1 class="font-serif text-4xl font-bold lg:text-5xl">{event.title}</h1>
    <div class="mt-6 lg:mt-14 lg:px-24">
      <h2 class="font-serif text-2xl font-bold lg:text-4xl">Wichtige Infos</h2>
      <div
        class="mt-16 grid grid-cols-2 gap-x-6 gap-y-14 px-4 text-center lg:grid-cols-4 lg:px-0 lg:text-left"
      >
        <div class="flex flex-col items-center">
          <div
            class="flex h-40 w-40 items-center justify-center rounded-full bg-yellow-700 shadow-xl"
          >
            <LocationPin class="h-24 w-24" />
          </div>
          <h3 class="mt-8 font-serif text-xl font-bold">Wo</h3>
          <!-- TODO: Add link from CMS -->
          <a class="mt-3 text-center underline" href="https://maps.app.goo.gl/kak1RX8pJwZGnFFD7">
            <address class="not-italic">
              {event.address.street}<br />
              {event.address.zip}
              {event.address.city}
            </address>
          </a>
        </div>

        <div class="flex flex-col items-center">
          <div
            class="flex h-40 w-40 items-center justify-center rounded-full bg-yellow-700 shadow-xl"
          >
            <People class="h-24 w-24" />
          </div>
          <h3 class="mt-8 font-serif text-xl font-bold">Wer</h3>
          <p class="mt-3 text-center">{event.audience}</p>
        </div>
        <div class="flex flex-col items-center">
          <div
            class="flex h-40 w-40 items-center justify-center rounded-full bg-yellow-700 shadow-xl"
          >
            <CalendarIcon class="h-24 w-24" />
          </div>
          <h3 class="mt-8 font-serif text-xl font-bold">Wann</h3>
          <p class="mt-3 text-center">
            {
              event.start.getMonth() === event.end.getMonth()
                ? event.start.toLocaleDateString('de', { day: '2-digit' })
                : event.start.toLocaleDateString('de', { day: '2-digit', month: 'long' })
            } - {event.end.toLocaleDateString('de', { day: '2-digit', month: 'long' })}
          </p>
        </div>
        <div class="flex flex-col items-center">
          <div
            class="flex h-40 w-40 items-center justify-center rounded-full bg-yellow-700 shadow-xl"
          >
            <HandWithMoney class="h-24 w-24" />
          </div>
          <h3 class="mt-8 font-serif text-xl font-bold">Kosten</h3>
          <p class="mt-3 text-center">{event.cost}</p>
          <p class="text-center text-sm">(inkl. Verpflegung & Unterkunft)</p>
        </div>
      </div>
      <div class="mt-20 lg:mt-28">
        <h2 class="font-serif text-2xl font-bold lg:text-4xl">
          {event.contentTitle}
        </h2>
        <div
          class="prose prose-neutral lg:prose-xl mt-4 max-w-prose text-justify leading-7 lg:mt-8"
        >
          <p set:html={event.content_html} />
        </div>

        <Button
          class="mt-12 uppercase lg:mt-8"
          color="dark"
          href={event.registrationLink}
          text="Jetzt Anmelden"
        />
      </div>
    </div>

    {
      event.timetable && (
        <div class="mx-auto mt-6 max-w-[80rem] pt-12 lg:mt-14 lg:text-xl">
          <Image
            {...event.timetable}
            class="w-full object-cover"
            sizes="100vw"
            widths={[360, 540, 720, 960, 1200, 1920]}
          />
        </div>
      )
    }
    <div class="mx-auto mt-6 max-w-[80rem] px-4 lg:mt-12 lg:px-24">
      {
        event.team?.length != 0 && (
          <div>
            <h2 class="font-serif text-2xl font-bold lg:text-4xl">Begleitung und Referierende</h2>
            <div class="-mt-4 grid grid-cols-1 gap-x-6 lg:-mt-6 lg:grid-cols-2 lg:gap-x-12">
              {event.team?.map(async (member) => (
                <div class="row-span-3 mt-8 lg:mt-16">
                  <Image
                    {...member.image}
                    class="aspect-square rounded-lg object-cover object-center"
                    sizes="(min-width: 1024px) 40rem, 100vw"
                    widths={[360, 440, 540, 720, 1024]}
                  />
                  <div class="mt-2 lg:mt-4">
                    <p class="text-xl font-bold lg:text-2xl">{member.name}</p>
                    <p class="text-sm text-gray-700">{member.job}</p>
                  </div>
                  <p class="mt-4 text-justify lg:mt-6">{member.bio}</p>
                </div>
              ))}
            </div>
          </div>
        )
      }
      <!-- TODO: Allow different locations than Rosow -->
      <div class="py-12">
        <h2 class="font-serif text-2xl font-bold lg:text-4xl">Veranstaltungsort Rosow</h2>
        <p class="mt-3">Der Forschungsraum findet im idyllischen Rosow statt.</p>
        <p>Vegane Verpflegung und Unterkunft sind wie immer inklusive.</p>
        <div class="mt-4 grid grid-cols-1 lg:mt-8 lg:grid-cols-3">
          {
            locationPictures.map((image) => (
              <Image
                alt={image.alt}
                class="aspect-square w-full object-cover"
                sizes="(min-width: 1340px) 309px, (min-width: 1040px) calc(28.57vw - 68px), calc(100vw - 64px)"
                src={image.src}
                widths={[310, 400, 540, 720, 1024]}
              />
            ))
          }
        </div>
        <Button
          class="mt-12 uppercase lg:mt-8"
          color="dark"
          href={event.registrationLink}
          text="Jetzt Anmelden"
        />
      </div>
      {
        event.sponsorLogo && (
          <div class="py-12">
            <h2 class="font-serif text-2xl font-bold lg:text-4xl">Förderung</h2>
            <Image {...event.sponsorLogo} class="mt-3 w-full max-w-md" />
          </div>
        )
      }
    </div>
  </div>
</Layout>