---
import "../styles/app.css";
import { Regular as Logo } from "@components/Logo";
import { Container } from "@components/Container";
import { Select } from "@components/Select";
import {
    ArrowLeftStartOnRectangleIcon,
    AcademicCapIcon,
} from "@heroicons/react/24/solid";
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="generator" content={Astro.generator} />
        <title>EDUSEG&reg; &mdash; Educação que garante sua segurança</title>
    </head>

    <body>
        <Container className="flex items-center p-3">
            <Logo className="h-8" />

            <div class="ml-auto">
                <a href="#" class="flex gap-1 items-center">
                    <ArrowLeftStartOnRectangleIcon className="w-5 rotate-180" />
                    <>Entrar</>
                </a>
            </div>
        </Container>

        <section class="bg-lime-400 sticky top-0 z-10">
            <Container className="flex items-center p-3">
                <div class="flex gap-1.5 lg:gap-3 items-center">
                    <div class="bg-black p-1.5 lg:p-3 rounded-lg lg:rounded-xl">
                        <AcademicCapIcon className="w-5 fill-lime-400" />
                    </div>

                    <div class="flex gap-1.5">
                        <div class="text-black truncate max-lg:max-w-36">
                            NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
                        </div>
                        <!-- <Select client:load /> -->
                    </div>
                </div>

                <div class="ml-auto">
                    <button
                        class="bg-black p-2.5 rounded-md cursor-pointer text-sm"
                    >
                        Comprar R$149,00
                    </button>
                </div>
            </Container>
        </section>

        <slot />

        <footer class="bg-stone-900 p-3 lg:py-10">
            <Container className="space-y-5">
                <div class="space-y-1">
                    <Logo className="h-10" />
                    <p class="text-sm text-green-tertiary leading-4">
                        Educação que garante<br />sua segurança.
                    </p>
                </div>

                <div class="space-y-1">
                    <h6 class="text-xl">Cursos</h6>
                    <ul>
                        <li>Lei Lucas</li>
                        <li>NR-18 PEMT Plataforma Móvel de Trabalho Aéreo</li>
                        <li>NR-35 Trabalho em Altura</li>
                        <li>NR-10 Básico</li>
                    </ul>
                </div>
            </Container>
        </footer>
    </body>
</html>
