<div id="auction-widget" style="max-width:400px;font-family:sans-serif;border:1px solid #ccc;padding:15px;border-radius:10px;">

<h2>Product Veiling</h2>

<!-- Product afbeelding -->
<img id="product-image" src="https://via.placeholder.com/300" style="width:100%;border-radius:8px;" />

<!-- Timer -->
<h3>Resterende tijd:</h3>
<div id="timer" style="font-size:20px;font-weight:bold;color:red;"></div>

<!-- Hoogste bod -->
<h3>Hoogste bod: €<span id="highest-bid">0</span></h3>

<!-- Biedformulier -->
<form id="bid-form">
<input type="text" id="name" placeholder="Naam" required style="width:100%;margin-bottom:5px;" />
<input type="number" id="bid" placeholder="Jouw bod (€)" required style="width:100%;margin-bottom:5px;" />
<button type="submit" style="width:100%;">Plaats bod</button>
</form>

<p id="message"></p>

</div>

<script>
(function() {

// INSTELLINGEN
const endTime = new Date().getTime() + (60 * 60 * 1000); // 1 uur vanaf nu

let highestBid = 0;

// TIMER
function updateTimer() {
const now = new Date().getTime();
const distance = endTime - now;

if (distance <= 0) {
document.getElementById("timer").innerHTML = "Veiling afgelopen";
return;
}

const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById("timer").innerHTML = minutes + "m " + seconds + "s";
}

setInterval(updateTimer, 1000);
updateTimer();

// FORMULIER
document.getElementById("bid-form").addEventListener("submit", function(e) {
e.preventDefault();

const name = document.getElementById("name").value;
const bid = parseFloat(document.getElementById("bid").value);

if (bid > highestBid) {
highestBid = bid;
document.getElementById("highest-bid").innerText = highestBid;
document.getElementById("message").innerText = "Nieuw hoogste bod van " + name + "!";
} else {
document.getElementById("message").innerText = "Bod moet hoger zijn dan €" + highestBid;
}

this.reset();
});

})();
</script>