---
import { Picture } from 'astro:assets'
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 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 Contact from './_components/Contact.jsx'

import placeholder from './_assets/placeholder.png'
import mulherdenegocios from './_assets/mulher-de-negocios.png'
import homemdenegocios from './_assets/homem-de-negocios.png'

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>
    <section 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?.image ? data.image : 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">
                            <Icon name="clock" class="size-5" />
                            <span>Carga horária de {data.course.hours} horas</span>
                        </li>

                        <li class="flex gap-1">
                            <Icon name="check-badge" class="size-5 text-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-2"
                            target="_blank"
                        >
                            <div class="flex items-center gap-1">
                                <span class="font-bold">4.7</span>
                                <ul class="flex">
                                    <li>
                                        <Icon name="star" class="size-4 text-yellow-500" />
                                    </li>
                                    <li>
                                        <Icon name="star" class="size-4 text-yellow-500" />
                                    </li>
                                    <li>
                                        <Icon name="star" class="size-4 text-yellow-500" />
                                    </li>
                                    <li>
                                        <Icon name="star" class="size-4 text-yellow-500" />
                                    </li>
                                    <li><Icon name="star" class="size-4 text-gray-500" /></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>

        <div class="bg-white/10 py-12 lg:py-24">
            <Container class="flex justify-between lg:w-6/12">
                <ul class="space-y-2.5">
                    <li class="text-5xl">+ 100k</li>
                    <li class="uppercase font-bold text-white/50">Profissionais capacitados</li>
                </ul>
                <ul class="space-y-2.5">
                    <li class="text-5xl">+ 5k</li>
                    <li class="uppercase font-bold text-white/50">Empresas atendidas</li>
                </ul>
                <ul class="space-y-2.5">
                    <li class="text-5xl">12 anos</li>
                    <li class="uppercase font-bold text-white/50">de experiência</li>
                </ul>
            </Container>
        </div>


        <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">Agilidade 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="#contato" class="text-blue-400 underline hover:no-underline">
                                Agendar uma demonstração
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </Container>

        <!-- Course Modules -->
        <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">
                {
                    data.course.modules.map((summary) => (
                        <div
                            x-data="{ open: false }"
                            class="bg-white/10 rounded-lg w-full"
                            :class="{'bg-white/15': open === true}"
                        >
                            <div
                                class="cursor-pointer flex items-center justify-between px-5 py-3"
                                x-on:click="open = !open"
                            >
                                <span>{summary}</span>
                                <Icon
                                    name="chevron"
                                    class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0"
                                    :class="{'-rotate-180': open === true}"
                                />
                            </div>
                            <div
                                x-show="open"
                                class="text-sm/6 text-white/70 space-y-2 px-5 pb-3"
                                style="display: none;"
                            >
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque id
                                    libero semper vulputate a ut ex. Pellentesque semper ultrices mi in efficitur.
                                </p>
                                <p>
                                    Nulla sit amet quam eu neque convallis volutpat. Pellentesque eu commodo sem.
                                    Suspendisse ac lobortis massa, ac mattis mauris. Integer malesuada bibendum ante,
                                    sed consequat augue convallis et.
                                </p>
                            </div>
                        </div>
                    ))
                }
            </div>
        </Container>
        <!-- Course Modules End -->

        <!-- Cert -->
        <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"
            >
                <Icon name="lock-closed" class="size-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">
                    <h5 class="text-4xl lg:text-6xl/14 lg:font-black">
                        Certificados digitais com respaldo legal e gestão completa
                    </h5>
                    <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>
        <!-- Cert End -->

        <!-- Trainer -->
        {
            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">
                                <h6 class="text-xl text-pretty">Quem é o(a) instrutor(a)?</h6>
                                <p class="text-4xl lg:text-5xl text-pretty">{trainer.data.name}</p>

                                <div class="text-sm/6 text-white/70 space-y-2.5" set:html={trainer?.rendered?.html} />

                                <div class="flex">
                                    {trainer.data.networks.map(data => (
                                        <a href={data.url}target="_blank"aria-labelledby={data.alt}>
                                            <Icon name={data.alt.toLowerCase()} class="fill-white/70 size-5" />
                                        </a>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </Container>
            )
        }
        <!-- Trainer End -->

        <!-- Contact Form -->
        <Container id="contato">
            <Contact client:load />
        </Container>
        <!-- Contact Form End -->
    </section>

</Layout>