---
import { css, cx } from '@styled-system/css'
import { containerClass } from '@/styles/container'

interface FooterSection {
  title?: string
  links: {
    label: string
    href: string
  }[]
}

const sections: FooterSection[] = [
  {
    title: 'Code & Work',
    links: [
      { label: 'GitHub', href: 'https://github.com/SrJuggernaut' },
      { label: 'Gitea Instance', href: 'https://git.srjuggernaut.dev/' }
    ]
  },
  {
    title: 'Social & Contact',
    links: [
      { label: 'Twitter', href: 'https://twitter.com/SrJuggernaut' },
      {
        label: 'Blue Sky',
        href: 'https://bsky.app/profile/jugger.srjuggernaut.dev'
      }
    ]
  }
]

const footerContainerClass = cx(
  containerClass,
  css({
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(256px, 1fr))',
    gap: 'lg md'
  })
)

const footerSectionTitleClass = css({
  display: 'block',
  fontWeight: 'bold',
  fontSize: 'h4',
  textAlign: 'center'
})

const footerSectionListClass = css({
  listStyle: 'none'
})

const footerSectionItemClass = css({
  paddingInlineStart: 'sm',
  textIndent: '-xs',
  '&:before': {
    content: '"⟫"',
    paddingInline: 'xs'
  }
})

const footerLegendClass = css({
  paddingBlock: 'md',
  textAlign: 'center',
  fontSize: 'sm'
})

const footerLegendHeartClass = css({
  color: 'red'
})
---

<footer>
  <div class={footerContainerClass}>
    {sections.map(section => (
      <section>
        <span class={footerSectionTitleClass} role="heading" aria-level="3">{section.title}</span>
        <ul class={footerSectionListClass} >
          {section.links.map(link => (
            <li class={footerSectionItemClass}>
              <a href={link.href}>{link.label}</a>
            </li>
          ))}
        </ul>
      </section>
    ))}
  </div>
  <p class={footerLegendClass}>
    Made with <span class={footerLegendHeartClass}>♥</span> and
    <a href="https://astro.build">Astro</a> by
    <a href="https://srjuggernaut.dev">Jugger</a>
  </p>
</footer>