<!--
╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                            ║
║   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)                                    ║
║     /ru/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>
<html lang="en" 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; }
.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); }
</style>
</head>
<body>

<div class="page-wrapper">

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

    <div class="brand-logo">
      <a href="/" 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">Smart Scheduling</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">Official Meta Cloud API. End-to-end encrypted. GDPR compliant.</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>SSL Secured</span>
      </div>
      <div class="trust-badge">
        <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        <span>PCI Compliant</span>
      </div>
      <div class="trust-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>Meta Verified</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">Create Account</span>
        </div>
        <div class="step-indicator" id="stepInd2">
          <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">3</span>
          <span data-translate="step3_label">Start Trial</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>

            <!-- 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="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</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">Create Account</span>
            </button>
          </form>

          <div class="form-footer">
            <span data-translate="already_account">Already have an account?</span>
            <a href="https://go.goultra.ai/login" 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">Professional Plan</span>
              <span class="payment-plan-price" id="payPlanPrice">$79/month</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">
              First charge of $79 on Feb 15, 2026. Cancel anytime before.
            </div>
          </div>

          <!-- Stripe Elements will mount here -->
          <div class="stripe-placeholder" id="stripeMount">
            <div class="stripe-placeholder-title">Stripe Elements</div>
            <div class="stripe-placeholder-sub" data-translate="stripe_dev_note">Developer: Mount Stripe CardElement here using stripe.elements()</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"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              <span>256-bit SSL</span>
            </div>
            <div class="security-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>PCI DSS</span>
            </div>
            <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">Cancel anytime</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: 'Enterprise Security', bf3_desc: 'Official Meta Cloud API. End-to-end encrypted. GDPR compliant.',
    step1_label: 'Create Account', step2_label: 'Verify Email', step3_label: 'Start Trial',
    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',
    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="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</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: 'First charge of $AMOUNT on DATE. Cancel anytime before.',
    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: 'Meta Cloud API רשמי. הצפנה מקצה לקצה. תואם GDPR.',
    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: 'בחר תוכנית',
    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="/terms" target="_blank">תנאי השימוש</a> ו<a href="/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: 'החיוב הראשון של AMOUNT בתאריך DATE. ניתן לבטל בכל עת.',
    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: 'Meta Cloud API رسمي. تشفير شامل. متوافق مع GDPR.',
    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: 'اختر خطتك',
    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="/terms" target="_blank">شروط الخدمة</a> و<a href="/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: 'اول رسوم AMOUNT في تاريخ DATE. يمكنك الالغاء في اي وقت.',
    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: 'قوية جدا'
  },
  ru: {
    brand_h1: 'Начните <span>7-дневный бесплатный период</span>',
    brand_sub: 'Настройте автоматизацию WhatsApp Business за 2 минуты. Без оплаты сегодня.',
    bf1_title: 'Мгновенная настройка', bf1_desc: 'Подключите WhatsApp Business и начните отправку за минуты.',
    bf2_title: 'Умное планирование', bf2_desc: 'Автоматические напоминания синхронизированные с Google Calendar.',
    bf3_title: 'Корпоративная безопасность', bf3_desc: 'Официальный Meta Cloud API. Сквозное шифрование. Соответствие GDPR.',
    step1_label: 'Создать аккаунт', step2_label: 'Подтвердить email', step3_label: 'Начать пробный',
    reg_title: 'Создайте аккаунт', reg_subtitle: 'Все планы включают 7-дневный бесплатный период. Без оплаты сегодня.',
    label_name: 'Полное имя <span class="required">*</span>', label_company: 'Название компании <span class="required">*</span>',
    label_email: 'Рабочий email <span class="required">*</span>', label_password: 'Пароль <span class="required">*</span>',
    label_plan: 'Выберите план',
    ph_name: 'Иван Иванов', ph_company: 'Название компании', ph_email: 'you@company.com',
    ph_password: 'Мин. 8 символов, 1 цифра, 1 спецсимвол',
    err_name: 'Введите полное имя', err_company: 'Введите название компании',
    err_email: 'Введите корректный рабочий email', err_password: 'Мин. 8 символов, 1 цифра, 1 спецсимвол',
    plan_starter: 'Стартовый', plan_pro: 'Профессиональный', plan_enterprise: 'Корпоративный', plan_popular: 'Популярный',
    compliance_title: 'Необходимые соглашения',
    cb_terms: 'Я согласен с <a href="/terms" target="_blank">Условиями использования</a> и <a href="/privacy" target="_blank">Политикой конфиденциальности</a>.',
    cb_antispam: '<strong>Политика антиспама:</strong> Я подтверждаю, что буду отправлять сообщения только контактам с явного согласия. Я понимаю, что блокировка аккаунта немедленная при нарушениях.',
    cb_billing: '<strong>Подтверждение оплаты:</strong> Я понимаю, что подписка покрывает только лицензию на ПО. Расходы на сообщения WhatsApp оплачиваются отдельно через Meta.',
    btn_create: 'Создать аккаунт',
    already_account: 'Уже есть аккаунт?', login_link: 'Войти',
    verify_title: 'Проверьте почту', verify_text: 'Мы отправили ссылку для подтверждения на:',
    verify_instructions: 'Нажмите на ссылку в письме для подтверждения аккаунта и перехода к следующему шагу.',
    verify_no_email: 'Не получили письмо? ', verify_resend: 'Отправить повторно',
    verify_wrong_email: 'Неправильный email? Вернитесь и исправьте',
    pay_title: 'Начните бесплатный период', pay_subtitle: 'Добавьте способ оплаты для активации 7-дневного пробного периода. Оплата сегодня не взимается.',
    pay_trial_period: '7-дневный бесплатный период включен', pay_total_today: 'К оплате сегодня',
    pay_charge_note: 'Первый платеж AMOUNT в дату DATE. Отмена в любое время.',
    stripe_dev_note: 'Developer: Mount Stripe CardElement here',
    btn_start_trial: 'Начать 7-дневный бесплатный период', badge_guarantee: 'Отмена в любое время',
    err_checkboxes: 'Пожалуйста, подтвердите все необходимые соглашения.',
    err_email_exists: 'Этот email уже зарегистрирован. Попробуйте войти.',
    err_connection: 'Ошибка подключения. Попробуйте еще раз.',
    trial_days_free: 'дней бесплатно',
    strength_weak: 'Слабый', strength_medium: 'Средний', strength_strong: 'Сильный', strength_very_strong: 'Очень сильный'
  }
};

/* ─── Detect Language from URL ─── */
/**
 * detectLang() — Detect language from URL path
 * @returns {string} — "en", "he", "ar", or "ru"
 * 
 * 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, ru: 1 };
  if (supported[path]) return path;
  return 'en';
}

/* ─── Apply Translations ─── */
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;

/**
 * loadPlans() — Fetch active plans from API and render plan cards
 * Called on page load. Falls back to error message if API unavailable.
 */
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;
      var html = '';
      data.plans.forEach(function(plan) {
        // Get translated name from i18n_json if available
        var planName = plan.name;
        var planDesc = plan.description || '';
        if (plan.i18n && plan.i18n[currentLang]) {
          planName = plan.i18n[currentLang].name || planName;
          planDesc = plan.i18n[currentLang].description || planDesc;
        }
        var currency = plan.currency || 'USD';
        var symbol = currency === 'ILS' ? String.fromCharCode(8362) : '$';
        var trialText = '';
        if (plan.trial_days && plan.trial_days > 0) {
          trialText = '<div class="plan-trial">' + plan.trial_days + ' ' + ((T[currentLang] || T.en).trial_days_free || 'days free trial') + '</div>';
        }
        var popularBadge = '';
        if (plan.is_popular) {
          popularBadge = '<div class="plan-badge">' + ((T[currentLang] || T.en).plan_popular || 'Most Popular') + '</div>';
        }
        html += '<label class="plan-option' + (plan.is_popular ? ' selected' : '') + '" onclick="selectPlan(' + "'" + plan.id + "'" + ')">' +
          '<input type="radio" name="plan" value="' + plan.id + '"' + (plan.is_popular ? ' checked' : '') + '>' +
          popularBadge +
          '<div class="plan-name">' + planName + '</div>' +
          '<div class="plan-price">' + symbol + plan.price_monthly + '<span>/mo</span></div>' +
          trialText +
          '</label>';
        if (plan.is_popular) selectedPlanId = plan.id;
      });
      container.innerHTML = html;
      // If no popular plan, select the first
      if (!selectedPlanId && data.plans.length > 0) {
        selectPlan(data.plans[0].id);
      }
    })
    .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>';
    });
}

/**
 * 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 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
  };
  
  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) {
      goToStep(2);
    } 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 alert-error';
      alert.textContent = errorMsg;
    }
  })
  .catch(function(err) {
    btn.classList.remove('loading'); btn.disabled = false;
    alert.className = 'alert 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;
      }
      var currency = plan.currency || 'USD';
      var symbol = currency === 'ILS' ? String.fromCharCode(8362) : '$';
      document.getElementById('payPlanName').textContent = planName;
      document.getElementById('payPlanPrice').textContent = symbol + plan.price_monthly + '/month';

      var d = new Date();
      var trialDays = plan.trial_days || 0;
      if (trialDays > 0) {
        d.setDate(d.getDate() + trialDays);
        var dateStr = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
        document.getElementById('payTrialNote').textContent = 'First charge of ' + symbol + plan.price_monthly + ' on ' + dateStr + '. Cancel anytime before.';
      } else {
        document.getElementById('payTrialNote').textContent = 'You will be charged ' + symbol + plan.price_monthly + ' today.';
      }
    }
  }

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

/* ─── Resend Email ─── */
/**
 * resendEmail() — Resend verification email
 * 
 * TODO: Call POST /api/auth/resend-verification
 * After sending: disables button for 60s with countdown timer.
 * Prevents spam-clicking the resend button.
 */
function resendEmail() {
  var btn = document.getElementById('resendBtn');
  btn.disabled = true;
  var seconds = 60;
  var timer = document.getElementById('resendTimer');

  /* DEVELOPER: Call POST /api/auth/resend-verification { email } */

  var interval = setInterval(function() {
    seconds--;
    timer.textContent = 'Resend available in ' + seconds + 's';
    if (seconds <= 0) {
      clearInterval(interval);
      btn.disabled = false;
      timer.textContent = '';
    }
  }, 1000);
}

/* ─── Payment Handler ─── */
/**
 * handlePayment() — Process payment (Step 3)
 * 
 * TODO: Replace setTimeout with actual Stripe integration:
 *   1. Create PaymentMethod from Stripe Elements (mounted in #stripeMount)
 *   2. POST /api/billing/subscribe { payment_method_id, plan }
 *   3. Backend creates Stripe Customer + Subscription (trial: 7 days)
 *   4. On success: redirect to go.goultra.ai/dashboard
 *   5. On error: show card error message
 * 
 * Currently mocked: redirects to dashboard after 2s delay.
 */
function handlePayment() {
  var btn = document.getElementById('payBtn');
  btn.classList.add('loading'); btn.disabled = true;

  /* ──────────────────────────────────────────
     DEVELOPER: Replace with Stripe integration:

     1. Create PaymentMethod from Stripe Elements
     2. POST /api/billing/subscribe
        Body: { payment_method_id, plan }
     3. Backend creates Stripe Customer + Subscription (trial_period_days: 7)
     4. On success: redirect to dashboard
     5. On error: show card error message
     ────────────────────────────────────────�
     ────────────────────────────────────────── */
  setTimeout(function() {
    btn.classList.remove('loading'); btn.disabled = false;
    window.location.href = 'https://go.goultra.ai/dashboard';
  }, 2000);
}

/* ─── Detect Language from URL ─── */
/**
 * detectLang() — Detect language from URL path
 * @returns {string} — "en", "he", "ar", or "ru"
 * 
 * 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, ru: 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);
}
loadPlans();
</script>
</body>
</html>