<!--
║ BILLING-FIX-V3 — applied 2026-04-28 ║
╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                            ║
║   GoUltra.AI — Registration Page (3-Step Flow)                             ║
║   Version: 1.0.0                                                           ║
║   Last Updated: 2026-02-09                                                 ║
║   Author: ULTRA (Ultra Logistics Ltd)                                      ║
║                                                                            ║
╠══════════════════════════════════════════════════════════════════════════════╣
║                                                                            ║
║   WHAT IS THIS FILE?                                                       ║
║   ─────────────────                                                        ║
║   Self-contained registration page for https://goultra.ai/register         ║
║   Static file deployed to Cloudflare Pages alongside the landing page.     ║
║   noindex/nofollow — not meant for search engines.                         ║
║                                                                            ║
║   LANGUAGE VARIANTS                                                        ║
║   ─────────────────                                                        ║
║     /register           → English                                          ║
║     /he/register        → Hebrew  (RTL)                                    ║
║     /ar/register        → Arabic  (RTL)                                    ║
║     /es/register        → Russian (LTR)                                    ║
║                                                                            ║
║   3-STEP REGISTRATION FLOW                                                 ║
║   ────────────────────────                                                 ║
║                                                                            ║
║   ┌─────────────┐     ┌─────────────┐     ┌─────────────┐                  ║
║   │  STEP 1     │     │  STEP 2     │     │  STEP 3     │                  ║
║   │  Create     │────>│  Verify     │────>│  Payment    │                  ║
║   │  Account    │     │  Email      │     │  (Stripe)   │                  ║
║   │             │     │             │     │             │                  ║
║   │ name,email  │     │ check inbox │     │ card input  │                  ║
║   │ password    │     │ resend btn  │     │ plan summary│                  ║
║   │ plan select │     │ 60s cooldown│     │ $0 today    │                  ║
║   │ 3 checkboxes│     │             │     │             │                  ║
║   └─────────────┘     └─────────────┘     └─────────────┘                  ║
║                                                                            ║
║   LAYOUT                                                                   ║
║   ──────                                                                   ║
║   Desktop: 2-panel layout                                                  ║
║     Left  (420px): Brand panel — logo, headline, features, trust badges    ║
║     Right (flex):  Form panel — step indicator + active step content        ║
║   Mobile (<768px): Stacked — brand panel collapses to header row           ║
║                                                                            ║
║   FILE STRUCTURE (LINE RANGES)                                             ║
║   ─────────────────────────────                                            ║
║   Lines    1-10     Head: meta tags, noindex                               ║
║   Lines   11-350    <style> — all CSS inline                               ║
║   Lines  351-400    Brand panel (left side)                                ║
║   Lines  401-500    Step 1: Registration form                              ║
║   Lines  501-530    Step 2: Email verification                             ║
║   Lines  531-570    Step 3: Payment (Stripe placeholder)                   ║
║   Lines  571-1038   <script> — form logic, validation, navigation          ║
║                                                                            ║
║   BACKEND INTEGRATION (TODO)                                               ║
║   ──────────────────────────                                               ║
║   Currently all API calls are MOCKED with setTimeout().                    ║
║   Search for "DEVELOPER:" comments to find integration points:             ║
║                                                                            ║
║   Step 1 → POST /api/auth/register                                        ║
║            Body: { full_name, company_name, email, password, plan, lang }  ║
║            201: user created (pending), verification email sent            ║
║            409: email already exists                                       ║
║                                                                            ║
║   Step 2 → POST /api/auth/resend-verification                             ║
║            Body: { email }                                                 ║
║            200: email resent                                               ║
║                                                                            ║
║   Step 3 → Stripe Elements + POST /api/billing/subscribe                   ║
║            Body: { payment_method_id, plan }                               ║
║            Backend creates Stripe Customer + Subscription                  ║
║            trial_period_days: 7                                            ║
║            On success: redirect to go.goultra.ai/dashboard                 ║
║                                                                            ║
║   Email service: Resend (resend.com)                                       ║
║   Payment: Stripe (stripe.com)                                             ║
║                                                                            ║
║   KEY JAVASCRIPT FUNCTIONS                                                 ║
║   ─────────────────────────                                                ║
║   selectPlan(plan)   Toggles plan radio + visual selection                 ║
║   togglePassword()   Show/hide password input                              ║
║   validateForm()     Client-side validation for all Step 1 fields          ║
║   goToStep(n)        Hides all steps, shows step n, updates indicators     ║
║   resendEmail()      Resend verification + 60s cooldown timer              ║
║   handlePayment()    Stripe payment submission (TODO: integrate)           ║
║   detectLang()       Returns lang from URL path (/he/register → "he")      ║
║                                                                            ║
║   PASSWORD VALIDATION                                                      ║
║   ───────────────────                                                      ║
║   Min 8 chars + 1 number + 1 symbol                                       ║
║   Strength meter: weak / medium / strong / very-strong (4 segments)        ║
║                                                                            ║
║   REQUIRED CHECKBOXES                                                      ║
║   ───────────────────                                                      ║
║   1. Terms of Service + Privacy Policy                                     ║
║   2. Anti-Spam Policy (explicit consent only)                              ║
║   3. Billing Acknowledgment (SaaS fee ≠ Meta message costs)                ║
║                                                                            ║
║   DESIGN SYSTEM                                                            ║
║   ─────────────                                                            ║
║   Same as landing page: Navy/Emerald/Indigo palette                        ║
║   Plus Jakarta Sans / Heebo / Cairo fonts                                  ║
║                                                                            ║
╚══════════════════════════════════════════════════════════════════════════════╝
-->
<!DOCTYPE html>
<!-- goultra-build: v60.4 -->
<html lang="es" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/assets/brand/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/assets/brand/apple-touch-icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Your Free Trial — GoUltra.AI</title>
<meta name="description" content="Create your GoUltra account and start your 7-day free trial. No charge today.">
<meta name="robots" content="noindex, nofollow">
<link rel="canonical" href="https://go.goultra.ai/register">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Heebo:wght@400;500;600;700&family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
  --navy: #0F172A;
  --navy-light: #1E293B;
  --emerald: #10B981;
  --emerald-dark: #059669;
  --emerald-light: #34D399;
  --emerald-glow: rgba(16, 185, 129, 0.15);
  --indigo: #6366F1;
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --white: #FFFFFF;
  --red: #EF4444;
  --red-light: #FEE2E2;
  --font: 'Plus Jakarta Sans', 'Heebo', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 40px rgba(15,23,42,0.12);
  --shadow-xl: 0 24px 60px rgba(15,23,42,0.16);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); color: var(--navy); background: var(--navy); min-height: 100vh; line-height: 1.6; }

/* ═══ LAYOUT ═══ */
.page-wrapper {
  display: flex; min-height: 100vh;
}

/* ═══ LEFT PANEL (branding) ═══ */
.brand-panel {
  width: 420px; flex-shrink: 0;
  background: linear-gradient(175deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 48px 40px; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.brand-panel::before {
  content: ""; position: absolute; top: -120px; right: -120px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,0.08) 0%, transparent 70%);
}
.brand-panel::after {
  content: ""; position: absolute; bottom: -80px; left: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%);
}
.brand-logo { position: relative; z-index: 1; margin-bottom: 48px; }
.brand-logo img { height: 46px; }
.brand-logo-text { color: white; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }

.brand-headline { position: relative; z-index: 1; margin-bottom: 40px; }
.brand-headline h1 { color: white; font-size: 28px; font-weight: 800; line-height: 1.3; margin-bottom: 12px; }
.brand-headline h1 span { color: var(--emerald); }
.brand-headline p { color: var(--slate-400); font-size: 15px; line-height: 1.7; }

.brand-features { position: relative; z-index: 1; flex: 1; }
.brand-feature { display: flex; gap: 14px; margin-bottom: 24px; }
.brand-feature-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.15);
  display: flex; align-items: center; justify-content: center;
}
.brand-feature-icon svg { width: 20px; height: 20px; stroke: var(--emerald); fill: none; stroke-width: 2; }
.brand-feature-text h4 { color: white; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.brand-feature-text p { color: var(--slate-400); font-size: 13px; line-height: 1.5; }

.brand-trust {
  position: relative; z-index: 1;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.trust-badge {
  display: flex; align-items: center; gap: 6px;
  color: var(--slate-400); font-size: 12px; font-weight: 500;
}
.trust-badge svg { width: 14px; height: 14px; stroke: var(--emerald); fill: none; stroke-width: 2; }

/* ═══ RIGHT PANEL (form) ═══ */
.form-panel {
  flex: 1; background: var(--slate-50);
  padding: 48px; display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto;
}
.form-container { width: 100%; max-width: 520px; }

/* ═══ STEP INDICATOR ═══ */
.steps-bar {
  display: flex; align-items: center; gap: 0; margin-bottom: 36px;
  background: white; border-radius: 12px; padding: 4px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--slate-200);
}
.step-indicator {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--slate-400); transition: var(--transition); cursor: default;
}
.step-indicator.active {
  background: var(--navy); color: white;
}
.step-indicator.completed {
  color: var(--emerald);
}
.step-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--slate-200); color: var(--slate-500);
}
.step-indicator.active .step-num { background: var(--emerald); color: white; }
.step-indicator.completed .step-num { background: var(--emerald); color: white; }

/* ═══ FORM CARD ═══ */
.form-card {
  background: white; border-radius: var(--radius);
  padding: 36px; box-shadow: var(--shadow-md);
  border: 1px solid var(--slate-200);
}
.form-title { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.form-subtitle { font-size: 14px; color: var(--slate-500); margin-bottom: 28px; }

/* ═══ FORM FIELDS ═══ */
.form-row { display: flex; gap: 14px; }
.form-group { margin-bottom: 18px; flex: 1; }
.form-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--navy);
  margin-bottom: 6px;
}
.form-label .required { color: var(--red); }
.form-input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-xs); font-family: var(--font); font-size: 14px;
  color: var(--navy); background: white; transition: var(--transition);
  outline: none;
}
.form-input:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-glow); }
.form-input.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.form-input::placeholder { color: var(--slate-400); }
.field-error { font-size: 12px; color: var(--red); margin-top: 4px; display: none; }
.field-error.show { display: block; }

.form-select {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-xs); font-family: var(--font); font-size: 14px;
  color: var(--navy); background: white; transition: var(--transition);
  outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.form-select:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-glow); }

/* ═══ PASSWORD STRENGTH ═══ */
.password-wrapper { position: relative; }
.password-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--slate-400);
  display: flex; padding: 4px;
}
.password-toggle svg { width: 18px; height: 18px; }
.strength-bar { display: flex; gap: 4px; margin-top: 6px; }
.strength-segment { height: 3px; flex: 1; border-radius: 2px; background: var(--slate-200); transition: var(--transition); }
.strength-bar.weak .strength-segment:nth-child(1) { background: var(--red); }
.strength-bar.medium .strength-segment:nth-child(1),
.strength-bar.medium .strength-segment:nth-child(2) { background: #F59E0B; }
.strength-bar.strong .strength-segment:nth-child(1),
.strength-bar.strong .strength-segment:nth-child(2),
.strength-bar.strong .strength-segment:nth-child(3) { background: var(--emerald); }
.strength-bar.very-strong .strength-segment { background: var(--emerald); }
.strength-label { font-size: 11px; margin-top: 2px; color: var(--slate-400); }

/* ═══ CHECKBOXES ═══ */
.compliance-section {
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--slate-200);
}
.compliance-title {
  font-size: 13px; font-weight: 700; color: var(--navy);
  margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em;
}
.checkbox-group { margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; }
.checkbox-input {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--emerald); cursor: pointer;
}
.checkbox-label {
  font-size: 13px; color: var(--slate-600); line-height: 1.5; cursor: pointer;
}
.checkbox-label a { color: var(--emerald-dark); text-decoration: underline; }
.checkbox-label strong { color: var(--navy); font-weight: 600; }

/* ═══ SUBMIT BUTTON ═══ */
.btn-submit {
  width: 100%; padding: 14px 24px; border: none; border-radius: var(--radius-xs);
  background: var(--emerald); color: white; font-family: var(--font);
  font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 24px;
}
.btn-submit:hover:not(:disabled) { background: var(--emerald-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16,185,129,0.3); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-submit .spinner {
  width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite;
  display: none;
}
.btn-submit.loading .spinner { display: block; }
.btn-submit.loading .btn-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-footer {
  text-align: center; margin-top: 20px; font-size: 13px; color: var(--slate-500);
}
.form-footer a { color: var(--emerald-dark); font-weight: 600; text-decoration: none; }
.form-footer a:hover { text-decoration: underline; }

/* ═══ PLAN SELECTOR ═══ */
.plan-selector { margin-bottom: 24px; }
.plan-selector-label { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 10px; display: block; }

/* v4.2.2: Period toggle inside register form */
.reg-period-toggle-wrap { margin: 0 0 14px; }
.reg-period-toggle {
  display: inline-flex; align-items: center; padding: 3px;
  background: var(--slate-100); border-radius: 100px;
  font-family: inherit;
}
.reg-period-toggle button {
  background: transparent; border: none; padding: 7px 16px;
  font-size: 12px; font-weight: 600; color: var(--slate-500);
  cursor: pointer; border-radius: 100px; transition: var(--transition);
  font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.reg-period-toggle button.active {
  background: white; color: var(--navy);
  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.reg-period-toggle button:hover:not(.active) { color: var(--navy); }
.reg-period-toggle .save-tag {
  display: inline-flex; align-items: center; padding: 1px 6px;
  background: var(--emerald); color: white; font-size: 9px;
  font-weight: 700; border-radius: 100px; letter-spacing: 0.02em;
}
.plan-billed-yearly {
  display: block; font-size: 10px; color: var(--slate-400);
  margin-top: 2px; font-weight: 500;
}
.plan-options { display: flex; gap: 10px; }
.plan-option {
  flex: 1; padding: 14px 12px; border: 2px solid var(--slate-200);
  border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
  text-align: center; position: relative;
}
.plan-option:hover { border-color: var(--slate-300); }
.plan-option.selected { border-color: var(--emerald); background: rgba(16,185,129,0.04); }
.plan-option input { display: none; }
.plan-name { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.plan-price { font-size: 20px; font-weight: 800; color: var(--emerald); }
.plan-price span { font-size: 12px; font-weight: 500; color: var(--slate-400); }
.plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--emerald); color: white; font-size: 10px; font-weight: 700;
  padding: 2px 10px; border-radius: 20px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.plan-trial {
  font-size: 11px; color: var(--emerald-dark); font-weight: 600; margin-top: 4px;
}

/* ═══ STEP 2: VERIFY EMAIL ═══ */
.step-content { display: none; }
.step-content.active { display: block; }

.verify-card {
  background: white; border-radius: var(--radius); padding: 48px 36px;
  box-shadow: var(--shadow-md); border: 1px solid var(--slate-200);
  text-align: center;
}
.verify-icon {
  width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 24px;
  background: var(--emerald-glow); display: flex; align-items: center; justify-content: center;
}
.verify-icon svg { width: 36px; height: 36px; stroke: var(--emerald); fill: none; stroke-width: 2; }
.verify-title { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.verify-text { font-size: 14px; color: var(--slate-500); line-height: 1.7; margin-bottom: 8px; }
.verify-email { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 24px; }
.verify-note {
  font-size: 13px; color: var(--slate-400); margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--slate-200);
}
.resend-link {
  color: var(--emerald-dark); font-weight: 600; cursor: pointer;
  text-decoration: underline; background: none; border: none;
  font-family: var(--font); font-size: 13px;
}
.resend-link:disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══ STEP 3: PAYMENT ═══ */
.payment-card {
  background: white; border-radius: var(--radius); padding: 36px;
  box-shadow: var(--shadow-md); border: 1px solid var(--slate-200);
}
.payment-plan-summary {
  background: var(--slate-50); border-radius: var(--radius-sm);
  padding: 18px; margin-bottom: 24px; border: 1px solid var(--slate-200);
}
.payment-plan-row { display: flex; justify-content: space-between; align-items: center; }
.payment-plan-name { font-size: 14px; font-weight: 600; color: var(--navy); }
.payment-plan-price { font-size: 14px; color: var(--slate-500); }
.payment-total-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--slate-200);
}
.payment-total-label { font-size: 15px; font-weight: 700; color: var(--navy); }
.payment-total-value { font-size: 22px; font-weight: 800; color: var(--emerald); }
.payment-trial-note {
  font-size: 12px; color: var(--slate-500); text-align: center; margin-top: 8px;
}

.stripe-placeholder {
  border: 2px dashed var(--slate-300); border-radius: var(--radius-sm);
  padding: 40px 20px; text-align: center; margin-bottom: 24px;
  background: var(--slate-50);
}
.stripe-placeholder-title { font-size: 14px; font-weight: 600; color: var(--slate-500); margin-bottom: 4px; }
.stripe-placeholder-sub { font-size: 12px; color: var(--slate-400); }

.security-badges {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--slate-200);
}
.security-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--slate-400); font-weight: 500;
}
.security-badge svg { width: 14px; height: 14px; stroke: var(--slate-400); fill: none; stroke-width: 2; }

/* ═══ ALERT / NOTICES ═══ */
.alert {
  padding: 12px 16px; border-radius: var(--radius-xs); font-size: 13px;
  display: none; margin-bottom: 16px; line-height: 1.5;
}
.alert.error { background: var(--red-light); color: var(--red); border: 1px solid rgba(239,68,68,0.2); display: block; }
.alert.success { background: rgba(16,185,129,0.08); color: var(--emerald-dark); border: 1px solid rgba(16,185,129,0.2); display: block; }

/* ═══ MOBILE ═══ */
@media (max-width: 1024px) {
  .brand-panel { width: 360px; padding: 36px 28px; }
}
@media (max-width: 768px) {
  .page-wrapper { flex-direction: column; }
  .brand-panel {
    width: 100%; padding: 20px 24px;
    flex-direction: column; align-items: flex-start;
  }
  .brand-panel::before, .brand-panel::after { display: none; }
  .brand-logo { margin-bottom: 8px; }
  .brand-headline { margin-bottom: 0; }
  .brand-headline h1 { font-size: 18px; margin-bottom: 4px; }
  .brand-headline p { display: none; }
  .brand-features { display: none; }
  .brand-trust { display: none; }
  .top-lang { top: 12px; right: 12px; }
  [dir="rtl"] .top-lang { right: auto; left: 12px; }
  .form-panel { padding: 20px 16px; }
  .form-card, .verify-card, .payment-card { padding: 24px 20px; }
  .form-row { flex-direction: column; gap: 0; }
  .plan-options { flex-direction: column; gap: 8px; }
  .plan-option { padding: 12px; display: flex; align-items: center; justify-content: space-between; }
  .plan-badge { top: -8px; }
  .step-indicator span:not(.step-num) { display: none; }
  .step-indicator { padding: 10px 8px; }
  .steps-bar { padding: 3px; }
  .security-badges { flex-wrap: wrap; gap: 10px; }
}

/* ═══ RTL ═══ */
[dir="rtl"] .form-select {
  background-position: left 12px center;
}
[dir="rtl"] .password-toggle {
  right: auto; left: 12px;
}
[dir="rtl"] .plan-badge {
  left: 50%; right: auto;
}

/* ═══ LANG SWITCHER ═══ */
.top-lang {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  display: flex; gap: 4px;
}
[dir="rtl"] .top-lang { right: auto; left: 16px; }
.top-lang a {
  padding: 4px 10px; font-size: 12px; font-weight: 600;
  color: var(--slate-400); text-decoration: none; border-radius: 6px;
  transition: var(--transition);
}
.top-lang a:hover { color: white; background: rgba(255,255,255,0.1); }
.top-lang a.active { color: var(--emerald); background: rgba(16,185,129,0.1); }

[dir="rtl"] *, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] button, [dir="rtl"] a { font-family: "Cairo", "Heebo", sans-serif !important; }
</style>
<script src="https://js.stripe.com/v3/"></script>
<style>
.skip-to-main{position:absolute;top:-100px;left:0;background:#0891B2;color:white;padding:12px 24px;z-index:100000;font-size:16px;font-weight:600;text-decoration:none;border-radius:0 0 8px 0;transition:top 0.2s;}
.skip-to-main:focus{top:0;}
*:focus-visible{outline:3px solid #0891B2!important;outline-offset:2px!important;box-shadow:0 0 0 6px rgba(8,145,178,0.15)!important;}
*:focus:not(:focus-visible){outline:none!important;box-shadow:none!important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;}}
</style>
</head>
<body>
<a href="#main" class="skip-to-main">Ir al contenido principal</a>

<div class="page-wrapper">

  <!-- ══════ LEFT: BRANDING PANEL ══════ -->
  <div class="brand-panel">
    <div class="top-lang">
      <a href="/register" data-lang="en">EN</a>
      <a href="/he/register" data-lang="he">עב</a>
      <a href="/ar/register" data-lang="ar">عر</a>
      <a href="/es/register" data-lang="es">ES</a>
      <a href="/fr/register" data-lang="fr">FR</a>
    </div>

    <div class="brand-logo">
      <a href="/es" style="display:inline-block;"><img src="/assets/brand/logo-horiz-white.svg" alt="GoUltra.AI" style="height:46px;width:auto;"></a>
    </div>

    <div class="brand-headline">
      <h1 data-translate="brand_h1">Start your <span>7-day free trial</span></h1>
      <p data-translate="brand_sub">Set up your WhatsApp Business automation in under 2 minutes. No charge today.</p>
    </div>

    <div class="brand-features">
      <div class="brand-feature">
        <div class="brand-feature-icon">
          <svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
        </div>
        <div class="brand-feature-text">
          <h4 data-translate="bf1_title">Instant Setup</h4>
          <p data-translate="bf1_desc">Connect your WhatsApp Business account and start sending in minutes.</p>
        </div>
      </div>
      <div class="brand-feature">
        <div class="brand-feature-icon">
          <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
        </div>
        <div class="brand-feature-text">
          <h4 data-translate="bf2_title">Programacion inteligente</h4>
          <p data-translate="bf2_desc">Automated appointment reminders synced with Google Calendar.</p>
        </div>
      </div>
      <div class="brand-feature">
        <div class="brand-feature-icon">
          <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <div class="brand-feature-text">
          <h4 data-translate="bf3_title">Enterprise Security</h4>
          <p data-translate="bf3_desc">Built on the official WhatsApp Cloud API. Secure account setup.</p>
        </div>
      </div>
    </div>

    <div class="brand-trust">
      <div class="trust-badge">
        <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        <span data-translate="trust_badge_secure">Configuración segura</span>
      </div>
      <div class="trust-badge">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
        <span data-translate="trust_badge_trial">Prueba gratuita de 7 días</span>
      </div>
      <div class="trust-badge">
        <svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M21 22v-6h-6"/><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 2v6h6"/></svg>
        <span data-translate="trust_badge_cancel">Cancela cuando quieras</span>
      </div>
    </div>
  </div>

  <!-- ══════ RIGHT: FORM PANEL ══════ -->
  <div class="form-panel">
    <div class="form-container">

      <!-- Step Indicator -->
      <div class="steps-bar">
        <div class="step-indicator active" id="stepInd1">
          <span class="step-num">1</span>
          <span data-translate="step1_label">Crear cuenta</span>
        </div>
        <div class="step-indicator" id="stepInd2" style="display:none;">
          <span class="step-num">2</span>
          <span data-translate="step2_label">Verify Email</span>
        </div>
        <div class="step-indicator" id="stepInd3">
          <span class="step-num">2</span>
          <span data-translate="step3_label">Payment</span>
        </div>
      </div>

      <!-- ═══ STEP 1: REGISTRATION FORM ═══ -->
      <div class="step-content active" id="step1">
        <div class="form-card">
          <h2 class="form-title" data-translate="reg_title">Create your account</h2>
          <p class="form-subtitle" data-translate="reg_subtitle">All plans include a 7-day free trial. No charge today.</p>

          <div id="regAlert" class="alert"></div>

          <form id="registerForm" novalidate>
            <!-- Name + Company -->
            <div class="form-row">
              <div class="form-group">
                <label class="form-label" data-translate="label_name">Full Name <span class="required">*</span></label>
                <input type="text" class="form-input" id="fullName" name="full_name" autocomplete="name" required
                  placeholder="John Smith" data-translate-placeholder="ph_name">
                <div class="field-error" id="nameError" data-translate="err_name">Please enter your full name</div>
              </div>
              <div class="form-group">
                <label class="form-label" data-translate="label_company">Company Name <span class="required">*</span></label>
                <input type="text" class="form-input" id="companyName" name="company_name" autocomplete="organization" required
                  placeholder="Acme Inc." data-translate-placeholder="ph_company">
                <div class="field-error" id="companyError" data-translate="err_company">Please enter your company name</div>
              </div>
            </div>

            <!-- Email -->
            <div class="form-group">
              <label class="form-label" data-translate="label_email">Work Email <span class="required">*</span></label>
              <input type="email" class="form-input" id="workEmail" name="email" autocomplete="email" required
                placeholder="you@company.com" data-translate-placeholder="ph_email">
              <div class="field-error" id="emailError" data-translate="err_email">Please enter a valid work email</div>
            </div>

            <!-- Password -->
            <div class="form-group">
              <label class="form-label" data-translate="label_password">Password <span class="required">*</span></label>
              <div class="password-wrapper">
                <input type="password" class="form-input" id="password" name="password" autocomplete="new-password" required
                  placeholder="Min 8 chars, 1 number, 1 symbol" data-translate-placeholder="ph_password">
                <button type="button" class="password-toggle" onclick="togglePassword()">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="eyeIcon">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                  </svg>
                </button>
              </div>
              <div class="strength-bar" id="strengthBar">
                <div class="strength-segment"></div>
                <div class="strength-segment"></div>
                <div class="strength-segment"></div>
                <div class="strength-segment"></div>
              </div>
              <div class="strength-label" id="strengthLabel"></div>
              <div class="field-error" id="passError" data-translate="err_password">Min 8 characters, 1 number, 1 symbol</div>
            </div>

            <!-- Country (auto-detect, optional override) -->
            <div class="form-group">
              <label class="form-label" data-translate="label_country">Country</label>
              <select class="form-input" id="country" name="country_code" style="cursor: pointer;">
                <!-- v4.2.2: Filled dynamically by buildCountryDropdown() with full ISO 3166-1 list, localized via Intl.DisplayNames -->
                <option value="" data-translate="opt_country_auto">Auto-detect from your location</option>
              </select>
              <div style="color: var(--slate-400); font-size: 12px; margin-top: 6px;" data-translate="hint_country">Used to set your default billing currency.</div>
            </div>

<!-- v4.2.2: Period toggle (hidden if no yearly prices configured) -->
            <div class="reg-period-toggle-wrap" id="regPeriodToggleWrap" style="display: none;">
              <div class="reg-period-toggle" role="tablist" aria-label="Billing period">
                <button type="button" class="active" data-period="monthly" role="tab" aria-selected="true" onclick="regSwitchPeriod('monthly')">
                  <span data-translate="reg_period_monthly">Monthly</span>
                </button>
                <button type="button" data-period="yearly" role="tab" aria-selected="false" onclick="regSwitchPeriod('yearly')">
                  <span data-translate="reg_period_yearly">Annual</span>
                  <span class="save-tag" data-translate="reg_period_save">Save 20%</span>
                </button>
              </div>
            </div>

            
                        <!-- Plan Selection (loaded dynamically from API) -->
            <div class="plan-selector">
              <label class="plan-selector-label" data-translate="label_plan">Select Your Plan</label>
              <div class="plan-options" id="planOptions">
                <div style="flex:1;text-align:center;padding:20px;color:var(--slate-400);font-size:14px;" id="planLoading">Loading plans...</div>
              </div>
            </div>

            <!-- Compliance Checkboxes -->
            <div class="compliance-section">
              <div class="compliance-title" data-translate="compliance_title">Required Agreements</div>

              <div class="checkbox-group">
                <input type="checkbox" class="checkbox-input" id="agreeTerms" required>
                <label class="checkbox-label" for="agreeTerms" data-translate="cb_terms">I agree to the <a href="/es/terms" target="_blank">Terminos de servicio</a> and <a href="/es/privacy" target="_blank">Politica de privacidad</a>.</label>
              </div>

              <div class="checkbox-group">
                <input type="checkbox" class="checkbox-input" id="agreeAntiSpam" required>
                <label class="checkbox-label" for="agreeAntiSpam" data-translate="cb_antispam"><strong>Anti-Spam Policy:</strong> I confirm I will only send messages to contacts who have given explicit consent. I understand that account suspension is immediate for violations.</label>
              </div>

              <div class="checkbox-group">
                <input type="checkbox" class="checkbox-input" id="agreeBilling" required>
                <label class="checkbox-label" for="agreeBilling" data-translate="cb_billing"><strong>Billing Acknowledgment:</strong> I understand that the subscription covers the software license only. WhatsApp conversation costs are billed separately by Meta.</label>
              </div>
            </div>

            <button type="submit" class="btn-submit" id="submitBtn">
              <div class="spinner"></div>
              <span class="btn-text" data-translate="btn_create">Crear cuenta</span>
            </button>
          </form>

          <div class="form-footer">
            <span data-translate="already_account">Ya tienes una cuenta?</span>
            <a href="https://go.goultra.ai/login?lang=es" data-translate="login_link">Log in</a>
          </div>
        </div>
      </div>

      <!-- ═══ STEP 2: EMAIL VERIFICATION ═══ -->
      <div class="step-content" id="step2">
        <div class="verify-card">
          <div class="verify-icon">
            <svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
          </div>
          <h2 class="verify-title" data-translate="verify_title">Check your inbox</h2>
          <p class="verify-text" data-translate="verify_text">We sent a verification link to:</p>
          <p class="verify-email" id="verifyEmailDisplay"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f782849285b7928f969a879b92d994989a">[email&#160;protected]</a></p>
          <p class="verify-text" data-translate="verify_instructions">Click the link in the email to verify your account and continue to the next step.</p>

          <div class="verify-note">
            <span data-translate="verify_no_email">Didn't receive the email? </span>
            <button class="resend-link" id="resendBtn" onclick="resendEmail()" data-translate="verify_resend">Resend verification email</button>
            <div id="resendTimer" style="font-size: 12px; color: var(--slate-400); margin-top: 6px;"></div>
          </div>

          <div style="margin-top: 16px;">
            <button class="resend-link" onclick="goToStep(1)" data-translate="verify_wrong_email">Wrong email? Go back and fix it</button>
          </div>
        </div>
      </div>

      <!-- ═══ STEP 3: PAYMENT ═══ -->
      <div class="step-content" id="step3">
        <div class="payment-card">
          <h2 class="form-title" data-translate="pay_title">Start your free trial</h2>
          <p class="form-subtitle" data-translate="pay_subtitle">Add a payment method to activate your 7-day trial. You won't be charged today.</p>

          <div class="payment-plan-summary">
            <div class="payment-plan-row">
              <span class="payment-plan-name" id="payPlanName">Selected Plan</span>
              <span class="payment-plan-price" id="payPlanPrice">—</span>
            </div>
            <div class="payment-plan-row" style="margin-top: 6px;">
              <span style="font-size: 13px; color: var(--emerald-dark); font-weight: 600;" data-translate="pay_trial_period">7-day free trial included</span>
            </div>
            <div class="payment-total-row">
              <span class="payment-total-label" data-translate="pay_total_today">Total due today</span>
              <span class="payment-total-value">$0.00</span>
            </div>
            <div class="payment-trial-note" id="payTrialNote" data-translate="pay_charge_note">
              No charge today. Your 7-day free trial starts now. Cancel anytime before the trial ends.
            </div>
          </div>

          <!-- Stripe Payment Element mounts here -->
          <div id="stripeMount" style="padding: 20px; border: 2px solid #e2e8f0; border-radius: 12px; background: #fafbfc; min-height: 60px;">
            <div id="payment-element"><!-- Stripe injects here --></div>
            <div id="payment-message" style="color: var(--red); font-size: 13px; margin-top: 10px; display: none;"></div>
          </div>

          <button type="button" class="btn-submit" id="payBtn" onclick="handlePayment()">
            <div class="spinner"></div>
            <span class="btn-text" data-translate="btn_start_trial">Start 7-Day Free Trial</span>
          </button>

          <div class="security-badges">
            <div class="security-badge">
              <svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
              <span data-translate="badge_guarantee">Cancela cuando quieras</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
/* ═══════════════════════════════════════
   REGISTRATION PAGE — FRONTEND LOGIC
   ═══════════════════════════════════════ */

/* ─── Translations ─── */
var T = {
  en: {
    brand_h1: 'Start your <span>7-day free trial</span>',
    brand_sub: 'Set up your WhatsApp Business automation in under 2 minutes. No charge today.',
    bf1_title: 'Instant Setup', bf1_desc: 'Connect your WhatsApp Business account and start sending in minutes.',
    bf2_title: 'Smart Scheduling', bf2_desc: 'Automated appointment reminders synced with Google Calendar.',
    bf3_title: 'Secure Setup', bf3_desc: 'Built on the official WhatsApp Cloud API. Secure account setup.',
    step1_label: 'Create Account', step2_label: 'Verify Email', step3_label: 'Payment',
    reg_title: 'Create your account', reg_subtitle: 'All plans include a 7-day free trial. No charge today.',
    label_name: 'Full Name <span class="required">*</span>', label_company: 'Company Name <span class="required">*</span>',
    label_email: 'Work Email <span class="required">*</span>', label_password: 'Password <span class="required">*</span>',
    label_plan: 'Select Your Plan',
    label_country: 'Country', hint_country: 'Used to set your default billing currency.',
    opt_country_auto: 'Auto-detect from your location', opt_country_other: 'Other (USD)',
    ph_name: 'John Smith', ph_company: 'Acme Inc.', ph_email: 'you@company.com',
    ph_password: 'Min 8 chars, 1 number, 1 symbol',
    err_name: 'Please enter your full name', err_company: 'Please enter your company name',
    err_email: 'Please enter a valid work email', err_password: 'Min 8 characters, 1 number, 1 symbol',
    plan_starter: 'Starter', plan_pro: 'Professional', plan_enterprise: 'Enterprise', plan_popular: 'Most Popular',
    compliance_title: 'Required Agreements',
    cb_terms: 'I agree to the <a href="/es/terms" target="_blank">Terminos de servicio</a> and <a href="/es/privacy" target="_blank">Politica de privacidad</a>.',
    cb_antispam: '<strong>Anti-Spam Policy:</strong> I confirm I will only send messages to contacts who have given explicit consent. I understand that account suspension is immediate for violations.',
    cb_billing: '<strong>Billing Acknowledgment:</strong> I understand that the subscription covers the software license only. WhatsApp conversation costs are billed separately by Meta.',
    btn_create: 'Create Account',
    already_account: 'Already have an account?', login_link: 'Log in',
    verify_title: 'Check your inbox', verify_text: 'We sent a verification link to:',
    verify_instructions: 'Click the link in the email to verify your account and continue to the next step.',
    verify_no_email: "Didn't receive the email? ", verify_resend: 'Resend verification email',
    verify_wrong_email: 'Wrong email? Go back and fix it',
    pay_title: 'Start your free trial', pay_subtitle: "Add a payment method to activate your 7-day trial. You won't be charged today.",
    pay_trial_period: '7-day free trial included', pay_total_today: 'Total due today',
    pay_charge_note: 'No charge today. Your 7-day free trial starts now. Cancel anytime before the trial ends.',
    stripe_dev_note: 'Developer: Mount Stripe CardElement here using stripe.elements()',
    btn_start_trial: 'Start 7-Day Free Trial', badge_guarantee: 'Cancel anytime',
    err_checkboxes: 'Please agree to all required checkboxes to continue.',
    err_email_exists: 'This email is already registered. Try logging in instead.',
    err_connection: 'Connection error. Please try again.',
    trial_days_free: 'days free trial',
    strength_weak: 'Weak', strength_medium: 'Medium', strength_strong: 'Strong', strength_very_strong: 'Very strong'
  },
  he: {
    brand_h1: 'התחל את <span>7 ימי הניסיון החינם</span>',
    brand_sub: 'הגדר אוטומציה לוואטסאפ עסקי תוך 2 דקות. ללא חיוב היום.',
    bf1_title: 'הפעלה מיידית', bf1_desc: 'חבר את חשבון הוואטסאפ העסקי שלך והתחל לשלוח תוך דקות.',
    bf2_title: 'תזמון חכם', bf2_desc: 'תזכורות תורים אוטומטיות מסונכרנות עם Google Calendar.',
    bf3_title: 'הגדרה מאובטחת', bf3_desc: 'בנוי על WhatsApp Cloud API הרשמי. הגדרת חשבון מאובטחת.',
    step1_label: 'יצירת חשבון', step2_label: 'אימות מייל', step3_label: 'תשלום',
    reg_title: 'צור את החשבון שלך', reg_subtitle: 'כל התוכניות כוללות 7 ימי ניסיון חינם. ללא חיוב היום.',
    label_name: 'שם מלא <span class="required">*</span>', label_company: 'שם חברה <span class="required">*</span>',
    label_email: 'מייל עסקי <span class="required">*</span>', label_password: 'סיסמה <span class="required">*</span>',
    label_plan: 'בחר תוכנית',
    label_country: 'מדינה', hint_country: 'משמש לקביעת מטבע ברירת המחדל לחיוב.',
    opt_country_auto: 'זיהוי אוטומטי לפי מיקום', opt_country_other: 'אחר (USD)',
    ph_name: 'ישראל ישראלי', ph_company: 'שם החברה', ph_email: 'you@company.com',
    ph_password: 'לפחות 8 תווים, מספר אחד, סימן אחד',
    err_name: 'אנא הכנס שם מלא', err_company: 'אנא הכנס שם חברה',
    err_email: 'אנא הכנס מייל עסקי תקין', err_password: 'לפחות 8 תווים, מספר אחד, סימן אחד',
    plan_starter: 'סטארטר', plan_pro: 'מקצועי', plan_enterprise: 'ארגוני', plan_popular: 'הכי פופולרי',
    compliance_title: 'הסכמות נדרשות',
    cb_terms: 'אני מסכים ל<a href="/es/terms" target="_blank">תנאי השימוש</a> ו<a href="/es/privacy" target="_blank">מדיניות הפרטיות</a>.',
    cb_antispam: '<strong>מדיניות אנטי-ספאם:</strong> אני מאשר שאשלח הודעות רק לאנשי קשר שנתנו הסכמה מפורשת. אני מבין שהשעיית חשבון תהיה מיידית במקרה של הפרה.',
    cb_billing: '<strong>אישור חיוב:</strong> אני מבין שהמנוי מכסה את רישיון התוכנה בלבד. עלויות שיחות וואטסאפ מחויבות בנפרד על ידי Meta.',
    btn_create: 'צור חשבון',
    already_account: 'כבר יש לך חשבון?', login_link: 'התחבר',
    verify_title: 'בדוק את תיבת הדואר שלך', verify_text: 'שלחנו לך קישור אימות ל:',
    verify_instructions: 'לחץ על הקישור במייל כדי לאמת את חשבונך ולהמשיך לשלב הבא.',
    verify_no_email: 'לא קיבלת את המייל? ', verify_resend: 'שלח שוב מייל אימות',
    verify_wrong_email: 'מייל שגוי? חזור ותקן',
    pay_title: 'התחל את תקופת הניסיון', pay_subtitle: 'הוסף אמצעי תשלום כדי להפעיל את 7 ימי הניסיון. לא תחויב היום.',
    pay_trial_period: '7 ימי ניסיון חינם כלולים', pay_total_today: 'סה"כ לתשלום היום',
    pay_charge_note: 'אין חיוב היום. תקופת הניסיון של 7 ימים מתחילה עכשיו. ניתן לבטל לפני סיום הניסיון.',
    stripe_dev_note: 'Developer: Mount Stripe CardElement here',
    btn_start_trial: 'התחל 7 ימי ניסיון חינם', badge_guarantee: 'ביטול בכל עת',
    err_checkboxes: 'אנא אשר את כל ההסכמות הנדרשות כדי להמשיך.',
    err_email_exists: 'אימייל זה כבר רשום במערכת. נסה להתחבר.',
    err_connection: 'שגיאת חיבור. נסה שנית.',
    trial_days_free: 'ימי ניסיון חינם',
    strength_weak: 'חלשה', strength_medium: 'בינונית', strength_strong: 'חזקה', strength_very_strong: 'חזקה מאוד'
  },
  ar: {
    brand_h1: 'ابدأ <span>تجربتك المجانية 7 ايام</span>',
    brand_sub: 'اعداد اتمتة واتساب للاعمال خلال دقيقتين. بدون رسوم اليوم.',
    bf1_title: 'اعداد فوري', bf1_desc: 'اربط حساب واتساب للاعمال وابدأ الارسال خلال دقائق.',
    bf2_title: 'جدولة ذكية', bf2_desc: 'تذكيرات مواعيد تلقائية متزامنة مع Google Calendar.',
    bf3_title: 'إعداد آمن', bf3_desc: 'مبني على WhatsApp Cloud API الرسمي. إعداد حساب آمن.',
    step1_label: 'انشاء حساب', step2_label: 'تاكيد البريد', step3_label: 'الدفع',
    reg_title: 'انشئ حسابك', reg_subtitle: 'جميع الخطط تشمل 7 ايام تجربة مجانية. بدون رسوم اليوم.',
    label_name: 'الاسم الكامل <span class="required">*</span>', label_company: 'اسم الشركة <span class="required">*</span>',
    label_email: 'البريد الالكتروني <span class="required">*</span>', label_password: 'كلمة المرور <span class="required">*</span>',
    label_plan: 'اختر خطتك',
    label_country: 'الدولة', hint_country: 'يستخدم لتحديد العملة الافتراضية للفوترة.',
    opt_country_auto: 'الكشف التلقائي حسب موقعك', opt_country_other: 'أخرى (USD)',
    ph_name: 'الاسم الكامل', ph_company: 'اسم الشركة', ph_email: 'you@company.com',
    ph_password: '8 احرف على الاقل، رقم واحد، رمز واحد',
    err_name: 'يرجى ادخال الاسم الكامل', err_company: 'يرجى ادخال اسم الشركة',
    err_email: 'يرجى ادخال بريد الكتروني صالح', err_password: '8 احرف على الاقل، رقم واحد، رمز واحد',
    plan_starter: 'المبتدئ', plan_pro: 'المحترف', plan_enterprise: 'المؤسسي', plan_popular: 'الاكثر شعبية',
    compliance_title: 'الموافقات المطلوبة',
    cb_terms: 'اوافق على <a href="/es/terms" target="_blank">شروط الخدمة</a> و<a href="/es/privacy" target="_blank">سياسة الخصوصية</a>.',
    cb_antispam: '<strong>سياسة مكافحة البريد المزعج:</strong> اؤكد انني سارسل رسائل فقط لجهات اتصال وافقت صراحة. افهم ان تعليق الحساب فوري عند المخالفة.',
    cb_billing: '<strong>اقرار الفوترة:</strong> افهم ان الاشتراك يغطي ترخيص البرنامج فقط. تكاليف محادثات واتساب تحاسب بشكل منفصل من Meta.',
    btn_create: 'انشاء حساب',
    already_account: 'لديك حساب بالفعل؟', login_link: 'تسجيل الدخول',
    verify_title: 'تحقق من بريدك', verify_text: 'ارسلنا رابط تحقق الى:',
    verify_instructions: 'انقر على الرابط في البريد للتحقق من حسابك والمتابعة للخطوة التالية.',
    verify_no_email: 'لم تستلم البريد؟ ', verify_resend: 'اعادة ارسال بريد التحقق',
    verify_wrong_email: 'بريد خاطئ؟ عد وصححه',
    pay_title: 'ابدأ تجربتك المجانية', pay_subtitle: 'اضف وسيلة دفع لتفعيل تجربتك المجانية لمدة 7 ايام. لن يتم محاسبتك اليوم.',
    pay_trial_period: 'تجربة مجانية 7 ايام مضمنة', pay_total_today: 'المجموع المستحق اليوم',
    pay_charge_note: 'لا توجد رسوم اليوم. تبدأ تجربتك المجانية لمدة 7 أيام الآن. يمكنك الإلغاء قبل انتهاء التجربة.',
    stripe_dev_note: 'Developer: Mount Stripe CardElement here',
    btn_start_trial: 'ابدأ 7 ايام تجربة مجانية', badge_guarantee: 'الغاء في اي وقت',
    err_checkboxes: 'يرجى الموافقة على جميع الموافقات المطلوبة للمتابعة.',
    err_email_exists: 'هذا البريد الالكتروني مسجل بالفعل. حاول تسجيل الدخول.',
    err_connection: 'خطا في الاتصال. حاول مرة اخرى.',
    trial_days_free: 'ايام تجربة مجانية',
    strength_weak: 'ضعيفة', strength_medium: 'متوسطة', strength_strong: 'قوية', strength_very_strong: 'قوية جدا'
  },
  es: {
    brand_h1: 'Comienza tu <span>prueba gratuita de 7 dias</span>',
    brand_sub: 'Configura la automatizacion de WhatsApp Business en 2 minutos. Sin cargo hoy.',
    bf1_title: 'Activacion inmediata', bf1_desc: 'Conecta tu cuenta WhatsApp Business y comienza a enviar en minutos.',
    bf2_title: 'Programacion inteligente', bf2_desc: 'Recordatorios automaticos de citas sincronizados con Google Calendar.',
    bf3_title: 'Configuración segura', bf3_desc: 'Construido sobre la API oficial de WhatsApp Cloud. Configuración de cuenta segura.',
    step1_label: 'Crear cuenta', step2_label: 'Verificar email', step3_label: 'Pago',
    reg_title: 'Crea tu cuenta', reg_subtitle: 'Todos los planes incluyen 7 dias de prueba gratuita. Sin cargo hoy.',
    label_name: 'Nombre completo <span class="required">*</span>', label_company: 'Nombre de empresa <span class="required">*</span>',
    label_email: 'Correo de trabajo <span class="required">*</span>', label_password: 'Contrasena <span class="required">*</span>',
    label_plan: 'Elige tu plan',
    label_country: 'Pais', hint_country: 'Usado para configurar tu moneda de facturacion predeterminada.',
    opt_country_auto: 'Deteccion automatica por ubicacion', opt_country_other: 'Otro (USD)',
    ph_name: 'Juan Garcia', ph_company: 'Nombre de empresa', ph_email: 'tu@empresa.com',
    ph_password: 'Min. 8 caracteres, 1 numero, 1 simbolo',
    err_name: 'Ingresa tu nombre completo', err_company: 'Ingresa el nombre de tu empresa',
    err_email: 'Ingresa un correo de trabajo valido', err_password: 'Min. 8 caracteres, 1 numero, 1 simbolo',
    plan_starter: 'Inicial', plan_pro: 'Profesional', plan_enterprise: 'Empresa', plan_popular: 'Popular',
    compliance_title: 'Acuerdos necesarios',
    cb_terms: 'Acepto los <a href="/es/terms" target="_blank">Terminos de servicio</a> y la <a href="/es/privacy" target="_blank">Politica de privacidad</a>.',
    cb_antispam: '<strong>Politica anti-spam:</strong> Confirmo que solo enviare mensajes a contactos con consentimiento explicito. Entiendo que el bloqueo de cuenta es inmediato ante violaciones.',
    cb_billing: '<strong>Confirmacion de pago:</strong> Entiendo que la suscripcion cubre solo la licencia del software. Los costos de mensajes WhatsApp se pagan por separado a traves de Meta.',
    btn_create: 'Crear cuenta',
    already_account: 'Ya tienes una cuenta?', login_link: 'Iniciar sesion',
    verify_title: 'Revisa tu correo', verify_text: 'Enviamos un enlace de verificacion a:',
    verify_instructions: 'Haz clic en el enlace del correo para verificar tu cuenta y continuar al siguiente paso.',
    verify_no_email: 'No recibiste el correo? ', verify_resend: 'Reenviar',
    verify_wrong_email: 'Correo incorrecto? Vuelve y corrigelo',
    pay_title: 'Comienza tu prueba gratuita', pay_subtitle: 'Agrega un metodo de pago para activar tu prueba de 7 dias. Sin cargo hoy.'
  },
  fr: {
    brand_h1: 'Commencez votre <span>essai gratuit de 7 jours</span>',
    brand_sub: 'Configurez l automatisation WhatsApp Business en 2 minutes. Aucun frais aujourd hui.',
    bf1_title: 'Activation instantanee', bf1_desc: 'Connectez votre compte WhatsApp Business et commencez a envoyer en quelques minutes.',
    bf2_title: 'Planification intelligente', bf2_desc: 'Rappels automatiques de rendez-vous synchronises avec Google Calendar.',
    bf3_title: 'Configuration sécurisée', bf3_desc: 'Construit sur l API officielle WhatsApp Cloud. Configuration de compte sécurisée.',
    step1_label: 'Creer un compte', step2_label: 'Verifier l email', step3_label: 'Paiement',
    reg_title: 'Creez votre compte', reg_subtitle: 'Tous les forfaits incluent un essai gratuit de 7 jours. Aucun frais aujourd hui.',
    label_name: 'Nom complet <span class="required">*</span>', label_company: 'Nom de l entreprise <span class="required">*</span>',
    label_email: 'E-mail professionnel <span class="required">*</span>', label_password: 'Mot de passe <span class="required">*</span>',
    label_plan: 'Choisissez votre forfait',
    label_country: 'Pays', hint_country: 'Utilise pour definir votre devise de facturation par defaut.',
    opt_country_auto: 'Detection automatique par localisation', opt_country_other: 'Autre (USD)',
    ph_name: 'Jean Dupont', ph_company: 'Nom de l entreprise', ph_email: 'vous@entreprise.com',
    ph_password: 'Min. 8 caracteres, 1 chiffre, 1 symbole',
    err_name: 'Entrez votre nom complet', err_company: 'Entrez le nom de votre entreprise',
    err_email: 'Entrez un e-mail professionnel valide', err_password: 'Min. 8 caracteres, 1 chiffre, 1 symbole',
    plan_starter: 'Debutant', plan_pro: 'Professionnel', plan_enterprise: 'Entreprise', plan_popular: 'Populaire',
    compliance_title: 'Accords necessaires',
    cb_terms: 'J accepte les <a href="/es/terms" target="_blank">Conditions d utilisation</a> et la <a href="/es/privacy" target="_blank">Politique de confidentialite</a>.',
    cb_antispam: '<strong>Politique anti-spam:</strong> Je confirme que j enverrai des messages uniquement aux contacts ayant donne leur consentement explicite. Je comprends que le blocage du compte est immediat en cas de violation.',
    cb_billing: '<strong>Confirmation de paiement:</strong> Je comprends que l abonnement couvre uniquement la licence logicielle. Les frais de messages WhatsApp sont payes separement via Meta.',
    btn_create: 'Creer un compte',
    already_account: 'Vous avez deja un compte?', login_link: 'Se connecter',
    verify_title: 'Verifiez votre e-mail', verify_text: 'Nous avons envoye un lien de verification a:',
    verify_instructions: 'Cliquez sur le lien dans l e-mail pour verifier votre compte et passer a l etape suivante.',
    verify_no_email: 'Vous n avez pas recu l e-mail? ', verify_resend: 'Renvoyer',
    verify_wrong_email: 'Mauvais e-mail? Revenez en arriere et corrigez',
    pay_title: 'Commencez votre essai gratuit', pay_subtitle: 'Ajoutez un moyen de paiement pour activer votre essai de 7 jours. Aucun frais aujourd hui.'
  }
};

/* ─── Detect Language from URL ─── */
/**
 * detectLang() — Detect language from URL path
 * @returns {string} — "en", "he", "ar", "es", or "fr"
 * 
 * Extracts first path segment: /he/register → "he"
 * Falls back to "en" if not recognized.
 */
function detectLang() {
  var path = window.location.pathname.replace(/^\/|\/$/g, '').split('/')[0];
  var supported = { he: 1, ar: 1, es: 1, fr: 1 };
  if (supported[path]) return path;
  return 'en';
}

/* ─── Apply Translations ─── */
// v4.2.2-fix: Inject billing-related + previously-missing translation keys
// (the 5 keys badge_guarantee, btn_start_trial, pay_charge_note, pay_total_today,
//  pay_trial_period were missing from var T in the original site for ALL langs —
//  this IIFE backfills them along with v4.2.2 billing keys)
(function(){
  var FIX_TX = {
    en: { reg_period_monthly: "Monthly", reg_period_yearly: "Annual", reg_period_save: "Save 20%", reg_billed_annually: "Billed {currency}{amount}/yr", trial_days_free: "days free trial", plan_popular: "Most Popular", pay_per_month: "/month", pay_per_year: "/year", pay_first_charge_on: "First charge of {amount} on {date}. Cancel anytime before.", pay_charge_today: "You will be charged {amount} today.", badge_guarantee: "Cancel anytime", btn_start_trial: "Start 7-Day Free Trial", pay_charge_note: "No charge today. Your 7-day free trial starts now. Cancel anytime before the trial ends.", pay_total_today: "Total due today", pay_trial_period: "7-day free trial included" },
    he: { reg_period_monthly: "חודשי", reg_period_yearly: "שנתי", reg_period_save: "חסכון 20%", reg_billed_annually: "חיוב {currency}{amount} לשנה", trial_days_free: "ימי ניסיון חינם", plan_popular: "הכי פופולרי", pay_per_month: "/חודש", pay_per_year: "/שנה", pay_first_charge_on: "חיוב ראשון של {amount} בתאריך {date}. אפשר לבטל לפני.", pay_charge_today: "תחויב ב-{amount} היום.", badge_guarantee: "ניתן לבטל בכל עת", btn_start_trial: "התחל ניסיון 7 ימים בחינם", pay_charge_note: "אין חיוב היום. תקופת הניסיון של 7 ימים מתחילה עכשיו. ניתן לבטל לפני סיום הניסיון.", pay_total_today: "סך הכל היום", pay_trial_period: "כולל 7 ימי ניסיון חינם" },
    ar: { reg_period_monthly: "شهري", reg_period_yearly: "سنوي", reg_period_save: "وفّر 20%", reg_billed_annually: "يُحاسب {currency}{amount} سنويًا", trial_days_free: "أيام تجربة مجانية", plan_popular: "الأكثر شعبية", pay_per_month: "/شهر", pay_per_year: "/سنة", pay_first_charge_on: "أول رسم {amount} في {date}. يمكن الإلغاء قبل ذلك.", pay_charge_today: "ستُحاسب {amount} اليوم.", badge_guarantee: "إلغاء في أي وقت", btn_start_trial: "ابدأ تجربة 7 أيام مجانية", pay_charge_note: "لا توجد رسوم اليوم. تبدأ تجربتك المجانية لمدة 7 أيام الآن. يمكنك الإلغاء قبل انتهاء التجربة.", pay_total_today: "الإجمالي اليوم", pay_trial_period: "تتضمن 7 أيام تجربة مجانية" },
    es: { reg_period_monthly: "Mensual", reg_period_yearly: "Anual", reg_period_save: "Ahorra 20%", reg_billed_annually: "Facturado {currency}{amount}/año", trial_days_free: "días de prueba gratis", plan_popular: "Más Popular", pay_per_month: "/mes", pay_per_year: "/año", pay_first_charge_on: "Primer cargo de {amount} el {date}. Cancela antes en cualquier momento.", pay_charge_today: "Se te cobrará {amount} hoy.", badge_guarantee: "Cancela cuando quieras", btn_start_trial: "Inicia tu prueba gratuita de 7 días", pay_charge_note: "Sin cargo hoy. Tu prueba gratuita de 7 días comienza ahora. Cancela antes de que termine la prueba.", pay_total_today: "Total a pagar hoy", pay_trial_period: "Incluye 7 días de prueba gratis" },
    fr: { reg_period_monthly: "Mensuel", reg_period_yearly: "Annuel", reg_period_save: "Économisez 20%", reg_billed_annually: "Facturé {currency}{amount}/an", trial_days_free: "jours d essai gratuit", plan_popular: "Le Plus Populaire", pay_per_month: "/mois", pay_per_year: "/an", pay_first_charge_on: "Premier prélèvement de {amount} le {date}. Annulable avant.", pay_charge_today: "Vous serez facturé {amount} aujourd hui.", badge_guarantee: "Annulez à tout moment", btn_start_trial: "Démarrer l essai gratuit de 7 jours", pay_charge_note: "Aucun débit aujourd hui. Votre essai gratuit de 7 jours commence maintenant. Annulable avant la fin de l essai.", pay_total_today: "Total dû aujourd hui", pay_trial_period: "Inclut 7 jours d essai gratuit" }
  };
  if (typeof T !== 'undefined') {
    for (var lang in FIX_TX) {
      if (T[lang]) {
        for (var k in FIX_TX[lang]) {
          // only fill in keys not already defined (preserve any future hand-translated overrides)
          if (T[lang][k] === undefined) T[lang][k] = FIX_TX[lang][k];
        }
      }
    }
  }
})();

function applyTranslations(lang) {
  var t = T[lang] || T.en;
  var rtl = (lang === 'he' || lang === 'ar');
  document.documentElement.setAttribute('lang', lang);
  document.documentElement.setAttribute('dir', rtl ? 'rtl' : 'ltr');

  document.querySelectorAll('[data-translate]').forEach(function(el) {
    var key = el.getAttribute('data-translate');
    if (t[key]) el.innerHTML = t[key];
  });
  document.querySelectorAll('[data-translate-placeholder]').forEach(function(el) {
    var key = el.getAttribute('data-translate-placeholder');
    if (t[key]) el.setAttribute('placeholder', t[key]);
  });

  // Update active language link
  document.querySelectorAll('.top-lang a').forEach(function(a) {
    a.classList.toggle('active', a.getAttribute('data-lang') === lang);
  });
}

/* ─── Init language ─── */
var currentLang = detectLang();
applyTranslations(currentLang);

/* ─── Plan Selection ─── */
var API_BASE = 'https://go.goultra.ai';
var plansData = [];
var selectedPlanId = null;

// v4.2.2: Currency + period state
var selectedPeriod = 'monthly';   // 'monthly' | 'yearly'
var hasAnyYearlyPrice = false;    // controls toggle visibility

/**
 * countryToCurrency(code) — Map country code to billing currency.
 * Mirrors backend logic. Falls back to USD for unmapped countries.
 * v4.2.2: Full Eurozone + de-facto EUR users + full GCC list.
 */
function countryToCurrency(country) {
  if (!country) return 'USD';
  var c = String(country).toUpperCase();
  if (c === 'IL') return 'ILS';
  // GCC (Gulf) countries — billed in AED (regional default)
  if (['AE','SA','KW','QA','BH','OM'].indexOf(c) >= 0) return 'AED';
  // Eurozone (20 official members) + de-facto EUR users (AD/MC/SM/VA/XK/ME)
  if (['AT','BE','HR','CY','EE','FI','FR','DE','GR','IE','IT','LV','LT','LU','MT','NL','PT','SK','SI','ES',
       'AD','MC','SM','VA','XK','ME'].indexOf(c) >= 0) return 'EUR';
  return 'USD';
}

// v4.2.2: Full ISO 3166-1 alpha-2 country code list (~250 entries).
// Names are resolved at render time via Intl.DisplayNames so they appear in the user's language automatically.
var ALL_COUNTRY_CODES = [
  'AD','AE','AF','AG','AI','AL','AM','AO','AQ','AR','AS','AT','AU','AW','AX','AZ',
  'BA','BB','BD','BE','BF','BG','BH','BI','BJ','BL','BM','BN','BO','BQ','BR','BS','BT','BV','BW','BY','BZ',
  'CA','CC','CD','CF','CG','CH','CI','CK','CL','CM','CN','CO','CR','CU','CV','CW','CX','CY','CZ',
  'DE','DJ','DK','DM','DO','DZ',
  'EC','EE','EG','EH','ER','ES','ET',
  'FI','FJ','FK','FM','FO','FR',
  'GA','GB','GD','GE','GF','GG','GH','GI','GL','GM','GN','GP','GQ','GR','GS','GT','GU','GW','GY',
  'HK','HM','HN','HR','HT','HU',
  'ID','IE','IL','IM','IN','IO','IQ','IR','IS','IT',
  'JE','JM','JO','JP',
  'KE','KG','KH','KI','KM','KN','KP','KR','KW','KY','KZ',
  'LA','LB','LC','LI','LK','LR','LS','LT','LU','LV','LY',
  'MA','MC','MD','ME','MF','MG','MH','MK','ML','MM','MN','MO','MP','MQ','MR','MS','MT','MU','MV','MW','MX','MY','MZ',
  'NA','NC','NE','NF','NG','NI','NL','NO','NP','NR','NU','NZ',
  'OM',
  'PA','PE','PF','PG','PH','PK','PL','PM','PN','PR','PS','PT','PW','PY',
  'QA',
  'RE','RO','RS','RU','RW',
  'SA','SB','SC','SD','SE','SG','SH','SI','SJ','SK','SL','SM','SN','SO','SR','SS','ST','SV','SX','SY','SZ',
  'TC','TD','TF','TG','TH','TJ','TK','TL','TM','TN','TO','TR','TT','TV','TW','TZ',
  'UA','UG','UM','US','UY','UZ',
  'VA','VC','VE','VG','VI','VN','VU',
  'WF','WS',
  'XK',
  'YE','YT',
  'ZA','ZM','ZW'
];

/**
 * buildCountryDropdown(lang) — Render full ISO country list in <select id="country">.
 * Uses Intl.DisplayNames for native browser localization (Hebrew/Arabic/Spanish/French/English).
 * Falls back to ISO code if Intl.DisplayNames is unsupported (very old browsers).
 * v4.2.2 — replaces the prior hardcoded ~20-country English-only list.
 */
function buildCountryDropdown(lang) {
  var sel = document.getElementById('country');
  if (!sel) return;
  
  // Preserve currently selected value across re-render (e.g. lang switch)
  var prevValue = sel.value || '';
  
  var t = T[lang] || T.en || {};
  var autoText  = t.opt_country_auto  || 'Auto-detect from your location';
  var otherText = t.opt_country_other || 'Other';
  
  // Resolve localized country names via browser Intl API (no extra translation table needed)
  var displayNames = null;
  try {
    if (typeof Intl !== 'undefined' && Intl.DisplayNames) {
      displayNames = new Intl.DisplayNames([lang || 'en'], { type: 'region' });
    }
  } catch(e) { displayNames = null; }
  
  var items = ALL_COUNTRY_CODES.map(function(code) {
    var name;
    if (displayNames) {
      try { name = displayNames.of(code) || code; } catch(e) { name = code; }
    } else {
      name = code; // fallback: ISO code only
    }
    return { code: code, name: name, currency: countryToCurrency(code) };
  });
  
  // Sort by localized name using locale-aware collation
  items.sort(function(a, b) {
    try { return a.name.localeCompare(b.name, lang); }
    catch(e) { return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0); }
  });
  
  var html = '<option value="">' + autoText + '</option>';
  items.forEach(function(it) {
    html += '<option value="' + it.code + '">' + it.name + ' (' + it.currency + ')</option>';
  });
  html += '<option value="OTHER">' + otherText + ' (USD)</option>';
  sel.innerHTML = html;
  
  // Restore previous selection
  if (prevValue) sel.value = prevValue;
}

/**
 * getCurrencySymbol(curCode) — Display symbol for a currency code.
 */
function getCurrencySymbol(c) {
  if (!c) return '$';
  var map = { USD: '$', ILS: String.fromCharCode(8362), EUR: String.fromCharCode(8364), AED: 'AED ', SAR: 'SAR ' };
  return map[c] || (c + ' ');
}

/**
 * getSelectedCurrency() — Read current currency from country dropdown.
 */
function getSelectedCurrency() {
  var sel = document.getElementById('country');
  return countryToCurrency(sel ? sel.value : 'US');
}

/**
 * getPlanPriceForDisplay(plan, currency, period) — Pick the right amount to show.
 * Looks up i18n[currentLang].priceMonthly / priceYearly first, falls back to plan.price_monthly.
 * Returns { amount, hasYearly } where hasYearly indicates yearly is configured for this plan.
 */
function getPlanPriceForDisplay(plan, currency, period) {
  // BILLING FIX 2026-04-28: pick price by CURRENCY, not by UI language.
  var monthly = 0;
  var yearly = 0;
  var found = false;
  if (plan.i18n) {
    for (var lang in plan.i18n) {
      var entry = plan.i18n[lang] || {};
      if (entry.currency && String(entry.currency).toUpperCase() === String(currency).toUpperCase()) {
        monthly = parseFloat(entry.priceMonthly) || 0;
        yearly  = parseFloat(entry.priceYearly)  || 0;
        found = true;
        break;
      }
    }
  }
  var amount = (period === 'yearly' && yearly > 0) ? yearly : monthly;
  return {
    amount: amount,
    hasYearly: (yearly > 0 && plan.has_yearly_price),
    available: found && monthly > 0
  };
}

/**
 * loadPlans() — Fetch active plans from API once, then render via renderPlans().
 */
function loadPlans() {
  var container = document.getElementById('planOptions');
  fetch(API_BASE + '/api/public/plans')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      if (!data.success || !data.plans || data.plans.length === 0) {
        container.innerHTML = '<div style="flex:1;text-align:center;padding:20px;color:var(--slate-400);">No plans available. Please try again later.</div>';
        return;
      }
      plansData = data.plans;
      // Determine if yearly toggle should be shown — at least one plan must have yearly configured
      hasAnyYearlyPrice = data.plans.some(function(p) { return !!p.has_yearly_price; });
      var wrap = document.getElementById('regPeriodToggleWrap');
      if (wrap) wrap.style.display = hasAnyYearlyPrice ? '' : 'none';
      renderPlans();
    })
    .catch(function(err) {
      console.error('Failed to load plans:', err);
      container.innerHTML = '<div style="flex:1;text-align:center;padding:20px;color:var(--red);">Could not load plans. Please refresh the page.</div>';
    });
}

/**
 * renderPlans() — Build plan option cards using current country (→currency) + period.
 * Called: after fetch, on country change, on period toggle.
 * Preserves selected plan across re-renders.
 */
function renderPlans() {
  if (!plansData || plansData.length === 0) return;
  var container = document.getElementById('planOptions');
  if (!container) return;
  
  var currency = getSelectedCurrency();
  var symbol = getCurrencySymbol(currency);
  var period = selectedPeriod;
  var t = T[currentLang] || T.en || {};
  var keepSelected = selectedPlanId;
  
  var html = '';
  plansData.forEach(function(plan) {
    var planName = plan.name;
    if (plan.i18n && plan.i18n[currentLang]) {
      planName = plan.i18n[currentLang].name || planName;
    }
    var priceInfo = getPlanPriceForDisplay(plan, currency, period);
    var amount = priceInfo.amount;
    var isYearlyShown = (period === 'yearly' && priceInfo.hasYearly);
    
    var trialText = '';
    if (plan.trial_days && plan.trial_days > 0) {
      trialText = '<div class="plan-trial">' + plan.trial_days + ' ' + (t.trial_days_free || 'days free trial') + '</div>';
    }
    var popularBadge = '';
    if (plan.is_popular) {
      popularBadge = '<div class="plan-badge">' + (t.plan_popular || 'Most Popular') + '</div>';
    }
    var billedYearly = '';
    if (isYearlyShown) {
      var annualTotal = Math.round(amount * 12);
      var billTmpl = t.reg_billed_annually || 'Billed {currency}{amount}/yr';
      billedYearly = '<div class="plan-billed-yearly">' + billTmpl.replace('{amount}', annualTotal).replace('{currency}', String(symbol).trim()) + '</div>';
    }
    
    var isSelected = (keepSelected ? plan.id === keepSelected : plan.is_popular);
    html += '<label class="plan-option' + (isSelected ? ' selected' : '') + '" onclick="selectPlan(' + "'" + plan.id + "'" + ')">' +
      '<input type="radio" name="plan" value="' + plan.id + '"' + (isSelected ? ' checked' : '') + '>' +
      popularBadge +
      '<div class="plan-name">' + planName + '</div>' +
      '<div class="plan-price">' + symbol + amount + '<span>/mo</span></div>' +
      billedYearly +
      trialText +
      '</label>';
    if (isSelected && !keepSelected) selectedPlanId = plan.id;
  });
  container.innerHTML = html;
  
  if (!selectedPlanId && plansData.length > 0) {
    selectPlan(plansData[0].id);
  }
}

/**
 * regSwitchPeriod(period) — Toggle Monthly/Annual on the register form.
 */
function regSwitchPeriod(period) {
  if (period !== 'monthly' && period !== 'yearly') period = 'monthly';
  selectedPeriod = period;
  try { sessionStorage.setItem('goultra_billing_period', period); } catch(e) {}
  var btns = document.querySelectorAll('.reg-period-toggle button');
  for (var i = 0; i < btns.length; i++) {
    var p = btns[i].getAttribute('data-period');
    if (p === period) {
      btns[i].classList.add('active');
      btns[i].setAttribute('aria-selected', 'true');
    } else {
      btns[i].classList.remove('active');
      btns[i].setAttribute('aria-selected', 'false');
    }
  }
  renderPlans();
}

/**
 * selectPlan(planId) — Toggle plan selection UI
 * @param {string} planId — The plan ID from database
 */
function selectPlan(planId) {
  selectedPlanId = planId;
  document.querySelectorAll('.plan-option').forEach(function(el) { el.classList.remove('selected'); });
  var el = document.querySelector('input[value="'+planId+'"]');
  if (el) { el.checked = true; el.closest('.plan-option').classList.add('selected'); }
}

/**
 * getSelectedPlan() — Get the full plan object for the selected plan
 */
function getSelectedPlan() {
  if (!selectedPlanId) return null;
  for (var i = 0; i < plansData.length; i++) {
    if (plansData[i].id === selectedPlanId) return plansData[i];
  }
  return null;
}

/* ─── Password Toggle ─── */
/**
 * togglePassword() — Toggle password visibility
 * Switches input type between "password" and "text".
 */
function togglePassword() {
  var inp = document.getElementById('password');
  inp.type = inp.type === 'password' ? 'text' : 'password';
}

/* ─── Password Strength ─── */
document.getElementById('password').addEventListener('input', function() {
  var v = this.value, score = 0, bar = document.getElementById('strengthBar');
  var label = document.getElementById('strengthLabel');
  if (v.length >= 8) score++;
  if (/[0-9]/.test(v)) score++;
  if (/[^A-Za-z0-9]/.test(v)) score++;
  if (v.length >= 12) score++;
  bar.className = 'strength-bar';
  var t = T[currentLang] || T.en;
  if (score === 0 && v.length > 0) { bar.classList.add('weak'); label.textContent = t.strength_weak; }
  else if (score === 1) { bar.classList.add('weak'); label.textContent = t.strength_weak; }
  else if (score === 2) { bar.classList.add('medium'); label.textContent = t.strength_medium; }
  else if (score === 3) { bar.classList.add('strong'); label.textContent = t.strength_strong; }
  else if (score >= 4) { bar.classList.add('very-strong'); label.textContent = t.strength_very_strong; }
  if (v.length === 0) label.textContent = '';
});

/* ─── Form Validation ─── */
/**
 * validateForm() — Client-side validation for Step 1
 * @returns {boolean} — true if all fields valid
 * 
 * Validates:
 *   - Full name (not empty)
 *   - Company name (not empty)
 *   - Email (format: x@x.x)
 *   - Password (min 8 chars + 1 number + 1 symbol)
 *   - All 3 checkboxes checked (terms, anti-spam, billing)
 * 
 * Shows .field-error elements and adds .error class to inputs.
 */
function validateForm() {
  var valid = true;
  var name = document.getElementById('fullName');
  var company = document.getElementById('companyName');
  var email = document.getElementById('workEmail');
  var pass = document.getElementById('password');
  var terms = document.getElementById('agreeTerms');
  var spam = document.getElementById('agreeAntiSpam');
  var billing = document.getElementById('agreeBilling');

  // Reset errors
  document.querySelectorAll('.field-error').forEach(function(e) { e.classList.remove('show'); });
  document.querySelectorAll('.form-input').forEach(function(e) { e.classList.remove('error'); });

  if (!name.value.trim()) { name.classList.add('error'); document.getElementById('nameError').classList.add('show'); valid = false; }
  if (!company.value.trim()) { company.classList.add('error'); document.getElementById('companyError').classList.add('show'); valid = false; }
  if (!email.value.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
    email.classList.add('error'); document.getElementById('emailError').classList.add('show'); valid = false;
  }
  if (pass.value.length < 8 || !/[0-9]/.test(pass.value) || !/[^A-Za-z0-9]/.test(pass.value)) {
    pass.classList.add('error'); document.getElementById('passError').classList.add('show'); valid = false;
  }
  if (!terms.checked || !spam.checked || !billing.checked) {
    var alert = document.getElementById('regAlert');
    alert.className = 'alert error';
    alert.textContent = (T[currentLang] || T.en).err_checkboxes;
    valid = false;
  }
  return valid;
}

/* ─── Form Submit ─── */
document.getElementById('registerForm').addEventListener('submit', function(e) {
  e.preventDefault();
  var alert = document.getElementById('regAlert');
  alert.className = 'alert'; alert.textContent = '';

  if (!validateForm()) return;

  var btn = document.getElementById('submitBtn');
  btn.classList.add('loading'); btn.disabled = true;

  // Show email in verify step
  var email = document.getElementById('workEmail').value;
  document.getElementById('verifyEmailDisplay').textContent = email;

  /* ──────────────────────────────────────────
     API CALL: POST /api/v2/auth/register
     Sends: full_name, company_name, email, password, plan_id, language
     On success (201): transition to Step 2
     On error (409): email already exists
     On error (400): validation error
     ────────────────────────────────────────── */
  var countrySelect = document.getElementById('country');
  var selectedCountry = countrySelect ? countrySelect.value : '';
  // Treat 'OTHER' as empty (let backend default to USD)
  if (selectedCountry === 'OTHER') selectedCountry = '';
  
  var formData = {
    full_name: document.getElementById('fullName').value,
    company_name: document.getElementById('companyName').value,
    email: email,
    password: document.getElementById('password').value,
    plan_id: selectedPlanId,
    language: currentLang,
    country_code: selectedCountry
  };
  
  fetch(API_BASE + '/api/v2/auth/register', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  })
  .then(function(r) { return r.json(); })
  .then(function(result) {
    btn.classList.remove('loading'); btn.disabled = false;
    if (result.success) {
      // Store auth token for payment step
      if (result.token) {
        sessionStorage.setItem('goultra_token', result.token);
      }
      // Store selected plan
      if (selectedPlanId) {
        sessionStorage.setItem('goultra_plan_id', selectedPlanId);
      }
      // Go directly to payment (Step 3) — skip email verify
      // Email verification is sent in background but doesn't block checkout
      goToStep(3);
    } else {
      var errorMsg = result.error || 'Registration failed';
      // Show localized error
      if (result.error_code === 'EMAIL_EXISTS') {
        errorMsg = (T[currentLang] || T.en).err_email_exists || 'This email is already registered';
      }
      alert.className = 'alert error';
      alert.innerHTML = errorMsg + (result.error_code === 'EMAIL_EXISTS' ? ' <a href="https://go.goultra.ai/?lang=es" style="color: var(--emerald); font-weight: 600; text-decoration: underline;">Log In &rarr;</a>' : '');
    }
  })
  .catch(function(err) {
    btn.classList.remove('loading'); btn.disabled = false;
    alert.className = 'alert error';
    alert.textContent = (T[currentLang] || T.en).err_connection || 'Connection error. Please try again.';
  });
});

/* ─── Step Navigation ─── */
/* NOTE: Form data is preserved when navigating between steps because
   we use CSS display:none/block (DOM stays intact). When user clicks
   "Wrong email? Go back" in Step 2, they return to Step 1 with all
   fields pre-filled. No data is lost. */
/**
 * goToStep(step) — Navigate to registration step
 * @param {number} step — 1, 2, or 3
 * 
 * Hides all .step-content, shows #step{n}.
 * Updates step indicators (.active, .completed).
 * For step 3: updates payment summary with selected plan + price.
 * Scrolls to top for smooth UX.
 */
function goToStep(step) {
  document.querySelectorAll('.step-content').forEach(function(el) { el.classList.remove('active'); });
  document.querySelectorAll('.step-indicator').forEach(function(el) { el.classList.remove('active'); el.classList.remove('completed'); });

  document.getElementById('step' + step).classList.add('active');
  document.getElementById('stepInd' + step).classList.add('active');

  for (var i = 1; i < step; i++) {
    document.getElementById('stepInd' + i).classList.add('completed');
    document.getElementById('stepInd' + i).querySelector('.step-num').innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg>';
  }

  // Update payment summary with selected plan data
  if (step === 3) {
    var plan = getSelectedPlan();
    if (plan) {
      var planName = plan.name;
      if (plan.i18n && plan.i18n[currentLang]) {
        planName = plan.i18n[currentLang].name || planName;
      }
      // v4.2.2: currency from country dropdown (not plan.currency); amount from selectedPeriod
      var currency = getSelectedCurrency();
      var symbol = getCurrencySymbol(currency);
      var priceInfo = getPlanPriceForDisplay(plan, currency, selectedPeriod);
      var displayAmount = priceInfo.amount;
      var isYearly = (selectedPeriod === 'yearly' && priceInfo.hasYearly);
      // For trial / charge wording: use the per-period actual charge amount
      // monthly: charges $X each month; yearly: charges $X*12 once a year
      var firstChargeAmount = isYearly ? Math.round(displayAmount * 12) : displayAmount;
      var t3 = T[currentLang] || T.en || {};
      var perTxt = isYearly ? (t3.pay_per_year || '/year') : (t3.pay_per_month || '/month');
      
      document.getElementById('payPlanName').textContent = planName;
      document.getElementById('payPlanPrice').textContent = symbol + firstChargeAmount + perTxt;
      
      // Locale-aware date format
      var localeMap = { en: 'en-US', he: 'he-IL', ar: 'ar', es: 'es-ES', fr: 'fr-FR' };
      var locale = localeMap[currentLang] || 'en-US';
      
      var d = new Date();
      var trialDays = plan.trial_days || 0;
      if (trialDays > 0) {
        d.setDate(d.getDate() + trialDays);
        var dateStr;
        try { dateStr = d.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }); }
        catch(e) { dateStr = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); }
        var trialTmpl = t3.pay_first_charge_on || 'First charge of {amount} on {date}. Cancel anytime before.';
        document.getElementById('payTrialNote').textContent = trialTmpl.replace('{amount}', symbol + firstChargeAmount).replace('{date}', dateStr);
      } else {
        var nowTmpl = t3.pay_charge_today || 'You will be charged {amount} today.';
        document.getElementById('payTrialNote').textContent = nowTmpl.replace('{amount}', symbol + firstChargeAmount);
      }
    }
    // Initialize Stripe Payment Element
    initStripeCheckout();
  }

  window.scrollTo({ top: 0, behavior: 'smooth' });
}

/* ─── Resend Email ─── */
/**
 * resendEmail() — Resend verification email via API
 * v4.2.2: No longer a stub — calls POST /api/v2/auth/resend-verification
 * with the email collected during step 1, then disables button for 60s.
 */
function resendEmail() {
  var btn = document.getElementById('resendBtn');
  if (!btn || btn.disabled) return;
  var timer = document.getElementById('resendTimer');
  
  // Prefer the email we already captured; fall back to the input
  var email = (typeof userEmail !== 'undefined' && userEmail) ? userEmail : '';
  if (!email) {
    var inp = document.getElementById('email');
    email = inp ? inp.value.trim() : '';
  }
  if (!email) {
    if (timer) timer.textContent = 'Email not found — please re-enter.';
    return;
  }
  
  btn.disabled = true;
  
  // Fire-and-forget the API call (non-blocking — UI countdown runs regardless)
  try {
    fetch(API_BASE + '/api/v2/auth/resend-verification', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-User-Language': currentLang || 'en' },
      body: JSON.stringify({ email: email })
    }).catch(function() { /* silent — countdown still protects against spam */ });
  } catch(e) { /* ignore */ }
  
  var seconds = 60;
  if (timer) timer.textContent = 'Resend available in ' + seconds + 's';
  var interval = setInterval(function() {
    seconds--;
    if (timer) timer.textContent = 'Resend available in ' + seconds + 's';
    if (seconds <= 0) {
      clearInterval(interval);
      btn.disabled = false;
      if (timer) timer.textContent = '';
    }
  }, 1000);
}

/* ─── Stripe Checkout Integration ─── */
var stripeInstance = null;
var stripeElements = null;
var stripeClientSecret = null;

async function initStripeCheckout() {
    var msgEl = document.getElementById('payment-message');
    var mountEl = document.getElementById('payment-element');
    var payBtn = document.getElementById('payBtn');
    
    msgEl.style.display = 'none';
    mountEl.innerHTML = '<div style="text-align:center; padding: 20px; color: var(--slate-400);">Loading payment form...</div>';
    payBtn.disabled = true;
    
    if (!selectedPlanId) {
        msgEl.textContent = 'No plan selected. Please go back and select a plan.';
        msgEl.style.display = 'block';
        return;
    }
    
    try {
        var authToken = sessionStorage.getItem('goultra_token') || localStorage.getItem('goultra_token');
        if (!authToken) {
            msgEl.textContent = 'Session expired. Please refresh and try again.';
            msgEl.style.display = 'block';
            return;
        }
        
        var selectedPlan = getSelectedPlan();
        // v4.2.2: Currency from country dropdown (single source of truth on this page)
        var planCurrency = getSelectedCurrency();
        // v4.2.2: Use selectedPeriod first (the on-page toggle is authoritative),
        // then sessionStorage (set from URL ?period=yearly), then 'monthly' default
        var billingPeriod = selectedPeriod || sessionStorage.getItem('goultra_billing_period') || 'monthly';
        if (billingPeriod !== 'monthly' && billingPeriod !== 'yearly' && billingPeriod !== 'biennial') billingPeriod = 'monthly';
        
        var res = await fetch(API_BASE + '/api/v2/billing/subscribe', {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer ' + authToken,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ plan_id: selectedPlanId, currency: planCurrency, billing_period: billingPeriod })
        });
        var data = await res.json();
        
        if (!data.success || !data.client_secret) {
            msgEl.textContent = data.error || 'Failed to initialize payment. Please try again.';
            msgEl.style.display = 'block';
            mountEl.innerHTML = '';
            return;
        }
        
        stripeClientSecret = data.client_secret;
        stripeInstance = Stripe(data.publishable_key);
        
        var appearance = {
            theme: 'stripe',
            variables: {
                colorPrimary: '#10B981',
                colorBackground: '#ffffff',
                colorText: '#0F172A',
                colorDanger: '#ef4444',
                fontFamily: 'Plus Jakarta Sans, system-ui, sans-serif',
                borderRadius: '10px'
            }
        };
        
        stripeElements = stripeInstance.elements({ clientSecret: stripeClientSecret, appearance: appearance });
        var paymentElement = stripeElements.create('payment', { layout: 'tabs' });
        mountEl.innerHTML = '';
        paymentElement.mount('#payment-element');
        
        paymentElement.on('ready', function() { payBtn.disabled = false; });
        paymentElement.on('change', function(event) {
            if (event.error) {
                msgEl.textContent = event.error.message;
                msgEl.style.display = 'block';
            } else {
                msgEl.style.display = 'none';
            }
        });
        
    } catch (err) {
        console.error('Stripe init error:', err);
        msgEl.textContent = 'Could not load payment form: ' + (err.message || 'Unknown error');
        msgEl.style.display = 'block';
    }
}

function handlePayment() {
    if (!stripeInstance || !stripeElements || !stripeClientSecret) {
        var msgEl = document.getElementById('payment-message');
        msgEl.textContent = 'Payment form not ready. Please wait or refresh.';
        msgEl.style.display = 'block';
        return;
    }
    
    var btn = document.getElementById('payBtn');
    btn.classList.add('loading');
    btn.disabled = true;
    var msgEl = document.getElementById('payment-message');
    msgEl.style.display = 'none';
    
    var returnUrl = window.location.origin + window.location.pathname + '?payment=success';
    
    var isSetup = stripeClientSecret.indexOf('seti_') === 0;
    var confirmFn = isSetup
        ? stripeInstance.confirmSetup({ elements: stripeElements, confirmParams: { return_url: returnUrl } })
        : stripeInstance.confirmPayment({ elements: stripeElements, confirmParams: { return_url: returnUrl } });
    
    confirmFn.then(function(result) {
        if (result.error) {
            msgEl.textContent = result.error.message || 'Payment failed. Please try again.';
            msgEl.style.display = 'block';
            btn.classList.remove('loading');
            btn.disabled = false;
        }
    }).catch(function(err) {
        msgEl.textContent = 'An unexpected error occurred.';
        msgEl.style.display = 'block';
        btn.classList.remove('loading');
        btn.disabled = false;
    });
}

// Detect payment success redirect
(function() {
    var params = new URLSearchParams(window.location.search);
    if (params.get('payment') === 'success' || params.get('redirect_status') === 'succeeded') {
        document.addEventListener('DOMContentLoaded', function() {
            var body = document.querySelector('.form-panel .form-container');
            if (body) {
                body.innerHTML = '<div style="text-align:center; padding: 60px 20px;"><div style="width:72px;height:72px;background:#d1fae5;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;"><svg width="36" height="36" fill="none" stroke="#10b981" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></div><h2 style="color:#0F172A; margin-bottom: 12px;">Payment Successful!</h2><p style="color: #64748B; margin-bottom: 32px;">Your account is being activated. Redirecting to dashboard...</p></div>';
            }
            setTimeout(function() { window.location.href = 'https://go.goultra.ai/dashboard?lang=' + currentLang; }, 3000);
        });
    }
}());


/* ─── Detect Language from URL ─── */
/**
 * detectLang() — Detect language from URL path
 * @returns {string} — "en", "he", "ar", "es", or "fr"
 * 
 * Extracts first path segment: /he/register → "he"
 * Falls back to "en" if not recognized.
 */
function detectLang() {
  var path = window.location.pathname.replace(/^\/|\/$/g, '').split('/')[0];
  var supported = { he: 1, ar: 1, es: 1, fr: 1 };
  if (supported[path]) return path;
  return 'en';
}

/* ─── Init ─── */
var currentLang = detectLang();
var rtl = ['he', 'ar'];
if (rtl.indexOf(currentLang) >= 0) {
  document.documentElement.setAttribute('dir', 'rtl');
  document.documentElement.setAttribute('lang', currentLang);
}
// v4.2.2: Build the full country dropdown localized to currentLang.
// Falls back to ISO codes if Intl.DisplayNames is unsupported (very old browsers).
buildCountryDropdown(currentLang);
loadPlans();

// Handle URL parameters
(function() {
  var params = new URLSearchParams(window.location.search);
  
  // v4.2.2: ?period=yearly|monthly|biennial — pre-select billing period from landing page
  var urlPeriod = (params.get('period') || '').toLowerCase();
  if (urlPeriod === 'yearly' || urlPeriod === 'biennial' || urlPeriod === 'monthly') {
    sessionStorage.setItem('goultra_billing_period', urlPeriod);
  }
  
  // v4.2.2: Apply period to in-page state (URL > sessionStorage > monthly default)
  var initPeriod = urlPeriod || sessionStorage.getItem('goultra_billing_period') || 'monthly';
  if (initPeriod === 'yearly' || initPeriod === 'monthly') {
    selectedPeriod = initPeriod;
    // Update toggle button states (only Monthly/Annual buttons exist; biennial falls through)
    var btns = document.querySelectorAll('.reg-period-toggle button');
    for (var bi = 0; bi < btns.length; bi++) {
      var bp = btns[bi].getAttribute('data-period');
      var matched = (bp === selectedPeriod);
      btns[bi].classList.toggle('active', matched);
      btns[bi].setAttribute('aria-selected', matched ? 'true' : 'false');
    }
  }
  
  // v4.2.2: Re-render plans whenever country changes (currency follows country)
  var countrySel = document.getElementById('country');
  if (countrySel) {
    countrySel.addEventListener('change', function() { renderPlans(); });
  }
  
  // ?plan=starter|growth|enterprise — pre-select plan from landing page pricing buttons
  var urlPlan = params.get('plan');
  if (urlPlan) {
    sessionStorage.setItem('goultra_plan_id', urlPlan);
    // Wait for plans to load, then auto-select
    var checkPlans = setInterval(function() {
      if (plansData && plansData.length > 0) {
        clearInterval(checkPlans);
        // Find plan by ID or by name (case-insensitive)
        var found = plansData.find(function(p) { 
          var uPlan = urlPlan.toLowerCase();
          // Match by: ID, ID contains, name, or English i18n name
          if (p.id === urlPlan || p.id.toLowerCase().indexOf(uPlan) > -1) return true;
          if ((p.name || '').toLowerCase().indexOf(uPlan) > -1) return true;
          // Check i18n English name (critical: DB IDs like "plan_basic" don't match "starter")
          try {
            if (p.i18n && p.i18n.en && p.i18n.en.name && p.i18n.en.name.toLowerCase().indexOf(uPlan) > -1) return true;
          } catch(e) {}
          return false;
        });
        if (found) selectPlan(found.id);
      }
    }, 200);
    setTimeout(function() { clearInterval(checkPlans); }, 10000);
  }
  
  // ?verified=1 — legacy handler (no longer used, verify redirects to dashboard now)
  
  // ?payment=success — returning from Stripe payment success
  if (params.get('payment') === 'success' || params.get('redirect_status') === 'succeeded') {
    document.addEventListener('DOMContentLoaded', function() {
      var body = document.querySelector('.form-panel .form-container');
      if (body) {
        body.innerHTML = '<div style="text-align:center; padding: 60px 20px;"><div style="width:72px;height:72px;background:#d1fae5;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;"><svg width="36" height="36" fill="none" stroke="#10b981" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></div><h2 style="color:#0F172A; margin-bottom: 12px;">Payment Successful!</h2><p style="color: #64748B; margin-bottom: 32px;">Your account is being activated. Redirecting to dashboard...</p></div>';
      }
      setTimeout(function() { window.location.href = 'https://go.goultra.ai/dashboard?lang=' + currentLang; }, 3000);
    });
  }
}());
</script>

<!-- GoUltra Accessibility Widget v2.0 -->
<div id="a11yWidget" style="position:fixed;bottom:20px;left:20px;z-index:99998;font-family:Cairo,Heebo,Inter,-apple-system,sans-serif;">
<button id="a11yToggleBtn" onclick="toggleA11yPanel()" aria-label="Accessibility settings" style="width:48px;height:48px;border-radius:50%;border:none;background:#0891B2;color:white;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="4.5" r="2.5"/><path d="M12 7v5m0 0l-3 7m3-7l3 7M6 11h12"/></svg>
</button>
<div id="a11yPanel" style="display:none;position:absolute;bottom:60px;left:0;width:300px;max-height:calc(100vh - 100px);background:white;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,0.2);border:1px solid #e5e7eb;overflow:hidden;" role="dialog" aria-label="Accessibility settings">
<div style="background:#0891B2;color:white;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;">
<span style="font-size:14px;font-weight:600;" id="a11yTitle">Accesibilidad</span>
<button onclick="toggleA11yPanel()" aria-label="Close" style="background:none;border:none;color:white;cursor:pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
</div>
<div style="padding:12px;overflow-y:auto;max-height:calc(100vh - 200px);display:grid;gap:6px;">
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#f9fafb;border-radius:8px;border:1px solid #f3f4f6;">
<span style="font-size:12px;font-weight:500;color:#374151;" id="a11yLblSize">Text Size</span>
<div style="display:flex;gap:4px;">
<button onclick="a11yTextSize(-1)" style="width:28px;height:28px;border:1px solid #d1d5db;background:white;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;color:#374151;">A-</button>
<button onclick="a11yTextSize(0)" style="width:28px;height:28px;border:1px solid #d1d5db;background:white;border-radius:6px;cursor:pointer;font-size:10px;color:#6b7280;">R</button>
<button onclick="a11yTextSize(1)" style="width:28px;height:28px;border:1px solid #d1d5db;background:white;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;color:#374151;">A+</button>
</div>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#f9fafb;border-radius:8px;border:1px solid #f3f4f6;">
<span style="font-size:12px;font-weight:500;color:#374151;" id="a11yLblSpacing">Text Spacing</span>
<div style="display:flex;gap:4px;">
<button onclick="a11ySpacing(-1)" style="width:28px;height:28px;border:1px solid #d1d5db;background:white;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;color:#374151;">-</button>
<button onclick="a11ySpacing(0)" style="width:28px;height:28px;border:1px solid #d1d5db;background:white;border-radius:6px;cursor:pointer;font-size:10px;color:#6b7280;">R</button>
<button onclick="a11ySpacing(1)" style="width:28px;height:28px;border:1px solid #d1d5db;background:white;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;color:#374151;">+</button>
</div>
</div>
<button onclick="a11yToggle('contrast')" id="a11yBtnContrast" aria-pressed="false" class="a11y-opt-btn">&#9680; <span id="a11yLblContrast">High Contrast</span></button>
<button onclick="a11yToggle('monochrome')" id="a11yBtnMono" aria-pressed="false" class="a11y-opt-btn">&#9783; <span id="a11yLblMono">Monochrome</span></button>
<button onclick="a11yToggle('cursor')" id="a11yBtnCursor" aria-pressed="false" class="a11y-opt-btn">&#9757; <span id="a11yLblCursor">Large Cursor</span></button>
<button onclick="a11yToggle('links')" id="a11yBtnLinks" aria-pressed="false" class="a11y-opt-btn">&#128279; <span id="a11yLblLinks">Highlight Links</span></button>
<button onclick="a11yToggle('animations')" id="a11yBtnAnimations" aria-pressed="false" class="a11y-opt-btn">&#9208; <span id="a11yLblAnim">Stop Animations</span></button>
<button onclick="a11yToggle('guide')" id="a11yBtnGuide" aria-pressed="false" class="a11y-opt-btn">&#9776; <span id="a11yLblGuide">Reading Guide</span></button>
<button onclick="a11yToggle('mask')" id="a11yBtnMask" aria-pressed="false" class="a11y-opt-btn">&#9638; <span id="a11yLblMask">Reading Mask</span></button>
<button onclick="a11yToggle('dyslexia')" id="a11yBtnDyslexia" aria-pressed="false" class="a11y-opt-btn">Aa <span id="a11yLblDyslexia">Dyslexia Font</span></button>
<button onclick="a11yToggleKeyboard()" id="a11yBtnKeyboard" aria-pressed="false" class="a11y-opt-btn">&#9000; <span id="a11yLblKeyboard">Virtual Keyboard</span></button>
<button onclick="a11yResetAll()" style="margin-top:2px;padding:8px;background:#111827;color:white;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;" ><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 4v6h6M23 20v-6h-6"/><path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15"/></svg><span id="a11yBtnReset">Reset All</span></button>
</div>
<div style="padding:6px 16px 10px;border-top:1px solid #f3f4f6;text-align:center;">
<a href="/es/accessibility" target="_blank" style="font-size:10px;color:#6b7280;text-decoration:none;" id="a11yStmtLink">Accessibility Statement</a>
</div>
</div>
</div>
<div id="a11yReadingGuide" style="display:none;position:fixed;left:0;width:100%;height:40px;border-top:2px solid #0891B2;border-bottom:2px solid #0891B2;background:rgba(8,145,178,0.06);pointer-events:none;z-index:99997;"></div>
<div id="a11yReadingMaskTop" style="display:none;position:fixed;top:0;left:0;width:100%;background:rgba(0,0,0,0.75);pointer-events:none;z-index:99997;"></div>
<div id="a11yReadingMaskBot" style="display:none;position:fixed;left:0;width:100%;background:rgba(0,0,0,0.75);pointer-events:none;z-index:99997;bottom:0;"></div>
<style>
.a11y-opt-btn{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f9fafb;border-radius:8px;border:1px solid #f3f4f6;cursor:pointer;width:100%;text-align:left;font-size:12px;font-weight:500;color:#374151;transition:all 0.15s;}
.a11y-opt-btn:hover{background:#f0fdf4;border-color:#d1fae5;}
.a11y-btn-active{background:#ecfdf5!important;border-color:#10b981!important;}.a11y-btn-active span{color:#065f46!important;}
body.a11y-contrast{filter:contrast(1.4)!important}body.a11y-mono{filter:grayscale(100%)!important}
body.a11y-cursor,body.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 2-2 6z' fill='%23000' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 4 4,auto!important}
body.a11y-links a{outline:2px solid #d97706!important;outline-offset:2px!important;background:rgba(217,119,6,0.08)!important}
body.a11y-no-anim,body.a11y-no-anim *{animation:none!important;transition:none!important}
body.a11y-dyslexia,body.a11y-dyslexia *{font-family:'Comic Sans MS','OpenDyslexic',cursive,sans-serif!important;letter-spacing:0.05em!important}
body.a11y-spacing-1{letter-spacing:0.05em!important;word-spacing:0.1em!important;line-height:1.8!important}
body.a11y-spacing-2{letter-spacing:0.1em!important;word-spacing:0.2em!important;line-height:2.0!important}
body.a11y-spacing-3{letter-spacing:0.15em!important;word-spacing:0.3em!important;line-height:2.2!important}
</style>
<script>
var _a11yState=JSON.parse(localStorage.getItem('goultra_a11y')||'{}');
function toggleA11yPanel(){var p=document.getElementById('a11yPanel');if(p){var o=p.style.display!=='none';p.style.display=o?'none':'block';if(!o)_a11yTranslate();}}
function _a11yTranslate(){var p=window.location.pathname;var lang=p.indexOf('/he/')>-1?'he':p.indexOf('/ar/')>-1?'ar':p.indexOf('/es/')>-1?'es':p.indexOf('/fr/')>-1?'fr':'en';var t={he:{title:'נגישות',size:'גודל טקסט',spacing:'מרווח טקסט',contrast:'ניגודיות גבוהה',mono:'שחור לבן',cursor:'סמן גדול',links:'הדגש קישורים',anim:'עצור אנימציות',guide:'מדריך קריאה',mask:'מסכת קריאה',dyslexia:'גופן דיסלקציה',keyboard:'מקלדת וירטואלית',reset:'איפוס הכל',stmt:'הצהרת נגישות'},ar:{title:'إمكانية الوصول',size:'حجم النص',spacing:'تباعد النص',contrast:'تباين عالي',mono:'أبيض وأسود',cursor:'مؤشر كبير',links:'تمييز الروابط',anim:'إيقاف الحركة',guide:'دليل القراءة',mask:'قناع القراءة',dyslexia:'خط عسر القراءة',keyboard:'لوحة مفاتيح افتراضية',reset:'إعادة تعيين الكل',stmt:'بيان إمكانية الوصول'},es:{title:'Accesibilidad',size:'Tamano de texto',spacing:'Espaciado',contrast:'Contraste',mono:'Monocromo',cursor:'Cursor',links:'Enlaces',anim:'Animaciones',guide:'Guia',mask:'Mascara',dyslexia:'Dislexia',keyboard:'Teclado',reset:'Restablecer',stmt:'Declaracion'},fr:{title:'Accessibilite',size:'Taille du texte',spacing:'Espacement',contrast:'Contraste',mono:'Monochrome',cursor:'Curseur',links:'Liens',anim:'Animations',guide:'Guide',mask:'Masque',dyslexia:'Dyslexie',keyboard:'Clavier',reset:'Reinitialiser',stmt:'Declaration'}};var tr=t[lang];if(!tr)return;var m={a11yTitle:tr.title,a11yLblSize:tr.size,a11yLblSpacing:tr.spacing,a11yLblContrast:tr.contrast,a11yLblMono:tr.mono,a11yLblCursor:tr.cursor,a11yLblLinks:tr.links,a11yLblAnim:tr.anim,a11yLblGuide:tr.guide,a11yLblMask:tr.mask,a11yLblDyslexia:tr.dyslexia,a11yLblKeyboard:tr.keyboard,a11yBtnReset:tr.reset,a11yStmtLink:tr.stmt};for(var id in m){var el=document.getElementById(id);if(el)el.textContent=m[id];}}
function a11yTextSize(d){var c=_a11yState.fontSize||100;if(d===0)c=100;else if(d>0&&c<150)c+=10;else if(d<0&&c>80)c-=10;_a11yState.fontSize=c;document.body.style.zoom=(c/100);_a11ySave();}
function a11ySpacing(d){var c=_a11yState.spacing||0;if(d===0)c=0;else if(d>0&&c<3)c++;else if(d<0&&c>0)c--;_a11yState.spacing=c;document.body.classList.remove('a11y-spacing-1','a11y-spacing-2','a11y-spacing-3');if(c>0)document.body.classList.add('a11y-spacing-'+c);_a11ySave();}
function a11yToggle(f){var cm={contrast:'a11y-contrast',cursor:'a11y-cursor',links:'a11y-links',animations:'a11y-no-anim',dyslexia:'a11y-dyslexia',monochrome:'a11y-mono'};var bm={contrast:'a11yBtnContrast',cursor:'a11yBtnCursor',links:'a11yBtnLinks',animations:'a11yBtnAnimations',dyslexia:'a11yBtnDyslexia',guide:'a11yBtnGuide',mask:'a11yBtnMask',monochrome:'a11yBtnMono'};if(f==='guide'){_a11yState.guide=!_a11yState.guide;if(_a11yState.guide&&_a11yState.mask){_a11yState.mask=false;_a11yUM();_a11yUB('a11yBtnMask',false);}var g=document.getElementById('a11yReadingGuide');if(g)g.style.display=_a11yState.guide?'block':'none';_a11yIM();}else if(f==='mask'){_a11yState.mask=!_a11yState.mask;if(_a11yState.mask&&_a11yState.guide){_a11yState.guide=false;var gg=document.getElementById('a11yReadingGuide');if(gg)gg.style.display='none';_a11yUB('a11yBtnGuide',false);}_a11yUM();_a11yIM();}else{var cls=cm[f];if(!cls)return;_a11yState[f]=document.body.classList.toggle(cls);}_a11yUB(bm[f],f==='guide'?_a11yState.guide:f==='mask'?_a11yState.mask:_a11yState[f]);_a11ySave();}
function _a11yUB(id,a){if(!id)return;var b=document.getElementById(id);if(b){b.classList.toggle('a11y-btn-active',a);b.setAttribute('aria-pressed',a?'true':'false');}}
function _a11yUM(){var t=document.getElementById('a11yReadingMaskTop');var b=document.getElementById('a11yReadingMaskBot');if(t)t.style.display=_a11yState.mask?'block':'none';if(b)b.style.display=_a11yState.mask?'block':'none';}
function _a11yIM(){if(window._a11yMH)return;window._a11yMH=function(e){var g=document.getElementById('a11yReadingGuide');if(g&&g.style.display!=='none')g.style.top=(e.clientY-20)+'px';var mt=document.getElementById('a11yReadingMaskTop');if(mt&&mt.style.display!=='none'){mt.style.height=Math.max(0,e.clientY-40)+'px';var mb=document.getElementById('a11yReadingMaskBot');if(mb){mb.style.top=(e.clientY+40)+'px';mb.style.height=(window.innerHeight-e.clientY-40)+'px';}}};document.addEventListener('mousemove',window._a11yMH);}
function a11yResetAll(){document.body.classList.remove('a11y-contrast','a11y-cursor','a11y-links','a11y-no-anim','a11y-dyslexia','a11y-mono','a11y-spacing-1','a11y-spacing-2','a11y-spacing-3');document.body.style.zoom='';var g=document.getElementById('a11yReadingGuide');if(g)g.style.display='none';var mt=document.getElementById('a11yReadingMaskTop');if(mt)mt.style.display='none';var mb=document.getElementById('a11yReadingMaskBot');if(mb)mb.style.display='none';var kb=document.getElementById('a11yVirtualKeyboard');if(kb)kb.style.display='none';_a11yState={};_a11ySave();['a11yBtnContrast','a11yBtnCursor','a11yBtnLinks','a11yBtnAnimations','a11yBtnGuide','a11yBtnMask','a11yBtnDyslexia','a11yBtnMono','a11yBtnKeyboard'].forEach(function(id){_a11yUB(id,false);});}

function a11yToggleKeyboard(){var kb=document.getElementById('a11yVirtualKeyboard');if(!kb)return;var o=kb.style.display!=='none';kb.style.display=o?'none':'block';_a11yUB('a11yBtnKeyboard',!o);}
function a11yKbType(c){var el=document.activeElement;if(el&&(el.tagName==='INPUT'||el.tagName==='TEXTAREA')){var s=el.selectionStart||0;var e=el.selectionEnd||0;el.value=el.value.substring(0,s)+c+el.value.substring(e);el.selectionStart=el.selectionEnd=s+1;el.dispatchEvent(new Event('input',{bubbles:true}));}}
function a11yKbBs(){var el=document.activeElement;if(el&&(el.tagName==='INPUT'||el.tagName==='TEXTAREA')){var s=el.selectionStart||0;if(s>0){el.value=el.value.substring(0,s-1)+el.value.substring(el.selectionEnd||s);el.selectionStart=el.selectionEnd=s-1;el.dispatchEvent(new Event('input',{bubbles:true}));}}}
function a11yKbEn(){var el=document.activeElement;if(el&&el.tagName==='INPUT'){var f=el.closest('form');if(f)f.dispatchEvent(new Event('submit',{bubbles:true}));}}
function _a11ySave(){localStorage.setItem('goultra_a11y',JSON.stringify(_a11yState));}
(function(){if(_a11yState.fontSize&&_a11yState.fontSize!==100)document.body.style.zoom=(_a11yState.fontSize/100);if(_a11yState.spacing>0)document.body.classList.add('a11y-spacing-'+_a11yState.spacing);if(_a11yState.contrast)document.body.classList.add('a11y-contrast');if(_a11yState.monochrome)document.body.classList.add('a11y-mono');if(_a11yState.cursor)document.body.classList.add('a11y-cursor');if(_a11yState.links)document.body.classList.add('a11y-links');if(_a11yState.animations)document.body.classList.add('a11y-no-anim');if(_a11yState.dyslexia)document.body.classList.add('a11y-dyslexia');if(_a11yState.guide){var g=document.getElementById('a11yReadingGuide');if(g)g.style.display='block';_a11yIM();}if(_a11yState.mask){_a11yUM();_a11yIM();}setTimeout(function(){var m={contrast:'a11yBtnContrast',cursor:'a11yBtnCursor',links:'a11yBtnLinks',animations:'a11yBtnAnimations',guide:'a11yBtnGuide',mask:'a11yBtnMask',dyslexia:'a11yBtnDyslexia',monochrome:'a11yBtnMono',keyboard:'a11yBtnKeyboard'};for(var k in m){if(_a11yState[k])_a11yUB(m[k],true);}},100);_a11yTranslate();})();
</script>


<div id="a11yVirtualKeyboard" style="display:none;position:fixed;bottom:0;left:0;right:0;background:#1e293b;padding:8px;z-index:99999;box-shadow:0 -4px 20px rgba(0,0,0,0.3);border-top:2px solid #0891B2;">
<button onclick="a11yToggleKeyboard()" style="position:absolute;top:8px;right:12px;background:none;border:none;color:#94a3b8;font-size:20px;cursor:pointer;" aria-label="Close keyboard">&times;</button>
<div style="display:flex;justify-content:center;gap:4px;margin-bottom:4px;"><button class="a11y-kb-k" onclick="a11yKbType('1')">1</button><button class="a11y-kb-k" onclick="a11yKbType('2')">2</button><button class="a11y-kb-k" onclick="a11yKbType('3')">3</button><button class="a11y-kb-k" onclick="a11yKbType('4')">4</button><button class="a11y-kb-k" onclick="a11yKbType('5')">5</button><button class="a11y-kb-k" onclick="a11yKbType('6')">6</button><button class="a11y-kb-k" onclick="a11yKbType('7')">7</button><button class="a11y-kb-k" onclick="a11yKbType('8')">8</button><button class="a11y-kb-k" onclick="a11yKbType('9')">9</button><button class="a11y-kb-k" onclick="a11yKbType('0')">0</button></div>
<div style="display:flex;justify-content:center;gap:4px;margin-bottom:4px;"><button class="a11y-kb-k" onclick="a11yKbType('q')">q</button><button class="a11y-kb-k" onclick="a11yKbType('w')">w</button><button class="a11y-kb-k" onclick="a11yKbType('e')">e</button><button class="a11y-kb-k" onclick="a11yKbType('r')">r</button><button class="a11y-kb-k" onclick="a11yKbType('t')">t</button><button class="a11y-kb-k" onclick="a11yKbType('y')">y</button><button class="a11y-kb-k" onclick="a11yKbType('u')">u</button><button class="a11y-kb-k" onclick="a11yKbType('i')">i</button><button class="a11y-kb-k" onclick="a11yKbType('o')">o</button><button class="a11y-kb-k" onclick="a11yKbType('p')">p</button></div>
<div style="display:flex;justify-content:center;gap:4px;margin-bottom:4px;"><button class="a11y-kb-k" onclick="a11yKbType('a')">a</button><button class="a11y-kb-k" onclick="a11yKbType('s')">s</button><button class="a11y-kb-k" onclick="a11yKbType('d')">d</button><button class="a11y-kb-k" onclick="a11yKbType('f')">f</button><button class="a11y-kb-k" onclick="a11yKbType('g')">g</button><button class="a11y-kb-k" onclick="a11yKbType('h')">h</button><button class="a11y-kb-k" onclick="a11yKbType('j')">j</button><button class="a11y-kb-k" onclick="a11yKbType('k')">k</button><button class="a11y-kb-k" onclick="a11yKbType('l')">l</button></div>
<div style="display:flex;justify-content:center;gap:4px;margin-bottom:4px;"><button class="a11y-kb-k" onclick="a11yKbType('z')">z</button><button class="a11y-kb-k" onclick="a11yKbType('x')">x</button><button class="a11y-kb-k" onclick="a11yKbType('c')">c</button><button class="a11y-kb-k" onclick="a11yKbType('v')">v</button><button class="a11y-kb-k" onclick="a11yKbType('b')">b</button><button class="a11y-kb-k" onclick="a11yKbType('n')">n</button><button class="a11y-kb-k" onclick="a11yKbType('m')">m</button><button class="a11y-kb-k" style="min-width:60px;" onclick="a11yKbBs()">&#9003;</button></div>
<div style="display:flex;justify-content:center;gap:4px;"><button class="a11y-kb-k" onclick="a11yKbType('@')">@</button><button class="a11y-kb-k" onclick="a11yKbType('.')">.</button><button class="a11y-kb-k" style="flex:1;max-width:250px;" onclick="a11yKbType(' ')">Space</button><button class="a11y-kb-k" onclick="a11yKbType('-')">-</button><button class="a11y-kb-k" style="min-width:60px;" onclick="a11yKbEn()">Enter</button></div>
</div>
<style>.a11y-kb-k{min-width:28px;height:36px;background:#334155;color:white;border:none;border-radius:6px;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;}.a11y-kb-k:hover{background:#475569;}</style>

<!-- GDPR Cookie Consent Banner -->
<div id="cookieConsentBanner" style="display:none;position:fixed;bottom:0;left:0;right:0;background:#111827;color:#e5e7eb;z-index:99999;font-family:Inter,-apple-system,sans-serif;box-shadow:0 -4px 20px rgba(0,0,0,0.3);border-top:1px solid #1f2937;">
  <div style="max-width:1100px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;">
    <div style="flex:1;min-width:260px;">
      <div style="font-size:14px;line-height:1.6;color:#d1d5db;" id="cookieTxt">We use essential cookies to keep the site running. Optional cookies help us improve our service.</div>
      <a href="/es/privacy" target="_blank" style="color:#06B6D4;text-decoration:underline;font-size:13px;" id="cookiePolicyLink">Politica de privacidad</a>
    </div>
    <div style="display:flex;gap:10px;flex-shrink:0;">
      <button onclick="acceptAllCookies()" style="background:#06B6D4;color:white;border:none;padding:10px 22px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;" id="btnCookieAccept">Accept All</button>
      <button onclick="essentialOnlyCookies()" style="background:transparent;color:#9ca3af;border:1px solid #374151;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;" id="btnCookieEssential">Essential Only</button>
    </div>
  </div>
</div>
<script>
(function(){
  var consent=localStorage.getItem('goultra_cookie_consent');
  if(!consent){
    var b=document.getElementById('cookieConsentBanner');if(b)b.style.display='block';
    var p=window.location.pathname;
    var lang=p.indexOf('/he/')>-1?'he':p.indexOf('/ar/')>-1?'ar':p.indexOf('/es/')>-1?'es':p.indexOf('/fr/')>-1?'fr':'en';
    var tx={
      he:{msg:'אנו משתמשים בעוגיות חיוניות כדי להפעיל את האתר. עוגיות אופציונליות עוזרות לנו לשפר את השירות.',link:'מדיניות פרטיות',accept:'אשר הכל',ess:'חיוניות בלבד'},
      ar:{msg:'نستخدم ملفات تعريف الارتباط الأساسية لتشغيل الموقع. ملفات تعريف الارتباط الاختيارية تساعدنا في تحسين الخدمة.',link:'سياسة الخصوصية',accept:'قبول الكل',ess:'الأساسية فقط'},
      es:{msg:'Utilizamos cookies esenciales para el funcionamiento del sitio. Las cookies adicionales nos ayudan a mejorar el servicio.',link:'Politica de privacidad',accept:'Aceptar todo',ess:'Solo esenciales'},fr:{msg:'Nous utilisons des cookies essentiels pour le fonctionnement du site. Les cookies supplementaires nous aident a ameliorer le service.',link:'Politique de confidentialite',accept:'Tout accepter',ess:'Essentiels uniquement'}
    };
    var t=tx[lang];
    if(t){
      var e=document.getElementById('cookieTxt');if(e)e.textContent=t.msg;
      var l=document.getElementById('cookiePolicyLink');if(l)l.textContent=t.link;
      var a=document.getElementById('btnCookieAccept');if(a)a.textContent=t.accept;
      var s=document.getElementById('btnCookieEssential');if(s)s.textContent=t.ess;
    }
  }
})();
function acceptAllCookies(){localStorage.setItem('goultra_cookie_consent','all');document.getElementById('cookieConsentBanner').style.display='none';}
function essentialOnlyCookies(){localStorage.setItem('goultra_cookie_consent','essential');document.getElementById('cookieConsentBanner').style.display='none';}
</script>


<script>
(function() {
  // Auto-detect country on page load via Cloudflare-powered /api/geo endpoint
  function detectCountry() {
    var sel = document.getElementById('country');
    if (!sel) return;
    // Don't override if user already picked something
    if (sel.value && sel.value !== '') return;
    
    // Use the API_BASE if defined (matches existing pattern in this file)
    var apiBase = (typeof API_BASE !== 'undefined') ? API_BASE : '';
    fetch(apiBase + '/api/geo')
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (!data || !data.country) return;
        var code = String(data.country).toUpperCase();
        // Try to find option with matching value
        for (var i = 0; i < sel.options.length; i++) {
          if (sel.options[i].value === code) {
            sel.selectedIndex = i;
            return;
          }
        }
        // Country not in list (e.g. "JP") — fall back to "Other"
        for (var j = 0; j < sel.options.length; j++) {
          if (sel.options[j].value === 'OTHER') {
            sel.selectedIndex = j;
            return;
          }
        }
      })
      .catch(function() { /* silent — let user pick manually */ });
  }
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', detectCountry);
  } else {
    detectCountry();
  }
})();
</script>

<section class="register-footer-section" style="background:#0a0e14;border-top:1px solid rgba(255,255,255,0.05);margin-top:48px;padding:28px 24px 80px 24px;">
  <div style="max-width:980px;margin:0 auto;font-size:12px;line-height:1.7;color:rgba(255,255,255,0.5);" dir="ltr">
    <p data-disclaimer="onboarding" style="margin:0 0 6px 0;"><strong style="color:rgba(255,255,255,0.7);font-weight:600;">Incorporación:</strong> La conexión se realiza a través del proceso de incorporación oficial de Meta. El tiempo de activación lo controla la plataforma WhatsApp Business de Meta y puede variar según la verificación de la cuenta empresarial por parte de Meta.</p>
    <p data-disclaimer="billing" style="margin:0;"><strong style="color:rgba(255,255,255,0.7);font-weight:600;">Facturación:</strong> Los costos de los mensajes de WhatsApp los factura Meta por separado. La suscripción de GoUltra cubre solo el software y no incluye ni añade margen a los cargos por conversaciones de WhatsApp.</p>
  </div>
</section>

</body>
</html>