---
import { css } from '@styled-system/css'
import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'

const heroSectionClass = css({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  minHeight: '50vh',
  background:
    'linear-gradient(172deg, {colors.neutral.3} 0%, {colors.neutral.1} 78%)'
})

const heroContainerClass = css({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  gap: 'sm'
})

const heroLogoClass = css({
  fill: 'neutral.12',
  width: {
    base: '100%',
    sm: 'breakpoint-sm'
  },
  height: '100%'
})

const heroTitleClass = css({
  fontFamily: 'orbitron',
  fontSize: 'calc(2rem + 2vw)',
  textAlign: 'center',
  fontWeight: '900',
  color: 'neutral.12'
})

const heroDescriptionClass = css({
  color: 'neutral.11',
  textAlign: 'center',
  fontSize: 'large'
})
---

<section class={heroSectionClass}>
  <div class={heroContainerClass}>
    <SrJuggernautLogo className={heroLogoClass} />
    <h1 class={heroTitleClass}>Juggernaut Plays</h1>
    <p class={heroDescriptionClass}>
      A veces hago cosas en internet, luego hablo de ellas.
    </p>
  </div>
</section>