---
import { Picture } from "astro:assets";
import { Icon } from "astro-icon/components";
import Layout from "~/layouts/Layout.astro";
import Container from "~/components/Container.astro";
import { Clients } from "~/components/Course";
import Search from "./_components/Search.astro";

import mulhercomepi from "~/assets/mulher-com-epi.png";

let res = await fetch("https://betaeducacao.com.br/wp-json/wp/v2/posts");
let posts = await res.json();
---

<Layout>
    <div class="space-y-6 lg:space-y-12">
        <Container>
            <nav
                class="text-black bg-linear-to-b from-lime-400/90 to-lime-400 border border-lime-400 rounded-2xl lg:grid grid-cols-6"
            >
                <div class="col-span-4 flex items-center justify-center">
                    <div class="lg:w-4/6 max-lg:p-5 space-y-6 lg:space-y-12">
                        <div class="space-y-1.5">
                            <label for="search" class="block">
                                <h1
                                    class="text-pretty font-semibold text-3xl lg:text-4xl"
                                >
                                    Digite o curso para ver todos detalhes
                                </h1>
                            </label>

                            <div
                                class="flex gap-2.5 border border-black bg-white w-full rounded-lg relative"
                            >
                                <label for="search" class="py-3.5 pl-3">
                                    <Icon
                                        name="magnifying-glass"
                                        class="size-6"
                                    />
                                </label>
                                <Search />
                            </div>
                        </div>

                        <div>
                            <h2 class="font-bold text-xl flex gap-1">
                                <Icon name="arrow-trending-up" class="size-6" />
                                <span>Cursos mais procurados</span>
                            </h2>
                            <ul class="list-disc list-inside font-medium">
                                <li>CIPA</li>
                                <li>Lei Lucas</li>
                                <li>Noções em Primeiros Socorros</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-span-2 relative h-116 -m-px max-lg:hidden">
                    <Picture
                        alt="Mulher com EPI"
                        formats={["webp"]}
                        src={mulhercomepi}
                        class="w-86 left-0 bottom-0 absolute"
                    />
                </div>
            </nav>
        </Container>

        <Clients />

        <Container>
            <section>
                <h1 class="text-pretty font-semibold text-4xl">
                    Últimos posts
                </h1>

                {
                    posts.map((post) => (
                        <article>
                            <h2>
                                <a
                                    href={`/blog/${post.slug}`}
                                    set:html={post.title.rendered}
                                />
                            </h2>
                        </article>
                    ))
                }
            </section>
        </Container>
    </div>
</Layout>