---
import BaseLayout from '@layouts/Base.astro';
import NavBar from '@components/scafold/Nav.astro';
import Footer from '@components/scafold/Footer.astro';
import Icon from '@components/molecules/Icon.svelte';

const cardData = [
  {
    title: 'Deploy with Docker',
    description: 'Just one command, and you\'ll have your own Web Check instance running on your server in minutes.',
    command: 'docker run -p 3000:3000 lissy93/web-check',
  },
  {
    title: '1-Click Deploy',
    description: 'Don\'t have a server? Not a problem! Deploy Web Check with one click on Vercel or Netlify.',
    buttons: [
      {
        name: 'Vercel',
        image: '/assets/images/vercel.svg',
        link: 'https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.'
        +'com%2Fxray-web%2Fweb-check-free&project-name=web-check-free&repository'
        + '-name=web-check-free&demo-title=Web%20Check&demo-description=Try%20ou'
        + 't%20the%20live%20demo&demo-url=https%3A%2F%2Fweb-check.xyz%2F&demo-ima'
        + 'ge=https%3A%2F%2Fi.ibb.co%2Fr0jXN6s%2Fweb-check.png'
      },
      {
        name: 'Netlify',
        image: '/assets/images/netlify.svg',
        link: 'https://app.netlify.com/start/deploy?repository='
        + 'https://github.com/xray-web/web-check-free',
      }
    ]
  },
  {
    title: 'Build from Source',
    description: 'Want to customize Web Check? Clone the repository and deploy it on your server.',
    buttons: [
      {
        name: 'GitHub',
        image: '/assets/images/github.svg',
        link: '',
      }
    ]
  }
];

---

<BaseLayout
  title="Self-Hosted Setup | Web Check"
  description="Get started with running Web Check locally or on your own server."
>
  <div class="web-check-page">
    <NavBar />
    <main>
      <h1>Self-Hosted Setup</h1>
      <p>
        Get your own free instance of Web Check, running locally or on your server.
      </p>
    
      <div class="option-cards">

        { cardData.map((card, cardIndex) => (
          <div class="card">
            <span class="option">Option #{cardIndex + 1}</span>
            <h3>{card.title}</h3>
            <p>{card.description}</p>
            { card.buttons && (
              <div class="buttons">
                { card.buttons.map(button => (
                  <a href={button.link}>
                    <img src={button.image} />
                    {button.name}
                  </a>
                ))}
              </div>
            )}
            { card.command && (
              <div class="shaddow docker-command">
                <code>{card.command}</code>
                <button><Icon name="copy" size={0.8} /></button>
              </div>
            )}
          </div>
        ))}
    </div>
    </main>
    <Footer />
  </div>
</BaseLayout>


<style lang="scss">
  @import '@styles/global.scss';
  .web-check-page {
    padding-top: 2rem;
    margin: 0 auto;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url('/assets/images/background-dots.svg');
    @include mobile-down {
      padding: 0.5rem;
    }
    main {
      width: 80vw;
      margin: 0 auto;
      min-height: 100%;
      flex-grow: 1;
      padding: 5rem 0 2rem 0;
      max-width: 1200px;
      @include mobile-down {
      padding: 1rem 0;
    }
    }
    .option-cards {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(2, 1fr);
      margin-top: 2.5rem;
      .card:first-child {
        grid-column: span 2;
      }
      @include tablet-landscape-down {
        grid-template-columns: 1fr;
        .card:first-child {
          grid-column: span 1;
        }
      }
      .card {
        padding: 0.5rem 1rem;
        background-color: var(--background);
        color: var(--text-color);
        border-radius: 4px;
        border: 1px solid var(--primary-transparent);
        .option {
          color: var(--primary);
          font-size: 0.8rem;
        }
        h3 {
          margin-top: 1rem;
        }
        p {
          line-height: 1.3;
        }
        .docker-command {
          display: flex;
          margin: 1rem 0;
          position: relative;
          button {
            background: var(--background);
            border: none;
            color: var(--text-color);
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
            z-index: 2;
            opacity: 0.5;
          }
          code {
            background-color: var(--background);
            padding: 0.5rem 2rem 0.5rem 0.5rem;
            display: block;
            font-family: PTMono, source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
            z-index: 2;
            border-radius: 3px;
            width: fit-content;
          }
        }

        .buttons {
          display: flex;
          gap: 1rem;
          flex-wrap: wrap;
          margin-bottom: 0.5rem;
          a {
            padding: 0.5rem 1rem;
            background-color: var(--primary);
            color: var(--background);
            border-radius: 4px;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            &:hover {
              background-color: var(--text-color);
              color: var(--background);
            }
            img {
              width: 1rem;
              filter: grayscale(100%);
            }
          }
        }
      }
      
    }
  }
  .shaddow {
    --c0: #f4ffc7;
    --c1: #d6fb41;
    --c2: #c2f300;
    --c3: #a8d200;
    --c4: #5e7500;

    --gradient-shadow: linear-gradient(
      45deg,
      var(--c0),
      var(--c1),
      var(--c2),
      var(--c3),
      var(--c4),
      var(--c0),
      var(--c1),
      var(--c2),
      var(--c3),
      var(--c4),
      var(--c3),
      var(--c2),
      var(--c1)
    );
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    width: fit-content;
    &:before,
    &:after {
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      background: var(--gradient-shadow);
      background-size: 400%;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      z-index: -1;
      animation: animate 10s linear infinite;
      transition: all 0.3s ease;
    }

    &:before {
      opacity: 0.1;
    }

    &:after {
      filter: blur(3px);
      opacity: 0.3;
    }

    &:hover {
      &:before,
      &:after {
        animation: animate 40s linear infinite;
      }
      &:after {
        opacity: 0.7;
      }
    }

    @keyframes animate {
      0% {
        background-position: 0 0;
      }
      50% {
        background-position: 120% 0;
      }
      100% {
        background-position: 0 0;
      }
    }
  }


</style>
