<?php
if (!defined('_GNUBOARD_')) exit;
$skin_url = G5_THEME_URL . '/skin/page/products_main';
$today = G5_TIME_YMD;

// 1. 게시판 데이터 로드 시도
$bo_table = 'bconstruction'; // 게시판 ID
$sql = " select * from {$g5['write_prefix']}$bo_table 
           WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_9 = 'IMMEDIATE' OR (wr_9 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
         ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply LIMIT 1 ";
//where wr_is_comment = 0 order by wr_id asc ";
$result = sql_query($sql);

$db_products = array();
while($row = sql_fetch_array($result)) {
    // 💡 [수정] 게시판의 첫 번째 첨부파일(bf_no = 0)을 가져옵니다.
    $sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '{$bo_table}' and wr_id = '{$row['wr_id']}' and bf_no = 0 ";
    $file = sql_fetch($sql_file);

    if (isset($file['bf_file']) && $file['bf_file']) {
        // 실제 업로드된 파일 경로
        $img_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $file['bf_file'];
    } else {
        // 파일이 없을 경우 기본 이미지 또는 기존 방식 사용 (fallback)
        $encoded_filename = rawurlencode($row['wr_subject']);
        $img_url = $skin_url . '/images/' . $encoded_filename . '.png';
    }

    $db_products[] = array(
            "title"   => $row['wr_subject'],
            "page"    => $row['wr_4'],
            "desc"    => strip_tags($row['wr_content']),
            "xPct"    => (float)$row['wr_5'],
            "yPct"    => (float)$row['wr_6'],
            "img_url" => $img_url
    );
}
if (empty($db_products)) {
    $db_products = [
            ["title" => "입면분할창", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "img_url" => $skin_url . '/images/입면분할창' . '.jpg', 'xPct'=>  44.5, 'yPct'=> 11.4],
            ["title" => "프로젝트창", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "img_url" => $skin_url . '/images/프로젝트창' . '.jpg',  "xPct" => 29.4, "yPct" => 22.3],
            ["title" => "소형단창 _ 이중창", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "img_url" => $skin_url . '/images/소형단창 _ 이중창' . '.jpg',  "xPct" => 15.4, "yPct" => 30.8],
            ["title" => "이끌림 도어", "page" => "도어", "desc" => "단열 성능이 뛰어난 시스템 도어", "img_url" => $skin_url . '/images/이끌림 도어' . '.jpg',  "xPct" => 31.9, "yPct" => 43.8],
            ["title" => "이끌림 중문", "page" => "중문", "desc" => "소음 및 미세먼지 차단 슬림 중문", "img_url" => $skin_url . '/images/이끌림 중문' . '.jpg',  "xPct" => 32.3, "yPct"=> 57.4],
            ["title" => "이끌림 마루", "page" => "마루", "desc" => "친환경 온돌 마루 시스템", "img_url" => $skin_url . '/images/이끌림 마루' . '.jpg',  "xPct" => 57.1, "yPct" => 24.2],
            ["title" => "대형단창", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "img_url" => $skin_url . '/images/대형단창' . '.jpg',  "xPct" => 62.2, "yPct" => 18.1],
            ["title" => "대형이중창", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창", "img_url" => $skin_url . '/images/대형이중창' . '.jpg',  "xPct" => 62.2, "yPct" => 18.1],
            ["title" => "스마트 발코니 전용창", "page" => "12p", "desc" => "외창 전용 고기밀 샷시", "img_url" => $skin_url . '/images/스마트 발코니 전용창' . '.jpg',  "xPct" => 62.2, "yPct" => 18.1],
            ["title" => "이끌림 몰딩", "page" => "몰딩", "desc" => "고급 인테리어 마감재", "img_url" => $skin_url . '/images/이끌림 몰딩' . '.jpg',  "xPct" => 70.1, "yPct" => 37.4],

            ["title" => "스마트 이중창", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창", "img_url" => $skin_url . '/images/스마트 이중창' . '.jpg',  "xPct" => 81.8, "yPct" => 38.5],
            ["title" => "발코니 확장 이중창", "page" => "16p", "desc" => "거실 확장용 고단열 이중창", "img_url" => $skin_url . '/images/발코니 확장 이중창' . '.jpg',  "xPct" => 81.8, "yPct" => 38.5],
            ["title" => "판넬창", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "img_url" => $skin_url . '/images/판넬창' . '.jpg',  "xPct" => 5.7, "yPct" => 91.4],
            ["title" => "학교창", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "img_url" => $skin_url . '/images/학교창' . '.jpg',  "xPct" => 21.5, "yPct" =>  90.9],

    ];
}

// 테마 스타일 및 스크립트 로드
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products.css?ver='.G5_CSS_VER.'">', 0);
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/style.css?ver='.G5_CSS_VER.'">', 0);
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products.js_baccc"></script>', 0);
?>
<div class="main-container">
    <!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
    <section class="map-main-visual">
        <div class="visual-slider swiper-container">
            <div class="swiper-wrapper">
                <?php
                var_dump($sql);
                $main_visual_data = [
                        ['bg' => 'back20.jpg', 'subtitle' => '이끌림으로 품격을 높이다!'],
                        ['bg' => 'back014.jpg', 'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'],
                        ['bg' => 'back012.jpg', 'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.']
                ];

                foreach ($main_visual_data as $item) {
                    ?>
                    <div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
                        <a href="#" class="map-visual-link">
                            <div class="map-visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
                            <div class="map-visual-layer-wrap">
                                <div class="visual-layer-item">
                                    <h2 class="map-visual-title">PREMIUM DESIGN</h2>
                                    <span class="map-visual-divider"></span>
                                    <p class="map-visual-subtitle"><?php echo $item['subtitle']; ?></p>
                                </div>
                            </div>
                        </a>
                    </div>
                <?php } ?>
            </div>
            <div class="swiper-pagination"></div>

            <!-- 네비게이션 버튼 (클래스명 변경됨) -->
            <div class="swiper-button-prev">
                <div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
            </div>
            <div class="swiper-button-next">
                <div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
            </div>
        </div>
    </section>
</div>

<div class="main-container">
    <div class="main-visual">
        <section class="min-h-screen flex flex-col items-center justify-center p-6">
            <div class="mb-10 text-center">
                <h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
                    고객의 공간을 완성하는 프리미엄 창호 시스템 <span class="highlight_blue">이끌림샤시</span>로 시작하세요
                </h1>

                <p class="text-gray-300 text-sm md:text-base max-w-2xl mx-auto leading-relaxed">
                    고객의 생활 공간을 고려한 설계와 정밀한 기술력으로<br>
                    최고의 품질과 안정적인 A/S를 제공합니다.
                </p>
            </div>
            <section class="product-map-section py-10 bg-[#0b0f1a]">
                <div class="mb-10 text-center">
                    <div class="container mx-auto px-4">
                        <div class="flex justify-center">
                            <div class="map-wrapper">
                                <div class="map-container" id="main-map" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash_main/images/메인.png');">
                                    <div id="hotspot-layer"></div>
                                </div>
<!--                                <div id="coord-display" class="coord-guide">COORD - X: 0.0%, Y: 0.0%</div>-->
                            </div>
                        </div>
                    </div>
                    <!-- 그룹 미리보기 팝업 레이어 -->
                    <div id="hover-preview">
                        <div class="flex items-center gap-3 mb-5 border-b border-white/10 pb-4">
                            <i class="fa-solid fa-box-open text-blue-500"></i>
                            <h2 class="text-white font-bold text-lg">상세 정보</h2>
                        </div>
                        <div class="products-grid" id="preview-grid"></div>
                    </div>
                </div>
            </section>
            <section class="hero_container">
                <div class="content_inner">

                    <!--            <img src="--><?php //echo G5_THEME_URL ?><!--/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">-->
                    <div class="text_area">
                        <p class="label_blue">SMART WINDOW ORDERING</p>
                        <h1 class="main_title">
                            창호의 새로운 기준,<br>
                            <span class="highlight_blue">이끌림샤시</span>로 시작하세요
                        </h1>
                        <p class="sub_description">
                            복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
                            고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
                        </p>
                        <!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->

                        <div class="main_action_row">
                            <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
                                <div class="btn_icon">🏢</div>
                                <div class="btn_txt">
                                    <strong>창호 온라인 주문</strong>
                                    <p>실시간 직접 견적 및 주문 확정</p>
                                </div>
                            </a>
                            <div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
                                <div class="btn_icon">👨‍🔧</div>
                                <div class="btn_txt">
                                    <strong>창호 전문가 부르기</strong>
                                    <p>방문 실측 및 맞춤 상담 신청</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="floating_as_badge">
                        <p>전국 대리점망</p>
                        <strong>A/S 10년 보장</strong>
                    </div>
                </div>
            </section>
        </section>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const productsData = <?php echo json_encode($db_products); ?>;
        if (typeof initProducts === 'function') {
            initProducts(productsData);
        }
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // .map-main-visual 안에 있는 슬라이더만 타겟팅
        var mainVisualSwiper = new Swiper('.map-main-visual .visual-slider', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on: {
                init: function () {
                    updateNavThumbs(this);
                },
                slideChangeTransitionEnd: function () {
                    updateNavThumbs(this);
                },
            },
        });

        function updateNavThumbs(swiper) {
            // 루프 모드에서 슬라이더의 실제 DOM 요소를 기반으로 이전/다음 슬라이드 찾기
            var slides = swiper.slides;
            var activeIndex = swiper.activeIndex;

            // 이전 슬라이드와 다음 슬라이드 요소 추출
            var prevSlide = slides[activeIndex - 1];
            var nextSlide = slides[activeIndex + 1];

            // 만약 슬라이드가 존재한다면 썸네일 주소 가져오기
            var prevThumb = prevSlide ? prevSlide.getAttribute('data-thumb-bg') : '';
            var nextThumb = nextSlide ? nextSlide.getAttribute('data-thumb-bg') : '';

            // 수정된 클래스명 .map-thumb 을 찾아서 배경 이미지 적용
            if (prevThumb) {
                var prevTarget = swiper.navigation.prevEl.querySelector('.map-thumb');
                if (prevTarget) prevTarget.style.backgroundImage = 'url(' + prevThumb + ')';
            }

            if (nextThumb) {
                var nextTarget = swiper.navigation.nextEl.querySelector('.map-thumb');
                if (nextTarget) nextTarget.style.backgroundImage = 'url(' + nextThumb + ')';
            }
        }
    });
</script>