config box: agent (Hermes/OpenClaw), period (Monthly/Yearly), location dropdowns

index.html

@@ -908,66 +908,26 @@
             opacity: 0.4;
         }
 
-        /* ── Billing toggle ─────────────────────────────── */
+        /* ── Config box ─────────────────────────────── */
-        .pricing-billing-toggle {
+        .pricing-config-box {
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 14px;
+            gap: 12px;
             margin-bottom: 36px;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-card);
+            padding: 14px 24px;
+            flex-wrap: wrap;
         }
-        .billing-label {
+        .pricing-config-label {
-            font-size: 14px;
+            font-size: 13px;
-            font-weight: 500;
+            font-weight: 600;
             color: var(--text-muted);
-            transition: color 0.2s;
+            white-space: nowrap;
         }
-        .billing-label.active { color: var(--text); }
+        .pricing-config-select {
-        .toggle-switch {
-            position: relative;
-            width: 48px;
-            height: 26px;
-            cursor: pointer;
-        }
-        .toggle-switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-        .toggle-slider {
-            position: absolute;
-            inset: 0;
-            background: var(--border);
-            border-radius: 26px;
-            transition: background 0.2s;
-        }
-        .toggle-slider::before {
-            content: "";
-            position: absolute;
-            left: 3px;
-            top: 3px;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: var(--text);
-            transition: transform 0.2s;
-        }
-        .toggle-switch input:checked + .toggle-slider {
-            background: var(--accent);
-        }
-        .toggle-switch input:checked + .toggle-slider::before {
-            transform: translateX(22px);
-            background: #fff;
-        }
-        @media (max-width: 900px) {
-            .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
-            .pricing-card.featured { transform: none; }
-        }
-
-        /* ══════════════════════════════════════════════════════════
-           LOCATION DROPDOWN
-           ══════════════════════════════════════════════════════════ */
-        .pricing-location {
             appearance: none;
             -webkit-appearance: none;
             background: var(--bg);
@@ -975,16 +935,22 @@
             border-radius: var(--radius);
             color: var(--text);
             font-size: 13px;
-            padding: 4px 28px 4px 12px;
+            padding: 6px 30px 6px 12px;
             cursor: pointer;
             outline: none;
             transition: border-color 0.2s;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right 8px center;
+            min-width: 110px;
+        }
+        .pricing-config-select:hover { border-color: var(--accent); }
+        .pricing-config-select:focus { border-color: var(--accent); }
+
+        @media (max-width: 900px) {
+            .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
+            .pricing-card.featured { transform: none; }
         }
-        .pricing-location:hover { border-color: var(--accent); }
-        .pricing-location:focus { border-color: var(--accent); }
 
         /* ══════════════════════════════════════════════════════════
            FAQ
@@ -1825,15 +1791,18 @@
                 Cancel anytime with monthly termination.
             </p>
 
-            <!-- ── Billing toggle ── -->
+            <!-- ── Config: agent, billing, location ── -->
-            <div class="pricing-billing-toggle">
+            <div class="pricing-config-box">
-                <span class="billing-label active" id="billing-monthly-label">Monthly</span>
+                <span class="pricing-config-label">Configure your agent</span>
-                <label class="toggle-switch">
+                <select class="pricing-config-select" id="pricing-agent">
-                    <input type="checkbox" id="billing-toggle" onchange="toggleBilling()" />
+                    <option value="hermes" selected>Hermes</option>
-                    <span class="toggle-slider"></span>
+                    <option value="openclaw">OpenClaw</option>
-                </label>
+                </select>
-                <span class="billing-label" id="billing-yearly-label">Yearly</span>
+                <select class="pricing-config-select" id="pricing-period">
-                <select class="pricing-location" id="pricing-location">
+                    <option value="monthly" selected>Monthly</option>
+                    <option value="yearly">Yearly</option>
+                </select>
+                <select class="pricing-config-select" id="pricing-location">
                     <option value="france">France</option>
                 </select>
             </div>
@@ -2345,12 +2314,10 @@
             });
         });
 
-        /* ── Billing Toggle ────────────────────────────────── */
+        /* ── Period / billing update ──────────────────────────── */
-        function toggleBilling() {
+        function updatePeriodDisplay() {
-            const yearly = document.getElementById('billing-toggle').checked;
+            const sel = document.getElementById('pricing-period');
-            document.getElementById('billing-monthly-label').classList.toggle('active', !yearly);
+            const yearly = sel.value === 'yearly';
-            document.getElementById('billing-yearly-label').classList.toggle('active', yearly);
-
             document.getElementById('bonus-trainee').classList.toggle('show', yearly);
             document.getElementById('bonus-junior').classList.toggle('show', yearly);
             document.getElementById('bonus-senior').classList.toggle('show', yearly);
@@ -2359,13 +2326,14 @@
             document.getElementById('period-junior').textContent = yearly ? '/ month ✦ yearly' : '/ month';
             document.getElementById('period-senior').textContent = yearly ? '/ month ✦ yearly' : '/ month';
         }
+        document.getElementById('pricing-period').addEventListener('change', updatePeriodDisplay);
 
         /* ── Hire Agent Webhook ───────────────────────────── */
         const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/5318a0d8-d064-42fb-95b7-aa5552cb3fa9";
 
         async function hireAgent(product) {
-            const yearly = document.getElementById('billing-toggle').checked;
+            const agent = document.getElementById('pricing-agent').value;
-            const period = yearly ? 'yearly' : 'monthly';
+            const period = document.getElementById('pricing-period').value;
             const location = document.getElementById('pricing-location').value;
 
             try {
@@ -2374,6 +2342,7 @@
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
                         product: product,
+                        agent: agent,
                         period: period,
                         location: location,
                     }),