@php
    $tenantId = $tenantId ?? (tenant() ? tenant('id') : null);
    $settings = $tenantSiteSettings ?? null;
    $siteName = $siteName ?? ($settings?->site_name ?? 'qpost');
@endphp

@extends('tenant.layouts.base')

@section('body-class', 'min-h-screen bg-[#fffaf1] c-main scope-tenant theme-sss')

@section('body')
    <div class="min-h-screen px-4 py-5 md:px-6 md:py-6">
        <div class="mx-auto grid w-full max-width gap-4">
            <div class="rounded-3xl border border-amber-200 bg-amber-50 px-4 py-2 text-center text-xs font-bold tracking-[0.18em] text-amber-900">
                SAMPLE AUTH THEME
            </div>

            @include('tenant.layouts.header', [
                'tenantId' => $tenantId,
                'mode' => 'auth',
            ])

            <section class="grid gap-4 md:grid-cols-2">
                <x-ui.card padded class="grid gap-4 border border-amber-200 bg-base shadow-sm">
                    <div class="flex flex-col gap-3">
                        <div class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.08em] text-amber-800">
                            <span class="inline-block h-2 w-2 rounded-full bg-amber-500"></span>
                            sample access
                        </div>

                        <h1 class="m-0 text-[clamp(2rem,3vw,3.1rem)] font-extrabold tracking-[-0.055em] c-main">
                            @yield('hero-title', '샘플 테마 화면')
                        </h1>
                        <p class="m-0 max-w-prose text-md leading-7 c-muted">
                            @yield('hero-copy', 'default와 다른 레이아웃으로 바뀌는지 빠르게 확인하는 용도입니다.')
                        </p>
                    </div>

                    <div class="grid gap-3">
                        <div class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4">
                            <div class="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-amber-500 text-sm font-bold text-white">A</div>
                            <div>
                                <p class="m-0 text-sm font-semibold c-main">배경과 강조색 변경</p>
                                <p class="mt-1 mb-0 text-sm leading-6 c-muted">샘플 테마가 적용되면 외형이 바로 달라집니다.</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4">
                            <div class="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-amber-600 text-sm font-bold text-white">B</div>
                            <div>
                                <p class="m-0 text-sm font-semibold c-main">기능은 동일</p>
                                <p class="mt-1 mb-0 text-sm leading-6 c-muted">레이아웃만 바뀌고 로그인/가입 동작은 그대로 유지됩니다.</p>
                            </div>
                        </div>
                    </div>
                </x-ui.card>

                <x-ui.card padded class="grid gap-4 border border-amber-200 bg-base shadow-sm">
                    <div class="flex flex-wrap items-start justify-between gap-3">
                        <div>
                            <h2 class="m-0 text-xl font-extrabold tracking-[-0.04em] c-main">{{ $title ?? 'qpost' }}</h2>
                            <p class="mt-1 mb-0 text-sm leading-6 c-muted">{{ $panelCopy ?? '계정 정보를 입력해 계속 진행하세요.' }}</p>
                        </div>

                        @if (! empty($panelBadge))
                            <x-ui.badge variant="warning" size="md">{{ $panelBadge }}</x-ui.badge>
                        @endif
                    </div>

                    {{ $slot }}
                </x-ui.card>
            </section>

            @include('tenant.layouts.footer', [
                'tenantId' => $tenantId,
                'mode' => 'auth',
            ])
        </div>
    </div>
@endsection