@version(2)
{{-- 첫 화면 본문. 시술과 디자이너는 예약 모듈, 매장은 지점 모듈에서 그대로 가져온다 --}}

@if ($hs_intro_title)
<section class="hs-sec hs-intro">
	<div class="hs-wrap">
		<span class="hs-label"><i></i>PHILOSOPHY</span>
		<h2 class="hs-intro-title">{!! nl2br(escape($hs_intro_title)) !!}</h2>
		@if ($hs_intro_text)
		<p class="hs-intro-text">{!! nl2br(escape($hs_intro_text)) !!}</p>
		@endif
		@if ($hs_intro_sign)
		<span class="hs-intro-sign">{{ $hs_intro_sign }}</span>
		@endif
	</div>
</section>
@endif

@if (count($hs_services))
<section class="hs-sec hs-services">
	<div class="hs-wrap">
		<div class="hs-sec-head">
			<span class="hs-label"><i></i>SERVICE</span>
			<h2 class="hs-sec-title">{{ $lang->hs_services }}</h2>
			<p class="hs-sec-note">{{ $lang->hs_services_note }}</p>
		</div>

		<div class="hs-menu">
			@foreach ($hs_services as $category => $items)
			<div class="hs-menu-group">
				@if ($category !== '')
				<h3 class="hs-menu-cat"><span>{{ $category }}</span></h3>
				@endif
				<ul class="hs-menu-list">
					@foreach ($items as $svc)
					<li class="hs-menu-row">
						<div class="hs-menu-name">
							<b>{{ $svc->title }}</b>
							@if ($svc->summary)<span>{{ $svc->summary }}</span>@endif
						</div>
						<span class="hs-menu-rule"></span>
						<div class="hs-menu-meta">
							<span class="hs-menu-time">{{ (int)$svc->duration }}{{ $lang->hs_minutes }}</span>
							<span class="hs-menu-price">{{ (int)$svc->price > 0 ? number_format((int)$svc->price) : $lang->hs_ask }}</span>
						</div>
					</li>
					@endforeach
				</ul>
			</div>
			@endforeach
		</div>

		@if ($hs_reserve_url)
		<div class="hs-sec-foot">
			<a class="hs-link" href="{{ $hs_reserve_url }}">
				<span>{{ $lang->hs_see_all_services }}</span>
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
			</a>
		</div>
		@endif
	</div>
</section>
@endif

@if (count($hs_staff))
<section class="hs-sec hs-staff">
	<div class="hs-wrap">
		<div class="hs-sec-head">
			<span class="hs-label"><i></i>STYLIST</span>
			<h2 class="hs-sec-title">{{ $lang->hs_stylists }}</h2>
			<p class="hs-sec-note">{{ $lang->hs_stylists_note }}</p>
		</div>
	</div>

	{{-- 가로로 흐르게 두어 화면 밖까지 이어지는 인상을 준다 --}}
	<div class="hs-rail" data-rail>
		<ul class="hs-rail-track">
			@foreach ($hs_staff as $i => $st)
			<li class="hs-card">
				<div class="hs-card-photo">
					@if ($st->thumb)
					<img src="{{ $st->thumb }}" alt="" loading="lazy" />
					@else
					<span class="hs-card-none">{{ $st->initial }}</span>
					@endif
					<span class="hs-card-no">{{ sprintf('%02d', $i + 1) }}</span>
				</div>
				<div class="hs-card-body">
					@if ($st->position)<span class="hs-card-role">{{ $st->position }}</span>@endif
					<b class="hs-card-name">{{ $st->name }}</b>
					@if ($st->branch_name)<span class="hs-card-branch">{{ $st->branch_name }}</span>@endif
					@if ($st->summary)<p class="hs-card-text">{{ $st->summary }}</p>@endif
					@if ($hs_reserve_url)
					<a class="hs-link hs-link-sm" href="{{ $hs_reserve_url }}">
						<span>{{ $lang->hs_book_with }}</span>
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
					</a>
					@endif
				</div>
			</li>
			@endforeach
		</ul>
	</div>
</section>
@endif

@if (count($hs_gallery))
<section class="hs-sec hs-gallery">
	<div class="hs-wrap">
		<div class="hs-sec-head">
			<span class="hs-label"><i></i>LOOKBOOK</span>
			<h2 class="hs-sec-title">{{ $lang->hs_styles }}</h2>
		</div>
	</div>

	<ul class="hs-mosaic">
		@foreach ($hs_gallery as $g)
		<li>
			<a href="{{ $g['href'] }}">
				@if ($g['thumb'])
				<img src="{{ $g['thumb'] }}" alt="" loading="lazy" />
				@else
				<span class="hs-mosaic-none"></span>
				@endif
				<span class="hs-mosaic-cap">{{ $g['title'] }}</span>
			</a>
		</li>
		@endforeach
	</ul>
</section>
@endif

@if (count($hs_branches))
<section class="hs-sec hs-branches">
	<div class="hs-wrap">
		<div class="hs-sec-head">
			<span class="hs-label"><i></i>SALON</span>
			<h2 class="hs-sec-title">{{ $lang->hs_branches }}</h2>
		</div>

		<ul class="hs-branch-list">
			@foreach ($hs_branches as $br)
			<li class="hs-branch-item">
				<div class="hs-branch-head">
					<b class="hs-branch-name">{{ $br['name'] }}</b>
					<span class="hs-branch-open @if($br['open_now']) is-open @endif">{{ $br['open_now'] ? $lang->hs_open_now : $lang->hs_closed_now }}</span>
				</div>
				@if ($br['summary'])<p class="hs-branch-summary">{{ $br['summary'] }}</p>@endif
				<dl class="hs-branch-meta">
					<dt>ADDRESS</dt>
					<dd>{{ $br['address'] }}</dd>
					<dt>HOURS</dt>
					<dd>{{ $br['hours'] }}</dd>
					@if ($br['tel'])
					<dt>CALL</dt>
					<dd><a href="tel:{{ $br['tel'] }}">{{ $br['tel'] }}</a></dd>
					@endif
				</dl>
				@if ($br['href'])
				<a class="hs-link hs-link-sm" href="{{ $br['href'] }}">
					<span>{{ $lang->hs_branch_detail }}</span>
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
				</a>
				@endif
			</li>
			@endforeach
		</ul>
	</div>
</section>
@endif

@if ($hs_cta_title)
<section class="hs-cta" @if($hs_cta_image) style="background-image:url('{{ $hs_cta_image }}')" @endif>
	<div class="hs-cta-veil"></div>
	<div class="hs-wrap hs-cta-inner">
		<span class="hs-label is-light"><i></i>RESERVATION</span>
		<h2 class="hs-cta-title">{!! nl2br(escape($hs_cta_title)) !!}</h2>
		@if ($hs_reserve_url)
		<a class="hs-btn" href="{{ $hs_reserve_url }}">
			<span>{{ $lang->hs_reserve }}</span>
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
		</a>
		@endif
	</div>
</section>
@endif