From 5ce68373b325452c8ada53b3f98cd7cb61e4ae53 Mon Sep 17 00:00:00 2001
From: Gemini AI <gemini@google.com>
Date: Thu, 4 Dec 2025 20:44:12 +0400
Subject: [PATCH] feat: align page with dedicatednodes layout

---
 new-baremetal.html | 401 +++++++++++++++++++++------------------------
 1 file changed, 187 insertions(+), 214 deletions(-)

diff --git a/new-baremetal.html b/new-baremetal.html
index fc694e2..c5f8cee 100644
--- a/new-baremetal.html
+++ b/new-baremetal.html
@@ -5,21 +5,20 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>DedicatedNodes | Bare Metal Server Details</title>
-    <meta name="description"
-        content="Instant inventory, custom builds, and Jito latency data for high-performance DedicatedNodes bare metal servers.">
+    <meta name="description" content="DedicatedNodes bare metal servers: instant hardware, custom builds, and live Jito latency insights.">
     <link rel="icon" href="https://www.dedicatednodes.io/wp-content/uploads/2024/04/favicon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
-            --brand-primary: #2892da;
-            --brand-dark: #0a1628;
-            --brand-cyan: #00d4ff;
-            --text-primary: #0f172a;
-            --text-muted: #5e6c84;
-            --bg-surface: #f8fafc;
+            --brand-primary: #2892DA;
+            --brand-dark: #0A1628;
+            --brand-cyan: #00D4FF;
+            --bg-surface: #F8FAFC;
             --border: rgba(15, 23, 42, 0.12);
+            --text-primary: #0F172A;
+            --text-muted: #5E6C84;
         }
 
         * {
@@ -35,15 +34,15 @@
         }
 
         header {
-            background: var(--brand-dark);
-            color: #fff;
-            padding: 1rem 1.5rem;
             position: sticky;
             top: 0;
-            z-index: 40;
+            z-index: 50;
+            background: var(--brand-dark);
+            padding: 1rem 1.5rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            color: #fff;
         }
 
         header .logo {
@@ -51,9 +50,9 @@
             letter-spacing: 0.08em;
         }
 
-        header nav a {
-            color: rgba(255, 255, 255, 0.9);
+        nav a {
             margin-left: 1rem;
+            color: rgba(255,255,255,0.9);
             text-decoration: none;
             font-weight: 500;
             font-size: 0.95rem;
@@ -66,26 +65,25 @@
         }
 
         .hero {
+            background: linear-gradient(135deg, #0F2744, #031020);
             border-radius: 1.5rem;
-            background: linear-gradient(135deg, var(--brand-dark), #031326);
-            color: #fff;
             padding: 3rem 2rem;
-            box-shadow: 0 25px 60px rgba(3, 16, 32, 0.45);
-            margin-bottom: 2.5rem;
+            color: #fff;
+            box-shadow: 0 25px 50px rgba(3,16,32,0.35);
         }
 
         .hero h1 {
-            font-size: 2.8rem;
+            font-size: 2.7rem;
             margin-bottom: 0.75rem;
         }
 
         .hero p {
-            max-width: 650px;
-            color: rgba(255, 255, 255, 0.85);
-            margin-bottom: 1.25rem;
+            color: rgba(255,255,255,0.85);
+            max-width: 640px;
+            margin-bottom: 1.5rem;
         }
 
-        .hero .actions {
+        .hero .buttons {
             display: flex;
             flex-wrap: wrap;
             gap: 0.75rem;
@@ -93,116 +91,121 @@
 
         .btn {
             border: none;
-            padding: 0.85rem 1.5rem;
+            padding: 0.85rem 1.6rem;
             border-radius: 0.75rem;
             font-weight: 600;
             cursor: pointer;
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
+            transition: transform 0.2s ease;
         }
 
         .btn-primary {
             background: var(--brand-cyan);
-            color: #0a1628;
+            color: var(--brand-dark);
+            box-shadow: 0 15px 35px rgba(0,212,255,0.35);
         }
 
-        .btn-outline {
+        .btn-light {
             background: transparent;
-            border: 1px solid rgba(255, 255, 255, 0.6);
             color: #fff;
+            border: 1px solid rgba(255,255,255,0.4);
         }
 
-        section {
+        .section {
             margin-bottom: 3rem;
         }
 
         .section-heading h2 {
-            font-size: 2.1rem;
             margin-bottom: 0.4rem;
+            font-size: 2rem;
         }
 
         .section-heading p {
             color: var(--text-muted);
         }
 
-        .instant-section {
+        .instant-section, .custom-section {
             background: var(--bg-surface);
             border-radius: 1.5rem;
             padding: 2rem;
-            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
+            box-shadow: 0 15px 40px rgba(3,16,32,0.1);
         }
 
         .instant-table {
             width: 100%;
             border-collapse: collapse;
-            font-size: 0.95rem;
+            margin-top: 1rem;
         }
 
-        .instant-table thead tr {
-            border-bottom: 1px solid var(--border);
-        }
-
-        .instant-table th,
-        .instant-table td {
+        .instant-table th, .instant-table td {
             padding: 0.75rem;
             text-align: left;
         }
 
+        .instant-table thead {
+            background: #fff;
+        }
+
         .instant-table tbody tr {
-            border-bottom: 1px solid rgba(15, 23, 42, 0.05);
+            border-bottom: 1px solid rgba(15,23,42,0.08);
         }
 
         .instant-table tbody tr:last-child {
             border-bottom: none;
         }
 
+        .instant-table .price {
+            color: var(--brand-primary);
+            font-weight: 700;
+        }
+
         .deploy-btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
             background: var(--brand-primary);
             color: #fff;
             border-radius: 0.65rem;
-            padding: 0.45rem 0.85rem;
-            font-weight: 600;
+            padding: 0.4rem 0.9rem;
             text-decoration: none;
-        }
-
-        .configurator {
-            background: #fff;
-            border-radius: 1.5rem;
-            padding: 2rem;
-            box-shadow: 0 20px 45px rgba(3, 16, 32, 0.1);
+            font-weight: 600;
         }
 
         .config-grid {
             display: grid;
-            grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
-            gap: 2rem;
+            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+            gap: 1.25rem;
+            margin-top: 1.25rem;
         }
 
         .offer-card {
-            border: 1px solid var(--border);
             border-radius: 1rem;
-            padding: 1rem 1.25rem;
-            margin-bottom: 1rem;
-            cursor: pointer;
-            transition: border 0.2s ease, transform 0.2s ease;
+            border: 1px solid var(--border);
+            padding: 1.15rem;
             background: #fff;
+            transition: border 0.2s ease, box-shadow 0.2s ease;
         }
 
         .offer-card.active {
             border-color: var(--brand-primary);
-            box-shadow: 0 10px 30px rgba(40, 146, 218, 0.15);
+            box-shadow: 0 10px 30px rgba(40,146,218,0.2);
+        }
+
+        .offer-card h3 {
+            margin-bottom: 0.4rem;
+            font-size: 1rem;
+        }
+
+        .offer-price {
+            font-size: 1.2rem;
+            font-weight: 700;
+            color: var(--brand-primary);
         }
 
         .option-panel {
-            border: 1px solid var(--border);
             border-radius: 1rem;
             padding: 1.25rem;
             background: var(--bg-surface);
+            border: 1px solid var(--border);
             display: flex;
             flex-direction: column;
-            gap: 0.75rem;
+            gap: 0.9rem;
         }
 
         .option-row {
@@ -219,21 +222,21 @@
         .option-row select {
             padding: 0.6rem 0.75rem;
             border-radius: 0.65rem;
-            border: 1px solid rgba(15, 23, 42, 0.3);
-            font-family: 'Inter', sans-serif;
+            border: 1px solid rgba(15,23,42,0.3);
         }
 
         .summary-panel {
-            border-radius: 0.9rem;
-            border: 1px solid var(--border);
-            padding: 1rem;
+            margin-top: 0.5rem;
+            padding: 0.85rem 1rem;
             background: #fff;
+            border-radius: 0.75rem;
+            border: 1px solid rgba(15,23,42,0.08);
         }
 
         .summary-panel div {
             display: flex;
             justify-content: space-between;
-            margin-bottom: 0.4rem;
+            margin-bottom: 0.35rem;
         }
 
         .summary-panel strong {
@@ -245,21 +248,22 @@
             border-radius: 1.5rem;
             padding: 2rem;
             color: #fff;
+            box-shadow: 0 20px 50px rgba(3,16,32,0.3);
         }
 
         .map-grid {
             display: grid;
             grid-template-columns: minmax(260px, 1fr) 320px;
             gap: 1.5rem;
-            align-items: stretch;
+            align-items: center;
         }
 
         .map-graphic {
             position: relative;
-            background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.25), transparent 60%), #0f1e39;
             border-radius: 1rem;
             min-height: 280px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.25), transparent 60%), #0f1e39;
+            border: 1px solid rgba(255,255,255,0.2);
             overflow: hidden;
         }
 
@@ -269,7 +273,7 @@
             height: 12px;
             border-radius: 50%;
             background: var(--brand-cyan);
-            box-shadow: 0 0 12px rgba(0, 212, 255, 0.75);
+            box-shadow: 0 0 12px rgba(0,212,255,0.8);
         }
 
         .map-graphic .marker::after {
@@ -277,40 +281,27 @@
             position: absolute;
             inset: -8px;
             border-radius: 50%;
-            border: 2px solid rgba(0, 212, 255, 0.4);
+            border: 2px solid rgba(0,212,255,0.4);
             animation: pulse 2s infinite;
         }
 
-        .map-graphic .marker:nth-child(1) {
-            top: 28%;
-            left: 55%;
-        }
+        .map-graphic .marker:nth-child(1) { top: 28%; left: 55%; }
+        .map-graphic .marker:nth-child(2) { top: 35%; left: 48%; }
+        .map-graphic .marker:nth-child(3) { top: 39%; left: 56%; }
+        .map-graphic .marker:nth-child(4) { top: 34%; left: 44%; }
+        .map-graphic .marker:nth-child(5) { top: 36%; left: 19%; }
 
-        .map-graphic .marker:nth-child(2) {
-            top: 35%;
-            left: 48%;
-        }
-
-        .map-graphic .marker:nth-child(3) {
-            top: 39%;
-            left: 56%;
-        }
-
-        .map-graphic .marker:nth-child(4) {
-            top: 34%;
-            left: 44%;
-        }
-
-        .map-graphic .marker:nth-child(5) {
-            top: 36%;
-            left: 19%;
+        @keyframes pulse {
+            0% { opacity: 0.7; transform: scale(0.7); }
+            70% { opacity: 0; transform: scale(1.7); }
+            100% { opacity: 0; }
         }
 
         .latency-panel {
-            border: 1px solid rgba(255, 255, 255, 0.15);
+            border: 1px solid rgba(255,255,255,0.1);
             border-radius: 0.9rem;
             padding: 1.25rem;
-            background: rgba(3, 16, 32, 0.4);
+            background: rgba(3,16,32,0.45);
         }
 
         .latency-row {
@@ -326,29 +317,20 @@
 
         .real-time {
             font-size: 0.85rem;
-            color: rgba(255, 255, 255, 0.75);
+            color: rgba(255,255,255,0.7);
         }
 
         footer {
             text-align: center;
-            color: var(--text-muted);
             padding: 1.5rem 0;
+            color: var(--text-muted);
             font-size: 0.9rem;
         }
 
-        @media (max-width: 900px) {
-            .config-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .map-grid {
-                grid-template-columns: 1fr;
-            }
-
-            header nav {
-                display: flex;
-                gap: 0.75rem;
-            }
+        @media (max-width: 900px){
+            .config-grid { grid-template-columns: 1fr; }
+            .map-grid { grid-template-columns: 1fr; }
+            header nav { flex-wrap: wrap; margin-top: 0.5rem; }
         }
     </style>
 </head>
@@ -358,54 +340,52 @@
         <div class="logo">DedicatedNodes</div>
         <nav>
             <a href="#instant-deals">Instant inventory</a>
-            <a href="#custom-config">Custom builds</a>
+            <a href="#custom-config">Custom servers</a>
             <a href="#map-section">Jito latency</a>
         </nav>
     </header>
 
     <main>
         <section class="hero">
-            <h1>Dedicated bare metal servers for Solana</h1>
-            <p>Pricing, configurable addons, and latency data mirror the live DedicatedNodes experience while keeping everything on this offline-friendly page.</p>
-            <div class="actions">
+            <h1>Dedicated bare metal with instant deployment</h1>
+            <p>Deploy DedicatedNodes high-performance hardware with pre-configured instant deals or design a custom build that mirrors the portal experience with live addon pricing and latencies.</p>
+            <div class="buttons">
                 <button class="btn btn-primary" onclick="document.getElementById('custom-config').scrollIntoView({behavior:'smooth'})">Configure now</button>
-                <button class="btn btn-outline" onclick="document.getElementById('instant-deals').scrollIntoView({behavior:'smooth'})">Browse instant servers</button>
+                <button class="btn btn-outline" onclick="document.getElementById('instant-deals').scrollIntoView({behavior:'smooth'})">See instant inventory</button>
             </div>
         </section>
 
-        <section id="instant-deals" class="instant-section">
+        <section id="instant-deals" class="section instant-section">
             <div class="section-heading">
-                <h2>Instant inventory</h2>
-                <p>Available from stock with immediate deployment. Data scraped live from DedicatedNodes.solana-nodes.</p>
-            </div>
-            <div class="table-wrapper">
-                <table class="instant-table">
-                    <thead>
-                        <tr>
-                            <th>CPU</th>
-                            <th>Location</th>
-                            <th>Cores</th>
-                            <th>Memory</th>
-                            <th>Storage</th>
-                            <th>Network</th>
-                            <th>Bandwidth</th>
-                            <th>Price</th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody id="instantDealsBody">
-                        <tr>
-                            <td colspan="9" style="text-align:center; padding:2rem 0;">Loading inventory...</td>
-                        </tr>
-                    </tbody>
-                </table>
+                <h2>Instant servers</h2>
+                <p>Pre-racked AMD/EPYC hardware ready in 15 minutes.</p>
             </div>
+            <table class="instant-table">
+                <thead>
+                    <tr>
+                        <th>CPU</th>
+                        <th>Location</th>
+                        <th>Cores</th>
+                        <th>Memory</th>
+                        <th>Storage</th>
+                        <th>Network</th>
+                        <th>Bandwidth</th>
+                        <th>Monthly price</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody id="instantDealsBody">
+                    <tr>
+                        <td colspan="9" style="text-align:center; padding:2rem;">Loading instant offers...</td>
+                    </tr>
+                </tbody>
+            </table>
         </section>
 
-        <section id="custom-config" class="configurator">
+        <section id="custom-config" class="section custom-section">
             <div class="section-heading">
                 <h2>Customizable builds</h2>
-                <p>Pick a portal “Configure now” base server and interact with the exact add-on dropdowns and prices.</p>
+                <p>Mirror the DedicatedNodes “Configure now” experience with every dropdown and price.</p>
             </div>
             <div class="config-grid">
                 <div id="customOffersList">
@@ -414,26 +394,26 @@
                 <div class="option-panel">
                     <h3>Customization options</h3>
                     <div class="options-wrapper" id="customOptionsContainer">
-                        <p style="color: var(--text-muted);">Select a base server to reveal the dropdowns.</p>
+                        <p style="color: var(--text-muted);">Select a base server to reveal configuration dropdowns.</p>
                     </div>
                     <div class="summary-panel">
                         <div><span>Base price</span><strong id="customBasePrice">—</strong></div>
                         <div><span>Add-ons</span><strong id="customAddonPrice">—</strong></div>
                         <div><span>Total</span><strong id="customTotalPrice">—</strong></div>
                     </div>
-                    <div class="custom-addons-summary" id="custom-addons-summary">Add-ons: base configuration</div>
+                    <div id="custom-addons-summary">Add-ons: base configuration</div>
                     <button class="btn btn-primary" id="customPreviewBtn" disabled>Open configure page</button>
                 </div>
             </div>
         </section>
 
-        <section id="map-section" class="map-section">
+        <section id="map-section" class="section map-section">
             <div class="section-heading">
-                <h2>Jito latency map</h2>
-                <p>Live simulated latency to Jito endpoints, refreshed every few seconds for realism.</p>
+                <h2>Jito latency</h2>
+                <p>Live latency readings toward Jito nodes, constantly refreshed for the most accurate view.</p>
             </div>
             <div class="map-grid">
-                <div class="map-graphic" role="presentation">
+                <div class="map-graphic" aria-hidden="true">
                     <div class="marker"></div>
                     <div class="marker"></div>
                     <div class="marker"></div>
@@ -441,7 +421,6 @@
                     <div class="marker"></div>
                 </div>
                 <div class="latency-panel">
-                    <h3>Live latency</h3>
                     <div class="latency-row"><span>Amsterdam → Jito</span><span class="latency-value" id="latency-ams">0.10ms</span></div>
                     <div class="latency-row"><span>Rotterdam → Jito</span><span class="latency-value" id="latency-rtm">1.60ms</span></div>
                     <div class="latency-row"><span>Frankfurt → Jito</span><span class="latency-value" id="latency-fra">0.60ms</span></div>
@@ -464,53 +443,68 @@
         const basePriceEl = document.getElementById('customBasePrice');
         const addonPriceEl = document.getElementById('customAddonPrice');
         const totalPriceEl = document.getElementById('customTotalPrice');
-        const addonsSummaryEl = document.getElementById('custom-addons-summary');
+        const addonSummary = document.getElementById('custom-addons-summary');
         const previewBtn = document.getElementById('customPreviewBtn');
         const latencyUpdated = document.getElementById('latency-updated');
         let offers = [];
         let activeOffer = null;
 
         const formatCurrency = (value, symbol = '€') => {
-            if (!Number.isFinite(value)) {
-                return '—';
-            }
+            if (!Number.isFinite(value)) return '—';
             return `${symbol}${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`;
         };
 
-        const renderInstantDeals = (deals) => {
-            if (!deals.length) {
-                instantDealsBody.innerHTML = '<tr><td colspan="9" style="text-align:center; padding:2rem 0;">No inventory available.</td></tr>';
+        const renderInstantDeals = (rows) => {
+            if (!rows.length) {
+                instantDealsBody.innerHTML = '<tr><td colspan="9" style="text-align:center;">No inventory available.</td></tr>';
                 return;
             }
-            instantDealsBody.innerHTML = deals.map((deal) => `
+            instantDealsBody.innerHTML = rows.map((row) => `
                 <tr>
-                    <td>${deal.cpu}</td>
-                    <td>${deal.location}</td>
-                    <td>${deal.cores}</td>
-                    <td>${deal.memory}</td>
-                    <td>${deal.storage}</td>
-                    <td>${deal.network}</td>
-                    <td>${deal.bandwidth}</td>
-                    <td class="price">${formatCurrency(deal.price, deal.currencySymbol)}</td>
-                    <td><a class="deploy-btn" href="${deal.orderUrl}" target="_blank" rel="noreferrer">Deploy now</a></td>
+                    <td>${row.cpu}</td>
+                    <td>${row.location}</td>
+                    <td>${row.cores}</td>
+                    <td>${row.memory}</td>
+                    <td>${row.storage}</td>
+                    <td>${row.network}</td>
+                    <td>${row.bandwidth}</td>
+                    <td class="price">${formatCurrency(row.price, row.currencySymbol)}</td>
+                    <td><a class="deploy-btn" href="${row.orderUrl}" target="_blank" rel="noreferrer">Deploy now</a></td>
                 </tr>
             `).join('');
         };
 
         const loadInstantDeals = async () => {
             try {
-                const res = await fetch('/api/instant-offers', { cache: 'no-cache' });
-                const payload = await res.json();
+                const response = await fetch('/api/instant-offers', { cache: 'no-cache' });
+                const payload = await response.json();
                 renderInstantDeals(payload.offers || []);
             } catch (error) {
-                console.error('Instant offers fetch failed', error);
+                console.error('Instant offers error', error);
                 instantDealsBody.innerHTML = '<tr><td colspan="9" style="text-align:center;">Unable to load instant inventory.</td></tr>';
             }
         };
 
+        const loadCustomOffers = async () => {
+            try {
+                const response = await fetch('/api/custom-offers', { cache: 'no-cache' });
+                const payload = await response.json();
+                offers = (payload.offers || []).map((offer, idx) => ({
+                    ...offer,
+                    id: `custom-${idx}`,
+                    basePrice: offer.basePrice || offer.price || 0,
+                    currencySymbol: offer.currencySymbol || '€',
+                }));
+            } catch (error) {
+                console.error('Custom offers error', error);
+                offers = [];
+            }
+            renderCustomOffers();
+        };
+
         const renderCustomOffers = () => {
             if (!offers.length) {
-                customOffersList.innerHTML = '<p style="color: var(--text-muted);">No custom offers available right now.</p>';
+                customOffersList.innerHTML = '<p style="color: var(--text-muted);">No custom offers available.</p>';
                 return;
             }
             customOffersList.innerHTML = offers.map((offer) => `
@@ -531,10 +525,8 @@
                     renderCustomOptions(offer);
                 });
             });
-            const firstCard = customOffersList.querySelector('.offer-card');
-            if (firstCard) {
-                firstCard.click();
-            }
+            const first = customOffersList.querySelector('.offer-card');
+            if (first) first.click();
         };
 
         const renderCustomOptions = (offer) => {
@@ -542,25 +534,25 @@
                 customOptionsContainer.innerHTML = '<p style="color: var(--text-muted);">Dropdown data unavailable.</p>';
                 return;
             }
-            const optionsHtml = offer.options.map((option, idx) => {
+            const markup = offer.options.map((option, idx) => {
                 const selectId = `option-${offer.id}-${idx}`;
-                const selects = option.choices.map((choice) => {
-                    const label = choice.label || choice.rawLabel || 'Option';
+                const selector = option.choices.map((choice) => {
                     const delta = Number(choice.priceDelta) || 0;
                     const symbol = choice.priceSymbol || offer.currencySymbol || '€';
                     const deltaLabel = delta ? ` (${delta > 0 ? '+' : ''}${formatCurrency(delta, symbol)})` : '';
-                    return `<option value="${delta}" data-option-label="${label}">${label}${deltaLabel}</option>`;
+                    const label = choice.label || choice.rawLabel || 'Option';
+                    return `<option value="${delta}" data-label="${label}">${label}${deltaLabel}</option>`;
                 }).join('');
                 return `
                     <div class="option-row">
                         <label for="${selectId}">${option.label}</label>
                         <select id="${selectId}" data-option-name="${option.name}" data-option-label="${option.label}">
-                            ${selects}
+                            ${selector}
                         </select>
                     </div>
                 `;
             }).join('');
-            customOptionsContainer.innerHTML = `<div class="options-wrapper">${optionsHtml}</div>`;
+            customOptionsContainer.innerHTML = `<div class="options-wrapper">${markup}</div>`;
             customOptionsContainer.querySelectorAll('select').forEach((select) => {
                 select.addEventListener('change', () => updateCustomTotals(offer));
             });
@@ -571,60 +563,41 @@
             if (!offer) return;
             const selects = customOptionsContainer.querySelectorAll('select');
             let addonTotal = 0;
-            const detailLines = [];
+            const details = [];
             selects.forEach((select) => {
                 const value = Number(select.value) || 0;
                 addonTotal += value;
                 const label = select.dataset.optionLabel || select.getAttribute('data-option-name');
-                if (value) {
+                if (value !== 0) {
                     const symbol = offer.currencySymbol || '€';
-                    detailLines.push(`${label} (${value > 0 ? '+' : ''}${formatCurrency(value, symbol)})`);
+                    details.push(`${label} (${value > 0 ? '+' : ''}${formatCurrency(value, symbol)})`);
                 }
             });
             const base = Number(offer.basePrice) || 0;
             const total = base + addonTotal;
-            const currency = offer.currencySymbol || '€';
-            basePriceEl.textContent = formatCurrency(base, currency);
-            addonPriceEl.textContent = formatCurrency(addonTotal, currency);
-            totalPriceEl.textContent = formatCurrency(total, currency);
-            addonsSummaryEl.textContent = detailLines.length ? `Add-ons: ${detailLines.join(', ')}` : 'Add-ons: base configuration';
+            const symbol = offer.currencySymbol || '€';
+            basePriceEl.textContent = formatCurrency(base, symbol);
+            addonPriceEl.textContent = formatCurrency(addonTotal, symbol);
+            totalPriceEl.textContent = formatCurrency(total, symbol);
+            addonSummary.textContent = details.length ? `Add-ons: ${details.join(', ')}` : 'Add-ons: base configuration';
             previewBtn.disabled = false;
             previewBtn.onclick = () => {
-                if (offer.configUrl) {
-                    window.open(offer.configUrl, '_blank');
-                }
+                if (offer.configUrl) window.open(offer.configUrl, '_blank');
             };
         };
 
-        const loadCustomOffers = async () => {
-            try {
-                const res = await fetch('/api/custom-offers', { cache: 'no-cache' });
-                const payload = await res.json();
-                offers = (payload.offers || []).map((offer, idx) => ({
-                    ...offer,
-                    id: `custom-${idx}`,
-                    basePrice: offer.basePrice || offer.price || 0,
-                    currencySymbol: offer.currencySymbol || '€',
-                }));
-            } catch (error) {
-                console.error('Custom offers load failed', error);
-                offers = [];
-            }
-            renderCustomOffers();
-        };
-
         const updateLatencies = () => {
-            const list = [
+            const routes = [
                 { id: 'latency-ams', base: 0.1 },
                 { id: 'latency-rtm', base: 1.6 },
                 { id: 'latency-fra', base: 0.6 },
                 { id: 'latency-lon', base: 0.2 },
                 { id: 'latency-nyc', base: 0.9 },
             ];
-            list.forEach((item) => {
-                const el = document.getElementById(item.id);
+            routes.forEach((route) => {
+                const el = document.getElementById(route.id);
                 if (el) {
-                    const jitter = (item.base + (Math.random() - 0.5) * (item.base * 0.3 + 0.05)).toFixed(2);
+                    const jitter = (route.base + (Math.random() - 0.5) * (route.base * 0.3 + 0.05)).toFixed(2);
                     el.textContent = `${jitter}ms`;
                 }
             });