---
import MaxImg from "./Max.png";
import Image from "./Image.astro";
import GoogleyEye from "./GoogleyEye.svelte";
import { Card } from "./card";

import { useTranslations } from "@i18n/utils";

const t = useTranslations(Astro.url);
---

<Card
  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
>
  <div
    class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
  >
    <Image
      src={MaxImg}
      alt="its mee"
      class="object-bottom h-full object-cover w-1/2 xs:w-full"
      hash={false}
      maxWidth={700}
      loader={false}
    />
    <div class="eye right">
      <GoogleyEye client:load />
    </div>
    <div class="eye left">
      <GoogleyEye client:load />
    </div>
  </div>

  <div class="content flex flex-col p-8 pl-4 gap-2 justify-center">
    <h1 class="text-2xl">{t("home.title")}</h1>
    <p>{t("home.subtitle")}</p>
  </div>
</Card>

<style>
  .image {
    border-bottom-left-radius: var(--border-radius-md);
  }

  .googley-eye-target {
    height: calc(100% - 30px);
  }

  .image::before {
    content: "";
    position: absolute;
    height: 80%;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(-12deg, var(--background) 0%, transparent 50%);
  }
  .image {
    filter: brightness(1.1) contrast(0.9);
  }

  :global(.dark) .image {
    filter: brightness(0.9);
  }

  :global(.dark) .image::before {
    background: linear-gradient(
      -12deg,
      var(--background-dark) 0%,
      transparent 50%
    );
  }

  .image > :global(img) {
    height: 100%;
    object-fit: contain;
    object-position: bottom;
  }

  .eye {
    position: absolute;
  }
  .eye.left {
    top: 29%;
    right: 28%;
  }
  .eye.right {
    top: 31%;
    right: 12%;
  }
</style>
