---
import "../styles/global.css";
import { Navigation } from "../components/Navigation.tsx";
import { ClientLink } from "../components/partials/ClientLink";

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

const projects: Project[] = [
  {
    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."
  }
];

const products: Project[] = [
  {
    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."
  }
];

const encryptedMail = btoa('dominik@oceanwave018.de')
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Dominik - FullStackDev</title>

  </head>
  <body class="bg-zinc-900 text-zinc-100">
    <Navigation client:load />
    <div id="whoami" class="w-full h-fit min-h-[66vh] flex justify-center items-center flex-col py-5">
      <div class="w-5/6 flex-1 flex flex-col md:flex-row justify-center items-center gap-6">
        <div class="w-full flex flex-col items-center gap-3">
          <div
            class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
          >
            <img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
          </div>
          <p class="text-2xl">Das bin ich!</p>
        </div>
        <div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
          <p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
          <p>
            Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
          </p>
          <p>
            <span class="text-emerald-300">Toll</span> das du da bist, endecke gerne meinen Kosmos! &#128640;
          </p>
        </div>
      </div>
      <img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
    </div>
    <section class="py-5 w-screen h-[66vh] bg-zinc-50 text-zinc-900">
      <div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
        <p class="text-2xl underline">Meine Projekte</p>
        <div
          class="max-sm:flex-1 border-2 sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col rounded-2xl border-zinc-900 border-dashed overflow-hidden px-3"
        >
          {
            projects.slice(0, 4).map((project, i) => {
              return (
                <div
                  class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/5 flex justify-between sm:py-3 ${
                    i % 2 === 0 ? "flex-row-reverse bg-emerald-200" : "flex-row bg-zinc-900 text-zinc-100"
                  }  rounded-lg px-2 py-2 gap-5`}
                >
                  <div class="max-sm:flex-1 min-w-[2.5rem] flex justify-center">
                    <img
                      class={`w-10 ${i % 2 === 0 ? "" : "invert"}`}
                      src={project.icon}
                      alt={`img of ${project.icon}`}
                    />
                  </div>
                  <div class="flex flex-col justify-center">
                    <p class="text-lg sm:text-center">{project.title}</p>
                    <p class="text-sm sm:text-center">{project.text}</p>
                  </div>
                </div>
              );
            })
          }
          <div class="col-span-2 flex justify-center">
          <a
            href="/projects"
            class={`col-span-2 w-52 h-16 text-center  items-center text-xl justify-center border-2 shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}
          >
            Mehr
          </a>
        </div>
        </div>
      </div>
    </section>
    <section class="py-5 w-screen max-sm:min-h-[66vh] bg-zinc-900 text-zinc-50">
      <div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
        <p class="text-2xl underline">Mehr zu mir</p>
        <div
          class="max-sm:flex-1 sm:justify-center sm:items-center sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col gap-5 w-full overflow-hidden px-3"
        >
          <div class="p-4 sm:flex-1 sm:flex sm:flex-col sm:items-center">
            <p class="text-lg underline">Meine Skills</p>
            <ul class="ml-1.5 py-4 gap-5">
              <li><img src="" alt="" /><p>- Fullstack Web-entwicklung</p></li>
              <li><img src="" alt="" /><p>- SEO</p></li>
              <li><img src="" alt="" /><p>- Web-App Deployment</p></li>
            </ul>
            <a class="underline text-emerald-300 visited:text-purple-300" href="/skills" class="underline">Siehe alle</a
            >
          </div>
          <div class="w-full border border-dashed border-emerald-300 sm:hidden"></div>
          <div class="p-4 flex flex-col gap-4 sm:flex-1 sm:flex sm:flex-col sm:items-center">
            <p class="flex gap-2 flex-col text-lg underline">Mein Werdegang</p>
            <div class="flex gap-2 flex-col">
              <p>
                Ausbildung bei <a
                  target="_blank"
                  href="https://adabay.rocks"
                  class="underline text-emerald-300 visited:text-purple-300">adabay</a
                > und der BSInfo. <span class="text-zinc-300 font-mono">2020-2023</span>
              </p>
              <p>
                Übernahme bei <a
                  target="_blank"
                  href="https://adabay.rocks"
                  class="underline text-emerald-300 visited:text-purple-300">adabay.</a
                ><span class="text-zinc-300 font-mono"> 2023</span>
              </p>
              <p>
                Angestellt als Technical Consultant bei <a
                  target="_blank"
                  href="https://adabay.rocks"
                  class="underline text-emerald-300 visited:text-purple-300">adabay</a
                >
                <span class="text-zinc-300 font-mono">seit 07/2023</span>.
              </p>
            </div>
            <a href="mystory" class="underline text-emerald-300 visited:text-purple-300" class="underline"
              >Meine vollständige Geschichte</a
            >
          </div>
        </div>
      </div>
    </section>
    <section class="w-screen h-28 bg-emerald-500 text-zinc-900 flex flex-col justify-center items-center gap-4">
      <p class="text-2xl text-center w-full">Services und Produkte</p>
      <img class="animate-bounce h-7 sm:hidden" src="/img/arrowDownDark.svg" alt="" />
    </section>
    <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-500 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>
        <a
          href="/products"
          class={`mx-auto col-span-2 w-52 h-16 text-center justify-center items-center text-xl border-2 shadow-md shadow-zinc-500 border-none transition-all bg-emerald-400 hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}

        >
          Mehr
        </a>
      </div>
    </section>
    <section class="py-10 w-screen gap-5  bg-zinc-900 text-zinc-50 flex flex-col items-center">
      <p class="text-3xl text-emerald-500">Interesse geweckt?</p>
      <p class="text-xl">Lass mir doch eine Nachricht da!</p>
        <ClientLink client:load mail={encryptedMail} text="E-Mail schreiben"/>
    </section>
  </body>
</html>
