<?php
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}
// kr/skin/main/basic/view.skin.php

if (!isset($view_data)) exit("잘못된 접근입니다.");

// 변수 설정
$target_id          = $view_data['target_id'];
$page_main_title    = $view_data['page_main_title'];
$display_title      = $view_data['display_title'];
$display_subtitle   = $view_data['display_subtitle'];
$content_body       = $view_data['content_body'];
$path               = $view_data['path'];
$sub_list_2depth    = $view_data['sub_list_2depth'];
$sub_list_3depth    = $view_data['sub_list_3depth'];
$current_menu_type  = $view_data['current_menu_type'];
$has_content        = $view_data['has_content'];
$header_image       = $view_data['header_image'];

// [수정] 실제 콘텐츠 PK는 이제 'id' 컬럼입니다.
$real_content_id = $view_data['content_data']['id'] ?? 0;

// 스타일 제어
$style_2depth = empty($sub_list_2depth) ? 'style="display:none;"' : '';
$style_3depth = empty($sub_list_3depth) ? 'style="display:none;"' : '';

// 링크 헬퍼
function makeSkinLink($id, $params) {
    $url = "?menu_id=" . $id;
    if (!empty($params)) $url .= '&' . ltrim($params, '?&');
    return $url;
}

$res_path = "../../../resources";
$kr_path = "../../../";
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="<?= $res_path ?>/images/icon/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="<?= $res_path ?>/images/icon/favicon.png">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="../<?= $res_path ?>/js/jquery-ui.min.js"></script>

<link rel="stylesheet" href="<?= $res_path ?>/css/bootstrap.min.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/swiper.min.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/reset.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/font.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/common.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/common2.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/style.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/popup.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/gnb-patch.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/program.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/contents.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<title>정원엔시스</title>
</head>
<body class="main-site pc">
<div class="wrap">
    <div class="wrap-btn-top ">
      <button type="button" class="btn-Inquiry">
        <img src="<?= $res_path ?>/images/ico-pen-mo.png" alt="제품 문의 하러 가기" onclick="location.href='inquiry.php'">
      </button>
      <button type="button" class="btn-top">
        <img src="<?= $res_path ?>/images/ico-top.png" alt="사이트 상단으로 이동" onclick="topButton()">
      </button>
    </div>

<style>
/* [추가] 모바일 메뉴 스타일 */
.btn-m-menu { display: none; background: none; border: none; font-size: 24px; color: #fff; cursor: pointer; padding: 10px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1001; }
.m-gnb-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; }
.m-gnb-wrap { position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background: #fff; z-index: 10001; transition: right 0.3s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
.m-gnb-wrap.active { right: 0; }
.m-gnb-header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.btn-m-close { background: none; border: none; font-size: 24px; color: #333; cursor: pointer; }
.m-gnb-body { flex: 1; overflow-y: auto; padding: 20px 0; }
.m-depth1 { list-style: none; padding: 0; margin: 0; }
.m-depth1 > li { border-bottom: 1px solid #f5f5f5; }
.m-link-d1 { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; font-size: 16px; font-weight: 600; color: #333; text-decoration: none; }
.m-depth2 { display: none; background: #f9f9f9; list-style: none; padding: 0; margin: 0; }
.m-depth2 li { border-bottom: 1px solid #eee; }
.m-link-d2 { display: flex; justify-content: space-between; align-items: center; padding: 10px 40px; font-size: 14px; color: #666; text-decoration: none; background: #f9f9f9; }
.m-depth3 { display: none; background: #fff; list-style: none; padding: 5px 0; margin: 0; }
.m-depth3 li{padding: 10px 5px 10px 40px ; margin: 0; }

@media (max-width: 1024px) {
    .main-gnb { display: none !important; }
    .btn-m-menu { display: block; }
}

/* [수정] 모바일 모드에서만 서브메뉴 숨김 */
@media (max-width: 1024px) {
    .nav-sub-visu, .smallTab { display: none !important; }
}

/* [수정] 인트로 애니메이션을 위한 스타일 정의 */

/* 1. 이미지 래퍼: 이미지가 확대될 때 영역 밖으로 넘치지 않도록 자름 */
.visual-wrapper {
    overflow: hidden;       
    height: 400px;
    margin-bottom: 80px;
    position: relative;
    background-color: #f1f1f1;
}

/* 2. 배경 이미지 스타일 및 애니메이션 초기 상태 */
.sub-visual {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* [애니메이션 시작값] 1.2배 확대 상태 */
    transform: scale(1.2);
    /* 3초 동안 부드럽게 변하도록 설정 */
    transition: transform 3s ease-out; 
}

/* 3. 배경 이미지 활성화 상태: 원래 크기로 복귀 (줌아웃 효과) */
.sub-visual.active {
    transform: scale(1.0);
}

.nav-sub-visu {
    position: absolute;
    top: 323px;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10; /* 타이틀보다 위에 메뉴가 오지 않도록 필요시 조정 */
}
.nav-sub-visu ul {
    display: flex;
    height: 77px;
}

/* 4. 타이틀 스타일 및 애니메이션 초기 상태 */
.tit-sub-visu {
    position: absolute;
    top: 180px;
    left: 50%;
    /* [애니메이션 시작값] 투명하고, 중앙에서 아래로 50px 내려가 있음 */
    transform: translate(-50%, 50px);
    opacity: 0;
    
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    font-size: 40px;
    font-weight: 700;
    z-index: 20; /* 이미지 위에 뜨도록 */
    
    /* 1.5초 동안 투명도와 위치가 변하도록 설정 */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* 5. 타이틀 활성화 상태: 선명해지고 원래 위치로 이동 (페이드인 + 슬라이드업) */
.tit-sub-visu.active {
    opacity: 1;
    transform: translate(-50%, 0);
}

.layout_default {width:1400px !important; margin:0 auto}
</style>

<?php include __DIR__ . "/../../../common/navi.php"; ?> 


<?php
    $bg_style = "";
    // [중요] 애니메이션 타겟팅을 위해 visual-img 클래스 추가
    $visual_class = "sub-visual visual-img"; 
    if (!empty($header_image)) {
        $bg_style = "style='background-image: url(\"{$header_image}\");'";
    } else {
        $visual_class .= " visual-intro1"; 
    }
?>

<div class="visual-wrapper">
    <section class="<?= $visual_class ?>" <?= $bg_style ?>></section>
</div>

<h1 class="tit-sub-visu"><?= htmlspecialchars($page_main_title) ?></h1>

<nav class="nav-sub-visu" <?= $style_2depth ?>>
    <div class="frame-1600">
        <ul class="subnavi3">
        <?php foreach($sub_list_2depth as $menu): 
            $isActive = false;
            if ($path) { foreach($path as $p) { if($p['id'] == $menu['id']) $isActive = true; } }
            $cls = $isActive ? 'on' : '';
            $link = makeSkinLink($menu['id'], $menu['extra_params'] ?? '');
        ?>
            <li class="<?= $cls ?>"><a href="<?= $link ?>" class="raleway"><?= $menu['title'] ?></a></li>
        <?php endforeach; ?>
        </ul>
    </div>
</nav>

<div class="smallTab centerScrollTab" <?= $style_3depth ?>>
    <div>
        <ul>
        <?php foreach($sub_list_3depth as $menu): 
            $cls = ($menu['id'] == $target_id) ? 'on' : '';
            $link = makeSkinLink($menu['id'], $menu['extra_params'] ?? '');
        ?>
            <li class="<?= $cls ?>"><a href="<?= $link ?>" class="raleway"><?= $menu['title'] ?></a></li>
        <?php endforeach; ?>
        </ul>
    </div>
</div>
<main class="contents">

    <div class="layout_default row">
        <div class="col-6">
            <ul class="col-12 subtitle">
                <li><?= htmlspecialchars($display_title) ?></li>
                <li><?= htmlspecialchars($display_subtitle) ?></li>
            </ul>
        </div>
        <div class="col-6">
            <div class="location-path" style="text-align: right; margin-bottom: 20px; font-size: 13px; color: #666;">
                <a href="/" style="color: #666; text-decoration: none;">HOME</a>
                <?php 
                if ($path) {
                    foreach ($path as $node) {
                        $link = makeSkinLink($node['id'], $node['extra_params'] ?? '');
                        echo ' &gt; <a href="' . $link . '" style="color: #666; text-decoration: none;">' . $node['title'] . '</a>';
                    }
                }
                ?>
            </div>
        </div>
    </div>

<!--<div class="content-body">-->
    <?php if ($current_menu_type === 'board'): ?>
        <?php 
            $board_core_path = __DIR__ . '/../../../board/board.php';
            if (file_exists($board_core_path)) include $board_core_path;
        ?>

    <?php elseif ($current_menu_type === 'gallery'): ?>
        <?php 
            $gallery_core_path = __DIR__ . '/../../../gallery/board.php';
            if (file_exists($gallery_core_path)) include $gallery_core_path;
        ?>
    
    <?php elseif ($current_menu_type === 'product'): ?>
        <?php 
            // [수정] 보내주신 이미지(image_691394.png) 확인 결과
            // 경로: kr/skin/main/basic (현재) -> kr/product/product.php (타겟)
            $product_core_path = __DIR__ . '/../../../product/product.php';

            if (file_exists($product_core_path)) {
                include $product_core_path;
            } else {
                echo "<div style='padding:50px; text-align:center; color:red;'>⚠️ Product 모듈(product.php)을 찾을 수 없습니다.<br>경로: {$product_core_path}</div>";
            }
        ?>

    <?php elseif ($current_menu_type === 'product2'): ?>
        <?php 
            // [수정] 보내주신 이미지(image_691394.png) 확인 결과
            // 경로: kr/skin/main/basic (현재) -> kr/product/product.php (타겟)
            $product_core_path = __DIR__ . '/../../../product/product.php';

            if (file_exists($product_core_path)) {
                include $product_core_path;
            } else {
                echo "<div style='padding:50px; text-align:center; color:red;'>⚠️ Product 모듈(product.php)을 찾을 수 없습니다.<br>경로: {$product_core_path}</div>";
            }
        ?>

            <div id="view-area">
                <div style="text-align:right; margin-bottom:10px; border-bottom:1px solid #eee; padding-bottom:10px;">
                    <button type="button" onclick="toggleEditMode(true)" style="background:#333; color:#fff; border:none; padding:5px 15px; border-radius:4px; font-size:13px; cursor:pointer;">
                        ✎ 본문 수정하기
                    </button>
                </div>

                <?php if ($has_content): ?>
                    <div style="margin-top:20px; line-height:1.6;" class="editor-output">
                        <?= $content_body ?>
                    </div>
                <?php else: ?>
                    <div style="text-align: center; color: #999; width:100%; height:300px; padding-top:50px;">
                        <p>등록된 콘텐츠가 없습니다. '수정하기'를 눌러 내용을 입력하세요.</p>
                    </div>
                <?php endif; ?>
            </div>

            <?php 
                if (file_exists(__DIR__ . '/view_edit.skin.php')) {
                    include __DIR__ . '/view_edit.skin.php'; 
                } else {
                    echo "";
                }
            ?>


    <?php else: ?>

            <div id="view-area">
            <?php if (isset($_SESSION['member_role']) && in_array($_SESSION['member_role'], ['ADMIN', 'REPORT', 'MANAGER'])): ?>
                <div class="content-body ">
                <div style="text-align:right; margin-bottom:10px; border-bottom:1px solid #eee; padding-bottom:10px;">
                    <button type="button" onclick="toggleEditMode(true)" style="background:#333; color:#fff; border:none; padding:5px 15px; border-radius:4px; font-size:13px; cursor:pointer;">
                        ✎ 본문 수정하기
                    </button>
                </div>
                </div>
            <?php endif; ?>
    
                <?php if ($has_content): ?>
                    <div style="margin-top:20px; line-height:1.6;" class="editor-output">
                        <?= $content_body ?>
                    </div>
                <?php else: ?>
                    <div style="text-align: center; color: #999; width:100%; height:300px; padding-top:50px;">
                        <p>등록된 콘텐츠가 없습니다. '수정하기'를 눌러 내용을 입력하세요.</p>
                    </div>
                <?php endif; ?>
            </div>

            <?php 
                if (file_exists(__DIR__ . '/view_edit.skin.php')) {
                    include __DIR__ . '/view_edit.skin.php'; 
                } else {
                    echo "";
                }
            ?>
        <?php endif; ?>
    <!--</div>-->
</main>
<div class="footer_slogan">
    <div class="content-body ">
        <h2>
        "WITH FAITH IN TOMORROW'S HOPE,</br>
         JUNGWON ENSYS BUILDS A BRIGHTER FUTURE THROUGH NEW CHALLENGES."
        </h2>
    </div>
</div>

  <footer class="footer">
      <div class="frame-1600">
        <img src="<?= $res_path ?>/images/logo_footer.png" alt="정원엔시스" class="f-logo">
        <div class="wrap-f-cont">
          <div class="footer-t">
            <span>개인정보처리방침</span>
            <span>사이트맵</span>
          </div>
          <div class="footer-b">
            <div class="cont-footer">
              <p class="tit-footer">(주)정원엔시스</p>
              <ul>
                <li>
                  <span>본사</span>
                  <address>서울특별시 강남구 도산대로1길 46번지 정원빌딩</address>
                </li>
                <li>
                  <span>사업자번호</span>211-81-08071 
                </li>
                <li>
                  <span>대표전화</span>
                  <a href="tel:02-514-7007">02-514-7007</a>
                </li>
                <li>
                  <span>이메일</span>
                  <a href="mailto:marketing@bandisnc.com">marketing@zungwon.com</a>
                </li>
              </ul>
              <p class="copy">ⓒ 2026 Zungwon Engineering & Systems.INC. ALL RIGHTS RESERVED</p>
            </div>
            <div class="footer-sns">
              <?php if (isset($_SESSION['user_id'])): ?>
                <?php if (isset($_SESSION['member_role']) && $_SESSION['member_role'] === 'ADMIN'): ?>
                  <a href="http://www.zungwon.co.kr/adm/application/app/info/company_info.php" target="_blank" style="color:rgba(255,255,255,0.8); font-size:12px; text-decoration:none; border:1px solid #007bff; background:rgba(0,123,255,0.2); padding:3px 8px; border-radius:3px; vertical-align:middle; margin-right:5px;">관리자</a>
                <?php endif; ?>
                <a href="/member/logout_process.php" style="color:rgba(255,255,255,0.6); font-size:12px; text-decoration:none; border:1px solid rgba(255,255,255,0.3); padding:3px 8px; border-radius:3px; vertical-align:middle;">LOGOUT</a>
              <?php else: ?>
                <a href="/adm/application/app/menu/admin_menu.php" target="_blank"><img src="<?= $res_path ?>/images/ico-f-sns.png" alt="로그인으로 이동"></a>
              <?php endif; ?>
            </div>
          </div>
        </div>
      </div>
    </footer>



    <!-- [스크립트 로드] 중복된 jquery-ui 제거 및 body 안쪽으로 이동 -->
    
    <script src="<?= $res_path ?>/js/swiper-bundle.min.js"></script>
    <script src="<?= $res_path ?>/js/common.js"></script>
    <script src="<?= $res_path ?>/js/share/common.js"></script>
    <script src="<?= $res_path ?>/js/main/main.js"></script>
    <script src="<?= $res_path ?>/js/main/common.js"></script>

    <script>
    function toggleMobileMenu(isOpen) {
        if (isOpen) {
            $('.m-depth2, .m-depth3').hide();
            $('.m-gnb-body i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
            $('.m-gnb-wrap').addClass('active');
            $('.m-gnb-overlay').fadeIn(200);
            $('body').css('overflow', 'hidden');
        } else {
            $('.m-gnb-wrap').removeClass('active');
            $('.m-gnb-overlay').fadeOut(200);
            $('body').css('overflow', '');
        }
    }

    $(document).ready(function() {
        // 서브페이지 헤더 활성화
        $('.main-header').addClass('on');
        if (typeof logoOn === 'function') logoOn();

        // 초기 상태에서 모든 서브메뉴 숨김
        $('.m-depth2, .m-depth3').hide();
        
        $(document).on('click', '.m-link-d1', function(e) {
            var $depth2 = $(this).next('.m-depth2');
            if ($depth2.length > 0) {
                e.preventDefault();
                
                // 다른 열려있는 1depth 메뉴 닫기
                $('.m-depth2').not($depth2).slideUp(200);
                $('.m-link-d1').not(this).find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');

                $(this).find('i').toggleClass('fa-chevron-up fa-chevron-down');
                $depth2.slideToggle(200);
            }
        });

        $(document).on('click', '.m-link-d2', function(e) {
            var $depth3 = $(this).next('.m-depth3');
            if ($depth3.length > 0) {
                e.preventDefault();

                // 같은 부모 내의 다른 열려있는 2depth 메뉴 닫기
                var $parent = $(this).closest('.m-depth2');
                $parent.find('.m-depth3').not($depth3).slideUp(200);
                $parent.find('.m-link-d2').not(this).find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');

                $(this).find('i').toggleClass('fa-chevron-up fa-chevron-down');
                $depth3.slideToggle(200);
            }
        });

        // 페이지 로딩 후 0.1초 뒤에 'active' 클래스를 붙여 애니메이션 실행
        setTimeout(function() {
            // 이미지: 1.2배 -> 1.0배 (3초 줌아웃)
            $('.visual-img').addClass('active');
            
            // 타이틀: 투명/아래 -> 선명/중앙 (페이드인 + 슬라이드업)
            $('.tit-sub-visu').addClass('active');
        }, 100);
    });
    </script>
</body>
</html>