@php
    $pageTitle = '카카오톡 상담';
    $pageDesc  = '카카오톡으로 빠르고 편하게 문의하실 수 있어요.';

    $breadcrumbs = [
      ['label' => '홈', 'url' => url('/')],
      ['label' => '고객센터', 'url' => url('/cs')],
      ['label' => '카카오톡 상담', 'url' => url()->current()],
    ];

    $csActive = 'kakao';
@endphp

@extends('web.layouts.subpage')

@section('title', '카카오톡 상담 | PIN FOR YOU')
@section('meta_description', 'PIN FOR YOU 카카오톡 상담 안내입니다. 운영시간과 상담 절차를 확인하세요.')
@section('canonical', url('/cs/kakao'))

@section('subcontent')
    <div class="kakao-page">

        {{-- H2 --}}
        @include('web.partials.content-head', [
          'title' => '카카오톡으로 빠르게 상담',
          'desc'  => '간단 문의는 카카오톡이 가장 빠릅니다. 채널 추가 후 메시지를 남겨주세요.'
        ])

        {{-- CTA + 운영시간 --}}
        <section class="kakao-hero">
            <div class="kakao-hero__card">
                <div class="kakao-hero__badge">KakaoTalk</div>
                <h3 class="kakao-hero__title">핀포유 채널로 바로 문의</h3>
                <p class="kakao-hero__desc">
                    카카오톡에서 <b>“핀포유”</b> 또는 <b>“@pinforyou”</b>를 검색해 채널을 추가한 뒤,
                    1:1 메시지로 문의를 남겨주세요.
                </p>

                <div class="kakao-hero__meta">
                    <div class="kakao-meta">
                        <div class="kakao-meta__k">실시간 상담</div>
                        <div class="kakao-meta__v">평일 09:00~17:00</div>
                    </div>
                    <div class="kakao-meta">
                        <div class="kakao-meta__k">그 외 시간</div>
                        <div class="kakao-meta__v">1:1 문의 접수 후 순차 답변</div>
                    </div>
                </div>

                <div class="kakao-hero__actions">
                    {{-- ✅ “정확한 카카오 채널 URL”이 있으면 여기 href만 교체하면 됨 --}}
                    <a class="btn btn--primary" href="javascript:void(0)" onclick="alert('카카오톡에서 “핀포유(@pinforyou)” 검색 후 채널 추가해 주세요.')">
                        카카오톡에서 검색하기
                    </a>
                    <a class="btn btn--ghost" href="{{ route('web.cs.qna.index') }}">
                        1:1 문의로 남기기
                    </a>
                </div>

                {{-- 선택: 기존 이미지 가이드(원본은 pinforyou에서 이미지 1장) --}}
                {{-- 프로젝트에 이미지 넣고 싶으면: public/assets/images/cs/kakao_guide.png 로 저장 후 아래 주석 해제 --}}
                {{-- <img class="kakao-hero__img" src="{{ asset('assets/images/cs/kakao_guide.png') }}" alt="카카오톡 채널 추가 안내 이미지"> --}}
            </div>
        </section>

        {{-- 3 Step Guide --}}
        <section class="kakao-steps">
            <h3 class="kakao-sec-title">채널 추가 3단계</h3>

            <div class="kakao-step-grid">
                <div class="kakao-step">
                    <div class="kakao-step__num">01</div>
                    <div class="kakao-step__title">카카오톡 실행</div>
                    <div class="kakao-step__desc">카카오톡 앱을 열고 상단 검색을 준비해요.</div>
                </div>

                <div class="kakao-step">
                    <div class="kakao-step__num">02</div>
                    <div class="kakao-step__title">“핀포유 / @pinforyou” 검색</div>
                    <div class="kakao-step__desc">채널 검색창에 이름 또는 아이디로 찾을 수 있어요.</div>
                </div>

                <div class="kakao-step">
                    <div class="kakao-step__num">03</div>
                    <div class="kakao-step__title">채널 추가 후 메시지 문의</div>
                    <div class="kakao-step__desc">친구(채널) 추가 후 1:1 메시지로 문의를 남겨주세요.</div>
                </div>
            </div>
        </section>

        {{-- 문의 전 준비 --}}
        <section class="kakao-help">
            <h3 class="kakao-sec-title">문의가 빨라지는 체크리스트</h3>

            <div class="kakao-help-grid">
                <div class="kakao-card">
                    <div class="kakao-card__title">기본 정보</div>
                    <ul class="kakao-list">
                        <li>주문번호(있으면 가장 빠름)</li>
                        <li>결제수단(카드/휴대폰/계좌이체 등)</li>
                        <li>문제 발생 시간과 상황 요약</li>
                    </ul>
                </div>

                <div class="kakao-card">
                    <div class="kakao-card__title">스크린샷 팁</div>
                    <ul class="kakao-list">
                        <li>에러 화면/알림 화면 캡처</li>
                        <li><b>민감정보(핀번호/개인정보)는 가리고</b> 보내주세요</li>
                        <li>여러 장이면 순서대로 보내면 처리 속도↑</li>
                    </ul>
                </div>
            </div>
        </section>

        @include('web.partials.cs-quick-actions')

    </div>
@endsection