---
import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
import { containerClass } from '@/styles/container'
import '@fontsource/orbitron/900.css'
import { css, cx } from '@styled-system/css'

const heroContainerClass = cx(
  containerClass,
  css({
    display: 'grid',
    gridTemplateColumns: {
      base: '1fr',
      md: '1fr 1fr'
    },
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: '60vh',
    gap: 'md'
  })
)

const heroLogoClass = css({
  fill: 'neutral.12',
  width: '100%'
})

const heroHeaderClass = css({
  fontSize: '50px',
  fontFamily: 'Orbitron',
  fontWeight: '900',
  textAlign: 'center'
})

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

<section>
  <div class={heroContainerClass}>
    <div>
      <SrJuggernautLogo className={heroLogoClass} />
    </div>
    <div>
      <h1 class={heroHeaderClass}>SrJuggernaut Dev</h1>
      <p class={heroDescriptionClass}>Unstoppable by design.</p>
    </div>
  </div>
</section>