<script setup lang="ts">
const { t } = useLocale()
</script>

<template>
  <div>
    <section class="gamepad-spotlight-container">
      <div class="gamepad-spotlight-content">
        <div class="image-wrapper">
          <img
            src="/gamepad.png"
            alt="Wii U GamePad"
            class="gamepad-image"
          >
        </div>
        <div class="text-wrapper">
          <h1 class="archivo-black title">
            {{ t.home?.spotlight?.titlePart1 }}<span class="text-wiiu-blue">{{ t.home?.spotlight?.titlePart2 }}</span>.
          </h1>
          <p class="subtext">
            {{ t.home?.spotlight?.subtext }}
          </p>
          <p class="hint-text">
            {{ t.home?.spotlight?.hintText }}
            <a
              href="https://git.spbr.net/spacebar"
              target="_blank"
              class="text-blue-400 underline"
            >https://git.spbr.net/spacebar</a>
          </p>
        </div>
      </div>
    </section>

    <UPageSection
      id="features"
      :title="t.home?.featuresSection?.title"
      :description="t.home?.featuresSection?.description"
      :features="[{
        icon: 'i-octicon-cpu-24',
        title: t.home?.featuresSection?.items?.stable?.title,
        description: t.home?.featuresSection?.items?.stable?.description
      }, {
        icon: 'i-octicon-shield-check-24',
        title: t.home?.featuresSection?.items?.secure?.title,
        description: t.home?.featuresSection?.items?.secure?.description
      }, {
        icon: 'i-octicon-code-24',
        title: t.home?.featuresSection?.items?.openSource?.title,
        description: t.home?.featuresSection?.items?.openSource?.description
      }]"
    />

    <UPageSection>
      <UPageCTA
        :title="t.home?.ctaSection?.title"
        :description="t.home?.ctaSection?.description"
        variant="subtle"
        :links="[{
          label: t.home?.ctaSection?.links?.guide,
          to: '/docs/connect',
          trailingIcon: 'i-octicon-arrow-right-24',
          color: 'neutral'
        }, {
          label: t.home?.ctaSection?.links?.repo,
          to: 'https://git.spbr.net/spacebar',
          target: '_blank',
          icon: 'i-simple-icons-gitea',
          color: 'neutral',
          variant: 'outline'
        }]"
      />
    </UPageSection>
  </div>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

.archivo-black {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.text-wiiu-blue {
  color: #00aeef;
}

.gamepad-spotlight-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rem 2rem 4rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.gamepad-spotlight-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  width: 100%;
}

.image-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  width: 100%;
}

.gamepad-image {
  width: 100%;
  max-width: 650px;
  height: auto;
  object-fit: contain;
}

.text-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.title {
  font-size: 3.5rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.subtext {
  font-size: 1.125rem;
  line-height: 1.6;
  opacity: 0.85;
  margin-bottom: 1rem;
}

.hint-text {
  opacity: 0.5;
  font-size: 0.95rem;
}

@media (min-width: 1024px) {
  .gamepad-spotlight-content {
    flex-direction: row;
    gap: 4rem;
  }

  .title {
    font-size: 4.5rem;
  }
}
</style>
