@extends('layouts.app')

@section('title', ($shop->name ?? 'GLOBEAU BEST') . ' - 프리미엄 뷰티샵')

@section('description', ($shop->introduction ?? '대한민국 프리미엄 뷰티 플랫폼 Globeau'))

@section('content')

<div class="container py-4">

    <!-- 브레드크럼 및 SNS 공유 버튼 -->
    <div class="d-flex justify-content-between align-items-center common-header-bar mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb common-breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ url('/') }}" class="text-brand text-decoration-none" title="홈">
                        <i class="fas fa-home"></i>
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('shops.index') }}" class="text-muted text-decoration-none">뷰티샵</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="text-dark fw-bold" aria-current="page">뷰티샵 소개</span>
                </li>
            </ol>
        </nav>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('shops.index') }}" class="btn btn-sm btn-outline-premium d-none d-md-block px-3 text-decoration-none">뷰티샵 리스트</a>
            <div class="d-flex">
                <a href="#" class="sns-share-icon" title="카카오톡"><i class="fas fa-comment"></i></a>
                <a href="#" class="sns-share-icon" title="페이스북"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="sns-share-icon" title="트위터"><i class="fab fa-twitter"></i></a>
            </div>
        </div>
    </div>

    <!-- 샵 메인 배너 및 모바일 반응형 배너 영역 -->
    <h1 class="fw-bold mb-2 mb-md-3 text-dark brand-font">{{ $shop->name ?? 'GLOBEAU BEAUTY SHOP' }}</h1>

	@if(!empty($shop->banner_path) || !empty($shop->og_image_path))
    <div class="mb-4">

        <!-- [PC 전용] 1200x400 와이드 대형 배너 (md 이상 화면에서만 노출) -->
        @if(!empty($shop->banner_path))
        <img src="{{ asset('storage/' . $shop->banner_path) }}"
            alt="{{ $shop->name }} PC 메인 배너"
            class="img-fluid shadow-sm d-none d-md-block w-100 mb-4 shop-main-banner">
        @endif

        <!-- [모바일 전용] og_image_path를 활용한 모바일 메인 배너 (md 미만 화면에서만 노출) -->
        @if(!empty($shop->og_image_path))
        <div class="d-block d-md-none shop-mobile-banner-wrap mb-4 shadow-sm">
            <img src="{{ asset('storage/' . $shop->og_image_path) }}"
                alt="{{ $shop->name }} 모바일 배너"
                class="shop-mobile-banner-img">
        </div>
        @endif
    </div>
    @endif

    <!-- 샵 상세 정보 영역 -->
    <h2 class="visually-hidden">{{ $shop->name ?? 'GLOBEAU BEAUTY SHOP' }} 상세 정보</h2>
    <div class="row shop-detail-box mx-0 p-0" style="margin-bottom:2rem !important;">

        <!-- 로고 영역: 배너와 동일한 16:9 비율 적용 -->
        <div class="col-md-4 col-xxl-3 p-0">
            <div class="shop-logo-wrap">
                <img src="{{ !empty($shop->logo_path) ? asset('storage/' . $shop->logo_path) : 'https://globeau.kr/images/default_shop.png' }}"
                    class="shop-logo-img"
                    alt="샵 로고">
            </div>
        </div>

        <!-- 상세 정보 영역: 모바일 여백 적용 -->
        <div class="col-md-8 col-xxl-9 p-3 p-md-4">

            <ul class="list-unstyled mb-4 shop-info-list">
                <li class="d-flex py-2"><i class="fas fa-map-marker-alt text-brand mt-1 me-3"></i> <span><strong>지역:</strong> {{ $shop->region_sido }} {{ $shop->region_sigungu }}</span></li>
                <li class="d-flex py-2"><i class="fas fa-tags text-brand mt-1 me-3"></i> <span><strong>전문분야:</strong> {{ $shop->region_category ?? '두피, 에너지테라피, 피부' }}</span></li>
                <li class="d-flex py-2"><i class="fas fa-building text-brand mt-1 me-3"></i> <span><strong>주소:</strong> [{{ $shop->zipcode }}] {{ $shop->address1 }} {{ $shop->address2 }}</span></li>
                @if(!empty($shop->naver_place_url))
                <li class="d-flex py-2"><i class="fas fa-globe text-brand mt-1 me-3"></i> <span><strong>홈페이지:</strong> <a href="{{ $shop->naver_place_url }}" target="_blank" class="text-brand text-decoration-none fw-bold">네이버 플레이스 바로가기</a></span></li>
                @endif
            </ul>

            <div class="d-flex flex-column flex-sm-row shop-action-buttons gap-2 mt-3">
                @if(!empty($shop->kakao_channel_url))
                <a href="{{ $shop->kakao_channel_url }}" target="_blank" class="btn btn-kakao shadow-sm btn-shop-action">
                    <i class="fas fa-comment me-1"></i> 카카오톡 채널상담
                </a>
                @endif
                @if(!empty($shop->naver_place_url))
                <a href="{{ $shop->naver_place_url }}" target="_blank" class="btn btn-outline-premium shadow-sm btn-shop-action d-inline-flex align-items-center justify-content-center">
                    <i class="fas fa-map-marked-alt me-1 text-brand"></i> 네이버 플레이스
                </a>
                @endif
            </div>
        </div>
    </div>
	
	<!-- 뷰티샵 상세 본문 소개 영역 -->
    <div class="card py-4 border-0 mb-4">
        <h3 class="fw-bold text-dark mb-3 text-ellipsis-single" title="{{ $shop->name ?? '뷰티샵' }} 소개">{{ $shop->name ?? '뷰티샵' }} 소개</h3>

        <!-- 본문 감싸는 래퍼와 그라데이션 형제 관계 (공용 클래스 적용) -->
        <div class="position-relative mb-3">
            <div class="content-fold-wrapper text-secondary" style="line-height: 1.7; font-size: 0.95rem;">
                {!! $shop->description ?? $shop->introduction ?? '등록된 상세 소개 내용이 없습니다.' !!}
            </div>
            <!-- 하단 그라데이션 레이어 -->
            <div class="content-fold-fade"></div>
        </div>

        <!-- 펼쳐보기 / 접기 버튼 (공용 클래스 적용) -->
        <div class="text-center pt-3 border-top">
            <button type="button" class="content-toggle-btn more-badge-link">
                <span class="btn-text">상세내용 펼쳐보기</span> 
                <span class="icon-circle"><i class="fas fa-chevron-down"></i></span>
            </button>
        </div>
    </div>
    <!-- // 백엔드 연동 영역 끝 -->


    <!-- ==========================================================================
         [하드코딩 영역] 공지사항 및 유튜브 영상
         ========================================================================== -->
    <div class="row mb-5 g-4">
        <div class="col-lg-12">
            <div class="alert bg-brand text-white border-0 p-4 text-center mb-4" style="border-radius: var(--radius-fixed);">
                <h5 class="fw-bold mb-2"><i class="fas fa-bullhorn me-2"></i>공지사항</h5>
                <p class="mb-0 fw-light">{{ $shop->name ?? 'GLOBEAU BEST' }} 뷰티샵 공지사항입니다. 매장 방문 전 확인 부탁드립니다.</p>
            </div>
            <div class="video-wrapper">
                <iframe src="https://www.youtube.com/embed/lmZB7Wu19Ok?rel=0&amp;vq=hd1080&amp;autoplay=0" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>


    <!-- ==========================================================================
         [하드코딩 영역] 프로그램 카드 그리드
         ========================================================================== -->
    <div class="text-center mb-5 mt-5">
        <h2 class="section-title">{{ $shop->name ?? 'GLOBEAU BEST' }} 프로그램</h2>
    </div>

    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-3 g-md-4 mb-5">
        <!-- 프로그램 아이템 1 -->
        <div class="col">
            <div class="card card-premium flex-fill h-100">
                <div class="card-img-wrapper">
                    <img src="https://114beauty.com/upload_file/beauty/bp_img_69c3bae1a2e27.jpg" alt="윤곽 100분">
                </div>
                <div class="card-body p-2 p-md-3 d-flex flex-column">
                    <h6 class="card-title fw-bold text-truncate mb-1" style="font-size:0.95rem;">윤곽 100분</h6>
                    <p class="text-muted small text-truncate mb-2" style="font-size:0.75rem;">리프팅 마스크, 진정 모델링</p>
                    <div class="mt-auto text-end">
                        <small class="text-muted text-decoration-line-through d-block" style="font-size:0.7rem;">150,000</small>
                        <span class="badge bg-danger mb-1 px-1">7% OFF</span>
                        <h6 class="fw-bold text-dark mb-1">140,000원</h6>
                        <span class="badge bg-light text-brand border border-brand" style="font-size:0.6rem;">적립 140,000P</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 프로그램 아이템 2 -->
        <div class="col">
            <div class="card card-premium flex-fill h-100">
                <div class="card-img-wrapper">
                    <img src="https://114beauty.com/upload_file/beauty/bp_img_69c3ac9fa1433.jpg" alt="베이직 60분">
                </div>
                <div class="card-body p-2 p-md-3 d-flex flex-column">
                    <h6 class="card-title fw-bold text-truncate mb-1" style="font-size:0.95rem;">베이직 60분</h6>
                    <p class="text-muted small text-truncate mb-2" style="font-size:0.75rem;">클렌징, 수분시트마스크</p>
                    <div class="mt-auto text-end">
                        <small class="text-muted text-decoration-line-through d-block" style="font-size:0.7rem;">50,000</small>
                        <span class="badge bg-danger mb-1 px-1">10% OFF</span>
                        <h6 class="fw-bold text-dark mb-1">45,000원</h6>
                        <span class="badge bg-light text-brand border border-brand" style="font-size:0.6rem;">적립 45,000P</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 프로그램 아이템 3 -->
        <div class="col">
            <div class="card card-premium flex-fill h-100">
                <div class="card-img-wrapper">
                    <img src="https://114beauty.com/upload_file/beauty/bp_img_69c3beb7a170d.jpg" alt="헤드런 B 60분">
                </div>
                <div class="card-body p-2 p-md-3 d-flex flex-column">
                    <h6 class="card-title fw-bold text-truncate mb-1" style="font-size:0.95rem;">헤드런 B 60분</h6>
                    <p class="text-muted small text-truncate mb-2" style="font-size:0.75rem;">두피순환마스크, 샴푸</p>
                    <div class="mt-auto text-end">
                        <small class="text-muted text-decoration-line-through d-block" style="font-size:0.7rem;">100,000</small>
                        <span class="badge bg-danger mb-1 px-1">10% OFF</span>
                        <h6 class="fw-bold text-dark mb-1">90,000원</h6>
                        <span class="badge bg-light text-brand border border-brand" style="font-size:0.6rem;">적립 90,000P</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 프로그램 아이템 4 -->
        <div class="col">
            <div class="card card-premium flex-fill h-100">
                <div class="card-img-wrapper">
                    <img src="https://114beauty.com/upload_file/beauty/bp_img_69c3b7423c9e3.jpg" alt="골드 70분">
                </div>
                <div class="card-body p-2 p-md-3 d-flex flex-column">
                    <h6 class="card-title fw-bold text-truncate mb-1" style="font-size:0.95rem;">골드 70분</h6>
                    <p class="text-muted small text-truncate mb-2" style="font-size:0.75rem;">골드앰플, 골드마스크</p>
                    <div class="mt-auto text-end">
                        <small class="text-muted text-decoration-line-through d-block" style="font-size:0.7rem;">100,000</small>
                        <span class="badge bg-danger mb-1 px-1">10% OFF</span>
                        <h6 class="fw-bold text-dark mb-1">90,000원</h6>
                        <span class="badge bg-light text-brand border border-brand" style="font-size:0.6rem;">적립 90,000P</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 프로그램 아이템 5 -->
        <div class="col">
            <div class="card card-premium flex-fill h-100">
                <div class="card-img-wrapper">
                    <img src="https://114beauty.com/upload_file/beauty/bp_img_69c3bdd74ea4a.jpg" alt="부분 전신 60분">
                </div>
                <div class="card-body p-2 p-md-3 d-flex flex-column">
                    <h6 class="card-title fw-bold text-truncate mb-1" style="font-size:0.95rem;">부분전신 60분</h6>
                    <p class="text-muted small text-truncate mb-2" style="font-size:0.75rem;">후면/앞면 관리</p>
                    <div class="mt-auto text-end">
                        <small class="text-muted text-decoration-line-through d-block" style="font-size:0.7rem;">100,000</small>
                        <span class="badge bg-danger mb-1 px-1">10% OFF</span>
                        <h6 class="fw-bold text-dark mb-1">90,000원</h6>
                        <span class="badge bg-light text-brand border border-brand" style="font-size:0.6rem;">적립 90,000P</span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- ==========================================================================
         [하드코딩 영역] 가격 상세 리스트 표
         ========================================================================== -->
    <div class="row justify-content-center mb-5">
        <div class="col-lg-10">
            <div class="price-list-header d-flex align-items-center">
                <i class="fas fa-spa me-2"></i> MIO aesthetic FACE 프로그램
            </div>
            <div class="bg-white border shadow-sm mb-4 p-2 p-md-4" style="border-radius: var(--radius-fixed);">
                <div class="price-list-item flex-column flex-md-row align-items-start align-items-md-center">
                    <div><i class="far fa-dot-circle text-brand me-2"></i>베이직 60분 1회 (수분시트마스크)</div>
                    <div class="fw-bold mt-2 mt-md-0">50,000원 <span class="text-muted fw-normal ms-2 small">(5회 200,000원)</span></div>
                </div>
                <div class="price-list-item flex-column flex-md-row align-items-start align-items-md-center">
                    <div><i class="far fa-dot-circle text-brand me-2"></i>스페셜 70분 1회 (괄사, 진정모델링)</div>
                    <div class="fw-bold mt-2 mt-md-0">70,000원 <span class="text-muted fw-normal ms-2 small">(5회 280,000원)</span></div>
                </div>
                <div class="price-list-item flex-column flex-md-row align-items-start align-items-md-center">
                    <div><i class="far fa-dot-circle text-brand me-2"></i>프리미엄 90분 1회 (특수마스크)</div>
                    <div class="fw-bold mt-2 mt-md-0">100,000원 <span class="text-muted fw-normal ms-2 small">(5회 400,000원)</span></div>
                </div>
            </div>

            <div class="price-list-header d-flex align-items-center">
                <i class="fas fa-leaf me-2"></i> BODY 프로그램 (핸드링 + 기기 or 도구)
            </div>
            <div class="bg-white border shadow-sm mb-4 p-2 p-md-4" style="border-radius: var(--radius-fixed);">
                <div class="price-list-item flex-column flex-md-row align-items-start align-items-md-center">
                    <div><i class="far fa-dot-circle text-brand me-2"></i>전신 (얼굴포함) 60분 1회</div>
                    <div class="fw-bold mt-2 mt-md-0">121,000원 <span class="text-muted fw-normal ms-2 small">(5회 484,000원)</span></div>
                </div>
                <div class="price-list-item flex-column flex-md-row align-items-start align-items-md-center">
                    <div><i class="far fa-dot-circle text-brand me-2"></i>산모 (얼굴포함) 60분 1회</div>
                    <div class="fw-bold mt-2 mt-md-0">121,000원 <span class="text-muted fw-normal ms-2 small">(5회 484,000원)</span></div>
                </div>
            </div>
        </div>
    </div>


    <!-- ==========================================================================
         [하드코딩 영역] 추천 제품 및 이벤트 배너
         ========================================================================== -->
    <section class="py-5 bg-light rounded-3 my-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="section-title">{{ $shop->name ?? 'GLOBEAU BEST' }} 추천제품</h2>
                <p class="text-muted small">홈케어를 위한 에스테틱 전용 베스트 상품</p>
            </div>

            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-3 g-md-4">
                <div class="col">
                    <div class="card card-premium h-100">
                        <div class="card-img-wrapper square">
                            <img src="https://114beauty.com/upload_file/beauty/bi_img_69a7efaa74f96.png" alt="스프레이">
                        </div>
                        <div class="card-body p-2 p-md-3 d-flex flex-column">
                            <h6 class="card-title fw-bold text-truncate mb-1" style="font-size:0.85rem;">르피랩 메이신 레드 스프레이</h6>
                            <div class="mt-auto text-end">
                                <h6 class="fw-bold text-dark mb-1">44,900원</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card card-premium h-100">
                        <div class="card-img-wrapper square">
                            <img src="https://114beauty.com/upload_file/beauty/bi_img_6a338f4dbaef5.jpg" alt="프로바이오틱스">
                        </div>
                        <div class="card-body p-2 p-md-3 d-flex flex-column">
                            <h6 class="card-title fw-bold text-truncate mb-1" style="font-size:0.85rem;">더이앤 포스트 프로바이오틱스</h6>
                            <div class="mt-auto text-end">
                                <h6 class="fw-bold text-dark mt-2 mb-1">78,000원</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="section-more-wrap">
                <a href="#" class="more-pill-link">제품 전체보기 <i class="fas fa-arrow-right"></i></a>
            </div>
        </div>
    </section>

</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('css/shop/shop_view.css') }}">
@endpush

@push('scripts')
<script>

</script>
@endpush