---
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);
---

<Card
  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid grid-cols-[250px_1fr] h-[180px] mt-8"
>
  <div class="image">
    <Image src={MaxImg} alt="its mee" maxWidth={700} />
    <div class="eye right">
      <GoogleyEye client:load />
    </div>
    <div class="eye left">
      <GoogleyEye client:load />
    </div>
  </div>

  <div class="content gap-2">
    <h1 class="text-2xl">{t("home.title")}</h1>
    <p>{t("home.subtitle")}</p>
  </div>
</Card>

<style>
  .image {
    position: relative;
    height: 130%;
    align-self: end;
    overflow: hidden;
    border-bottom-left-radius: var(--border-radius-md);
    display: flex;
    align-items: flex-end;
  }

  .image::before {
    content: "";
    position: absolute;
    height: 80%;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(-12deg, var(--background) 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%;
  }

  .content {
    padding: 30px;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
</style>