@extends('layouts.app')

@section('title', 'Globeau - Premium Beauty Mall')

@section('content')

    <!-- Main Hero Swiper Banner -->
    <div class="swiper hero-swiper d-lg-none">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background: linear-gradient(135deg, #f6f0ec 0%, #e9dfd9 100%);">
                <div class="container text-center text-md-start">
                    <span class="badge bg-brand text-white mb-2 px-3 py-2 fw-normal">NEW ARRIVAL</span>
                    <h1 class="fw-bold mb-2 mb-md-3 text-dark brand-font">Globeau 스킨부스터 기획전</h1>
                    <p class="mb-4 text-secondary">피부 본연의 광채를 되찾아주는 특별한 모카 브론즈 케어</p>
                    <a href="{{ route('shops.create') }}" class="btn-premium text-decoration-none d-inline-block">자세히 보기</a>
                </div>
            </div>
            <div class="swiper-slide" style="background: linear-gradient(135deg, #f0eae5 0%, #faede8 100%);">
                <div class="container text-center text-md-start">
                    <span class="badge bg-dark mb-2 px-3 py-2 text-white">EVENT</span>
                    <h1 class="fw-bold mb-2 mb-md-3 brand-font">포인트 쇼핑몰 오픈</h1>
                    <p class="mb-4 text-secondary">포인트로 결제하고 더 많은 프리미엄 혜택을 누리세요.</p>
                    <a href="{{ route('shops.create') }}" class="btn-premium text-decoration-none d-inline-block">쇼핑하러 가기</a>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <!-- 주요 이벤트 가로 배너 섹션 (반응형: 3개 ➔ 2개 ➔ 1개) -->
    <section class="container my-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="fw-bold brand-font text-dark mb-0">HOT EVENT & 기획전</h2>
            <a href="#" class="text-muted small text-decoration-none">전체보기 <i class="fas fa-chevron-right ms-1" style="font-size: 0.7rem;"></i></a>
        </div>

        <!-- 반응형 그리드 래퍼 -->
        <div class="row g-4">
            
            <!-- [항상 노출] 배너 1: 최대화면, lg, sm 모든 구간에서 상시 보임 -->
            <div class="col-sm-12 col-md-6 col-xl-4">
                <a href="#" class="main-event-banner-card">
                    <div class="main-event-banner-bg" style="background: linear-gradient(135deg, #2c221e 0%, #4a3b32 100%);"></div>
                    <div class="main-event-banner-content">
                        <span class="badge bg-brand text-white mb-2 align-self-start px-2 py-1" style="font-size: 0.7rem;">SPECIAL</span>
                        <h5 class="fw-bold mb-1 text-white">프리미엄 스킨부스터 런칭</h5>
                        <p class="small text-light opacity-75 mb-0">지금 바로 특별한 혜택을 만나보세요.</p>
                    </div>
                </a>
            </div>

            <!-- [lg 이상에서만 노출] 배너 2: 태블릿(md) 이하에서는 숨겨짐 -->
            <div class="col-6 col-lg-6 col-xl-4 d-none d-md-block">
                <a href="#" class="main-event-banner-card">
                    <div class="main-event-banner-bg" style="background: linear-gradient(135deg, #d4a373 0%, #faedcd 100%);"></div>
                    <div class="main-event-banner-content">
                        <span class="badge bg-dark text-white mb-2 align-self-start px-2 py-1" style="font-size: 0.7rem;">EVENT</span>
                        <h5 class="fw-bold mb-1 text-dark">포인트 2배 적립 위크</h5>
                        <p class="small text-dark opacity-75 mb-0">구매 금액의 두 배를 돌려드립니다.</p>
                    </div>
                </a>
            </div>

            <!-- [PC 대화면 전용] 배너 3: 화면이 lg 미만(태블릿/모바일)으로 줄어들면 자동으로 숨김 -->
            <div class="col-6 col-xl-4 d-none d-xl-block">
                <a href="#" class="main-event-banner-card">
                    <div class="main-event-banner-bg" style="background: linear-gradient(135deg, #6b705c 0%, #b7b7a4 100%);"></div>
                    <div class="main-event-banner-content">
                        <span class="badge bg-brand text-white mb-2 align-self-start px-2 py-1" style="font-size: 0.7rem;">LIMITED</span>
                        <h5 class="fw-bold mb-1 text-white">홈에스테틱 베스트 세트</h5>
                        <p class="small text-light opacity-75 mb-0">한정 수량 특가 기회를 놓치지 마세요.</p>
                    </div>
                </a>
            </div>

        </div>
    </section>

    <!-- 특별 아이콘 퀵메뉴 -->
    <section class="icon-menu-container py-4 bg-light border-bottom">
        <div class="container">
            <div class="quick-icon-menu d-flex justify-content-between justify-content-md-center gap-3 overflow-auto" style="scrollbar-width: none;">
                <a href="#" class="quick-icon-card text-decoration-none text-dark text-center p-3 border rounded-3 bg-white flex-shrink-0" style="width: 120px;">
                    <div class="icon-wrapper mb-2 mx-auto d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: var(--primary-light); color: var(--primary-color); border-radius: 6px;"><i class="fas fa-store"></i></div>
                    <div class="quick-icon-text fw-bold small">베스트샵</div>
                </a>
                <a href="#" class="quick-icon-card text-decoration-none text-dark text-center p-3 border rounded-3 bg-white flex-shrink-0" style="width: 120px;">
                    <div class="icon-wrapper mb-2 mx-auto d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: var(--primary-light); color: var(--primary-color); border-radius: 6px;"><i class="fas fa-gift"></i></div>
                    <div class="quick-icon-text fw-bold small">특가 기획전</div>
                </a>
                <a href="#" class="quick-icon-card text-decoration-none text-dark text-center p-3 border rounded-3 bg-white flex-shrink-0" style="width: 120px;">
                    <div class="icon-wrapper mb-2 mx-auto d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: var(--primary-light); color: var(--primary-color); border-radius: 6px;"><i class="fas fa-star"></i></div>
                    <div class="quick-icon-text fw-bold small">신상품</div>
                </a>
                <a href="#" class="quick-icon-card text-decoration-none text-dark text-center p-3 border rounded-3 bg-white flex-shrink-0" style="width: 120px;">
                    <div class="icon-wrapper mb-2 mx-auto d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: var(--primary-light); color: var(--primary-color); border-radius: 6px;"><i class="fas fa-ticket-alt"></i></div>
                    <div class="quick-icon-text fw-bold small">이벤트/쿠폰</div>
                </a>
                <a href="{{ route('shops.create') }}" class="quick-icon-card text-decoration-none text-dark text-center p-3 border rounded-3 bg-white flex-shrink-0" style="width: 120px;">
                    <div class="icon-wrapper mb-2 mx-auto d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: var(--primary-light); color: var(--primary-color); border-radius: 6px;"><i class="fas fa-handshake"></i></div>
                    <div class="quick-icon-text fw-bold small text-brand">입점 신청</div>
                </a>
            </div>
        </div>
    </section>

    <!-- Region Filters -->
    <div class="container mt-4 mb-3">
        <div class="region-filter-wrapper d-flex align-items-center gap-2">
            
            <!-- [좌측 고정] 전국 버튼 -->
            <div class="flex-shrink-0">
                <button class="btn btn-premium px-4 text-nowrap region-btn">전국</button>
            </div>

            <!-- [우측 스크롤] 나머지 지역 버튼들 -->
            <div class="region-scroll-container d-flex gap-2 overflow-auto" style="scrollbar-width: none;">
                <button class="btn btn-outline-premium px-4 text-nowrap region-btn">서울</button>
                <button class="btn btn-outline-premium px-4 text-nowrap region-btn">경기/인천</button>
                <button class="btn btn-outline-premium px-4 text-nowrap region-btn">부산/경남</button>
                <button class="btn btn-outline-premium px-4 text-nowrap region-btn">대구/경북</button>
                <button class="btn btn-outline-premium px-4 text-nowrap region-btn">광주/전남</button>
                <button class="btn btn-outline-premium px-4 text-nowrap region-btn">대전/충남</button>
                <button class="btn btn-outline-premium px-4 text-nowrap region-btn">강원</button>
                <button class="btn btn-outline-premium px-4 text-nowrap region-btn">제주</button>
            </div>

        </div>
    </div>

    <!-- Section 1: Best Shops -->
    <x-shop-list limit="3" :isMainDisplayed="false" title="Best Beauty Shops" />

    <!-- FULL BANNER -->
    <section class="py-5 my-4 text-white text-center" style="background: linear-gradient(rgba(30, 38, 56, 0.85), rgba(177, 137, 119, 0.85)), url('https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;">
        <div class="container py-4">
            <span class="badge border border-white text-white bg-transparent mb-3 px-3 py-2 fw-bold">PREMIUM MEMBERSHIP</span>
            <h2 class="brand-font mb-3" style="font-size: 2.5rem;">Globeau Exclusive</h2>
            <p class="text-light mb-4 lead fw-light">상위 1%를 위한 프라이빗 모카 브론즈 케어, 지금 바로 경험해보세요.</p>
            <a href="{{ route('shops.create') }}" class="btn bg-white text-dark px-5 py-3 fs-6 fw-bold shadow-sm text-decoration-none d-inline-block rounded-2">V.I.P 파트너십 안내</a>
        </div>
    </section>

    <!-- Section: Manufacturers & Brands -->
    <section class="py-5 bg-white border-top border-bottom">
        <div class="container">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-4 mb-md-5">
                <div class="text-center text-md-start mb-3 mb-md-0">
                    <h2 class="section-title brand-font mb-2 fw-bold">Partner Manufacturers</h2>
                    <p class="text-muted small mb-0">글로뷰가 엄선한 최고의 뷰티 제조사 및 파트너 브랜드를 소개합니다.</p>
                </div>
                <a href="{{ route('shops.create') }}" class="btn btn-outline-premium px-4 btn-sm text-decoration-none">입점 파트너 신청</a>
            </div>

            <div class="row g-3">
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="card card-premium p-4 text-center h-100 justify-content-center align-items-center">
                        <i class="fas fa-flask fs-1 text-brand mb-3 opacity-75"></i>
                        <span class="small fw-bold">아놀브 (ANOLV)</span>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="card card-premium p-4 text-center h-100 justify-content-center align-items-center">
                        <i class="fas fa-magic fs-1 text-brand mb-3 opacity-75"></i>
                        <span class="small fw-bold">매직버블 코스메틱</span>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="card card-premium p-4 text-center h-100 justify-content-center align-items-center">
                        <i class="fas fa-vial fs-1 text-brand mb-3 opacity-75"></i>
                        <span class="small fw-bold">르피랩 (LEPILAB)</span>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="card card-premium p-4 text-center h-100 justify-content-center align-items-center">
                        <i class="fas fa-leaf fs-1 text-brand mb-3 opacity-75"></i>
                        <span class="small fw-bold">에이르 랩</span>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="card card-premium p-4 text-center h-100 justify-content-center align-items-center">
                        <i class="fas fa-dna fs-1 text-brand mb-3 opacity-75"></i>
                        <span class="small fw-bold">더마바이오랩</span>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="card card-premium p-4 text-center h-100 justify-content-center align-items-center">
                        <i class="fas fa-pump-soap fs-1 text-brand mb-3 opacity-75"></i>
                        <span class="small fw-bold">글로뷰 팩토리</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

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

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const heroSwiper = new Swiper('.hero-swiper', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            effect: 'fade', // 부드러운 전환 효과
            fadeEffect: {
                crossFade: true
            },
        });
    });
</script>
@endpush