@php
    $pageTitle = '이용안내';
    $pageDesc  = '구매부터 발송/환불까지 서비스 이용 방법을 한눈에 안내합니다.';

    $breadcrumbs = [
      ['label' => '홈', 'url' => url('/')],
      ['label' => '고객센터', 'url' => url('/cs')],
      ['label' => '이용안내', 'url' => url()->current()],
    ];

    $csActive = 'guide';
@endphp

@extends('web.layouts.subpage')

@section('title', '이용안내 | PIN FOR YOU')
@section('meta_description', 'PIN FOR YOU 이용안내입니다. 상품권 구매/발송/환불 등 이용 방법을 확인하세요.')
@section('canonical', url('/cs/guide'))

@section('subcontent')
    @include('web.partials.content-head', [
        'title' => '이용안내',
        'desc'  => '필요한 부분만 빠르게 확인할 수 있도록 핵심 흐름만 모았습니다.'
    ])

    <section class="guide" aria-label="이용안내 본문">

        {{-- Intro --}}
        <div class="guide-hero">
            <div class="guide-hero__badge">Quick Guide</div>
            <div class="guide-hero__title">처음 방문하셨나요?</div>
            <p class="guide-hero__desc">
                회원가입 → 로그인 → 상품 선택/결제 → 코드 확인까지, 기본 흐름은 아주 간단해요.
                처음 1회는 보안을 위해 본인인증이 진행될 수 있습니다.
            </p>

            <div class="guide-hero__chips" aria-label="핵심 요약">
                <span class="guide-chip">회원가입: 본인인증 + 필수 정보 입력</span>
                <span class="guide-chip">로그인: 이메일(ID) + 비밀번호</span>
                <span class="guide-chip">구매: 상품 선택 → 결제</span>
                <span class="guide-chip">문의: 1:1 문의로 접수</span>
            </div>
        </div>

        {{-- Grid --}}
        <div class="guide-grid">

            {{-- Signup --}}
            <article class="guide-card" aria-label="회원가입 안내">
                <div class="guide-card__top">
                    <div class="guide-card__icon" aria-hidden="true">①</div>
                    <h3 class="guide-card__title">회원가입</h3>
                </div>

                <p class="guide-card__lead">
                    안정적인 서비스 제공과 정보 보호를 위해 회원가입 시 최초 1회 본인인증이 진행될 수 있어요.
                </p>

                <ol class="guide-steps">
                    <li><b>본인인증(PASS)</b>을 진행합니다. (PASS로 승인)</li>
                    <li><b>이메일</b>을 아이디로 사용합니다.</li>
                    <li>
                        <b>비밀번호</b>는 영문(대/소) + 숫자 + 특수문자 조합으로
                        <b>8~16자</b> 범위로 설정합니다.
                    </li>
                    <li><b>2차 비밀번호</b>는 <b>숫자 4자리</b>로 설정합니다.</li>
                    <li><b>만 14세 이상</b>만 가입이 가능합니다.</li>
                </ol>

                <div class="guide-note">
                    <b>Tip</b>
                    같은 이메일로 재가입이 제한될 수 있어요. 가입 이메일은 신중하게 선택해 주세요.
                </div>
            </article>

            {{-- Login --}}
            <article class="guide-card" aria-label="로그인 안내">
                <div class="guide-card__top">
                    <div class="guide-card__icon" aria-hidden="true">②</div>
                    <h3 class="guide-card__title">로그인</h3>
                </div>

                <p class="guide-card__lead">
                    이메일(ID)과 비밀번호로 로그인합니다. 보안을 위해 자동로그인/공용기기 사용에 유의해 주세요.
                </p>

                <ul class="guide-bullets">
                    <li><b>아이디</b>: 가입 시 사용한 이메일</li>
                    <li><b>비밀번호</b>: 가입 시 설정한 비밀번호</li>
                    <li><b>인증 안내</b>: 최초 1회 인증 이후에는 더 간편해질 수 있어요</li>
                </ul>

                <div class="guide-note guide-note--muted">
                    <b>권장</b>
                    비밀번호는 주기적으로 변경하고, 다른 사이트와 동일한 비밀번호 사용은 피하세요.
                </div>
            </article>

            {{-- Purchase --}}
            <article class="guide-card" aria-label="상품권 구매 안내">
                <div class="guide-card__top">
                    <div class="guide-card__icon" aria-hidden="true">③</div>
                    <h3 class="guide-card__title">상품권 구매</h3>
                </div>

                <p class="guide-card__lead">
                    원하는 상품을 선택한 뒤 수량과 결제수단을 선택해 결제를 완료하면 됩니다.
                </p>

                <ol class="guide-steps">
                    <li><b>상품 선택</b>: 구매할 상품권을 고릅니다.</li>
                    <li><b>구매하기</b>: 선택한 상품에서 구매 진행을 시작합니다.</li>
                    <li><b>수량/결제수단 선택</b> 후 <b>결제하기</b>로 결제를 완료합니다.</li>
                </ol>

                <div class="guide-note">
                    <b>확인</b>
                    결제 완료 후 안내가 진행되며, 필요한 경우 마이페이지 이용내역에서 확인할 수 있어요.
                </div>
            </article>

            {{-- QnA --}}
            <article class="guide-card" aria-label="1:1 문의 안내">
                <div class="guide-card__top">
                    <div class="guide-card__icon" aria-hidden="true">④</div>
                    <h3 class="guide-card__title">1:1 문의</h3>
                </div>

                <p class="guide-card__lead">
                    구매/발송/이용 관련 이슈는 1:1 문의로 접수하면 가장 정확하게 안내받을 수 있어요.
                </p>

                <ul class="guide-bullets">
                    <li><b>문의 주제</b>: 결제/발송/코드 확인/오류/계정</li>
                    <li><b>필수 정보</b>: 주문 시각, 결제수단, 금액, 오류 화면(가능 시)</li>
                    <li><b>처리 방식</b>: 접수 후 순차적으로 답변됩니다</li>
                </ul>

                <div class="guide-note guide-note--muted">
                    <b>빠른 처리 팁</b>
                    화면 캡처 1장과 함께 상황을 “언제/어떤 결제/무슨 메시지”로 정리해 주시면 좋아요.
                </div>
            </article>

        </div>

        {{-- Small closing --}}
        <div class="guide-footer">
            <div class="guide-footer__box">
                <div class="guide-footer__title">가장 많이 막히는 지점</div>
                <div class="guide-footer__desc">
                    회원가입 인증, 비밀번호 규칙, 결제 완료 여부 확인이 가장 많습니다.
                    위 흐름대로 진행 후에도 해결이 어렵다면 1:1 문의로 접수해 주세요.
                </div>
            </div>
        </div>
        @include('web.partials.cs-quick-actions')
    </section>
@endsection