---import { Button } from "../components/partials/Button";

export type Product = { title: string; icon: string; text: string };


const products: Product[] = [
  {
    icon: "/img/layers.svg",
    title: "ColrJS",
    text: "Farbpaletten aus Bildern extrahieren."
  },
  {
    icon: "/img/layers.svg",
    title: "ColrJS",
    text: "Farbpaletten aus Bildern extrahieren."
  },
  {
    icon: "/img/layers.svg",
    title: "ColrJS",
    text: "Farbpaletten aus Bildern extrahieren."
  },
  {
    icon: "/img/layers.svg",
    title: "ColrJS",
    text: "Farbpaletten aus Bildern extrahieren."
  },
  {
    icon: "/img/layers.svg",
    title: "ColrJS",
    text: "Farbpaletten aus Bildern extrahieren."
  },
  {
    icon: "/img/layers.svg",
    title: "ColrJS",
    text: "Farbpaletten aus Bildern extrahieren."
  }
];
---

<section class="py-5 w-screen bg-zinc-50 text-zinc-900 flex flex-col items-center">
    <div class="w-5/6 flex flex-col p-4 gap-4">
      <p class="text-xl text-center">Willkommen an der Bar! &#127864;</p>
      <p class="text-sm text-center">Was darfs denn heute sein?</p>
      <div class="gap-3 grid grid-cols-1 grid-rows-2  rounded-xl b flex-1 mt-3 sm:grid-cols-3">
        {
          products.slice(0, 4).map((product, i) => {
            return (
              <div
                class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg ${
                  i % 2 === 0 ? "bg-emerald-400 text-zinc-900 flex-row" : "bg-zinc-900 text-zinc-100 flex-row-reverse"
                }`}
              >
                <img class={`h-8 sm:h-12 ${i % 2 == 0 ? "" : "invert"}`} src={product.icon} alt="" />
                <div class="flex-1">
                  <p class="text-lg sm:text-center">{product.title}</p>
                  <p class="sm:text-center">{product.text}</p>
                </div>
              </div>
            );
          })
        }
      </div>
      <div class="w-52 mx-auto">
          <Button link="/projects" text="Mehr" />
      </div>
    </div>
  </section>