sam-manage/resources/views/lab/strategy/sales-strategy.blade.php

@extends('layouts.presentation')

@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">
                            <span class="text-5xl">💳</span>
                        </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">
                            <span class="text-5xl">⚖️</span>
                        </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">
                            <span class="text-5xl">🤖</span>
                        </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">💡 이렇게 물어보세요:</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">
                                <span class="text-2xl">🤖</span>
                                <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">
                            <span class="text-5xl">📍</span>
                        </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">
                    <span class="text-6xl mb-4 animate-bounce-custom">🔔</span>
                    <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 text-4xl">
                        <span>💼</span><span>⚖️</span><span>👥</span><span>🛡️</span>
                    </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"><span class="text-red-400">⚠️</span><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