---
import { Picture } from 'astro:assets'
import { Faq } from '~/components/Faq'
import { StarIcon, ClockIcon } from '@heroicons/react/24/outline'
import { CheckBadgeIcon, LockClosedIcon } from '@heroicons/react/24/solid'
import { Icon } from 'astro-icon/components'
import Layout from '~/layouts/Layout.astro'
import Container from '~/components/Container.astro'
import Carousel from '~/components/Carousel.astro'
import placeholder from '~/assets/placeholder.png'
import mulherdenegocios from '~/assets/mulher-de-negocios.png'
import homemdenegocios from '~/assets/homem-de-negocios.png'
import Kordsa from '~/components/logos/Kordsa.astro'
import Semeq from '~/components/logos/Semeq.astro'
import Natura from '~/components/logos/Natura.astro'
import Nissan from '~/components/logos/Nissan.astro'
import Manserv from '~/components/logos/Manserv.astro'

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

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

  return courses.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
---

<Fragment slot="head">
  <title>{data.title}</title>
</Fragment>

<Layout>
  <div class="space-y-6 lg:space-y-24">
    <Container class="lg:flex items-center justify-start gap-6 max-lg:pt-6">
      <Picture
        src={data?.img ? data.img : placeholder}
        alt={data.title}
        formats={['webp']}
        class="max-lg:hidden max-w-116 grayscale-15"
      />
      <section class="lg:py-24">
        <div class="space-y-5">
          <span class="font-medium">
            {data.course.reciclagem ? <>Curso de reciclagem</> : <>Curso de formação</>}
          </span>
          <h1 class="text-pretty font-semibold text-4xl lg:text-7xl">
            {data.title}
          </h1>
          <p class="text-base/6">
            {data.summary}
            <a href="#modulos" class="text-blue-400 *:hover:underline">
              <sup>[1]</sup>
            </a>
          </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
                <a href="#certificado" class="text-blue-400 *:hover:underline">
                  <sup>[2]</sup>
                </a>
              </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 class="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>
      <Carousel items={[Natura, Kordsa, Semeq, Nissan, Manserv]} />
    </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-5 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">
            <h3 class="text-pretty text-4xl font-semibold">Por que capacitar sua equipe com a EDUSEG&reg;</h3>
            <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 id="modulos" class="grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6">
      <div class="space-y-2.5">
        <h4 class="text-pretty text-4xl lg:text-5xl">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-5 xl:py-32">
            <div class="lg:w-8/12 flex max-lg:flex-col gap-5 mx-auto">
              <div class="shrink-0">
                <Picture
                  src={trainer.data.image}
                  alt={trainer.data.name}
                  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(a) instrutor(a)?</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"
                    aria-label="LinkedIn"
                  >
                    <Icon name="LinkedIn" class="fill-white/70 size-5" />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </Container>
      )
    }

    <Container id="certificado">
      <div
        class="text-black bg-linear-to-t from-lime-600 to-lime-400 border border-lime-400 p-5 lg:py-36 rounded-2xl relative overflow-hidden"
      >
        <LockClosedIcon className="w-96 absolute -right-16 -bottom-16 text-black/10 max-lg:hidden" />

        <div class="lg:w-8/12 2xl:w-6/14 mx-auto space-y-5">
          <h6 class="text-4xl lg:text-6xl/14 lg:font-black">
            Certificados digitais com respaldo legal e gestão completa
          </h6>
          <ul class="lg:text-lg list-disc list-inside">
            <li>Certificado com assinatura digital conforme o padrão ICP-Brasil</li>
            <li>Tudo digital e salvo para sempre na núvem</li>
            <li>Alertas automáticos de vencimento</li>
          </ul>
        </div>
      </div>
    </Container>

    <!-- <Form client:load /> -->
  </div>
</Layout>