@extends('layouts.app')

@section('title', 'CodeBridgeX SAM 영업전략')

@push('styles')
<style>
    .slide {
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    .slide.active {
        display: flex;
        opacity: 1;
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fadeIn { animation: fadeIn 0.8s forwards; }
    @keyframes bounce { 0%, 100% { transform: translateY(-5%); } 50% { transform: translateY(0); } }
    .animate-bounce-custom { animation: bounce 2s infinite; }
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #f1f1f1; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
</style>
@endpush

@section('content')
<div class="bg-gray-100 min-h-screen">
    <div class="flex items-center justify-center min-h-screen py-8">
        <div id="deck-container" class="w-full max-w-6xl h-[700px] relative bg-slate-900 rounded-xl shadow-2xl overflow-hidden border border-slate-200/20 text-white transition-colors duration-700">

            <!-- Watermark -->
            <div class="absolute top-8 left-8 text-sm font-bold tracking-widest opacity-50 flex items-center gap-2 z-50">
                CodeBridgeX : SAM
            </div>

            <!-- Slides Wrapper -->
            <div id="slides-wrapper" class="w-full h-full relative">

                <!-- Slide 0: Cover -->
                <div class="slide active w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-slate-900" data-text="text-white">
                    <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight animate-fadeIn">
                        대표님, 어제는<br>편안히 주무셨습니까?
                    </h1>
                    <p class="text-xl md:text-2xl text-slate-300 font-light max-w-3xl mb-12 animate-fadeIn" style="animation-delay: 0.2s">
                        직원들은 절대 모르는, 오직 대표님만의 '20가지' 무거운 짐
                    </p>
                    <button onclick="nextSlide()" class="px-8 py-3 bg-red-600 hover:bg-red-700 text-white rounded-full font-bold flex items-center gap-2 transition-all transform hover:scale-105 animate-fadeIn" style="animation-delay: 0.4s">
                        시작하기 →
                    </button>
                </div>

                <!-- Slide 1: Pain Points -->
                <div class="slide w-full h-full flex-col justify-center px-4 md:px-12" data-bg="bg-red-50" data-text="text-slate-900">
                    <div class="text-center mb-8">
                        <h2 class="text-3xl font-bold text-slate-800 mb-2">혹시 이런 상황, 겪어보지 않으셨나요?</h2>
                        <p class="text-slate-600">CEO를 괴롭히는 20가지 Pain Points</p>
                    </div>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 overflow-y-auto max-h-[400px] p-2" id="pain-grid">
                        <!-- Items will be injected by JS -->
                    </div>
                    <div class="mt-8 text-center">
                        <p class="text-red-600 font-bold animate-pulse">이 중 하나라도 해당된다면, 다음 장을 넘겨주세요.</p>
                    </div>
                </div>

                <!-- Slide 2: Solution Intro -->
                <div class="slide w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-blue-600" data-text="text-white">
                    <h2 class="text-2xl md:text-4xl font-light mb-4 animate-fadeIn">이 모든 골치 아픈 문제들...</h2>
                    <h3 class="text-3xl md:text-5xl font-bold mb-12 animate-fadeIn" style="animation-delay: 0.2s">이제 '사람' 말고 '시스템'에게 맡기십시오.</h3>
                    <div class="bg-white text-blue-600 px-12 py-8 rounded-2xl shadow-2xl transform hover:scale-105 transition-transform duration-500 animate-fadeIn" style="animation-delay: 0.4s">
                        <h1 class="text-6xl md:text-8xl font-black tracking-tighter mb-2">S.A.M</h1>
                        <p class="text-lg md:text-xl font-medium tracking-widest uppercase text-slate-500">Smart Automation Management</p>
                    </div>
                </div>

                <!-- Slide 3: Strategy 1 (Money) -->
                <div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-white" data-text="text-slate-800">
                    <div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left mb-8 md:mb-0">
                        <div class="mb-6 p-6 bg-slate-50 rounded-full shadow-lg">
                            <svg class="w-12 h-12 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" /></svg>
                        </div>
                        <span class="inline-block px-3 py-1 bg-slate-200 text-slate-600 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 01 : MONEY</span>
                        <h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">CEO 전용 시크릿 대시보드</h2>
                        <p class="text-slate-600 text-lg mb-6">직원들은 못 봅니다. 오직 대표님만 확인하십시오.</p>
                    </div>
                    <div class="md:w-2/3 w-full grid gap-6">
                        <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
                            <h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 오늘의 이슈 브리핑</h3>
                            <p class="text-slate-600 ml-7">지각, 재고미달, 사고 발생 전 알림</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
                            <h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 세무 리스크 실시간 감지</h3>
                            <p class="text-slate-600 ml-7">가지급금 이자 4.6% 자동 계산, 법인세 예측</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
                            <h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 자금 흐름의 투명화</h3>
                            <p class="text-slate-600 ml-7">예상 부가세, 접대비 한도, 카드 사용내역 통합</p>
                        </div>
                    </div>
                </div>

                <!-- Slide 4: Strategy 2 (Law) -->
                <div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-slate-50" data-text="text-slate-800">
                    <div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left mb-8 md:mb-0">
                        <div class="mb-6 p-6 bg-white rounded-full shadow-lg">
                            <svg class="w-12 h-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" /></svg>
                        </div>
                        <span class="inline-block px-3 py-1 bg-slate-200 text-slate-600 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 02 : LAW</span>
                        <h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">착수금 0원, 대표님의 '개인 로펌'</h2>
                        <p class="text-slate-600 text-lg">돈 떼일 걱정, 법적 분쟁의 공포에서 해방시켜 드립니다.</p>
                    </div>
                    <div class="md:w-2/3 w-full grid gap-6">
                        <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-red-500 hover:shadow-lg transition-shadow">
                            <h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 미수금/채권 추심 특화</h3>
                            <p class="text-slate-600 ml-7">변호사 직접 관리, 법원 출석 대행</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-red-500 hover:shadow-lg transition-shadow">
                            <h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 파격적인 조건</h3>
                            <p class="text-slate-600 ml-7">착수금 0원 / 성공보수 20% (성공했을 때만 지급)</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-red-500 hover:shadow-lg transition-shadow">
                            <h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 거래처 리스크 제로화</h3>
                            <p class="text-slate-600 ml-7">신규 업체 기업 분석 서비스로 '우량 기업' 판별</p>
                        </div>
                    </div>
                </div>

                <!-- Slide 5: Strategy 3 (AI) -->
                <div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-slate-50" data-text="text-slate-800">
                    <div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left">
                        <div class="mb-6 p-6 bg-white rounded-full shadow-lg">
                            <svg class="w-12 h-12 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611l-.006.001A48.02 48.02 0 0112 21c-2.773 0-5.491-.235-8.135-.698l-.005-.001c-1.717-.293-2.3-2.379-1.067-3.61L5 14.5" /></svg>
                        </div>
                        <span class="inline-block px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 03 : AI ASSISTANT</span>
                        <h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">말 한마디로 끝나는 경영 관리</h2>
                        <p class="text-slate-600 text-lg mb-6">AI 비서 '헤이 SAM'을 체험해보세요.</p>
                        <div class="text-sm text-slate-400 bg-white p-4 rounded-lg border">
                            <p class="font-bold mb-2 flex items-center gap-1"><svg class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" /></svg> 이렇게 물어보세요:</p>
                            <ul class="space-y-1">
                                <li>"거래처에 보낼 추석 인사말 써줘"</li>
                                <li>"이번 달 예상 부가세가 얼마야?"</li>
                                <li>"직원 근태 관리 규정 초안 만들어줘"</li>
                            </ul>
                        </div>
                    </div>
                    <div class="md:w-2/3 w-full h-[400px] bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200 flex flex-col">
                        <div class="bg-purple-600 p-4 text-white flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611l-.006.001A48.02 48.02 0 0112 21c-2.773 0-5.491-.235-8.135-.698l-.005-.001c-1.717-.293-2.3-2.379-1.067-3.61L5 14.5" /></svg>
                                <div><h3 class="font-bold">Hey SAM</h3><p class="text-xs text-purple-200">Smart Automation Management</p></div>
                            </div>
                            <div class="flex gap-2">
                                <span class="w-3 h-3 bg-red-400 rounded-full"></span>
                                <span class="w-3 h-3 bg-yellow-400 rounded-full"></span>
                                <span class="w-3 h-3 bg-green-400 rounded-full"></span>
                            </div>
                        </div>
                        <div id="chat-messages" class="flex-1 p-4 bg-slate-50 overflow-y-auto space-y-4">
                            <div class="flex justify-start">
                                <div class="bg-white text-slate-800 shadow-sm border border-slate-200 p-3 rounded-2xl rounded-tl-none max-w-[80%]">
                                    <div class="text-xs text-purple-600 font-bold mb-1">SAM</div>
                                    대표님, 무엇을 도와드릴까요?
                                </div>
                            </div>
                        </div>
                        <form onsubmit="handleChat(event)" class="p-4 bg-white border-t border-slate-100 flex gap-2">
                            <input type="text" id="chat-input" placeholder="SAM에게 업무를 지시하세요..." class="flex-1 bg-slate-100 border-none rounded-full px-4 py-3 focus:ring-2 focus:ring-purple-500 outline-none">
                            <button type="submit" class="p-3 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition-colors">→</button>
                        </form>
                    </div>
                </div>

                <!-- Slide 6: Strategy 4 (Freedom) -->
                <div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-white" data-text="text-slate-800">
                    <div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left mb-8 md:mb-0">
                        <div class="mb-6 p-6 bg-slate-50 rounded-full shadow-lg">
                            <svg class="w-12 h-12 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg>
                        </div>
                        <span class="inline-block px-3 py-1 bg-slate-200 text-slate-600 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 04 : FREEDOM</span>
                        <h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">사무실 밖에서도 '전지적 대표 시점'</h2>
                        <p class="text-slate-600 text-lg">현장과 사무실의 경계가 사라집니다.</p>
                    </div>
                    <div class="md:w-2/3 grid gap-6 w-full">
                        <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
                            <h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ 압도적 인프라</h3>
                            <p class="text-slate-600 ml-7">접속 IP 무제한 + 모바일 완벽 지원</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
                            <h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ GPS 근태 관리 (무료)</h3>
                            <p class="text-slate-600 ml-7">현장 직원이 어디에 있는지, 출근은 했는지 지도 확인</p>
                        </div>
                        <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
                            <h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">✅ AI 비서 '헤이 SAM'</h3>
                            <p class="text-slate-600 ml-7">음성으로 업무 지시, 챗봇으로 데이터 검색</p>
                        </div>
                    </div>
                </div>

                <!-- Slide 7: Emotion -->
                <div class="slide w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-slate-900" data-text="text-white">
                    <svg class="w-16 h-16 mb-4 animate-bounce-custom text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" /></svg>
                    <h2 class="text-4xl md:text-6xl font-black mb-4 text-yellow-400 drop-shadow-lg">띵동! "SAM~"</h2>
                    <h3 class="text-xl md:text-3xl font-bold mb-8 max-w-2xl leading-relaxed">대표님을 미소 짓게 하는 세상에서 가장 기분 좋은 알림</h3>
                    <div class="bg-white/10 backdrop-blur-md p-8 rounded-2xl max-w-3xl border border-white/20">
                        <p class="text-lg text-slate-200 mb-6 leading-relaxed">수주가 등록되거나 발주가 나갈 때, 대표님 핸드폰으로만 알림이 갑니다.</p>
                        <p class="text-2xl font-serif italic text-white">"골치 아픈 보고 대신, 매일 매출이 오르는 소리를 들으세요."</p>
                    </div>
                </div>

                <!-- Slide 8: CTA -->
                <div class="slide w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-blue-700" data-text="text-white">
                    <div class="grid grid-cols-4 gap-4 mb-12 opacity-50 text-white">
                        <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /></svg>
                        <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" /></svg>
                        <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>
                        <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" /></svg>
                    </div>
                    <h2 class="text-3xl md:text-5xl font-bold mb-6 leading-tight">변호사, 세무사, 비서, 감사팀...</h2>
                    <p class="text-xl md:text-2xl text-blue-200 mb-12 font-light">이 모든 전문가를 월 O만원에 고용하시겠습니까?</p>
                    <button class="px-10 py-5 bg-white text-blue-700 rounded-full font-bold text-xl shadow-xl hover:bg-blue-50 transition-all transform hover:scale-105 flex items-center gap-3">
                        CodeBridgeX SAM 도입 문의 →
                    </button>
                    <p class="mt-8 text-sm text-blue-300">* 초기 도입 컨설팅 무료 진행 중</p>
                </div>
            </div>

            <!-- Navigation Controls -->
            <div class="absolute bottom-8 right-8 flex gap-4 z-40">
                <button onclick="prevSlide()" id="btn-prev" class="p-3 rounded-full backdrop-blur-sm border border-current hover:bg-white/20 active:scale-95 transition-all">←</button>
                <button onclick="nextSlide()" id="btn-next" class="p-3 rounded-full backdrop-blur-sm border border-current hover:bg-white/20 active:scale-95 transition-all">→</button>
            </div>

            <!-- Progress Indicator -->
            <div class="absolute bottom-8 left-8 flex gap-2" id="progress-dots"></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const painPoints = [
    "핵심인력 퇴사/정보유출", "가지급금 이자폭탄", "미수금 회수 불가", "예상 부가세 깜깜이",
    "지출결의서 분실", "현장 직원 근태불명", "재고 구멍/생산중단", "견적 실수/마진하락",
    "법인세 가산세 걱정", "불량 거래처 계약", "인수인계 엉망", "차량/설비 AS 비용",
    "외근 중 업무 마비", "잦은 서류 누락", "복잡한 급여/노무", "소송 착수금 부담",
    "접대비 한도 초과", "담당자 부재시 혼란", "발주 오타 사고", "밤낮 없는 업무보고"
];

const painGrid = document.getElementById('pain-grid');
painPoints.forEach(item => {
    const div = document.createElement('div');
    div.className = "bg-white p-4 rounded-lg shadow-sm border border-red-100 flex items-center justify-center text-center hover:bg-red-50 hover:border-red-300 transition-colors";
    div.innerHTML = `<div class="flex flex-col items-center gap-2"><svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg><span class="text-sm font-medium text-slate-700 break-keep">${item}</span></div>`;
    painGrid.appendChild(div);
});

const slides = document.querySelectorAll('.slide');
const container = document.getElementById('deck-container');
const dotsContainer = document.getElementById('progress-dots');
let currentSlide = 0;

slides.forEach((_, idx) => {
    const dot = document.createElement('div');
    dot.className = `h-1.5 rounded-full transition-all duration-300 ${idx === 0 ? 'w-8 bg-current opacity-100' : 'w-2 bg-current opacity-30'}`;
    dotsContainer.appendChild(dot);
});

function updateSlide() {
    slides.forEach((slide, idx) => {
        slide.classList.toggle('active', idx === currentSlide);
    });

    const activeSlide = slides[currentSlide];
    container.className = `w-full max-w-6xl h-[700px] relative rounded-xl shadow-2xl overflow-hidden border border-slate-200/20 transition-colors duration-700 ${activeSlide.dataset.bg} ${activeSlide.dataset.text}`;

    const dots = dotsContainer.children;
    Array.from(dots).forEach((dot, idx) => {
        dot.className = `h-1.5 rounded-full transition-all duration-300 ${idx === currentSlide ? 'w-8 bg-current opacity-100' : 'w-2 bg-current opacity-30'}`;
    });

    document.getElementById('btn-prev').style.opacity = currentSlide === 0 ? '0.3' : '1';
    document.getElementById('btn-next').style.opacity = currentSlide === slides.length - 1 ? '0.3' : '1';
}

function nextSlide() {
    if (currentSlide < slides.length - 1) {
        currentSlide++;
        updateSlide();
    }
}

function prevSlide() {
    if (currentSlide > 0) {
        currentSlide--;
        updateSlide();
    }
}

function handleChat(e) {
    e.preventDefault();
    const input = document.getElementById('chat-input');
    const msg = input.value.trim();
    if (!msg) return;

    const chatBox = document.getElementById('chat-messages');
    const userDiv = document.createElement('div');
    userDiv.className = "flex justify-end";
    userDiv.innerHTML = `<div class="bg-purple-600 text-white rounded-2xl rounded-tr-none p-3 max-w-[80%]">${msg}</div>`;
    chatBox.appendChild(userDiv);
    input.value = '';
    chatBox.scrollTop = chatBox.scrollHeight;

    setTimeout(() => {
        let reply = "네, 알겠습니다. 해당 업무를 SAM 대시보드에 등록하고 담당자에게 알림을 보냈습니다. ✅";

        if (msg.includes("인사") || msg.includes("추석") || msg.includes("메일")) {
            reply = "네, 대표님. 거래처용 정중한 인사말 초안을 작성하여 메일함에 저장해 두겠습니다. ✨";
        } else if (msg.includes("부가세") || msg.includes("세금")) {
            reply = "이번 달 예상 부가세는 약 1,250만 원입니다. 매입 자료가 3건 누락되어 있으니 확인해 주세요. 💰";
        } else if (msg.includes("근태") || msg.includes("직원")) {
            reply = "현재 현장 직원 3명이 GPS 범위 내에서 출근 체크를 완료했습니다. 📍";
        } else if (msg.includes("미수금")) {
            reply = "A업체의 미수금 500만 원이 3개월째 연체 중입니다. 내용증명 발송을 준비할까요? ⚖️";
        }

        const botDiv = document.createElement('div');
        botDiv.className = "flex justify-start";
        botDiv.innerHTML = `<div class="bg-white text-slate-800 shadow-sm border border-slate-200 p-3 rounded-2xl rounded-tl-none max-w-[80%]"><div class="text-xs text-purple-600 font-bold mb-1">SAM</div>${reply}</div>`;
        chatBox.appendChild(botDiv);
        chatBox.scrollTop = chatBox.scrollHeight;
    }, 800);
}

window.addEventListener('keydown', (e) => {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
    if (e.key === 'ArrowRight') nextSlide();
    if (e.key === 'ArrowLeft') prevSlide();
});

updateSlide();
</script>
@endpush