<div id="pixel-price-calculator">
    <h2>Pixel 価格計算機</h2>
    <div>
        <label for="trade-in">下取り端末:</label>
        <select id="trade-in">
            <option value="0">なし</option>
            <option value="10000">Pixel 3a</option>
            <option value="15000">Pixel 4</option>
            <option value="20000">Pixel 5</option>
        </select>
    </div>
    <div>
        <label for="purchase">購入端末:</label>
        <select id="purchase">
            <option value="80000">Pixel 6</option>
            <option value="100000">Pixel 6 Pro</option>
            <option value="90000">Pixel 7</option>
        </select>
    </div>
    <div>
        <label for="storage">ストレージ:</label>
        <select id="storage">
            <option value="0">128GB</option>
            <option value="10000">256GB</option>
            <option value="20000">512GB</option>
        </select>
    </div>
    <button id="calculate">計算</button>
    <div id="result"></div>
</div>

<style>
#pixel-price-calculator {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#pixel-price-calculator div {
    margin-bottom: 15px;
}

#pixel-price-calculator label {
    display: block;
    margin-bottom: 5px;
}

#pixel-price-calculator select, #pixel-price-calculator button {
    width: 100%;
    padding: 5px;
}

#pixel-price-calculator button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

#result {
    margin-top: 20px;
}

#result h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

#result p {
    margin: 5px 0;
}

.highlight {
    background-color: yellow;
    padding: 2px 4px;
}
</style>

<script>
jQuery(document).ready(function($) {
    $('#calculate').on('click', function() {
        var tradeInValue = parseInt($('#trade-in').val());
        var purchaseValue = parseInt($('#purchase').val());
        var storageValue = parseInt($('#storage').val());
        
        var price = purchaseValue + storageValue;
        var storeCredit = 0; // ストアクレジットの計算ロジックを追加する場合はここで
        var effectivePrice = price - tradeInValue - storeCredit;
        
        var purchase = $('#purchase option:selected').text();
        var storage = $('#storage option:selected').text();
        var tradeInPercentage = Math.round((tradeInValue / price) * 100);
        
        var resultDiv = document.getElementById('result');
        resultDiv.innerHTML = `
            <h2>計算結果</h2>
            <p>購入端末: ${purchase} (${storage})</p>
            <p>基本価格: ¥${price.toLocaleString()}</p>
            <p>ストアクレジット: ¥${storeCredit.toLocaleString()}</p>
            <p>下取り価格: ¥${tradeInValue.toLocaleString()} 
               <span class="highlight">(発売時価格の${tradeInPercentage}%)</span></p>
            <p>実質価格: ¥${effectivePrice.toLocaleString()}</p>
        `;
    });
});
</script>