---
import '../../../global.css'
import Categories from '../../../layouts/categories.astro'

const data = (
  (await Astro.glob(`/src/translations/*.json`)).find(
    (translation) =>
      translation.default.lang == (Astro.url.searchParams.get("lang") || "en_US")
  ) || {}
).default;
---
<Categories name={data["brand.categories.name"]} title={data["brand.categories.title"]} >
    <p>If you're a club leader, hackathon organizer, or community member, you're authorized to print, distribute or translate these for Hack Club-related purposes. You're also welcome to use them personally, or give to friends! This Brand material is copyright Hack Club.</p>
    
    <h3>Brand material</h3>
    <table>
        <tr class="stline">
            <td>Preview</td>
            <td>Download</td>
        </tr>
        <tr>
            <td>Gord (Sprig dino)</td>
            <td><a href="../../../../public/SPRIGDINO.png" download="gord">Download</a></td>
        </tr>
        <tr>
            <td>Poster (front)</td>
            <td><a href="../../../../public/sprikipedia/0sprig_poster_-_front.png" download="Poster-front">Download</a></td>
        </tr>
        <tr>
            <td>Poster (back)</td>
            <td><a href="../../../../public/sprikipedia/0sprig_poster_-_back.png" download="Poster-back">Download</a></td>
        </tr>
        <tr>
            <td>Sprig logo text (gold)</td>
            <td><a href="../../../../public/spriglogotext-gold.png" download="spriglogotext-gold">Download</a></td>
        </tr>
        <tr>
            <td>Sprig logo text (white)</td>
            <td><a href="../../../../public/spriglogotext-white.png" download="spriglogotext-white">Download</a></td>
        </tr>
        <tr>
            <td>Background</td>
            <td><a href="../../../../public/background.jpg" download="background">Download</a></td>
        </tr>
        <tr>
            <td>Sprig image 1</td>
            <td><a href="../../../../public/stories-big/develop.jpeg" download="sprig-image-1">Download</a></td>
        </tr>
        <tr>
            <td>Sprig image 2</td>
            <td><a href="../../../../public/stories-big/learn.jpeg" download="sprig-image-2">Download</a></td>
        </tr>
        <tr>
            <td>Sprig image 3</td>
            <td><a href="../../../../public/stories-big/orpheus.jpeg" download="sprig-image-3">Download</a></td>
        </tr>
        <tr>
            <td>Sprig image 4</td>
            <td><a href="../../../../public/stories-big/play.jpeg" download="sprig-image-4">Download</a></td>
        </tr>
        <tr>
            <td>Sprig image 5</td>
            <td><a href="../../../../public/stories-big/sprig-back.jpeg" download="sprig-image-5">Download</a></td>
        </tr>
        <tr>
            <td>Sprig image 6</td>
            <td><a href="../../../../public/stories-big/sprig-front.jpeg" download="sprig-image-6">Download</a></td>
        </tr>
    </table>

    <h3>Icons</h3>
    <table>
        <tr class="stline">
            <td>Preview</td>
            <td>Download</td>
        </tr>
        <tr>
            <td>Battery</td>
            <td><a href="../../../../public/icons/battery.png" download="battery">Download</a></td>
        </tr>
        <tr>
            <td>Controls</td>
            <td><a href="../../../../public/icons/controls.png" download="controls">Download</a></td>
        </tr>
        <tr>
            <td>Dimensions</td>
            <td><a href="../../../../public/icons/dimensions.png" download="dimensions">Download</a></td>
        </tr>
        <tr>
            <td>Display</td>
            <td><a href="../../../../public/icons/display.png" download="display">Download</a></td>
        </tr>
        <tr>
            <td>Language</td>
            <td><a href="../../../../public/icons/language.png" download="language">Download</a></td>
        </tr>
        <tr>
            <td>Processor</td>
            <td><a href="../../../../public/icons/processor.png" download="processor">Download</a></td>
        </tr>
        <tr>
            <td>Sound</td>
            <td><a href="../../../../public/icons/sound.png" download="sound">Download</a></td>
        </tr>
        <tr>
            <td>Sprites</td>
            <td><a href="../../../../public/icons/sprites.png" download="sprites">Download</a></td>
        </tr>
    </table>

    <h3>Font</h3>
    <div class="billy">
        <h1>Billy</h1>
    </div>

    <h3>Colors</h3>
    <div class="color1">
        <p class="color-text">#078969</p>
    </div>
    <div class="color2">
        <p class="color-text">#136853</p>
    </div>
    <div class="color3">
        <p class="color-text">#fafed7</p>
    </div>

    <h3>Sprikipedia Brand material</h3>
    <table>
        <tr class="stline">
            <td>Preview</td>
            <td>Download</td>
        </tr>
        <tr>
            <td>Sprikipedia dark version</td>
            <td><a href="../../../../public/sprikipedia/Frame-2.svg" download="sprikipedia">Download</a></td>
        </tr>
        <tr>
            <td>Sprikipedia white version</td>
            <td><a href="../../../../public/sprikipedia/Frame-3.svg" download="sprikipedia">Download</a></td>
        </tr>
    </table>
</Categories>