simplify: no sliding panels, add location dropdown (France), hire button calls webhook directly

index.html

@@ -965,112 +965,26 @@
         }
 
         /* ══════════════════════════════════════════════════════════
-           PRICING SLIDER & ORDER FORM
+           LOCATION DROPDOWN
            ══════════════════════════════════════════════════════════ */
-        .pricing-slider {
+        .pricing-location {
-            position: relative;
+            appearance: none;
-            overflow: hidden;
+            -webkit-appearance: none;
-            max-width: 960px;
-            margin: 0 auto;
-        }
-        .pricing-slider-track {
-            display: flex;
-            transition: transform 0.5s cubic-bezier(.34,1.56,.64,1);
-            transform: translateX(0);
-        }
-        .pricing-slider-track.slide-left {
-            transform: translateX(-50%);
-        }
-        .pricing-panel,
-        .order-panel {
-            min-width: 100%;
-            box-sizing: border-box;
-        }
-        .order-panel {
-            background: var(--bg-card);
-            border: 1px solid var(--border-hi);
-            border-radius: var(--radius-card);
-            padding: 40px 36px;
-            box-shadow: var(--shadow);
-            text-align: center;
-        }
-        .order-panel h3 {
-            font-size: 1.3rem;
-            margin-bottom: 8px;
-        }
-        .order-panel .order-plan {
-            color: var(--accent);
-            font-weight: 600;
-            margin-bottom: 20px;
-        }
-        .order-email-row {
-            margin-bottom: 24px;
-            text-align: left;
-        }
-        .order-email-row label {
-            display: block;
-            font-size: 12px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.06em;
-            color: var(--text-muted);
-            margin-bottom: 6px;
-        }
-        .order-email-row input {
-            width: 100%;
-            padding: 12px 16px;
             background: var(--bg);
             border: 1px solid var(--border);
             border-radius: var(--radius);
             color: var(--text);
-            font-size: 15px;
+            font-size: 13px;
+            padding: 4px 28px 4px 12px;
+            cursor: pointer;
             outline: none;
             transition: border-color 0.2s;
-            box-sizing: border-box;
+            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;
-        .order-email-row input:focus {
+            background-position: right 8px center;
-            border-color: var(--accent);
-        }
-        .order-stripe-btn {
-            width: 100%;
-            padding: 14px 28px;
-            border: none;
-            border-radius: var(--radius);
-            background: linear-gradient(135deg, var(--accent), #5a7de0);
-            color: #fff;
-            font-size: 15px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: opacity 0.2s, transform 0.15s;
-        }
-        .order-stripe-btn:hover { opacity: 0.9; transform: scale(1.02); }
-        .order-stripe-btn:active { transform: scale(0.97); }
-        .order-stripe-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
-        .order-back {
-            display: inline-block;
-            margin-top: 16px;
-            font-size: 13px;
-            color: var(--text-muted);
-            cursor: pointer;
-            text-decoration: none;
-        }
-        .order-back:hover { color: var(--accent); }
-        .order-status {
-            margin-top: 16px;
-            font-size: 13px;
-            color: var(--text-muted);
-            display: none;
-        }
-        .order-status.show {
-            display: block;
-            animation: msgSlide 0.25s cubic-bezier(.22,1,.36,1);
-        }
-        .order-status.success { color: #4ade80; }
-        .order-status.error { color: #f87171; }
-
-        @media (max-width: 900px) {
-            .order-panel { padding: 32px 24px; }
         }
+        .pricing-location:hover { border-color: var(--accent); }
+        .pricing-location:focus { border-color: var(--accent); }
 
         /* ══════════════════════════════════════════════════════════
            FAQ
@@ -1912,10 +1826,6 @@
             </p>
 
             <!-- ── Billing toggle ── -->
-            <div class="pricing-slider">
-            <div class="pricing-slider-track" id="pricing-track">
-
-            <div class="pricing-panel">
             <div class="pricing-billing-toggle">
                 <span class="billing-label active" id="billing-monthly-label">Monthly</span>
                 <label class="toggle-switch">
@@ -1923,6 +1833,9 @@
                     <span class="toggle-slider"></span>
                 </label>
                 <span class="billing-label" id="billing-yearly-label">Yearly</span>
+                <select class="pricing-location" id="pricing-location">
+                    <option value="france">France</option>
+                </select>
             </div>
 
             <!-- ── Plans grid ── -->
@@ -2079,24 +1992,6 @@
                 </div>
 
             </div>
-            </div><!-- /pricing-panel -->
-
-            <div class="order-panel" id="order-panel">
-                <h3 id="order-title">Processing with Stripe</h3>
-                <p class="order-plan" id="order-plan-display"></p>
-                <div class="order-email-row">
-                    <label for="order-email">Email address</label>
-                    <input type="email" id="order-email" placeholder="you@example.com" autocomplete="email" />
-                </div>
-                <button class="order-stripe-btn" id="order-stripe-btn" onclick="processStripeOrder()">
-                    Proceed to Stripe
-                </button>
-                <div class="order-status" id="order-status"></div>
-                <a class="order-back" onclick="backToPricing()">← Back to plans</a>
-            </div>
-
-            </div><!-- /pricing-slider-track -->
-            </div><!-- /pricing-slider -->
         </div>
     </section>
 
@@ -2465,93 +2360,26 @@
             document.getElementById('period-senior').textContent = yearly ? '/ month ✦ yearly' : '/ month';
         }
 
-        /* ── Pricing Slider / Order Form ──────────────────────────── */
+        /* ── Hire Agent Webhook ───────────────────────────── */
         const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/5318a0d8-d064-42fb-95b7-aa5552cb3fa9";
-        let selectedProduct = null;
-
-        function hireAgent(product) {
-            selectedProduct = product;
-
-            // Update order panel with plan info
-            const yearly = document.getElementById('billing-toggle').checked;
-            const period = yearly ? 'yearly' : 'monthly';
-            const names = { trainee: 'Trainee', junior: 'Junior', senior: 'Senior' };
-            document.getElementById('order-plan-display').textContent = names[product] + ' — ' + period;
-
-            // Slide pricing out, order form in
-            document.getElementById('pricing-track').classList.add('slide-left');
-
-            // Reset status
-            document.getElementById('order-status').className = 'order-status';
-            document.getElementById('order-status').style.display = 'none';
-            document.getElementById('order-stripe-btn').disabled = false;
-            document.getElementById('order-stripe-btn').textContent = 'Proceed to Stripe';
-            document.getElementById('order-email').focus();
-        }
-
-        function backToPricing() {
-            document.getElementById('pricing-track').classList.remove('slide-left');
-            selectedProduct = null;
-        }
-
-        async function processStripeOrder() {
-            const email = document.getElementById('order-email').value.trim();
-            const statusEl = document.getElementById('order-status');
-            const btn = document.getElementById('order-stripe-btn');
-
-            if (!email) {
-                statusEl.textContent = 'Please enter your email address.';
-                statusEl.className = 'order-status show error';
-                return;
-            }
-
-            btn.disabled = true;
-            btn.textContent = 'Processing with Stripe…';
-            statusEl.className = 'order-status show';
-            statusEl.textContent = 'Connecting to Stripe…';
 
+        async function hireAgent(product) {
             const yearly = document.getElementById('billing-toggle').checked;
             const period = yearly ? 'yearly' : 'monthly';
+            const location = document.getElementById('pricing-location').value;
 
             try {
-                const res = await fetch(ORDER_WEBHOOK, {
+                await fetch(ORDER_WEBHOOK, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
-                        email: email,
+                        product: product,
-                        product: selectedProduct,
                         period: period,
+                        location: location,
                     }),
                 });
-
-                if (!res.ok) throw new Error('Webhook returned ' + res.status);
-
-                // Try to parse the response — could be JSON or plain text
-                const ct = res.headers.get('content-type') || '';
-                let data;
-                if (ct.indexOf('json') !== -1) {
-                    data = await res.json();
-                } else {
-                    data = await res.text();
-                }
-
-                // If we get a Stripe checkout URL back, open it
-                const checkoutUrl = (data && typeof data === 'object')
-                    ? (data.url || data.checkout_url || data.checkoutUrl || data.redirect)
-                    : null;
-                if (checkoutUrl && checkoutUrl.startsWith('http')) {
-                    window.open(checkoutUrl, '_blank');
-                    statusEl.textContent = '✓ Redirecting to Stripe checkout…';
-                    statusEl.className = 'order-status show success';
-                } else {
-                    statusEl.textContent = '✓ Request sent! Check your email for the Stripe payment link.';
-                    statusEl.className = 'order-status show success';
-                }
             } catch (err) {
-                statusEl.textContent = 'Error: ' + err.message + '. Please try again.';
+                console.error('Order webhook failed:', err);
-                statusEl.className = 'order-status show error';
-                btn.disabled = false;
-                btn.textContent = 'Proceed to Stripe';
             }
         }