import logo from '../assets/images/exo-logo.png'
import { footerLegal } from '../data/content'
import { Container } from './Layout'

export function SiteFooter() {
  return (
    /* The extra bottom padding below 980px is the landing strip for <ThumbBar />. */
    <footer className="bg-footer py-[26px] pb-[96px] text-[12px] text-white/[0.52] lg:pb-[26px]">
      <Container className="grid gap-[14px] md:grid-cols-[220px_1fr]">
        <div className="flex max-w-[180px] shrink-0 items-center">
          <img
            alt="Экзо Групп — российские технологии реабилитации"
            className="block h-auto w-[clamp(150px,16vw,180px)] max-w-[min(50vw,180px)] object-contain compact:w-[150px] compact:max-w-[48vw]"
            src={logo}
            width={900}
            height={204}
          />
        </div>

        <div className="max-w-[900px] leading-[1.55]">{footerLegal}</div>

        <div className="flex flex-wrap justify-between gap-[10px] border-t border-white/[0.09] pt-[13px] md:col-span-full">
          <span>© 2026 Экзо Групп</span>
          <span>Российские технологии реабилитации</span>
        </div>
      </Container>
    </footer>
  )
}