<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChainGas | 結 - Japanese Blessings</title>
    <style>
        /* ---------------------------------------------------------
           这里是内置的样式表，不用担心网络问题导致样式丢失
           --------------------------------------------------------- */
        :root {
            --bg-color: #FAFAF9;
            --text-main: #44403C;
            --text-muted: #A8A29E;
            --accent: #1C1917;
            --white: #ffffff;
            --shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body {
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            line-height: 1.6;
        }

        a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
        a:hover { opacity: 0.6; }
        ul { list-style: none; }
        button { cursor: pointer; border: none; background: none; font-family: inherit; }

        /* Navigation */
        nav {
            position: fixed; top: 0; left: 0; width: 100%; height: 70px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid #E7E5E4;
            z-index: 1000;
            display: flex; align-items: center; justify-content: center;
        }
        .nav-container {
            width: 100%; max-width: 1200px; padding: 0 24px;
            display: flex; justify-content: space-between; align-items: center;
        }
        .logo { font-size: 24px; letter-spacing: 0.1em; font-weight: 300; }
        .logo span { font-size: 12px; margin-left: 5px; opacity: 0.5; }
        
        .menu { display: flex; gap: 30px; font-size: 14px; letter-spacing: 0.05em; }
        .menu a { color: var(--text-main); }
        
        .actions { display: flex; gap: 20px; align-items: center; }
        .lang-btn {
            border: 1px solid #D6D3D1; padding: 4px 10px; font-size: 12px; border-radius: 4px;
        }
        .cart-icon { position: relative; font-size: 20px; }
        .cart-count {
            position: absolute; top: -5px; right: -8px;
            background: #EF4444; color: white; font-size: 10px;
            width: 16px; height: 16px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
        }

        /* Main Layout */
        main { padding-top: 100px; padding-bottom: 80px; min-height: 80vh; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        /* Hero Section */
        .hero {
            position: relative; height: 400px; border-radius: 16px; overflow: hidden;
            margin-bottom: 60px; box-shadow: var(--shadow);
        }
        .hero img { width: 100%; height: 100%; object-fit: cover; }
        .hero-content {
            position: absolute; inset: 0; background: rgba(0,0,0,0.25);
            display: flex; flex-col; flex-direction: column;
            align-items: center; justify-content: center; color: white; text-align: center;
        }
        .hero h1 { font-size: 32px; font-weight: 300; letter-spacing: 0.2em; margin-bottom: 10px; }
        .hero p { font-size: 14px; letter-spacing: 0.1em; margin-bottom: 30px; opacity: 0.9; }
        .btn-shop {
            background: white; color: #1C1917; padding: 12px 30px;
            font-size: 12px; letter-spacing: 0.1em; border-radius: 2px;
        }

        /* Product Grid */
        .section-title { font-size: 20px; font-weight: 300; margin-bottom: 30px; letter-spacing: 0.1em; border-bottom: 1px solid #E7E5E4; padding-bottom: 15px; }
        .product-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 40px 24px;
        }
        .product-card { cursor: pointer; }
        .product-img-box {
            position: relative; aspect-ratio: 1; background: #F5F5F4;
            border-radius: 12px; overflow: hidden; margin-bottom: 12px;
            box-shadow: var(--shadow); transition: transform 0.3s;
        }
        .product-img-box:hover { transform: translateY(-5px); }
        .product-img-box img { width: 100%; height: 100%; object-fit: cover; }
        .add-btn {
            position: absolute; bottom: 12px; right: 12px;
            background: white; width: 32px; height: 32px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1); font-size: 18px;
        }
        .product-title { font-size: 14px; margin-bottom: 4px; }
        .product-price { font-size: 12px; color: var(--text-muted); }

        /* Cart Sidebar */
        .cart-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 2000;
            display: none; opacity: 0; transition: opacity 0.3s;
        }
        .cart-sidebar {
            position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px;
            background: white; z-index: 2001; padding: 24px;
            transform: translateX(100%); transition: transform 0.3s;
            display: flex; flex-direction: column;
        }
        .cart-open .cart-overlay { display: block; opacity: 1; }
        .cart-open .cart-sidebar { transform: translateX(0); }
        
        .cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
        .cart-items { flex: 1; overflow-y: auto; }
        .cart-item { display: flex; gap: 15px; margin-bottom: 20px; }
        .cart-item img { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; }
        .cart-footer { padding-top: 20px; border-top: 1px solid #E7E5E4; }
        .checkout-btn {
            width: 100%; background: #1C1917; color: white;
            padding: 15px; margin-top: 15px; border-radius: 6px;
        }

        /* Checkout Modal */
        .modal-wrap {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 3000;
            display: none; align-items: center; justify-content: center; padding: 20px;
        }
        .modal-wrap.active { display: flex; }
        .modal-box {
            background: white; width: 100%; max-width: 450px;
            padding: 40px; border-radius: 12px; position: relative;
        }
        .input-group { margin-bottom: 15px; }
        .input-group label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
        .input-group input {
            width: 100%; padding: 10px; border: 1px solid #E7E5E4; border-radius: 6px;
        }

        /* Footer */
        footer { background: #F5F5F4; padding: 60px 0 30px; border-top: 1px solid #E7E5E4; font-size: 12px; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 40px; margin-bottom: 40px; }
        .footer-col h4 { font-weight: bold; margin-bottom: 15px; }
        .footer-col ul li { margin-bottom: 8px; color: var(--text-muted); cursor: pointer; }
        .legal-links a:hover { text-decoration: underline; color: var(--text-main); }
        .copyright { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid #E7E5E4; color: var(--text-muted); }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .menu { display: none; }
            .hero { height: 250px; }
            .product-grid { grid-template-columns: 1fr 1fr; }
        }
    </style>
</head>
<body>

    <nav>
        <div class="nav-container">
            <div class="logo" onclick="location.reload()">YUI <span>結</span></div>
            <div class="menu">
                <a href="#" id="nav-home">Home</a>
                <a href="#" id="nav-shop">Shop</a>
                <a href="#">About</a>
            </div>
            <div class="actions">
                <button class="lang-btn" onclick="toggleLang()">日本語 / 中文</button>
                <button class="cart-icon" onclick="toggleCart()">
                    🛒 <span class="cart-count" id="cart-count">0</span>
                </button>
            </div>
        </div>
    </nav>

    <main class="container">
        <div class="hero">
            <img src="https://images.unsplash.com/photo-1493728637956-42777fb61974?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" alt="Japan">
            <div class="hero-content">
                <h1 id="hero-title">想いを、結ぶ。</h1>
                <p id="hero-sub">日本からの心温まる贈り物。</p>
                <button class="btn-shop" id="btn-shop">Shop Now</button>
            </div>
        </div>

        <h2 class="section-title" id="featured-title">Featured Collection</h2>
        <div class="product-grid" id="product-list">
            </div>
    </main>

    <div id="cart-drawer">
        <div class="cart-overlay" onclick="toggleCart()"></div>
        <div class="cart-sidebar">
            <div class="cart-header">
                <h2 id="cart-title">Cart</h2>
                <button onclick="toggleCart()">✕</button>
            </div>
            <div class="cart-items" id="cart-items-container">
                <p style="text-align:center; color:#999; margin-top:20px;">Your cart is empty.</p>
            </div>
            <div class="cart-footer">
                <div style="display:flex; justify-content:space-between; font-weight:bold;">
                    <span>Total</span>
                    <span id="cart-total">¥0</span>
                </div>
                <button class="checkout-btn" onclick="openCheckout()" id="btn-checkout">Checkout</button>
            </div>
        </div>
    </div>

    <div class="modal-wrap" id="checkout-modal">
        <div class="modal-box">
            <button style="position:absolute; top:15px; right:15px;" onclick="closeCheckout()">✕</button>
            <h2 style="text-align:center; margin-bottom:20px;">Secure Checkout</h2>
            <div class="input-group">
                <label>Email Address</label>
                <input type="email" placeholder="you@example.com">
            </div>
            <div class="input-group">
                <label>Card Information</label>
                <input type="text" placeholder="**** **** **** 4242">
            </div>
            <div class="input-group">
                <label>Shipping Address</label>
                <input type="text" placeholder="123 Street, City">
            </div>
            <button class="checkout-btn" onclick="alert('Demo Payment Processed!')">Pay Now</button>
            <p style="text-align:center; font-size:10px; color:#999; margin-top:10px;">
                🔒 Secured by Stripe
            </p>
        </div>
    </div>

    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h4>ChainGas.CC | 結</h4>
                    <p style="opacity:0.6;">Delivering authentic Japanese craftsmanship to the world.</p>
                </div>
                <div class="footer-col">
                    <h4>Legal</h4>
                    <ul class="legal-links">
                        <li><a href="privacy.html">Privacy Policy</a></li>
                        <li><a href="terms.html">Terms of Service</a></li>
                        <li><a href="refund.html">Refund Policy</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Contact</h4>
                    <ul>
                        <li>support@chaingas.cc</li>
                        <li>Tokyo, Japan</li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2025 YUI Store.</p>
                <p>Visa • Mastercard • Amex</p>
            </div>
        </div>
    </footer>

    <script>
        // ---------------------------------------------------------
        // 这里是内置的逻辑代码，无需外部JS
        // ---------------------------------------------------------
        
        // Data
        const products = [
            { id: 1, name_jp: '手書き祝福カード「春」', name_cn: '手写祝福卡片 "春"', price: 900, img: 'https://images.unsplash.com/photo-1606103920295-9a091573f160?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80' },
            { id: 2, name_jp: '京都産お守り・縁結び', name_cn: '京都御守 - 缘结', price: 1500, img: 'https://images.unsplash.com/photo-1528164344705-47542687000d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80' },
            { id: 3, name_jp: '和紙のレターセット', name_cn: '高级和纸信封套装', price: 3500, img: 'https://images.unsplash.com/photo-1518640467707-6811f4a6ab73?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80' },
            { id: 4, name_jp: '桜のチャーム', name_cn: '樱花挂件', price: 1200, img: 'https://images.unsplash.com/photo-1524413840807-0c3cb6fa808d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80' },
            { id: 5, name_jp: '富士山の風鈴', name_cn: '富士山风铃', price: 4500, img: 'https://images.unsplash.com/photo-1516205651411-a8551e6358cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80' },
            { id: 6, name_jp: '手作り絵馬', name_cn: '手工绘马', price: 1100, img: 'https://images.unsplash.com/photo-1572973820250-9907f6c6e75a?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80' }
        ];

        let cart = [];
        let lang = 'jp';

        // Translation
        const t = {
            jp: { nav_home:'ホーム', nav_shop:'商品一覧', hero_title:'想いを、結ぶ。', hero_sub:'日本からの心温まる贈り物。', btn_shop:'ショッピング', featured:'おすすめ商品', cart_title:'カート', checkout:'支払い' },
            cn: { nav_home:'首页', nav_shop:'所有商品', hero_title:'结缘，传情。', hero_sub:'来自日本的温馨祝福。', btn_shop:'立即选购', featured:'精选商品', cart_title:'购物车', checkout:'去结账' }
        };

        // Init
        function renderProducts() {
            const container = document.getElementById('product-list');
            container.innerHTML = '';
            products.forEach(p => {
                const name = lang === 'jp' ? p.name_jp : p.name_cn;
                container.innerHTML += `
                    <div class="product-card">
                        <div class="product-img-box">
                            <img src="${p.img}" alt="${name}">
                            <button class="add-btn" onclick="addToCart(${p.id})">+</button>
                        </div>
                        <h3 class="product-title">${name}</h3>
                        <p class="product-price">¥${p.price.toLocaleString()}</p>
                    </div>
                `;
            });
            updateText();
        }

        function updateText() {
            document.getElementById('nav-home').innerText = t[lang].nav_home;
            document.getElementById('nav-shop').innerText = t[lang].nav_shop;
            document.getElementById('hero-title').innerText = t[lang].hero_title;
            document.getElementById('hero-sub').innerText = t[lang].hero_sub;
            document.getElementById('btn-shop').innerText = t[lang].btn_shop;
            document.getElementById('featured-title').innerText = t[lang].featured;
            document.getElementById('cart-title').innerText = t[lang].cart_title;
            document.getElementById('btn-checkout').innerText = t[lang].checkout;
        }

        // Actions
        function toggleLang() {
            lang = lang === 'jp' ? 'cn' : 'jp';
            renderProducts();
            renderCart();
        }

        function addToCart(id) {
            const product = products.find(p => p.id === id);
            cart.push(product);
            renderCart();
            toggleCart(true); // Open cart
        }

        function toggleCart(forceOpen = false) {
            const drawer = document.getElementById('cart-drawer');
            if (forceOpen) {
                drawer.classList.add('cart-open');
            } else {
                drawer.classList.toggle('cart-open');
            }
        }

        function renderCart() {
            document.getElementById('cart-count').innerText = cart.length;
            const container = document.getElementById('cart-items-container');
            const totalEl = document.getElementById('cart-total');
            
            if (cart.length === 0) {
                container.innerHTML = '<p style="text-align:center; color:#999; margin-top:20px;">Empty</p>';
                totalEl.innerText = '¥0';
                return;
            }

            container.innerHTML = '';
            let total = 0;
            cart.forEach((item, index) => {
                total += item.price;
                const name = lang === 'jp' ? item.name_jp : item.name_cn;
                container.innerHTML += `
                    <div class="cart-item">
                        <img src="${item.img}">
                        <div>
                            <div style="font-size:14px; margin-bottom:5px;">${name}</div>
                            <div style="font-size:12px; color:#666;">¥${item.price.toLocaleString()}</div>
                            <button style="color:red; font-size:10px; margin-top:5px; text-decoration:underline;" onclick="cart.splice(${index},1); renderCart()">Remove</button>
                        </div>
                    </div>
                `;
            });
            totalEl.innerText = '¥' + total.toLocaleString();
        }

        function openCheckout() {
            toggleCart(); // close sidebar
            document.getElementById('checkout-modal').classList.add('active');
        }

        function closeCheckout() {
            document.getElementById('checkout-modal').classList.remove('active');
        }

        // Start
        renderProducts();

    </script>
</body>
</html>