---
import MaxImg from "./Max.png";
import Image from "./Image.astro";
import GoogleyEye from "./GoogleyEye.svelte";

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

import { getLocale } from "astro-i18n-aut";

const locale = getLocale(Astro.url);

const t = useTranslations(locale);
---

<section class="googley-eye-target">
  <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">
    <h1>{t("home.title")}</h1>
    <p>{t("home.subtitle")}</p>
  </div>
</section>

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

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

  section {
    position: relative;
    margin-top: 100px;
    height: 180px;
    background-color: var(--background);
    border-radius: 0px 20px 0px 20px;
    border: solid thin var(--outline);
    display: grid;
    grid-template-columns: 300px 1fr;
    background: var(--background-gradient);
    background: linear-gradient(
      150deg,
      var(--neutral400) 0%,
      var(--neutral500) 100%
    );
  }

  .eye {
    position: absolute;
  }

  .eye.left {
    top: 25%;
    right: 30%;
  }
  .eye.right {
    top: 27%;
    right: 15%;
  }

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