---
import MobileNavigation from '@/components/MobileNavigation.tsx'
import { useTranslations } from '@/i18n/utils'
import BaseLayout from '../layouts/BaseLayout.astro'
import Section from '@/components/Section.astro'
import { Swiper } from '@/components/swiper'

import type { CollectionEntry } from 'astro:content'
import { getEntry } from 'astro:content'
import CoachCard from '@/components/CoachCard.astro'
import ServiceCard from '@/components/ServiceCard.astro'
import { Image } from 'astro:assets'
import Marquee from '@/components/Marquee.astro'
import { Reviews } from '@/components/Reviews.tsx'

type Props = CollectionEntry<'pages'>['data']

const navItems = [
  { key: 'nav.coaches', href: '#coaches' },
  { key: 'nav.slider', href: '#image-slider' },
  { key: 'nav.services', href: '#services' },
  { key: 'nav.reviews', href: '#reviews' },
  { key: 'nav.contact', href: '#contacts' },
] as const

const { lang } = Astro.params
const page = await getEntry('pages', 'main')
const { slider, coaches, services, hero, marquee, reviews } = page?.data || {}
const t = useTranslations(lang)
---

<BaseLayout title={t('home.title')}>
  <header
    class="fixed left-0 right-0 top-0 z-50 flex h-[var(--header-height)] items-center justify-between bg-bg-main px-6 md:px-10"
  >
    <a class="text-2xl font-bold text-text-light" set:html={t('header.logo')} href="#hero" />
    <nav class="hidden md:block">
      <ul class="grid grid-flow-col gap-6">
        {
          navItems.map((item) => (
            <li>
              <a href={item.href}>{t(item.key)}</a>
            </li>
          ))
        }
      </ul>
    </nav>
    <MobileNavigation navItems={navItems} client:visible />
  </header>

  {
    hero && (
      <Section id="hero" className="md:flex-row mt-16 md:mt-0 p-0 md:p-0">
        <div class="mb-8 px-6 py-10 md:mb-0 md:w-1/2 md:p-24">
          <h1 class="mb-4 text-4xl font-bold leading-tight md:text-6xl" set:html={hero.title} />
          <p class="text-brand-text mb-6">{hero.description}</p>
          {hero.cta && (
            <div class="flex space-x-4">
              <a href="#services" class="brand-btn">
                {hero.cta?.title}
              </a>
            </div>
          )}
        </div>
        <div class="relative hidden md:block md:w-1/2">
          <Image src={hero.image} alt={hero.imageAlt} class="absolute h-full w-full object-cover" />
        </div>
      </Section>
    )
  }

  {
    marquee && (
      <section class="min-h-[105px] overflow-clip bg-brand">
        <Marquee texts={marquee} />
      </section>
    )
  }

  {
    coaches && (
      <Section id="coaches" title={t('coaches.title')} description={t('coaches.subtitle')}>
        <div class="grid w-full grid-flow-col place-items-center gap-6 overflow-x-scroll md:gap-14">
          {coaches.map((coach) => (
            <CoachCard {...coach} />
          ))}
        </div>
      </Section>
    )
  }

  {
    slider && (
      <Section
        id="image-slider"
        title={t('slider.title')}
        description={t('slider.subtitle')}
        className="bg-bg-light"
      >
        <Swiper
          className="h-[540px]"
          client:visible
          images={slider.map(({ image, imageAlt }) => ({ ...image, alt: imageAlt }))}
        />
      </Section>
    )
  }

  {
    services && (
      <Section id="services" title={t('services.title')}>
        <div class="grid place-items-center gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-3">
          {services.map((service) => (
            <ServiceCard {...service} />
          ))}
        </div>
      </Section>
    )
  }

  {
    reviews && (
      <Section id="reviews" title={t('reviews.title')}>
        <div class="-ml-6 flex w-[calc(100%+(1.5rem*2))] md:-ml-24 md:w-[calc(100%+(6rem*2))]">
          <Reviews client:visible reviews={reviews} lang={lang} />
        </div>
      </Section>
    )
  }

  <Section className="px-0 md:px-0" id="contacts">
    <script
      type="text/javascript"
      charset="utf-8"
      async
      src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A069b17526dc83cbf87c488f13ae089eb3af0f8f74af57e1be82e183434693562&width=100%25&height=400&lang=ru_RU&scroll=true"
    ></script>
  </Section>

  <footer class="py-8 text-center">
    <div class="container mx-auto px-6 md:px-10">
      <div class="mb-4 text-2xl font-bold text-text-light" set:html={t('footer.logo')} />
      <p class="text-light text-sm">
        © {new Date().getFullYear()}
        {t('footer.copyright')}
      </p>
    </div>
  </footer>
</BaseLayout>