@page "/am/intro"

<div class="relative flex size-full min-h-screen flex-col bg-normal-normal group/design-root overflow-x-hidden" style='font-family: "Public Sans", "Noto Sans", sans-serif;'>
    <div class="layout-container flex h-full grow flex-col">
        <div class="px-4 sm:px-6 md:px-10 lg:px-24 xl:px-40 flex flex-1 justify-center py-5">
            <div class="layout-content-container flex flex-col max-w-[960px] flex-1">
                <div class="container pt-24">
                    <div class="px-4 md:px-8 py-4">
                        <div class="w-full bg-center bg-no-repeat bg-contain md:bg-contain flex flex-col justify-center items-center overflow-hidden bg-white/35 rounded-xl min-h-[218px] md:h-[300px]"
                             style="background-image: url('/Resources/Images/Logo/Crystal_Icon.png');">
                        </div>
                    </div>
                </div>

                @if (!UserStateService.isLogin)
                {
                    <h3 class="text-[#111518] tracking-light text-2xl font-bold leading-tight px-4 text-center pb-2 pt-3">
                        학원을 위한 통합 플랫폼
                    </h3>

                    <div class="flex px-4 py-2 justify-center">
                        <button class="bg-second-normal hover:bg-second-hover transition-all duration-200 shadow-md text-white font-bold py-3 px-6 rounded-xl"
                                @onclick="OnClickLogin">
                            <span class="truncate">시작하기</span>
                        </button>
                    </div>
                }
                else
                {
                    <div class="flex flex-col px-4 py-2 gap-2">
                        <h3 class="text-[#111518] tracking-light text-xl font-bold leading-tight text-center py-12">
                            @UserStateService.UserData.Name 님, 안녕하세요!<br />
                            학원을 선택해주세요.<br />
                        </h3>
                        <div class="max-h-[180px] overflow-y-auto rounded-xl bg-second-normal/10 border-2 border-text-detail">
                            @foreach (var academy in academyItems)
                            {
                                <a href="/am/@academy.bid" 
                                   class="block w-full px-4 py-3 hover:bg-second-dark border-b border-gray-200 last:border-b-0 group">
                                    <div class="flex items-center justify-between">
                                        <span class="text-text-black group-hover:text-text-white font-medium">@academy.business_name</span>
                                        <svg class="w-5 h-5 text-text-detail group-hover:text-text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                        </svg>
                                    </div>
                                </a>
                            }
                        </div>
                    </div>
                }

                @* <div class="w-full" style="height: 100px;"></div> *@
                <div class="border-b border-text-disabled my-4 pt-12"></div>
                <div class="flex flex-col md:flex-row justify-center items-center gap-4 px-4">
                    <a href="/terms" class="text-text-detail text-sm font-normal leading-normal hover:text-text-black hover:font-bold">이용약관</a>
                    <span class="hidden md:inline text-text-black">·</span>
                    <a href="/privacy" class="text-text-detail text-sm font-normal leading-normal hover:text-text-black hover:font-bold">개인정보처리방침</a>
                    <span class="hidden md:inline text-text-black">·</span>
                    <a href="/contact" class="text-text-detail text-sm font-normal leading-normal hover:text-text-black hover:font-bold">문의하기</a>
                </div>

                <p class="text-text-detail text-sm font-normal leading-normal py-4 px-4 text-center">
                    © 2024 AcaMate. All rights reserved.
                </p>
            </div>
        </div>
    </div>
</div>