---
import { getCollection, render } from "astro:content";
import { Picture } from "astro:assets";
import { Icon } from "astro-icon/components";
import Layout from "~/layouts/Layout.astro";
import Container from "~/components/Container.astro";
import HeaderNav from "~/components/Course/HeaderNav.astro";

import placeholder from "~/assets/placeholder.png";

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 } = Astro.props;
const { data } = course;
const { Content } = await render(course);
---

<Layout>
    <Fragment slot="head">
        <title>{data.title} &mdash; EDUSEG&reg;</title>
    </Fragment>

    <Fragment slot="nav">
        <HeaderNav />
    </Fragment>

    <section class="space-y-6 lg:space-y-24">
        <Container class="lg:flex items-center justify-start gap-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.excerpt}
                        <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>

        <Content />
    </section>
</Layout>