---
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 orgs = [
    {
        url: "https://hamburg.ccc.de",
        image: "/ccchh.svg",
        alt: "Logo des Chaos Computer Club Hamburg e.V.",
        name: "Chaos Computer Club Hamburg",
        info: "Wir sind die lokale Gruppe des Chaos Computer Club in Hamburg: Eine Gruppe von Menschen, die ein Interesse am kreativen Umgang mit Technik teilen. Unsere Gesprächsthemen und Projekte reichen von Soft- und Hardware zu Datenschutz und Netzpolitik.",
    },
    {
        url: "https://www.wauland.de",
        image: "/wauland.svg",
        alt: "Logo der Wau-Holland-Stiftung",
        name: "Wau-Holland-Stiftung",
        info: "Unser Anliegen ist es, die freidenkerischen Ansätze Wau Hollands zu bewahren und weiterzuführen.",
    },
]

const partners = [
    {
        url: "https://digitalcourage.de/treffen-vor-ort/hamburg",
        image: "/digitalcourage.svg",
        alt: "Logo der Digitalcourage e.V. Ortsgruppe Hamburg",
        name: "Digitalcourage e.V. Ortsgruppe Hamburg",
        info: "Wir engagieren uns in Hamburg gegen Digitalzwang und für digitale Souveränität.",
    },
    {
        url: "https://wiki.openstreetmap.org/w/index.php?title=Hamburg",
        image: "/osm.svg",
        alt: "Logo der Hamburger OpenStreetMap Community",
        name: "Hamburger OpenStreetMap Community",
        info: "Wir sind keine feste Organisation aber eine Gruppe von Menschen, die gemeinsam in Hamburg und Umgebung Daten zum OpenStreetMap Projekt beitragen.",
    },
    {
        url: "https://mastodon.online/@citydata",
        image: "/citydataexplosion.svg",
        alt: "Logo von city/data/explosion",
        name: "city/data/explosion",
        info: "Projekte und Veranstaltungen zu Stadt, Öffentlichkeit und Digitalisierung",
    },
    {
        url: "https://ogrbund.de/",
        image: "/ogr.svg",
        alt: "Logo der OMAS GEGEN RECHTS",
        name: "OMAS GEGEN RECHTS",
        info: "Zivilgesellschaftliche Initiative zum Schutz der Demokratie",
    },
    {
        url: "https://endof10hh.de/",
        image: "/endof10.svg",
        alt: "Logo von End of 10",
        name: "End of 10 Hamburg",
        info: "Ziel dieser europaweiten Kampange ist es Menschen dabei zu unterstützen auf ein Linux umzusteigen, im Zuge des Support-Endes oder weil sie, einfach kein Windows mehr benutzen möchten.",
    },
    {
        url: "https://www.vhs-hamburg.de/",
        image: "/vhs.svg",
        alt: "Logo der Hamburger Volkshochschule",
        name: "Hamburger Volkshochschule",
        info: "",
    },
]
---

<Layout>

  <div class="bg-base-100">
    <div class="container p-8 max-w-2xl mx-auto">
      <h2 class="text-4xl text-center font-semibold">Veranstaltet von</h2>
    </div>
  </div>
  <div class="bg-base-200 pb-20 w-screen overflow-x-hidden">
    <div class="mask-[url(/transitions/small.svg)] bg-base-100 h-10 mask-repeat-x mask-[auto_100%]"/>
    <div class="container p-8 mx-auto">
      <div class="grid grid-cols-1 md:grid-cols-2 place-content-center place-items-center">
          {orgs.map(org => (
              <a href={org.url} class="flex flex-col items-center text-center h-full transition-colors max-w-md hover:bg-white/20 p-4 rounded-xl">
                <img alt={org.alt} src={path(import.meta.env.BASE_URL, org.image)}
                     class="max-w-60 h-40 mb-4 invert"/>
                <h3 class="font-bold link">{org.name}</h3>
                <p>
                    {org.info}
                </p>
              </a>
          ))}
      </div>
    </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">
      <h2 class="text-4xl text-center font-semibold mb-8">Partner</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 place-content-center gap-20">
          {partners.map(partner => (
              <a href={partner.url} class="flex flex-col items-center text-center group">
                <img alt={partner.alt} src={path(import.meta.env.BASE_URL, partner.image)}
                     class="max-h-40 mb-4 bg-white/40 group-hover:bg-white transition-colors p-4 rounded-xl"/>
                <h3 class="font-bold link">{partner.name}</h3>
                <p>
                    {partner.info}
                </p>
              </a>
          ))}
      </div>
    </div>
  </div>
  <Footer/>
</Layout>