---
import { Picture } from 'astro:assets'
import Layout from '~/layouts/Layout.astro'
import { Container } from '~/components/Container'
import { Faq } from '~/components/Faq'
import { StarIcon, ClockIcon } from '@heroicons/react/24/outline'
import { CheckBadgeIcon } from '@heroicons/react/24/solid'
import { LinkedInIcon } from '~/components/LinkedInIcon'
import nr18plataforma from '~/assets/nr18-plataforma.png'
import mulherdenegocios from '~/assets/mulher-de-negocios.png'
import homemdenegocios from '~/assets/homem-de-negocios.png'
import francis from '~/assets/francis.jpeg'
import Natura from '~/assets/natura.svg'
import Nissan from '~/assets/nissan.svg'
import Kordsa from '~/assets/kordsa.svg'
import Manserv from '~/assets/manserv.svg'
import Semeq from '~/assets/semeq.svg'

import { getCollection, getEntry } from 'astro:content'

export async function getStaticPaths() {
  const posts = await getCollection('courses', ({ data }) => data.draft != true)

  return posts.map((course) => {
    return {
      params: { slug: course.id },
      props: { course },
    }
  })
}

const {
  course: { data },
} = Astro.props

const trainer = data.course?.trainer
  ? await getEntry(data.course?.trainer)
  : null
---

<Layout title={data.title}>
  <Container className="py-3 lg:py-12 lg:flex items-center gap-5">
    <Picture
      src={nr18plataforma}
      alt="NR-18"
      formats={['webp']}
      class="max-lg:hidden"
    />
    <section>
      <div class="space-y-5">
        <span class="font-medium">Curso de formação</span>
        <h1 class="text-pretty font-semibold text-4xl lg:text-7xl">
          {data.title}
        </h1>
        <p class="text-base/6">
          NR 18 PEMT capacita operadores de plataformas elevatórias para
          trabalhos em altura com segurança. Com foco na manutenção, inspeção e
          uso correto dos EPIs, previne sempre acidentes, garante certificação
          MTE e valoriza sua carreira.
        </p>
        <ul class="lg:flex gap-3">
          <li class="flex gap-1">
            <ClockIcon className="w-5" />
            <span>Carga horária de {data.course.hours} horas</span>
          </li>

          <li class="flex gap-1">
            <CheckBadgeIcon className="w-5 fill-blue-400" />
            <span>Certificado com assinatura digital</span>
          </li>
        </ul>

        <div
          class="flex max-lg:flex-col justify-center gap-2.5 lg:gap-8 lg:mt-16"
        >
          <a
            href="#"
            class="text-black font-semibold bg-lime-400 rounded p-3.5 hover:bg-white max-lg:text-center transition duration-150"
          >
            Contratar agora
          </a>
          <a
            href="http://bit.ly/3RlROu6"
            class="flex flex-col hover:outline rounded outline-offset-3"
            target="_blank"
          >
            <div class="flex items-center gap-1">
              <span class="font-bold">4.7</span>
              <ul class="flex">
                <li>
                  <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
                </li>
                <li>
                  <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
                </li>
                <li>
                  <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
                </li>
                <li>
                  <StarIcon className="w-4 text-yellow-500 fill-yellow-500" />
                </li>
                <li><StarIcon className="w-4" /></li>
              </ul>
            </div>
            <span>66 avaliações no Google</span>
          </a>
        </div>
      </div>
    </section>
  </Container>

  <Container className="py-6 xl:py-24 text-center space-y-2.5 hidden">
    <div
      class="flex lg:gap-12 itens-center justify-center max-lg:overflow-x-scroll snap-x snap-mandatory scroll-smoothscrollbar-hide"
    >
      <Natura class="snap-center flex-shrink-0 size-36 fill-white" />
      <Nissan class="snap-center flex-shrink-0 size-36 fill-white" />
      <Manserv class="snap-center flex-shrink-0 size-36 fill-white" />
      <Kordsa class="snap-center flex-shrink-0 size-36 fill-white" />
      <Semeq class="snap-center flex-shrink-0 size-36 fill-white" />
    </div>
  </Container>

  <Container className="py-6 xl:py-24 lg:text-center space-y-2.5 lg:space-y-6">
    <h2 class="text-pretty font-semibold text-4xl">
      Alguns clientes que acreditam em nós
    </h2>
    <div
      class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-12 lg:justify-center"
    >
      <div
        class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
      >
        <Natura class="size-52 lg:size-36 fill-white" />
      </div>
      <div
        class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
      >
        <Nissan class="size-52 lg:size-36 fill-white" />
      </div>
      <div
        class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
      >
        <Manserv class="size-52 lg:size-36 fill-white" />
      </div>
      <div
        class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
      >
        <Kordsa class="size-52 lg:size-36 fill-white" />
      </div>
      <div
        class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
      >
        <Semeq class="size-52 lg:size-36 fill-white" />
      </div>
    </div>
  </Container>

  <Container>
    <div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3">
      <div
        class="bg-linear-to-tr from-lime-400/50 to-lime-300 rounded-2xl p-6 relative h-136 max-lg:hidden -m-px max-xl:overflow-hidden"
      >
        <Picture
          alt="Homem de negócios"
          formats={['webp']}
          src={homemdenegocios}
          class="w-94 absolute bottom-0 -left-28"
        />
        <Picture
          alt="Mulher de negócios"
          formats={['webp']}
          src={mulherdenegocios}
          class="w-96 absolute bottom-0 -right-24"
        />
      </div>

      <div class="col-span-2 flex items-center">
        <div class="xl:w-8/12 xl:mx-auto space-y-5 p-6">
          <h2 class="text-pretty text-4xl font-semibold">
            Por que capacitar sua equipe com a EDUSEG&reg;
          </h2>
          <p>
            Nós cuidamos da burocracia, oferecemos uma plataforma completa para
            simplicar a gestão e capacitação em larga escala de seus
            colaboradores. Com a EDUSEG&reg, sua empresa se beneficia de uma
            tecnologia eficiente e confiável.
          </p>

          <ul class="grid md:grid-cols-2 gap-1 lg:gap-2.5">
            <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
              Centralização de todos os certificados
            </li>
            <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
              Ágilidade na liberação de cursos
            </li>
            <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
              Agendamento para liberação de cursos
            </li>
            <li class="bg-white/10 p-2.5 lg:p-5 rounded-lg">
              Aviso de vencimento para certificados
            </li>
          </ul>

          <div class="text-center">
            <a href="#" class="text-blue-400 underline hover:no-underline">
              Agendar uma demonstração
            </a>
          </div>
        </div>
      </div>
    </div>
  </Container>

  <Container
    className="py-3 lg:py-24 grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6 "
  >
    <div class="space-y-2.5">
      <h4 class="text-4xl lg:text-5xl text-pretty">Módulos deste curso</h4>
      <p class="text-base/6">
        O curso é dividido em módulos para facilitar seu aprendizado e garantir
        que você domine todos os aspectos teóricos e práticos.
      </p>
    </div>
    <div class="lg:col-span-2 flex flex-col gap-1.5">
      <Faq topics={data.course.modules} client:load />
    </div>
  </Container>

  {
    trainer && (
      <Container>
        <div class="bg-white/10 rounded-2xl p-2.5 lg:py-6 xl:py-24">
          <div class="lg:w-8/12 flex max-lg:flex-col gap-5 mx-auto">
            <div class="shrink-0">
              <Picture
                src={francis}
                alt="Francis Ricardo Baretta"
                formats={['webp']}
                class="rounded-xl size-32 outline-2 outline-offset-2 outline-lime-400"
              />
            </div>
            <div class="space-y-2.5">
              <h5 class="text-xl text-pretty">Quem é o instrutor?</h5>
              <h5 class="text-4xl lg:text-5xl text-pretty">
                {trainer.data.name}
              </h5>

              {trainer.data.bio.split(/\r?\n/).map((x) => (
                <p class="text-sm/6 text-white/70">{x}</p>
              ))}

              <div class="flex">
                <a
                  href="https://www.linkedin.com/in/francis-ricardo-baretta-5262ab11a/"
                  target="_blank"
                >
                  <LinkedInIcon className="fill-white/70 w-6" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </Container>
    )
  }
</Layout>