<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/logoEHMD.png">
    <title>รถจักรยานยนต์ไฟฟ้า (EV) | บริษัท อีฮงมดแดงมอเตอร์ จำกัด</title>
    {{template "head_links"}}
    <style>
        .catalogue-hero {
            background: linear-gradient(135deg, #000F9F 0%, #000a6b 100%);
            padding: 100px 0 40px;
            text-align: center;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        .catalogue-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url('images/ปกเว็บรวมรุ่น.png') center/cover no-repeat;
            opacity: 0.12;
        }
        .catalogue-hero .container { position: relative; z-index: 1; }
        .catalogue-hero h1 { font-size: 42px; font-weight: 800; margin-bottom: 12px; }
        .catalogue-hero p { font-size: 17px; color: rgba(255,255,255,0.75); }
        .ev-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(210,38,48,0.15);
            border: 1px solid rgba(210,38,48,0.4);
            color: #d22630;
            font-size: 13px;
            font-weight: 600;
            padding: 6px 18px;
            border-radius: 30px;
            margin-bottom: 20px;
        }

        .filter-bar-wrap {
            position: sticky;
            top: 70px;
            z-index: 90;
            padding: 20px 0 10px;
        }
        .filter-bar {
            background: #3c3c3c;
            border-radius: 16px;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .filter-btn {
            padding: 8px 20px;
            border-radius: 30px;
            border: 1.5px solid #555;
            background: transparent;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.25s ease;
            color: #ccc;
            font-family: inherit;
        }
        .filter-btn:hover, .filter-btn.active {
            background: #d22630;
            border-color: #d22630;
            color: #fff;
        }
        .result-count {
            margin-left: auto;
            font-size: 13px;
            color: #999;
            white-space: nowrap;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 24px;
            padding: 0 0 20px;
        }
        .product-catalogue-card {
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,0.07);
            transition: all 0.3s cubic-bezier(0.165,0.84,0.44,1);
            border: 1px solid #f5f5f5;
            display: flex;
            flex-direction: column;
        }
        .product-catalogue-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.13);
        }
        .card-img-wrap {
            background: #f8f8f8;
            padding: 20px;
            text-align: center;
            position: relative;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px 12px 0 0;
        }
        .card-img-wrap img {
            max-height: 160px;
            max-width: 100%;
            object-fit: contain;
            transition: transform 0.4s ease;
            border-radius: 8px;
        }
        .product-catalogue-card:hover .card-img-wrap img {
            transform: scale(1.05);
        }
        .card-category-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(210,38,48,0.12);
            color: #b22028;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
        }
        .ev-tag {
            position: absolute;
            top: 12px;
            right: 12px;
            background: #d22630;
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            padding: 4px 10px;
            border-radius: 20px;
        }
        .sold-out-tag {
            position: absolute;
            top: 12px;
            right: 12px;
            background: #D22630;
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            padding: 4px 10px;
            border-radius: 20px;
        }
        .sold-out-card {
            border: 2px solid #D22630 !important;
            background-color: rgba(210,38,48,0.02) !important;
        }
        .card-body {
            padding: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .card-brand {
            font-size: 11px;
            color: #fff;
            background: #d22630;
            padding: 4px 10px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            display: inline-block;
            align-self: flex-start;
            font-weight: 700;
        }
        .card-name { font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; line-height: 1.3; }
        .card-spec {
            font-size: 12px;
            color: #777;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 4px;
        }
        .card-spec span { display: flex; align-items: center; gap: 4px; }
        .card-price { font-size: 20px; font-weight: 800; color: #b22028; margin-top: auto; padding-top: 12px; }
        .card-price small { font-size: 13px; color: #aaa; font-weight: 400; }
        .card-actions { display: flex; gap: 8px; margin-top: 16px; }
        .card-btn-primary {
            flex: 1;
            background: #d22630;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 10px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }
        .card-btn-primary:hover { background: #b22028; }
        .card-btn-outline {
            background: transparent;
            border: 1.5px solid #e0e0e0;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            color: #666;
            font-family: inherit;
        }
        .card-btn-outline:hover { border-color: #d22630; color: #d22630; }

        .ev-banner {
            background: linear-gradient(135deg, #fdf2f3, #fad1d4);
            border: 1px solid #f3a7ac;
            border-radius: 16px;
            padding: 28px 32px;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .ev-banner i { font-size: 42px; color: #d22630; flex-shrink: 0; }
        .ev-banner h3 { font-size: 18px; margin-bottom: 4px; color: #6f0d14; }
        .ev-banner p { font-size: 14px; color: #f8a5ab; margin: 0; }

        @media (max-width: 768px) {
            .catalogue-hero h1 { font-size: 28px; }
            .product-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 16px; padding: 12px 0 40px; }
            .card-img-wrap { height: 140px; }
            .ev-banner { flex-direction: column; text-align: center; }
        }

        /* Layered Sections Styling */
        .category-section { margin-bottom: 20px; }
        .category-header {
            font-size: 22px;
            font-weight: 700;
            margin: 40px 0 20px;
            color: #1a1a1a;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .category-header::before {
            content: '';
            display: block;
            width: 4px;
            height: 24px;
            background: #d22630;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    {{template "navbar"}}

    <div class="catalogue-hero">
        <div class="container">
            <!-- <div class="ev-badge"><i class="ph ph-lightning"></i> Zero Emission</div> -->
            <h1>รถจักรยานยนต์ไฟฟ้า (EV)</h1>
            <p>ขับขี่สะอาด ประหยัดพลังงาน เทคโนโลยีแห่งอนาคต</p>
        </div>
    </div>

    <div class="filter-bar-wrap">
        <div class="container">
            <div class="filter-bar">
                <button class="filter-btn active" onclick="filterProducts('all', this)">ทั้งหมด</button>
                <button class="filter-btn" onclick="filterProducts('one', this)">10,000-20,000 บาท</button>
                <button class="filter-btn" onclick="filterProducts('two', this)">20,000-30,000 บาท</button>
                <button class="filter-btn" onclick="filterProducts('three', this)">30,000-40,000 บาท</button>
                <button class="filter-btn" onclick="filterProducts('four', this)">มากกว่า 40,000 บาท</button>
                <span class="result-count" id="resultCount">แสดง {{len .Motorcycles}} รุ่น</span>
            </div>
        </div>
    </div>

    <section style="background: #f9fafb; padding-bottom: 60px;">
        <div class="container">
            <!-- <div style="padding-top: 40px;">
                <div class="ev-banner">
                    <i class="ph-duotone ph-charging-station"></i>
                    <div>
                        <h3>ชาร์จง่าย ขับสบาย ทุกที่ทุกเวลา</h3>
                        <p style="color: #047857;">ประหยัดค่าเชื้อเพลิงได้มากกว่า 80% เมื่อเทียบกับรถน้ำมัน พร้อมบริการหลังการขายครบวงจร</p>
                    </div>
                </div>
            </div> -->

            <!-- 10,000-20,000 (one) -->
            <div class="category-section" data-category="one">
                <h3 class="category-header">ราคา 10,000-20,000 บาท</h3>
                <div class="product-grid">
                    {{if .GroupOne}}
                    {{range .GroupOne}}
                    <div class="product-catalogue-card {{if eq .Count 0}}sold-out-card{{end}}" data-category="one">
                        <div class="card-img-wrap">
                            {{if eq .Count 0}}
                            <span class="sold-out-tag">SOLD OUT</span>
                            {{end}}
                            <img src="images/{{if .PdImg}}{{.PdImg}}{{else}}no-image-available.png{{end}}" 
                                 onerror="this.src='images/no-image-available.png'; this.onerror=null;"
                                 alt="{{.BrandName}} {{.ModelName}}">
                        </div>
                        <div class="card-body">
                            <div class="card-brand">{{.BrandName}}</div>
                            <div class="card-name">{{.ModelName}}</div>
                            <div class="card-price">{{formatNumber .Price}} <small>บาท</small></div>
                            <div class="card-actions">
                                <button class="card-btn-primary">ดูรายละเอียด</button>
                                <!-- <button class="card-btn-outline" title="สนใจ"><i class="ph ph-heart"></i></button> -->
                            </div>
                        </div>
                    </div>
                    {{end}}
                    {{else}}
                    <p style="grid-column: 1 / -1; text-align: center; color: #999; padding: 20px;">ไม่มีสินค้ารุ่นนี้ในระบบ</p>
                    {{end}}
                </div>
            </div>

            <!-- 20,000-30,000 (two) -->
            <div class="category-section" data-category="two">
                <h3 class="category-header">ราคา 20,000-30,000 บาท</h3>
                <div class="product-grid">
                    {{if .GroupTwo}}
                    {{range .GroupTwo}}
                    <div class="product-catalogue-card {{if eq .Count 0}}sold-out-card{{end}}" data-category="two">
                        <div class="card-img-wrap">
                            {{if eq .Count 0}}
                            <span class="sold-out-tag">SOLD OUT</span>
                            {{end}}
                            <img src="images/{{if .PdImg}}{{.PdImg}}{{else}}no-image-available.png{{end}}" 
                                 onerror="this.src='images/no-image-available.png'; this.onerror=null;"
                                 alt="{{.BrandName}} {{.ModelName}}">
                        </div>
                        <div class="card-body">
                            <div class="card-brand">{{.BrandName}}</div>
                            <div class="card-name">{{.ModelName}}</div>
                            <div class="card-price">{{formatNumber .Price}} <small>บาท</small></div>
                            <div class="card-actions">
                                <button class="card-btn-primary">ดูรายละเอียด</button>
                                <!-- <button class="card-btn-outline" title="สนใจ"><i class="ph ph-heart"></i></button> -->
                            </div>
                        </div>
                    </div>
                    {{end}}
                    {{else}}
                    <p style="grid-column: 1 / -1; text-align: center; color: #999; padding: 20px;">ไม่มีสินค้ารุ่นนี้ในระบบ</p>
                    {{end}}
                </div>
            </div>

            <!-- 30,000-40,000 (three) -->
            <div class="category-section" data-category="three">
                <h3 class="category-header">ราคา 30,000-40,000 บาท</h3>
                <div class="product-grid">
                    {{if .GroupThree}}
                    {{range .GroupThree}}
                    <div class="product-catalogue-card {{if eq .Count 0}}sold-out-card{{end}}" data-category="three">
                        <div class="card-img-wrap">
                            {{if eq .Count 0}}
                            <span class="sold-out-tag">SOLD OUT</span>
                            {{end}}
                            <img src="images/{{if .PdImg}}{{.PdImg}}{{else}}no-image-available.png{{end}}" 
                                 onerror="this.src='images/no-image-available.png'; this.onerror=null;"
                                 alt="{{.BrandName}} {{.ModelName}}">
                        </div>
                        <div class="card-body">
                            <div class="card-brand">{{.BrandName}}</div>
                            <div class="card-name">{{.ModelName}}</div>
                            <div class="card-price">{{formatNumber .Price}} <small>บาท</small></div>
                            <div class="card-actions">
                                <button class="card-btn-primary">ดูรายละเอียด</button>
                                <!-- <button class="card-btn-outline" title="สนใจ"><i class="ph ph-heart"></i></button> -->
                            </div>
                        </div>
                    </div>
                    {{end}}
                    {{else}}
                    <p style="grid-column: 1 / -1; text-align: center; color: #999; padding: 20px;">ไม่มีสินค้ารุ่นนี้ในระบบ</p>
                    {{end}}
                </div>
            </div>

            <!-- มากกว่า 40,000 (four) -->
            <div class="category-section" data-category="four">
                <h3 class="category-header">ราคามากกว่า 40,000 บาท</h3>
                <div class="product-grid">
                    {{if .GroupFour}}
                    {{range .GroupFour}}
                    <div class="product-catalogue-card {{if eq .Count 0}}sold-out-card{{end}}" data-category="four">
                        <div class="card-img-wrap">
                            {{if eq .Count 0}}
                            <span class="sold-out-tag">SOLD OUT</span>
                            {{end}}
                            <img src="images/{{if .PdImg}}{{.PdImg}}{{else}}no-image-available.png{{end}}" 
                                 onerror="this.src='images/no-image-available.png'; this.onerror=null;"
                                 alt="{{.BrandName}} {{.ModelName}}">
                        </div>
                        <div class="card-body">
                            <div class="card-brand">{{.BrandName}}</div>
                            <div class="card-name">{{.ModelName}}</div>
                            <div class="card-price">{{formatNumber .Price}} <small>บาท</small></div>
                            <div class="card-actions">
                                <button class="card-btn-primary">ดูรายละเอียด</button>
                                <!-- <button class="card-btn-outline" title="สนใจ"><i class="ph ph-heart"></i></button> -->
                            </div>
                        </div>
                    </div>
                    {{end}}
                    {{else}}
                    <p style="grid-column: 1 / -1; text-align: center; color: #999; padding: 20px;">ไม่มีสินค้ารุ่นนี้ในระบบ</p>
                    {{end}}
                </div>
            </div>

            <div id="noResults" class="no-results" style="display:none; text-align:center; padding:80px 20px; color:#aaa;">
                <i class="ph ph-magnifying-glass" style="font-size:48px; display:block; margin-bottom:16px;"></i>
                <p>ไม่พบรุ่นรถที่คุณต้องการในหมวดหมู่ชุดนี้</p>
            </div>
        </div>
    </section>

    {{template "footer"}}

    <script src="assets/js/script.js"></script>
    <script>
        function filterProducts(category, btn) {
            document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');

            const sections = document.querySelectorAll('.category-section');
            let totalShow = 0;

            sections.forEach(section => {
                if (category === 'all') {
                    section.style.display = 'block';
                    totalShow++;
                } else if (section.dataset.category === category) {
                    section.style.display = 'block';
                    totalShow++;
                } else {
                    section.style.display = 'none';
                }
            });

            const cards = document.querySelectorAll('.product-catalogue-card');
            let visibleCount = 0;
            cards.forEach(card => {
                if (category === 'all' || card.dataset.category === category) {
                    card.style.display = 'flex';
                    visibleCount++;
                } else {
                    card.style.display = 'none';
                }
            });

            document.getElementById('noResults').style.display = totalShow === 0 ? 'block' : 'none';
            document.getElementById('resultCount').textContent = `แสดง ${visibleCount} รุ่น`;
        }
    </script>
</body>
</html>