---
import Button from './Button.astro';
---

<style lang="scss">
  @use '../../public/styles/var' as *;
  @use '../../public/styles/animations' as *;

  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    max-height: 24rem;
    color: #111;
    line-height: 1.5;
    background: #2a85ca40;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' title='mountain' class='logo' fill='%23FFFB'%3E%3Cpath d='M634.92 462.7l-288-448C341.03 5.54 330.89 0 320 0s-21.03 5.54-26.92 14.7l-288 448a32.001 32.001 0 0 0-1.17 32.64A32.004 32.004 0 0 0 32 512h576c11.71 0 22.48-6.39 28.09-16.67a31.983 31.983 0 0 0-1.17-32.63zM320 91.18L405.39 224H320l-64 64-38.06-38.06L320 91.18z' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% + 100px) calc(100% + 64px);
    background-size: 50%;
    border-bottom: 1px solid #0003;
    //margin-top: $nav-height;

    @media (min-width: $breakpoint-l) {
      margin: 0;
      min-height: 24rem;
      max-height: 30rem;
    }

    a {
      color: white;
    }

    > svg {
      display: block;
      margin: auto;
      opacity: 0.9;
    }

    .logo {
      position: absolute;
      right: 0;
      width: 100%;
    }
    .logo path {
      fill: #fff;
    }

    .section {
      padding: 1rem * 2;
    }
  }

  .hero-cta {
    display: flex;
    justify-content: center;
    margin: 1.5rem auto 0;
  }

  .header-link {
    padding-left: 2px;
  }

  .header-logo {
    display: flex;
    align-items: center;
    float: left;
    margin: 0 -20px 0 0;
    font-weight: bold;
    font-size: 36px;
    line-height: 1;

    @media (min-width: $breakpoint-m) {
      margin: 0 20px 0 0;
    }

    svg {
      width: 31px;
      height: 31px;
      margin-right: 8px;
      margin-left: 2px;
      padding: 0;
      color: #fff;
    }
  }

  .header-snowpack {
    margin: 0 auto 0.75rem;
    font-weight: 900;
    font-size: 3.5rem;
    font-weight: 900;
    font-family: $heading;
    line-height: 1;
    letter-spacing: -0.07em;
    text-align: center;
    opacity: 0.9;

    @media (min-width: $breakpoint-m) {
      max-width: none;
      font-size: 5.75rem;
      opacity: 1;
    }
  }

  .header-snowpack-subtitle {
    margin: 0;
    margin: auto;
    font-weight: 500;
    font-family: $heading;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.05em;
    text-align: center;

    @media (min-width: $breakpoint-m) {
      font-size: 3rem;
    }
  }

  .copy-button {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 292px;
    padding: 0.5em 1em;
    font-size: 100%;
    font-family: "Menlo", "ui-monospace", "SFMono-Regular", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    line-height: 1.5rem;
    background-color: white;
    border: 1px solid #0006;
    border-radius: 4px;
    cursor: pointer;
    @include animation-copy-button;

    @media (min-width: $breakpoint-m) {
      display: flex;
    }

    svg,
    .faded {
      color: #ccc;
      transition: color 0.1s ease-out;
    }
  }
</style>

<div class="hero">
  <div class="section">
    <h1 class="header-snowpack">Snowpack</h1>
    <p class="header-snowpack-subtitle">The faster frontend build tool.</p>

    <div class="hero-cta">
      <a href="/tutorials/quick-start"><Button style="primary">Get started</Button></a>
      <div style="margin: 0.5rem"></div>
      <button id="copy-button" class="copy-button hidden-mobile" data-clipboard-text="npm install snowpack">
        <span class="faded" style="margin-right: 0.75rem;">$</span>
        <span id="copy-button-text">npm install snowpack</span>
        <svg style="height: 22px;width: 22px;margin: -0.1rem -0.1rem 0 0.75rem;" aria-hidden="true" focusable="false"
          data-prefix="far" data-icon="clone" class="svg-inline--fa fa-clone fa-w-16" role="img"
          xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
          <path fill="currentColor"
            d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z">
          </path>
        </svg>
      </button>
      <script type="module">
        import Clipboard from 'https://cdn.skypack.dev/pin/clipboard@v2.0.6-eJjsV6JYCJOnOsq3YfEc/min/clipboard.js';
        const clippy = new Clipboard('.copy-button');
        const copyText = document.getElementById('copy-button').innerHTML;
        clippy.on('success', function (e) {
          document.getElementById('copy-button').style.minWidth = document.getElementById('copy-button').offsetWidth;
          console.info('Trigger:', e);
          document.getElementById('copy-button').innerHTML = '<span>copied to clipboard!</span>';
          document.getElementById('copy-button').addEventListener("mouseleave", function (event) {
            document.getElementById('copy-button').innerHTML = copyText;
          }, false);

          setTimeout(() => {
            e
              .trigger
              .classList
              .remove('active')
          }, 1000);
          e.clearSelection();
        });
      </script>
    </div>
    <div class="hero-cta">
      <!-- Place this tag where you want the button to render. -->
      <div class="hidden-mobile" style="text-align: center; height: 36px;">
        <a class="github-button" href="https://github.com/snowpackjs/snowpack" data-icon="octicon-star"
          data-size="large" data-show-count="true" aria-label="Star snowpackjs/snowpack on GitHub">Star</a>
      </div>
    </div>
  </div>
</div>