import { A } from "@solidjs/router";
import { NewsList } from "~/components/NewsList"

<main>

  <div
    class="hero h-[70vh] min-h-96"
    style="background-image: url(/dresden.webp);"
  >
    <div class="hero-overlay bg-opacity-40 backdrop-blur-sm"></div>
    <div class="hero-content text-center text-neutral-content">
      <div class="max-w-xl">
        <h1 class="text-5xl md:text-7xl">Keep Local<br/>Traffic Local</h1>
        <div class="divider"></div>
        <div class="flex gap-2 justify-center">
          <A href="/peering" class="btn btn-primary">Start Peering</A>
          <A href="" class="btn btn-outline">Support Us</A>
        </div>
      </div>
    </div>
  </div>

<section class="container mx-auto p-4">
  <div class="flex flex-col md:flex-row mx-8 justify-center min-h-[40vh]">
    <div class="grow p-8">
      <div class="flex items-center sticky top-[40vh] text-5xl relative">
        <h2>Internet Exchange</h2>
        <div class="circle bg-primary h-5 w-5 rounded-full absolute left-[-2.5rem] md:left-auto md:right-[-2.75rem]"></div>
      </div>
    </div>
    <div class="grow flex flex-col justify-center gap-4 p-8 border-primary" style="border-bottom-width: 0.25rem; border-left-width: 0.25rem;">
      <p class="text-xl">DD-IX is an Internet exchange for Dresden and whole Saxony. As a non-commercial platform, we are open to all Internet stakeholders that are interested in multilateral exchange of Internet traffic.</p>
      <A href="" class="btn btn-outline w-fit">Learn More</A>
    </div>
  </div>

  <div class="flex flex-col-reverse md:flex-row mx-8 mt-[-0.25rem] justify-center min-h-[40vh]">
    <div class="grow flex flex-col justify-center gap-4 p-8 border-primary" style="border-bottom-width: 0.25rem; border-right-width: 0.25rem">
      <p class="text-xl">The DD-IX is operated by committed people of the DD-IX Dresden Internet Exchange e.V. The DD-IX Dresden Internet Exchange e.V. is a registered association under German law. Our mission is the economical, ecological, and robust exchange of data over the Internet. To enable direct data delivery between source and destination, we leverage the unique advantages of an Internet Exchage Point (IXP).</p>
      <A href="" class="btn btn-outline w-fit">Support Us</A>
    </div>
    <div class="grow p-8 border-transparent md:border-base-100" style="border-top-width: 0.25rem;">
      <div class="flex items-center sticky top-[40vh] text-5xl relative">
        <div class="circle bg-primary h-5 w-5 rounded-full absolute right-[-2.5rem] md:right-auto md:left-[-2.75rem]"></div>
        <h2>Association</h2>
      </div>
    </div>
  </div>

  <div class="flex flex-col md:flex-row mx-8 mt-[-0.25rem] justify-center min-h-[40vh]">
    <div class="grow p-8 border-transparent md:border-base-100" style="border-top-width: 0.25rem">
      <div class="flex items-center sticky top-[40vh] text-5xl relative">
        <h2>Support</h2>
        <div class="circle bg-primary h-5 w-5 rounded-full absolute left-[-2.5rem] md:left-auto md:right-[-2.75rem]"></div>
      </div>
    </div>
    <div class="grow flex flex-col justify-center gap-4 p-8 border-primary" style="border-bottom-width: 0.25rem; border-left-width: 0.25rem;">
      <p class="text-xl">Join us for an exciting journey. As peer, sponsor, or member of the association you will be part of the development of the DD-IX - the catalyst for the digital future in Saxony!</p>
      <A href="" class="btn btn-outline w-fit">Support Us</A>
    </div>
  </div>

  <h2 class="mt-40 mb-16 text-5xl">News</h2>
  <NewsList limit={3} />
  <A href="/news" class="btn btn-primary mt-4">View More</A>
</section>

</main>