---
import { getCollection, getEntries, 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 FlyoutMenu from "~/components/Course/FlyoutMenu.astro";
import BuyButton from "./_components/BuyButton.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 title={data.title}>
    <Fragment slot="head">
        <title>{data.title} &mdash; EDUSEG&reg;</title>
    </Fragment>

    <Fragment slot="nav">
        <FlyoutMenu {...data} />
    </Fragment>

    <section class="space-y-6 lg:space-y-24">
        <div class="relative">
            <div
                aria-hidden="true"
                class="absolute inset-0 grid grid-cols-2 opacity-20 max-lg:hidden"
            >
                <div
                    class="blur-[106px] h-76 bg-gradient-to-br to-lime-400 from-lime-700"
                >
                </div>
                <div
                    class="blur-[106px] h-62 bg-gradient-to-r from-lime-400 to-lime-600"
                >
                </div>
            </div>

            {/* Course */}
            <Container
                class="lg:flex items-center justify-start gap-6 relative z-1"
            >
                <Picture
                    src={data?.image ?? placeholder}
                    alt={data.title}
                    formats={["webp"]}
                    class="max-lg:hidden max-w-116 grayscale-15"
                />
                <section class="max-lg:pt-6 lg:py-24">
                    <div class="space-y-5">
                        <span class="font-semibold">
                            Curso online de {
                                data.course.reciclagem ? (
                                    <>reciclagem</>
                                ) : (
                                    <>formação</>
                                )
                            }
                        </span>
                        <h1
                            class="text-pretty font-bold text-4xl lg:text-7xl"
                            data-pagefind-meta="title"
                            data-pagefind-filter=`curso:${data.course.reciclagem ? 'reciclagem' : 'formação'}`
                        >
                            {data.title}
                        </h1>
                        <p class="text-base/6">
                            {data.excerpt}
                            <a
                                href="#modules"
                                class="text-blue-400 *:hover:underline"
                            >
                                <sup>[1]</sup>
                            </a>
                        </p>
                        <ul class="lg:flex gap-3" data-pagefind-ignore="all">
                            <li class="flex gap-1">
                                <Icon name="clock" class="size-5 mt-0.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 mt-0.5"
                                />
                                <span>
                                    Certificado com assinatura digital
                                    <a
                                        href="#cert"
                                        class="text-blue-400 *:hover:underline"
                                    >
                                        <sup>[2]</sup>
                                    </a>
                                </span>
                            </li>
                        </ul>

                        <div
                            class="flex max-lg:flex-col justify-center items-start gap-2.5 lg:gap-8 lg:mt-16"
                        >
                            <div
                                class="flex flex-col justify-center gap-2.5 max-lg:w-full"
                            >
                                <BuyButton
                                    id={data.id}
                                    name={data.title}
                                    unitPrice={data.course.unit_price}
                                />
                                <a
                                    href="#solutions"
                                    class="text-blue-400 underline hover:no-underline text-center"
                                >
                                    Ver mais modelos de contratação
                                </a>
                            </div>
                            <a
                                href="http://bit.ly/3RlROu6"
                                class="flex flex-col hover:outline rounded-xs 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>
            {/* Course End */}
        </div>

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