---
import Footer from "../components/Footer.astro"
import Layout from "../layouts/Layout.astro"
import {Calendar, ChevronDown} from "@lucide/astro"
import path from "../utils/path.ts"

const events = [
    {
        name: "DIDAYS 2026 Hamburg",
        path: "/hamburg/2026/",
        text: "02.-04. Oktober 2026, Kultur Palast Harburg",
    },
]
---

<Layout>
  <div class="flex flex-col">
    <h1 class="text-6xl font-bold mt-8 mb-4 flex justify-center">
      <img src={path(import.meta.env.BASE_URL, "/logo.svg")} alt="Logo von den DiDays 2026 in Hamburg"
           class="h-full"/>
    </h1>
    <div class="mask-[url(/transitions/big.svg)] bg-base-200 h-30 mask-repeat-x mask-[auto_100%]"/>
  </div>

  <div class="bg-base-200 pt-8 pb-16">
    <div class="container p-8 max-w-5xl mx-auto flex flex-col md:flex-row gap-10 items-center md:items-start">
      <p class="text-xl/8 text-center">
        Ein Wochenende digitale Selbstbestimmung: Handy, Tablet und Laptop: längst geht ohne nichts mehr. Und die Apps
        sammeln Daten und tun ihr Möglichstes, um uns nicht mehr loszulassen.
        In Vorträgen und Workshops erklären wir, wie man einen alternativen Messenger, ein freies Office oder eine
        sichere Passwortverwaltung nutzen kann. Und wir informieren über Chancen und Gefahren der digitalen Welt.<br>
        Kommt vorbei, lernt etwas und diskutiert mit uns!
      </p>
    </div>
  </div>

  <div class="bg-base-100 pb-20 w-screen overflow-x-hidden">
    <div class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%]"/>
    <div class="container p-8  mx-auto text-center text-xl/8">
      <h2 class="text-4xl font-semibold mb-8">
        Kommende Events
      </h2>
      <p class="mb-4">
        Hier veröffentlichen wir, sobald weitere Events geplant sind.<br>
        Schau solange gerne bei dem nächsten DIDay vorbei:
      </p>

      <a href="https://diday.org/de/" class="btn btn-secondary">
        diday.org
      </a>

      <h2 class="text-4xl font-semibold my-8">
        Vergangene Events
      </h2>
      <div class="flex gap-4 overflow-x-auto w-full justify-start py-6">
          {events.map(event =>
              <a href={path(import.meta.env.BASE_URL, event.path)}
                 class="card mx-auto shrink-0 w-96 bg-base-100 card-md shadow-lg border-base-200 border-2">
                <div class="card-body">
                  <h2 class="card-title">{event.name}</h2>
                  <p>{event.text}</p>
                  <div class="justify-end card-actions">
                    <button class="btn btn-base-200">Ansehen</button>
                  </div>
                </div>
              </a>,
          )}
      </div>
    </div>
  </div>

  <Footer/>
</Layout>