---
import { Image } from "astro:assets";
import screenshot from "../assets/screenshot.png";
import Download from "../components/icons/Download.astro";
import FAQ from "../components/icons/FAQ.astro";
---

<div class="screenshotDownloadContainer">
  <h1>A custom launcher for FFXIV</h1>

  <div class="screenshotDownloadContent">
    <a
      class="download"
      href="https://github.com/goatcorp/FFXIVQuickLauncher/releases/latest"
    >
      <Download />
      Download
    </a>
    <a class="faq" href="/faq"><FAQ /> FAQ and Help</a>
  </div>

  <Image src={screenshot} alt="XIVLauncher screenshot" />
</div>

<style>
  img {
    height: auto;
    max-width: 100%;
  }

  h1 {
    text-align: center;
  }

  .screenshotDownloadContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .screenshotDownloadContent {
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
  }

  a {
    padding: 0.75rem;
    border-radius: 0.25rem;
    color: var(--fg);
    text-decoration: none;
  }

  .download > svg {
    vertical-align: bottom;
  }

  .faq > svg {
    vertical-align: -0.1em;
  }

  a:hover {
    text-decoration: underline;
  }

  .download {
    background-color: var(--xl);
  }

  .faq {
    background-color: var(--card);
  }
</style>