---
import Card from "../components/Card.astro"
import DirectusImg from "../components/DirectusImg.astro"
import Forest from "../components/Forest.astro"
import Link from "../components/Link.astro"
import Mastodon from "../components/Mastodon.astro"
import Section from "../components/Section.astro"
import Sponsors from "../components/Sponsors.astro"
import Text from "../components/Text.astro"
import Page from "../layouts/Page.astro"
---

<Page overlap>
  <Forest>
    <p class="text-5xl sm:text-7xl">swablab</p>
    <p class="text-sm sm:text-md md:text-lg lg:text-xl">
      Die offene Werkstatt im Kreis Freudenstadt
    </p>
  </Forest>
  <a
    href="#start"
    class="absolute inset-x-0 bottom-16 flex justify-center animate-bounce"
  >
    <span class="icon-[ph--arrow-circle-down-duotone] h-16 w-16"></span>
  </a>

  <Section title="Unterstütze uns bei der Netto Vereinsspende!" jumpId="news">
    <img class="rounded-box" src="/netto.jpg" alt="Vereinsspende bei Netto" />

    <Text>
      Wir würden uns freuen, wenn du bei der Aktion "Bring dich ein für deinen
      Verein" kostenlos für uns abstimmst. Jede Stimme zählt!
    </Text>
    <Link
      text="Link zur Aktion"
      href="https://www.netto-online.de/vereinsspende/swablab-e.V..vhtm"
    />
  </Section>

  <Section title="Offene Werkstatt?" jumpId="start">
    <DirectusImg
      src="753d211b-8b28-42cb-8ddd-0777911b3511"
      alt="Kernpunkte des swablab"
      widths={[900, 500, 200]}
      format="webp"
    />
    <Text>
      Das swablab ist eine von vielen
      <Link
        text="Offenen Werkstätten"
        href="https://www.offene-werkstaetten.org"
      />
      in Deutschland.
    </Text>
    <Text>
      In einer offenen Werkstatt stehen Werkzeuge, Materialien und Ressourcen
      zur Verfügung, die von den Teilnehmern gemeinsam genutzt werden können.
    </Text>
    <Text>
      Wir bieten dir einen offenen und zugänglichen Raum, um deine Fertigkeiten
      zu erweitern, neue Interessen zu entdecken und deine Ideen zu
      verwirklichen.
    </Text>
  </Section>

  <Section title="Was gibt's neues?" jumpId="news">
    <Mastodon />
  </Section>

  <Section title="Unsere Sponsoren" jumpId="sponsors">
    <Sponsors />
  </Section>

  <Section title="Was interessiert dich?" jumpId="services">
    <Card
      name="Über uns"
      image="19b641b1-3c6e-423c-8b3b-b4d1ac03fa5e"
      link="/about"
      small
    >
      Erfahre mehr über unseren Verein, die Mitglieder, und unsere Geschichte.
    </Card>
    <Card
      name="Die Werkstatt"
      image="86f806a0-e7d1-4705-9393-190a161c5528"
      link="/lab"
      small
    >
      Infos über unsere Ausstattung und wo du uns findest.
    </Card>
    <Card
      name="3D Druck Service"
      image="8ea26dab-96b7-4a99-afb2-6855f2bdb5ab"
      link="/3d-print"
      small
    >
      Erfahre, wie du ein 3D-Modell demnächst in deinen Händen halten kannst.
    </Card>
    <Card
      name="Mitglied werden"
      image="9ffb45f0-b0f8-4943-af9b-511f2b82b2ce"
      link="/join"
      small
    >
      Lerne die Vorzüge einer Mitgliedschaft kennen.
    </Card>
    <Card
      name="Werkstattnutzung"
      image="5cc8d4aa-70d4-47bb-8d90-33766245e67b"
      link="/use"
      small
    >
      Du kannst unsere Ausstattung auch ohne Mitgliedschaft verwenden.
    </Card>
    <Card
      name="Spenden"
      image="37111098-2687-4e36-9efd-baf7816fda70"
      link="/donate"
      small
    >
      So kannst du unseren gemeinnützigen Verein unterstützen.
    </Card>
  </Section>

  <div class="fixed bottom-4 left-4 flex">
    <a
      class="btn btn-square btn-ghost z-10 discord-left"
      href="https://swablab.de/discord"
    >
      <span class="w-6 h-6 icon-[ph--discord-logo-duotone]"></span>
    </a>
    <a
      class="btn text-nowrap truncate p-0 -ml-3 order-last discord-right"
      href="https://swablab.de/discord"
    >
      Tritt unserem Discord bei!
    </a>
  </div>

  <style>
    .discord-left {
      background-color: #5865f2;
      grid-column: 1;
      grid-row: 1;
    }

    @keyframes discord-right {
      0% {
        width: 0%;
      }
      25% {
        width: 100%;
      }
      75% {
        width: 100%;
      }
      100% {
        width: 0%;
      }
    }

    .discord-right {
      border-color: #5865f2;
      animation: discord-right 5s;
      width: 0%;
      grid-column: 1;
      grid-row: 1;
    }
  </style>
</Page>