---
import BaseLayout from '@layouts/Base.astro';
import Nav from '@components/Nav.astro';
import HomeBackground from '@/components/HomeBackground';

const isBossServer = import.meta.env.BOSS_SERVER === true;

const searchUrl = new URLSearchParams(new URL(Astro.request.url).search).get('url');

if (!isBossServer && searchUrl) {
  Astro.redirect(`/check/${encodeURIComponent(searchUrl)}`);
}

---

<BaseLayout>
  <Fragment slot="head">
    {!isBossServer && (<meta http-equiv="refresh" content="0; url=/check" />)}
  </Fragment>
  <main class="fancy-background">
    <HomeBackground client:only="react" />
    <Nav />
    <!-- <div class="left"></div>
    <div class="right"></div>
    <h1>Web Check</h1>
    <h2>X-Ray vision for your website's security</h2>
    <img width="600" class="screenshot" src="https://i.ibb.co/r0jXN6s/web-check.png" alt="Web Check Screenshot" /> -->
  </main>
</BaseLayout>

<style lang="scss">
  main {
    height: 100vh;
    padding: 1rem 0;
    background: rgb(20,29,43);
    background: radial-gradient(circle,#141d2b 0%,#0d1521 75%,#141d2b 100%);

    h2 {
      font-weight: 300;
    }

    .screenshot {
      transform:
        rotate3d(.5,-.866,0,15deg)
        rotate(1deg);
      box-shadow:
        2em 4em 6em -2em rgba(0,0,0,.5),
        1em 2em 3.5em -2.5em rgba(0,0,0,.5);
      transition:
        transform .4s ease,
        box-shadow .4s ease;
      border-radius: .5em;

      &:hover {
        transform:
          rotate3d(0,0,0,0deg)
          rotate(0deg);
      }
    }
  }

</style>
