---
import { Icon } from 'astro-icon/components'

const { src = '/retrowave-moon.png' } = Astro.props
---

<section class="hero my-24">
  <div class="container">
    <div class="grid grid-cols-1 items-center gap-24 lg:grid-cols-2">
      <div class="flex flex-col items-center gap-8 md:items-start">
        <h1 class="text-center text-6xl md:text-left lg:text-8xl">
          <slot><span class="text-gradient">Modding</span> done with passion</slot>
        </h1>
        <div class="flex flex-col gap-3 min-[500px]:flex-row">
          <a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
            <Icon name="ion:logo-github" />
            View on GitHub
          </a>
          <a
            class="button has-icon color-secondary"
            href="https://github.com/markteekman/accessible-astro-starter/blob/main/README.md"
          >
            <Icon name="ion:bookmark-outline" />
            Read the Docs
          </a>
        </div>
      </div>
      <img class="hidden lg:block" src={src} alt="" decoding="async" />
    </div>
  </div>
</section>

<style lang="scss">
  .text-gradient {
    background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-500));
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  :global(.darkmode .text-gradient) {
    background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-400));
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
</style>