justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
new-site/site/public/order/canada-crtc/index.html
justin f8cd37ac8c Initial commit — Performance West telecom compliance platform 
Includes: API (Express/TypeScript), Astro site, Python workers,
document generators, FCC compliance tools, Canada CRTC formation,
Ansible infrastructure, and deployment scripts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-27 06:54:22 -05:00

109 lines
No EOL
124 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Order your complete Canadian telecom carrier package: BC incorporation + CRTC registration + BITS international service. $3,899 all-in including government fees. No Canadian citizenship required for resellers."><link rel="canonical" href="https://performancewest.net/order/canada-crtc/"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><!-- Open Graph --><meta property="og:type" content="website"><meta property="og:url" content="https://performancewest.net/order/canada-crtc/"><meta property="og:title" content="Canadian CRTC Telecom Carrier Package | Performance West Inc."><meta property="og:description" content="Order your complete Canadian telecom carrier package: BC incorporation + CRTC registration + BITS international service. $3,899 all-in including government fees. No Canadian citizenship required for resellers."><!-- Twitter --><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Canadian CRTC Telecom Carrier Package | Performance West Inc."><meta name="twitter:description" content="Order your complete Canadian telecom carrier package: BC incorporation + CRTC registration + BITS international service. $3,899 all-in including government fees. No Canadian citizenship required for resellers."><script>
window.__PW_API = (function() {
var h = window.location.hostname;
if (h === "localhost" || h === "127.0.0.1") return "http://" + h + ":3001";
if (h === "dev.performancewest.net") return "https://api.dev.performancewest.net";
return "https://api.performancewest.net";
})();
</script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"><title>Canadian CRTC Telecom Carrier Package | Performance West Inc.</title><script defer src="https://analytics.performancewest.net/script.js" data-website-id="55250014-ee15-44ac-a1f6-81dabad3fe0f"></script><link rel="stylesheet" href="/_astro/about.DhmoKVOS.css"><script type="module" src="/_astro/hoisted.iRmzRB-L.js"></script></head> <body class="min-h-screen flex flex-col"> <!-- Navigation --> <nav class="border-b border-gray-200 bg-white sticky top-0 z-50"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-24 items-center"> <a href="/" class="flex items-center"> <img src="/images/logo.png" alt="Performance West" class="h-20 w-auto" width="83" height="70"> </a> <div class="hidden md:flex items-center gap-8"> <!-- Services dropdown --> <div class="relative" id="services-dropdown"> <button type="button" class="text-sm text-gray-600 hover:text-gray-900 inline-flex items-center gap-1" id="services-btn">
Services
<svg class="w-3.5 h-3.5 transition-transform" id="services-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg> </button> <div id="services-menu" class="absolute left-1/2 -translate-x-1/2 top-full mt-2 rounded-xl border border-gray-200 bg-white shadow-xl hidden z-50" style="width: 720px;"> <div class="grid grid-cols-3 gap-0 p-4"> <!-- Column 1 --> <div class="pr-4 border-r border-gray-100"> <p class="text-[11px] font-semibold uppercase tracking-wider text-blue-500 mb-2">Telecom</p> <a href="/services/telecom/fcc-499a" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">FCC 499A Filing</a> <a href="/services/telecom/stir-shaken" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">STIR/SHAKEN</a> <a href="/services/telecom/ipes-isp" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">IPES & ISP Registration</a> <a href="/services/telecom/database-management" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Telecom Databases</a> <a href="/services/telecom/state-puc" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">State PUC/PSC Filings</a> <a href="/services/telecom/canada-crtc" class="block py-1.5 text-sm font-medium text-blue-600 hover:text-blue-800">Canada CRTC Package <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-red-500 text-white ml-1 animate-pulse">HOT</span></a> <a href="/tools/fcc-compliance-check" class="block py-1.5 text-sm font-medium text-green-600 hover:text-green-800">FCC Compliance Check <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-green-500 text-white ml-1">FREE</span></a> </div> <!-- Column 2 --> <div class="px-4 border-r border-gray-100"> <p class="text-[11px] font-semibold uppercase tracking-wider text-purple-500 mb-2">Data Privacy</p> <a href="/services/privacy/ccpa-audit" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">CCPA/CPRA Audit</a> <a href="/services/privacy/privacy-policy" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Privacy Policy Review</a> <a href="/services/privacy/data-mapping" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Data Mapping</a> <a href="/services/privacy/breach-response" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Breach Response Plan</a> <p class="text-[11px] font-semibold uppercase tracking-wider text-green-500 mb-2 mt-4">TCPA</p> <a href="/services/tcpa/consent-audit" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Consent Audit</a> <a href="/services/tcpa/dnc-compliance" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">DNC Compliance</a> <a href="/services/tcpa/campaign-review" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Campaign Review</a> </div> <!-- Column 3 --> <div class="pl-4"> <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2">Corporate</p> <a href="/services/corporate/formation" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Business Formation</a> <a href="/services/corporate/state-registration" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">State Registration</a> <a href="/services/corporate/annual-reports" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Annual Reports</a> <a href="/services/corporate/registered-agent" class="block py-1.5 text-sm text-gray-700 hover:text-pw-700">Registered Agent</a> <a href="/order/formation" class="mt-3 block py-2 px-3 text-sm font-medium text-white bg-pw-700 hover:bg-pw-800 rounded-lg text-center transition-colors">Form a Business</a> </div> </div> </div> </div> <a href="/services" class="text-sm text-gray-600 hover:text-gray-900">All Services</a> <a href="/pricing" class="text-sm text-gray-600 hover:text-gray-900">Pricing</a> <a href="/tools/contractor-quiz" class="text-sm text-gray-600 hover:text-gray-900">Free Tools</a> <a href="/contact" class="text-sm text-gray-600 hover:text-gray-900">Contact</a> <a href="/order/formation" class="ml-2 px-4 py-2 text-sm font-medium text-white bg-pw-700 hover:bg-pw-800 rounded-lg transition-colors">Form a Business</a> <!-- Account button — links to ERPNext portal --> <a href="https://portal.performancewest.net" id="nav-login-btn" class="ml-1 flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-600 hover:text-pw-700 hover:bg-pw-50 rounded-lg transition-colors border border-gray-200 hover:border-pw-300"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path></svg>
Client Portal
</a> <!-- Account button — logged in (hidden until session confirmed) --> <div id="nav-account-btn" class="hidden relative ml-1" id="nav-account-dropdown-root"> <button type="button" id="nav-account-trigger" class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-pw-700 hover:bg-pw-50 rounded-lg transition-colors border border-pw-200"> <div class="w-6 h-6 rounded-full bg-pw-600 flex items-center justify-center shrink-0"> <svg class="w-3.5 h-3.5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"></path></svg> </div> <span id="nav-greeting" class="max-w-[120px] truncate">My Account</span> <svg class="w-3.5 h-3.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg> </button> <!-- Dropdown --> <div id="nav-account-menu" class="absolute right-0 top-full mt-1 w-48 bg-white rounded-xl border border-gray-200 shadow-lg hidden z-50 py-1"> <div class="px-4 py-2 border-b border-gray-100"> <p class="text-xs text-gray-500">Signed in as</p> <p id="nav-account-email" class="text-xs font-medium text-gray-800 truncate"></p> </div> <button type="button" id="nav-logout-btn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
Sign out
</button> </div> </div> </div> <!-- Mobile menu button --> <button type="button" class="md:hidden text-gray-600 hover:text-gray-900" id="mobile-menu-btn"> <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg> </button> </div> </div> <!-- Mobile menu --> <div id="mobile-menu" class="md:hidden hidden border-t border-gray-200 bg-white"> <div class="px-4 py-3 space-y-1"> <p class="text-xs font-semibold text-blue-500 uppercase tracking-wider px-2 pt-1">Telecom</p> <a href="/services/telecom/fcc-499a" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">FCC 499A Filing</a> <a href="/services/telecom/stir-shaken" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">STIR/SHAKEN</a> <a href="/services/telecom/ipes-isp" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">IPES & ISP Registration</a> <a href="/services/telecom/database-management" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Telecom Databases</a> <a href="/services/telecom/state-puc" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">State PUC/PSC</a> <a href="/services/telecom/canada-crtc" class="block px-2 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50 rounded">Canada CRTC Package <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-red-500 text-white ml-1 animate-pulse">HOT</span></a> <p class="text-xs font-semibold text-purple-500 uppercase tracking-wider px-2 pt-3">Data Privacy</p> <a href="/services/privacy/ccpa-audit" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">CCPA/CPRA Audit</a> <a href="/services/privacy/privacy-policy" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Privacy Policy Review</a> <a href="/services/privacy/data-mapping" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Data Mapping</a> <a href="/services/privacy/breach-response" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Breach Response Plan</a> <p class="text-xs font-semibold text-green-500 uppercase tracking-wider px-2 pt-3">TCPA</p> <a href="/services/tcpa/consent-audit" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Consent Audit</a> <a href="/services/tcpa/dnc-compliance" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">DNC Compliance</a> <a href="/services/tcpa/campaign-review" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Campaign Review</a> <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider px-2 pt-3">Corporate</p> <a href="/services/corporate/formation" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Business Formation</a> <a href="/services/corporate/state-registration" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">State Registration</a> <a href="/services/corporate/annual-reports" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Annual Reports</a> <a href="/services/corporate/registered-agent" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Registered Agent</a> <div class="border-t border-gray-100 my-2"></div> <a href="/services" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">All Services</a> <a href="/pricing" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Pricing</a> <a href="/tools/contractor-quiz" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Free Tools</a> <a href="/contact" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Contact</a> <a href="/order/formation" class="block mx-2 mt-2 px-4 py-2.5 text-sm font-medium text-white bg-pw-700 hover:bg-pw-800 rounded-lg text-center transition-colors">Form a Business</a> </div> </div> </nav> <main class="flex-1"> <section class="bg-pw-950 py-12 sm:py-16"> <div class="max-w-4xl mx-auto px-4 text-center"> <h1 class="text-3xl sm:text-4xl font-bold text-white mb-3">Canadian CRTC Telecom Carrier Package</h1> <p class="text-gray-300 text-base sm:text-lg max-w-2xl mx-auto mb-3">
Canadian corporation (BC or Ontario) + CRTC domestic reseller + BITS international service. Complete turnkey setup for $3,899.
</p> <p class="text-sm text-gray-400">No Canadian citizenship required for resellers.</p> </div> </section> <section class="bg-gray-50 border-b border-gray-200 py-8"> <div class="max-w-4xl mx-auto px-4"> <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-5 text-center">Everything included in your package</h2> <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-3"> <!-- Corporate setup --> <div> <p class="text-xs font-bold text-pw-700 uppercase tracking-wide mb-2">Canadian Corporation</p> <ul class="space-y-1.5"> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>Provincial incorporation filing (BC or Ontario)</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>Name search &amp; reservation (if named co.)</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>Canadian registered office (virtual mailbox)</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>Corporate binder (digital PDF + physical copy)</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>Canadian business banking referral</li> </ul> </div> <!-- CRTC & telecom --> <div> <p class="text-xs font-bold text-pw-700 uppercase tracking-wide mb-2">CRTC &amp; Telecom</p> <ul class="space-y-1.5"> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>CRTC registration — Voice, Data &amp; Wireless reseller</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>BITS international service registration</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>CCTS complaint-handling registration</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>Canadian phone number (DID)</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>3 hrs Canadian accounting support</li> </ul> </div> <!-- Digital presence --> <div> <p class="text-xs font-bold text-pw-700 uppercase tracking-wide mb-2">Digital Presence</p> <ul class="space-y-1.5"> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>.ca domain registration</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>Canadian business email address</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>Hosted landing page / web presence</li> <li class="flex items-start gap-2 text-sm text-gray-700"><svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>Government fees (passed through at cost)</li> </ul> </div> </div> </div> </section> <section class="py-4 bg-gray-50 border-b border-gray-100"> <div class="max-w-4xl mx-auto px-4"> <div class="flex flex-wrap items-center justify-center gap-5 sm:gap-8"> <!-- SSL Secured --> <div class="flex items-center gap-1.5 text-gray-500" title="256-bit TLS encryption on all connections"> <svg class="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"></path></svg> <div class="leading-tight"> <span class="text-[11px] font-semibold text-gray-700 block">SSL Secured</span> <span class="text-[9px] text-gray-400">256-bit encryption</span> </div> </div> <!-- SSL Labs A+ --> <a href="https://www.ssllabs.com/ssltest/analyze.html?d=performancewest.net" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-gray-500 hover:text-gray-700 transition-colors" title="Qualys SSL Labs A+ Rating"> <div class="w-6 h-6 rounded bg-green-600 flex items-center justify-center"> <span class="text-white text-[10px] font-bold">A+</span> </div> <div class="leading-tight"> <span class="text-[11px] font-semibold text-gray-700 block">SSL Labs</span> <span class="text-[9px] text-gray-400">Qualys rated</span> </div> </a> <!-- Security Headers --> <a href="https://securityheaders.com/?q=https%3A%2F%2Fperformancewest.net%2F" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-gray-500 hover:text-gray-700 transition-colors" title="SecurityHeaders.com A+ Grade"> <div class="w-6 h-6 rounded bg-purple-600 flex items-center justify-center"> <span class="text-white text-[10px] font-bold">A+</span> </div> <div class="leading-tight"> <span class="text-[11px] font-semibold text-gray-700 block">Security Headers</span> <span class="text-[9px] text-gray-400">A+ rated</span> </div> </a> <!-- Google Safe Browsing --> <a href="https://transparencyreport.google.com/safe-browsing/search?url=performancewest.net" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-gray-500 hover:text-gray-700 transition-colors" title="Verified safe by Google Safe Browsing"> <svg class="w-6 h-6 text-blue-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg> <div class="leading-tight"> <span class="text-[11px] font-semibold text-gray-700 block">Google Safe</span> <span class="text-[9px] text-gray-400">No threats found</span> </div> </a> <!-- Stripe Payments --> <div class="flex items-center gap-1.5 text-gray-500" title="Payments securely processed by Stripe"> <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="4" fill="#635BFF"></rect><path d="M11.2 9.6c0-.66.54-.92 1.44-.92.96 0 2.16.3 3.12.82V6.82c-1.04-.42-2.08-.58-3.12-.58-2.56 0-4.24 1.34-4.24 3.56 0 3.48 4.78 2.92 4.78 4.42 0 .78-.68 1.04-1.64 1.04-1.42 0-2.46-.42-3.54-1.06v2.7c1.2.52 2.42.74 3.54.74 2.62 0 4.42-1.3 4.42-3.56-.02-3.74-4.76-3.08-4.76-4.28z" fill="white"></path></svg> <div class="leading-tight"> <span class="text-[11px] font-semibold text-gray-700 block">Stripe</span> <span class="text-[9px] text-gray-400">Secure payments</span> </div> </div> <!-- Satisfaction Guarantee --> <div class="flex items-center gap-1.5 text-gray-500" title="100% satisfaction guarantee or your money back"> <svg class="w-7 h-7" viewBox="0 0 40 40" fill="none"> <circle cx="20" cy="20" r="19" fill="#059669" stroke="#047857" stroke-width="1"></circle> <path d="M20 4 L23 14 L34 14 L25.5 20.5 L28.5 31 L20 24.5 L11.5 31 L14.5 20.5 L6 14 L17 14 Z" fill="#FCD34D" stroke="#D97706" stroke-width="0.5"></path> <path d="M14 20 L18 24 L27 15" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> <div class="leading-tight"> <span class="text-[11px] font-semibold text-gray-700 block">Satisfaction</span> <span class="text-[9px] text-gray-400">100% guaranteed</span> </div> </div> <!-- Trustpilot --> <a href="https://www.trustpilot.com/review/performancewest.net" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-gray-500 hover:text-gray-700 transition-colors" title="Read our reviews on Trustpilot"> <svg class="w-6 h-6" viewBox="0 0 40 40" fill="none"> <rect width="40" height="40" rx="6" fill="#00B67A"></rect> <path d="M20 8l3.1 9.5H33l-8 5.8 3.1 9.5L20 27l-8.1 5.8 3.1-9.5-8-5.8h9.9z" fill="white"></path> <path d="M20 8l3.1 9.5H33l-8 5.8" fill="#005128" opacity="0.3"></path> </svg> <div class="leading-tight"> <span class="text-[11px] font-semibold text-gray-700 block">Trustpilot</span> <span class="text-[9px] text-gray-400">Read reviews</span> </div> </a> <!-- Payment cards --> <div class="flex items-center gap-1.5" title="We accept all major cards"> <img src="/images/cards/visa.png" alt="Visa" class="h-6 w-auto" loading="lazy"> <img src="/images/cards/mastercard.svg" alt="Mastercard" class="h-7 w-auto" loading="lazy"> <img src="/images/cards/amex.png" alt="American Express" class="h-7 w-auto" loading="lazy"> <img src="/images/cards/discover.svg" alt="Discover" class="h-7 w-auto" loading="lazy"> </div> </div> </div> </section> <section class="py-10 sm:py-14"> <div class="max-w-3xl mx-auto px-4"> <!-- Scroll anchor for step navigation --> <div id="form-top"></div> <!-- ── Account login banner ─────────────────────────────────────────── --> <div id="auth-banner" class="mb-8 rounded-xl border border-pw-200 bg-pw-50 p-4"> <!-- Logged out state --> <div id="auth-logged-out"> <div class="flex flex-col sm:flex-row sm:items-center gap-4"> <div class="flex-1 min-w-0"> <p class="text-sm font-semibold text-pw-900">Have an account? Sign in to prefill your details.</p> <p class="text-xs text-pw-700 mt-0.5">Returning clients can pull in saved directors, addresses, and contact info from prior orders.</p> </div> <button type="button" id="auth-open-modal-btn" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-pw-700 text-white text-sm font-medium hover:bg-pw-800 transition-colors whitespace-nowrap shrink-0"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path></svg>
Sign In
</button> </div> </div> <!-- Logged in state (hidden until session confirmed) --> <div id="auth-logged-in" class="hidden"> <div class="flex items-center justify-between gap-4"> <div class="flex items-center gap-3"> <div class="w-8 h-8 rounded-full bg-pw-600 flex items-center justify-center shrink-0"> <svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path></svg> </div> <div> <p class="text-sm font-semibold text-pw-900" id="auth-welcome">Welcome back</p> <p class="text-xs text-pw-700" id="auth-email-display"></p> </div> </div> <button type="button" id="auth-logout-btn" class="text-xs text-pw-600 hover:text-pw-800 underline underline-offset-2">
Sign out
</button> </div> <!-- Prior orders prefill picker (shown only if prior orders exist) --> <div id="auth-prior-orders" class="hidden mt-4 pt-4 border-t border-pw-200"> <label class="block text-xs font-medium text-pw-800 mb-2">Prefill from a prior order</label> <select id="auth-order-select" class="w-full rounded-lg border border-pw-300 px-3 py-2 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-pw-500 bg-white"> <option value="">— Select an order to prefill —</option> </select> </div> </div> </div> <!-- Progress indicator --> <nav id="progress" class="mb-10" aria-label="Order progress"> <ol class="flex items-center gap-0"> <li class="flex-1" data-step="1"> <div class="flex items-center"> <span class="step-dot flex items-center justify-center w-8 h-8 rounded-full border-2 border-pw-600 bg-pw-600 text-white text-xs font-bold shrink-0">1</span> <span class="step-line hidden sm:block flex-1 h-0.5 bg-gray-200 mx-2"></span> </div> <p class="mt-1.5 text-xs font-medium text-pw-700 hidden sm:block">Company</p> </li> <li class="flex-1" data-step="2"> <div class="flex items-center"> <span class="step-dot flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300 bg-white text-gray-400 text-xs font-bold shrink-0">2</span> <span class="step-line hidden sm:block flex-1 h-0.5 bg-gray-200 mx-2"></span> </div> <p class="mt-1.5 text-xs font-medium text-gray-400 hidden sm:block">Director</p> </li> <li class="flex-1" data-step="3"> <div class="flex items-center"> <span class="step-dot flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300 bg-white text-gray-400 text-xs font-bold shrink-0">3</span> <span class="step-line hidden sm:block flex-1 h-0.5 bg-gray-200 mx-2"></span> </div> <p class="mt-1.5 text-xs font-medium text-gray-400 hidden sm:block">Telecom</p> </li> <li class="flex-1" data-step="4"> <div class="flex items-center"> <span class="step-dot flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300 bg-white text-gray-400 text-xs font-bold shrink-0">4</span> <span class="step-line hidden sm:block flex-1 h-0.5 bg-gray-200 mx-2"></span> </div> <p class="mt-1.5 text-xs font-medium text-gray-400 hidden sm:block">ID Upload</p> </li> <li class="flex-1" data-step="5"> <div class="flex items-center"> <span class="step-dot flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300 bg-white text-gray-400 text-xs font-bold shrink-0">5</span> </div> <p class="mt-1.5 text-xs font-medium text-gray-400 hidden sm:block">Review</p> </li> </ol> </nav> <form id="crtc-form" novalidate> <!-- ======================== STEP 1: Company Type & Details ======================== --> <div id="step-1" class="step-panel"> <h2 class="text-xl font-bold text-gray-900 mb-1">Company Type & Details</h2> <p class="text-sm text-gray-500 mb-1">How your company is incorporated determines how you appear in the CRTC carrier directory — which is public and viewed by wholesale vendors, interconnection partners, and regulators.</p> <div class="space-y-5"> <!-- Incorporation Province --> <fieldset> <legend class="block text-sm font-medium text-gray-700 mb-2">Incorporation Province <span class="text-red-500">*</span></legend> <div class="flex gap-3"> <label class="province-radio flex-1 relative flex items-center gap-3 rounded-lg border-2 border-pw-500 bg-pw-50 p-3 cursor-pointer hover:border-pw-400 transition-colors"> <input type="radio" name="incorporation_province" value="BC" class="sr-only peer" checked> <span class="w-4 h-4 rounded-full border-2 border-pw-600 bg-pw-600 transition-colors shrink-0 flex items-center justify-center"> <span class="w-1.5 h-1.5 rounded-full bg-white"></span> </span> <div> <p class="text-sm font-semibold text-gray-900">British Columbia</p> <p class="text-xs text-gray-500">Gov fee ~C$350</p> </div> </label> <label class="province-radio flex-1 relative flex items-center gap-3 rounded-lg border-2 border-gray-200 p-3 cursor-pointer hover:border-pw-400 transition-colors"> <input type="radio" name="incorporation_province" value="ON" class="sr-only peer"> <span class="w-4 h-4 rounded-full border-2 border-gray-300 transition-colors shrink-0 flex items-center justify-center"> <span class="w-1.5 h-1.5 rounded-full bg-white opacity-0"></span> </span> <div> <p class="text-sm font-semibold text-gray-900">Ontario</p> <p class="text-xs text-gray-500">Gov fee ~C$360</p> </div> </label> </div> <p class="text-xs text-gray-400 mt-1.5">Both provinces work identically for CRTC registration. Choose based on your preferred registered office location.</p> <input type="hidden" id="selected_province" name="incorporation_province" value="BC"> </fieldset> <!-- Company type --> <fieldset> <legend class="block text-sm font-medium text-gray-700 mb-2">Company Type <span class="text-red-500">*</span></legend> <div class="flex flex-col gap-3"> <!-- Option 1: Numbered --> <label class="company-type-radio relative flex items-start gap-3 rounded-lg border-2 border-pw-500 bg-pw-50 p-4 cursor-pointer hover:border-pw-400 transition-colors"> <input type="radio" name="company_type" value="numbered" class="sr-only peer" checked> <span class="w-4 h-4 mt-0.5 rounded-full border-2 border-pw-600 bg-pw-600 transition-colors shrink-0 flex items-center justify-center"> <span class="w-1.5 h-1.5 rounded-full bg-white"></span> </span> <div class="flex-1 min-w-0"> <div class="flex items-center gap-2 flex-wrap"> <p class="text-sm font-semibold text-gray-900">Numbered Company</p> <span class="text-[10px] font-medium px-1.5 py-0.5 rounded bg-green-100 text-green-700">Fastest</span> </div> <p class="text-xs text-gray-500 mt-1">BC auto-assigns a number — e.g. <span class="font-mono">1234567 B.C. Ltd.</span> No name reservation needed, no waiting.</p> <div class="mt-2 rounded bg-gray-100 px-3 py-2 text-xs text-gray-600"> <span class="font-semibold text-gray-700">CRTC directory:</span> Listed as <span class="font-mono">1234567 B.C. Ltd.</span> — your number, not a brand name. Preferred by white-label operators and wholesale-only carriers who deliberately don't want their corporate identity visible to end users or competitors in the public registry.
</div> <p class="text-xs text-gray-400 mt-1.5">Service fee: <strong class="text-gray-600">$3,899</strong> + ~C$350 gov fee passed through at cost.</p> </div> </label> <!-- Option 2: Numbered + Trade Name --> <label class="company-type-radio relative flex items-start gap-3 rounded-lg border-2 border-gray-200 p-4 cursor-pointer hover:border-pw-300 transition-colors"> <input type="radio" name="company_type" value="numbered_tradename" class="sr-only peer"> <span class="w-4 h-4 mt-0.5 rounded-full border-2 border-gray-300 transition-colors shrink-0 flex items-center justify-center"> <span class="w-1.5 h-1.5 rounded-full bg-white hidden"></span> </span> <div class="flex-1 min-w-0"> <div class="flex items-center gap-2 flex-wrap"> <p class="text-sm font-semibold text-gray-900">Numbered Company + Trade Name (DBA)</p> <span class="text-[10px] font-medium px-1.5 py-0.5 rounded bg-blue-100 text-blue-700">Brand name for ops</span> </div> <p class="text-xs text-gray-500 mt-1">Incorporate fast as a numbered company, then we file a trade name (DBA) with BC Registry after incorporation — so it doesn't slow you down. Your brand name can be simple (e.g. "Pacific Telecom") with no required structure or legal ending. Must not conflict with an existing BC name. No trademark required.</p> <div class="mt-2 rounded bg-amber-50 border border-amber-200 px-3 py-2 text-xs text-amber-800"> <span class="font-semibold">CRTC directory:</span> Still listed under your legal numbered name (e.g. <span class="font-mono">1234567 B.C. Ltd.</span>). The trade name is a provincial instrument — the CRTC only records the legal corporate name. Use this option if you want a brand name for invoices, banking, and marketing but don't need it in the CRTC directory.
</div> <p class="text-xs text-gray-400 mt-1.5">Service fee: <strong class="text-gray-600">$3,974</strong> ($3,899 + $75 trade name service) + ~C$390 gov fees passed through at cost.</p> </div> </label> <!-- Option 3: Named Company --> <label class="company-type-radio relative flex items-start gap-3 rounded-lg border-2 border-gray-200 p-4 cursor-pointer hover:border-pw-300 transition-colors"> <input type="radio" name="company_type" value="named" class="sr-only peer"> <span class="w-4 h-4 mt-0.5 rounded-full border-2 border-gray-300 transition-colors shrink-0 flex items-center justify-center"> <span class="w-1.5 h-1.5 rounded-full bg-white hidden"></span> </span> <div class="flex-1 min-w-0"> <div class="flex items-center gap-2 flex-wrap"> <p class="text-sm font-semibold text-gray-900">Named Company</p> <span class="text-[10px] font-medium px-1.5 py-0.5 rounded bg-purple-100 text-purple-700">CRTC brand name</span> </div> <p class="text-xs text-gray-500 mt-1">Choose a corporate name that appears on the CRTC registry. Adds 2–5 business days for BC name reservation. Name must follow BC's three-part structure: <strong>distinctive word + descriptive word + legal ending</strong> — e.g. "Pacific Telecom Solutions Ltd." Names too similar to existing BC companies will be rejected (we take up to 3 choices).</p> <div class="mt-2 rounded bg-green-50 border border-green-200 px-3 py-2 text-xs text-green-800"> <span class="font-semibold">CRTC directory:</span> Listed under your chosen brand name — e.g. <span class="font-mono">Pacific Telecom Solutions Ltd.</span> This is the only option that gets your brand name into the public CRTC carrier registry, which wholesale vendors and interconnection partners use to look you up.
</div> <p class="text-xs text-gray-400 mt-1.5">Service fee: <strong class="text-gray-600">$3,984</strong> ($3,899 + $85 named company service) + ~C$380 gov fees passed through at cost.</p> </div> </label> </div> </fieldset> <!-- Trade name fields (numbered + DBA option) --> <div id="trade-name-fields" class="hidden"> <label for="trade_name" class="block text-sm font-medium text-gray-700 mb-1">Desired Trade Name <span class="text-red-500">*</span></label> <input type="text" id="trade_name" name="trade_name" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="e.g. Pacific Telecom"> <p class="text-xs text-gray-500 mt-1">Simple brand name — no legal ending required. We'll run a name search with BC Registry on your behalf after order. If your name conflicts with an existing registration we'll contact you to choose an alternative before filing.</p> </div> <!-- Named company fields (hidden by default) --> <div id="named-fields" class="space-y-4 hidden"> <p class="text-sm text-gray-600">Provide up to 3 name choices in priority order. We'll run a name availability search with BC Registry on your behalf — if your first choice conflicts we'll work down your list and contact you before filing. Each name must follow BC's three-part structure: <strong>distinctive word + descriptive word + legal ending</strong> (e.g. "Pacific Telecom Solutions Ltd.").</p> <div> <label for="name_choice_1" class="block text-sm font-medium text-gray-700 mb-1">First Choice <span class="text-red-500">*</span></label> <input type="text" id="name_choice_1" name="name_choice_1" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="e.g. Pacific Telecom Solutions"> </div> <div> <label for="name_choice_2" class="block text-sm font-medium text-gray-700 mb-1">Second Choice</label> <input type="text" id="name_choice_2" name="name_choice_2" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Alternative name"> </div> <div> <label for="name_choice_3" class="block text-sm font-medium text-gray-700 mb-1">Third Choice</label> <input type="text" id="name_choice_3" name="name_choice_3" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Alternative name"> </div> </div> <!-- Legal ending --> <div> <label for="legal_ending" class="block text-sm font-medium text-gray-700 mb-1">Legal Ending <span class="text-red-500">*</span></label> <select id="legal_ending" name="legal_ending" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors bg-white"> <option value="Ltd.">Ltd.</option> <option value="Limited">Limited</option> <option value="Inc.">Inc.</option> <option value="Incorporated">Incorporated</option> <option value="Corp.">Corp.</option> <option value="Corporation">Corporation</option> </select> <p class="text-xs text-gray-500 mt-1">BC corporations must include one of these legal endings in their name.</p> </div> <!-- Estimate callout --> <div class="rounded-lg bg-pw-50 border border-pw-200 p-4"> <div class="flex items-center justify-between text-sm"> <span class="text-pw-800 font-medium">Service Fee</span> <span id="estimate-total" class="text-pw-900 font-bold text-lg">$3,899</span> </div> <p id="estimate-addon" class="text-xs text-pw-700 font-medium mt-0.5 hidden"></p> <p class="text-xs text-pw-600 mt-1">+ BC government fees (<span id="estimate-gov-fee">~C$350</span>) passed through at cost</p> </div> </div> </div> <!-- ======================== STEP 2: Director Information ======================== --> <div id="step-2" class="step-panel hidden"> <h2 class="text-xl font-bold text-gray-900 mb-1">Director Information</h2> <p class="text-sm text-gray-500 mb-4">Directors will be listed on the BC corporate registry. A BC corporation requires at least one director. No Canadian citizenship required for resellers.</p> <!-- Additional directors container (JS adds cloned blocks here) --> <div id="additional-directors-container"></div> <!-- Saved director picker (shown when logged in with prior orders) --> <div id="saved-director-picker" class="hidden mb-5"> <label class="block text-xs font-medium text-gray-500 mb-2 uppercase tracking-wide">Use a saved director</label> <select id="saved-director-select" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-pw-500 bg-white"> <option value="">— Select a saved director to prefill —</option> </select> </div> <div class="space-y-5"> <!-- Director name — split into first / middle / last for BC Registry --> <div> <p class="text-sm font-medium text-gray-700 mb-2">Director Full Legal Name <span class="text-red-500">*</span></p> <p class="text-xs text-gray-400 mb-2">As it appears on your government-issued ID. This will be listed on the BC corporate registry.</p> <div class="grid sm:grid-cols-3 gap-3"> <div> <input type="text" id="director_first_name" name="director_first_name" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="First name"> </div> <div> <input type="text" id="director_middle_name" name="director_middle_name" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Middle name (optional)"> </div> <div> <input type="text" id="director_last_name" name="director_last_name" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Last name"> </div> </div> <!-- Hidden field for backward compat — JS concatenates first+middle+last --> <input type="hidden" id="director_name" name="director_name"> </div> <div> <p class="text-sm font-medium text-gray-700 mb-2">Director Address <span class="text-red-500">*</span></p> <div class="space-y-3"> <!-- Saved address picker (shown when logged in) --> <div id="saved-address-picker" class="hidden"> <select id="saved-address-select" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-pw-500 bg-white mb-3"> <option value="">— Use a saved address —</option> </select> </div> <!-- Country first — drives state/province field --> <select id="director_country" name="director_country" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors bg-white"> <option value="">Country</option> <option value="US">United States</option> <option value="CA">Canada</option> <option value="GB">United Kingdom</option> <option value="AU">Australia</option> <option value="NZ">New Zealand</option> <option value="IE">Ireland</option> <option value="DE">Germany</option> <option value="FR">France</option> <option value="NL">Netherlands</option> <option value="BE">Belgium</option> <option value="CH">Switzerland</option> <option value="AT">Austria</option> <option value="SE">Sweden</option> <option value="NO">Norway</option> <option value="DK">Denmark</option> <option value="FI">Finland</option> <option value="ES">Spain</option> <option value="PT">Portugal</option> <option value="IT">Italy</option> <option value="PL">Poland</option> <option value="CZ">Czech Republic</option> <option value="SK">Slovakia</option> <option value="HU">Hungary</option> <option value="RO">Romania</option> <option value="BG">Bulgaria</option> <option value="GR">Greece</option> <option value="HR">Croatia</option> <option value="SI">Slovenia</option> <option value="EE">Estonia</option> <option value="LV">Latvia</option> <option value="LT">Lithuania</option> <option value="LU">Luxembourg</option> <option value="MT">Malta</option> <option value="CY">Cyprus</option> <option value="IS">Iceland</option> <option value="JP">Japan</option> <option value="KR">South Korea</option> <option value="SG">Singapore</option> <option value="HK">Hong Kong</option> <option value="TW">Taiwan</option> <option value="CN">China</option> <option value="IN">India</option> <option value="PK">Pakistan</option> <option value="BD">Bangladesh</option> <option value="LK">Sri Lanka</option> <option value="PH">Philippines</option> <option value="VN">Vietnam</option> <option value="TH">Thailand</option> <option value="MY">Malaysia</option> <option value="ID">Indonesia</option> <option value="KH">Cambodia</option> <option value="AE">United Arab Emirates</option> <option value="SA">Saudi Arabia</option> <option value="QA">Qatar</option> <option value="KW">Kuwait</option> <option value="BH">Bahrain</option> <option value="OM">Oman</option> <option value="JO">Jordan</option> <option value="LB">Lebanon</option> <option value="IL">Israel</option> <option value="TR">Turkey</option> <option value="EG">Egypt</option> <option value="MA">Morocco</option> <option value="TN">Tunisia</option> <option value="DZ">Algeria</option> <option value="NG">Nigeria</option> <option value="GH">Ghana</option> <option value="KE">Kenya</option> <option value="ZA">South Africa</option> <option value="ET">Ethiopia</option> <option value="TZ">Tanzania</option> <option value="UG">Uganda</option> <option value="SN">Senegal</option> <option value="CI">Côte d'Ivoire</option> <option value="CM">Cameroon</option> <option value="MX">Mexico</option> <option value="BR">Brazil</option> <option value="AR">Argentina</option> <option value="CO">Colombia</option> <option value="CL">Chile</option> <option value="PE">Peru</option> <option value="EC">Ecuador</option> <option value="BO">Bolivia</option> <option value="PY">Paraguay</option> <option value="UY">Uruguay</option> <option value="CR">Costa Rica</option> <option value="PA">Panama</option> <option value="GT">Guatemala</option> <option value="HN">Honduras</option> <option value="SV">El Salvador</option> <option value="DO">Dominican Republic</option> <option value="JM">Jamaica</option> <option value="TT">Trinidad and Tobago</option> <option value="UA">Ukraine</option> <option value="KZ">Kazakhstan</option> <option value="UZ">Uzbekistan</option> <option value="GE">Georgia</option> <option value="AM">Armenia</option> <option value="AZ">Azerbaijan</option> <option value="MD">Moldova</option> <option value="RS">Serbia</option> <option value="BA">Bosnia and Herzegovina</option> <option value="MK">North Macedonia</option> <option value="AL">Albania</option> <option value="ME">Montenegro</option> <option value="XK">Kosovo</option> </select> <!-- Address fields — revealed after country is picked --> <div id="director_address_fields" class="space-y-3 hidden"> <input type="text" id="director_street" name="director_street" placeholder="Street address" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors"> <input type="text" id="director_street2" name="director_street2" placeholder="Apt, suite, unit (optional)" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors"> <div class="grid sm:grid-cols-2 gap-3"> <input type="text" id="director_city" name="director_city" placeholder="City" class="rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors"> <input type="text" id="director_postal" name="director_postal" placeholder="Postal / ZIP code" class="rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" maxlength="12"> </div> <!-- State/province — dropdown for US/CA/AU/GB, text field for all others --> <select id="director_province_select" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors bg-white hidden"> <option value="">State / Province</option> </select> <input type="text" id="director_province_text" placeholder="State / Region / Province" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors hidden"> <input type="hidden" id="director_province" name="director_province"> </div> </div> </div> <!-- Mailing address (if different from above) --> <div> <label class="flex items-center gap-2 cursor-pointer"> <input type="checkbox" id="director_mailing_different" name="director_mailing_different" class="rounded border-gray-300 text-pw-600 focus:ring-pw-500"> <span class="text-sm text-gray-600">Mailing address is different from the address above</span> </label> <div id="director_mailing_fields" class="hidden mt-3 space-y-3 pl-6 border-l-2 border-gray-200"> <p class="text-xs text-gray-400">BC Registry will use this as the director's mailing address.</p> <input type="text" id="director_mailing_street" name="director_mailing_street" placeholder="Mailing street address" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors"> <input type="text" id="director_mailing_street2" name="director_mailing_street2" placeholder="Apt, suite, unit (optional)" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors"> <div class="grid sm:grid-cols-3 gap-3"> <input type="text" id="director_mailing_city" name="director_mailing_city" placeholder="City" class="rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors"> <input type="text" id="director_mailing_province" name="director_mailing_province" placeholder="State / Province" class="rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors"> <input type="text" id="director_mailing_postal" name="director_mailing_postal" placeholder="Postal / ZIP" class="rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" maxlength="12"> </div> <select id="director_mailing_country" name="director_mailing_country" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors bg-white"> <option value="">Country</option> <option value="US" selected>United States</option> <option value="CA">Canada</option> </select> </div> </div> <div> <label for="director_citizenship" class="block text-sm font-medium text-gray-700 mb-1">Director Citizenship</label> <select id="director_citizenship" name="director_citizenship" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors bg-white"> <option value="">Select country...</option> <option value="United States">United States</option> <option value="Canada">Canada</option> <option value="United Kingdom">United Kingdom</option> <option value="Australia">Australia</option> <option value="New Zealand">New Zealand</option> <option value="Germany">Germany</option> <option value="France">France</option> <option value="Netherlands">Netherlands</option> <option value="Sweden">Sweden</option> <option value="Norway">Norway</option> <option value="Denmark">Denmark</option> <option value="Switzerland">Switzerland</option> <option value="Austria">Austria</option> <option value="Belgium">Belgium</option> <option value="Ireland">Ireland</option> <option value="Spain">Spain</option> <option value="Italy">Italy</option> <option value="Portugal">Portugal</option> <option value="Poland">Poland</option> <option value="Czech Republic">Czech Republic</option> <option value="Hungary">Hungary</option> <option value="Romania">Romania</option> <option value="Bulgaria">Bulgaria</option> <option value="Greece">Greece</option> <option value="Croatia">Croatia</option> <option value="Slovakia">Slovakia</option> <option value="Finland">Finland</option> <option value="Estonia">Estonia</option> <option value="Latvia">Latvia</option> <option value="Lithuania">Lithuania</option> <option value="Luxembourg">Luxembourg</option> <option value="Malta">Malta</option> <option value="Cyprus">Cyprus</option> <option value="Japan">Japan</option> <option value="South Korea">South Korea</option> <option value="Singapore">Singapore</option> <option value="Hong Kong">Hong Kong</option> <option value="Taiwan">Taiwan</option> <option value="China">China</option> <option value="India">India</option> <option value="Pakistan">Pakistan</option> <option value="Bangladesh">Bangladesh</option> <option value="Sri Lanka">Sri Lanka</option> <option value="Philippines">Philippines</option> <option value="Vietnam">Vietnam</option> <option value="Thailand">Thailand</option> <option value="Malaysia">Malaysia</option> <option value="Indonesia">Indonesia</option> <option value="United Arab Emirates">United Arab Emirates</option> <option value="Saudi Arabia">Saudi Arabia</option> <option value="Israel">Israel</option> <option value="Turkey">Turkey</option> <option value="South Africa">South Africa</option> <option value="Nigeria">Nigeria</option> <option value="Kenya">Kenya</option> <option value="Ghana">Ghana</option> <option value="Egypt">Egypt</option> <option value="Morocco">Morocco</option> <option value="Brazil">Brazil</option> <option value="Mexico">Mexico</option> <option value="Argentina">Argentina</option> <option value="Colombia">Colombia</option> <option value="Chile">Chile</option> <option value="Peru">Peru</option> <option value="Ecuador">Ecuador</option> <option value="Other">Other</option> </select> <p class="text-xs text-gray-500 mt-1">For CRTC letter context only. Canadian citizenship is <strong>not required</strong> for telecom resellers.</p> </div> <!-- Add another director button --> <div class="pt-2"> <button type="button" id="btn-add-director" class="inline-flex items-center gap-2 text-sm font-medium text-pw-600 hover:text-pw-700 transition-colors"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path> </svg>
Add another director
</button> <p class="text-xs text-gray-400 mt-1">Most single-owner telecom carriers only need one director.</p> </div> <!-- Share structure disclosure --> <div class="rounded-lg bg-gray-50 border border-gray-200 p-4 mt-4"> <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Share Structure</p> <p class="text-sm text-gray-600">Your BC corporation will be set up with <strong>10,000 Common shares</strong>, no par value, in CAD. This is standard for telecom carrier corporations and provides flexibility for future share issuances. If you require a custom share structure, please contact us before placing your order.</p> </div> </div> </div> <!-- ======================== STEP 3: Telecom Service Details ======================== --> <div id="step-3" class="step-panel hidden"> <h2 class="text-xl font-bold text-gray-900 mb-1">Telecom Service Details</h2> <p class="text-sm text-gray-500 mb-6">Describe the telecommunications services you plan to offer in Canada.</p> <div class="space-y-5"> <div> <label for="service_description" class="block text-sm font-medium text-gray-700 mb-1">Description of Services <span class="text-red-500">*</span></label> <textarea id="service_description" name="service_description" required rows="4" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors resize-y" placeholder="e.g. Resale of long-distance voice services, VoIP termination, wholesale voice minutes to Canadian and international destinations..."></textarea> <p class="text-xs text-gray-500 mt-1">Describe the voice and/or data services you plan to offer. This will be included in your CRTC registration letter.</p> </div> <div> <label for="geographic_coverage" class="block text-sm font-medium text-gray-700 mb-1">Geographic Coverage</label> <input type="text" id="geographic_coverage" name="geographic_coverage" value="BC and Worldwide" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors"> <p class="text-xs text-gray-500 mt-1" id="geographic-coverage-hint">Defaults to your incorporation province and worldwide. Keeping coverage to your incorporation province avoids extra-provincial registration. US-based operators commonly change to "BC and USA" or "ON and USA" for cross-border traffic.</p> </div> <div> <label class="flex items-start gap-3 cursor-pointer rounded-lg border border-gray-200 p-4 hover:bg-gray-50 transition-colors"> <input type="checkbox" id="include_bits" checked class="mt-0.5 rounded border-gray-300 text-pw-600 focus:ring-pw-500"> <div> <p class="text-sm font-semibold text-gray-900">Include BITS (Basic International Telecommunications Service)</p> <p class="text-xs text-gray-500 mt-0.5">Registers you to provide international voice/data services to and from Canada. Recommended for most telecom resellers. No additional cost.</p> </div> </label> </div> <!-- Domain WHOIS privacy --> <div> <label class="flex items-start gap-3 cursor-pointer rounded-lg border border-gray-200 p-4 hover:bg-gray-50 transition-colors"> <input type="checkbox" id="domain_privacy" checked class="mt-0.5 rounded border-gray-300 text-pw-600 focus:ring-pw-500"> <div> <p class="text-sm font-semibold text-gray-900">Domain WHOIS Privacy</p> <p class="text-xs text-gray-500 mt-0.5">Hides your personal contact information in the public WHOIS directory. Your company name will still be visible (CIRA requirement for .ca domains). No additional cost.</p> </div> </label> </div> <!-- Existing assets --> <div class="border-t border-gray-200 pt-5"> <h3 class="text-sm font-semibold text-gray-900 mb-3">Existing Assets (Optional)</h3> <p class="text-xs text-gray-500 mb-4">If you already have any of the following, we'll use yours instead of provisioning new ones. Leave blank and we'll set everything up for you.</p> <div class="space-y-4"> <!-- Toll-free number (CCTS customer service listing only — does NOT replace Canadian DID) --> <div> <label for="existing_tollfree" class="block text-sm font-medium text-gray-700 mb-1">Existing toll-free customer service number <span class="text-xs text-gray-400 font-normal">(optional)</span></label> <input type="tel" id="existing_tollfree" name="existing_tollfree" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="e.g. 1-800-555-0199 (leave blank if you don't have one)"> <p class="text-xs text-gray-500 mt-1">If you have a toll-free number (1-800, 1-888, etc.) you'd like listed as your CCTS customer service line, enter it here. This is separate from the Canadian local DID required for CRTC registration — a local BC number will always be provisioned for your carrier.</p> </div> <!-- Own Canadian DID --> <div> <label for="existing_ca_did" class="block text-sm font-medium text-gray-700 mb-1">Existing Canadian phone number (DID) <span class="text-xs text-gray-400 font-normal">(optional)</span></label> <input type="tel" id="existing_ca_did" name="existing_ca_did" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="e.g. +1 604-555-0199 (leave blank and we'll provision one)"> <p class="text-xs text-gray-500 mt-1">If you already have a Canadian phone number you'd like to use for your carrier registration, enter it here. Otherwise we'll provision a new Canadian DID for you during setup.</p> </div> <!-- Note shown when existing DID is provided (hides routing section) --> <div id="existing-did-note" class="hidden rounded-lg border border-green-200 bg-green-50 p-3"> <p class="text-sm font-medium text-green-800">Using your existing Canadian number</p> <p class="text-xs text-green-700 mt-1">Since you have your own Canadian DID, we'll skip provisioning a new number. Your existing number will be listed on your CRTC registration. You're responsible for maintaining this number and ensuring it remains active.</p> </div> <!-- DID call routing --> <div id="did-routing-section"> <label class="block text-sm font-medium text-gray-700 mb-2">Where should calls to your Canadian number go?</label> <p class="text-xs text-gray-500 mb-3">We'll provision a Canadian phone number (604/778 BC area code) for your carrier. Tell us how to route incoming calls.</p> <div class="space-y-2"> <label class="flex items-start gap-3 cursor-pointer rounded-lg border border-gray-200 p-3 hover:bg-gray-50 transition-colors"> <input type="radio" name="did_routing_type" value="forward" checked class="mt-0.5 text-pw-600 focus:ring-pw-500"> <div> <p class="text-sm font-medium text-gray-900">Forward to a phone number</p> <p class="text-xs text-gray-500">Calls ring through to your existing number (US, Canada, or international).</p> </div> </label> <label class="flex items-start gap-3 cursor-pointer rounded-lg border border-gray-200 p-3 hover:bg-gray-50 transition-colors"> <input type="radio" name="did_routing_type" value="sip" class="mt-0.5 text-pw-600 focus:ring-pw-500"> <div> <p class="text-sm font-medium text-gray-900">Route to SIP/VoIP endpoint</p> <p class="text-xs text-gray-500">Send calls to your PBX, SIP trunk, or hosted VoIP platform via IP.</p> </div> </label> <label class="flex items-start gap-3 cursor-pointer rounded-lg border border-gray-200 p-3 hover:bg-gray-50 transition-colors"> <input type="radio" name="did_routing_type" value="later" class="mt-0.5 text-pw-600 focus:ring-pw-500"> <div> <p class="text-sm font-medium text-gray-900">I'll configure it later</p> <p class="text-xs text-gray-500">We'll provision the number and you can set up routing after delivery.</p> </div> </label> </div> <!-- Forward number input --> <div id="did-forward-fields" class="mt-3"> <input type="tel" id="did_forward_number" name="did_forward_number" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="e.g. +1 305-555-0199 (your existing number)"> <p class="text-xs text-gray-500 mt-1">Include country code. We'll set up call forwarding from your Canadian DID to this number.</p> </div> <!-- SIP endpoint input --> <div id="did-sip-fields" class="hidden mt-3 space-y-3"> <input type="text" id="did_sip_uri" name="did_sip_uri" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="SIP URI — e.g. sip:trunk@pbx.yourcompany.com"> <input type="text" id="did_sip_ip" name="did_sip_ip" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="IP address — e.g. 203.0.113.50 (optional if SIP URI provided)"> <p class="text-xs text-gray-500">We'll configure Flowroute to send SIP INVITE to your endpoint. You can also provide both URI and IP for failover.</p> </div> </div> <!-- Accounting software preference --> <div> <label for="accounting_software" class="block text-sm font-medium text-gray-700 mb-1">Preferred accounting software</label> <select id="accounting_software" name="accounting_software" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors bg-white"> <option value="">No preference</option> <option value="xero">Xero</option> <option value="quickbooks">QuickBooks Online</option> <option value="other">Other / I'll decide later</option> </select> <p class="text-xs text-gray-500 mt-1">Your 3 complimentary hours of Canadian accounting support include help setting up your chart of accounts. Let us know your preference so our accountant can prepare.</p> </div> <!-- Registered Office Location --> <div id="amb-location-section"> <label class="block text-sm font-semibold text-gray-900 mb-2">Registered Office Location</label> <p class="text-xs text-gray-500 mb-3" id="amb-location-desc">Select a mailbox location for your corporate registered office. The annual mailbox fee is added to your order.</p> <div id="amb-location-list" class="space-y-2"> <p class="text-xs text-gray-400">Loading available locations...</p> </div> <p id="amb-location-error" class="hidden text-xs text-red-600 mt-2"></p> </div> <!-- Own Canadian address --> <div> <label class="flex items-start gap-3 cursor-pointer rounded-lg border border-gray-200 p-4 hover:bg-gray-50 transition-colors"> <input type="checkbox" id="own_ca_address" name="own_ca_address" class="mt-0.5 rounded border-gray-300 text-pw-600 focus:ring-pw-500"> <div> <p class="text-sm font-semibold text-gray-900" id="own-address-label">I have my own Canadian address</p> <p class="text-xs text-gray-500 mt-0.5" id="own-address-desc">Check this if you already have a physical or virtual office address in the selected province that you want to use as your registered office. You will not need our mailbox service.</p> </div> </label> <div id="own-address-fields" class="hidden mt-3 ml-7 space-y-3"> <div> <label for="own_ca_company" class="block text-sm font-medium text-gray-700 mb-1">Company / Organisation Name at this Address <span class="text-red-500">*</span></label> <input type="text" id="own_ca_company" name="own_ca_company" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="e.g. Pacific Office Suites Ltd."> <p class="text-xs text-gray-400 mt-1">The legal name of the company or mailbox operator at this address. Used to address your corporate binder parcel so it is accepted.</p> </div> <div> <label for="own_ca_attn" class="block text-sm font-medium text-gray-700 mb-1">Contact / Attention Name <span class="text-gray-400 font-normal">(optional)</span></label> <input type="text" id="own_ca_attn" name="own_ca_attn" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="e.g. Jane Smith"> <p class="text-xs text-gray-400 mt-1">Individual contact at this address who can receive corporate mail on your behalf (optional).</p> </div> <div> <label for="own_ca_street" class="block text-sm font-medium text-gray-700 mb-1">Street Address <span class="text-red-500">*</span></label> <input type="text" id="own_ca_street" name="own_ca_street" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="123 Main St, Suite 100"> </div> <div class="grid grid-cols-3 gap-3"> <div> <label for="own_ca_city" class="block text-sm font-medium text-gray-700 mb-1">City</label> <input type="text" id="own_ca_city" name="own_ca_city" value="Vancouver" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors"> </div> <div> <label for="own_ca_province" class="block text-sm font-medium text-gray-700 mb-1">Province</label> <input type="text" id="own_ca_province" name="own_ca_province" value="BC" readonly class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 bg-gray-50 focus:outline-none"> </div> <div> <label for="own_ca_postal" class="block text-sm font-medium text-gray-700 mb-1">Postal Code</label> <input type="text" id="own_ca_postal" name="own_ca_postal" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="V6C 3N2"> </div> </div> <div class="rounded-lg border border-amber-200 bg-amber-50 p-3"> <p class="text-xs text-amber-800"><strong>Important:</strong> Your registered office address must be a physical delivery address in British Columbia that is accessible during business hours. Under the BC Business Corporations Act, your corporation's records (including the corporate binder) must be maintained at this address and available for inspection. Please confirm that your address can store and provide access to your corporate records.</p> <label class="flex items-center gap-2 mt-2 cursor-pointer"> <input type="checkbox" id="own_address_confirm" name="own_address_confirm" class="rounded border-gray-300 text-amber-600 focus:ring-amber-500"> <span class="text-xs font-medium text-amber-900">I confirm this address can store my corporate binder and provide access during business hours as required by the BC Business Corporations Act.</span> </label> </div> </div> </div> </div> </div> <!-- Regulatory Contact --> <div class="border-t border-gray-200 pt-5"> <h3 class="text-sm font-semibold text-gray-900 mb-3">Regulatory Contact</h3> <p class="text-xs text-gray-500 mb-4">This contact will be listed on CRTC correspondence. Defaults to the director's information if left blank.</p> <div class="space-y-3"> <div> <label for="reg_contact_name" class="block text-sm font-medium text-gray-700 mb-1">Contact Name</label> <input type="text" id="reg_contact_name" name="reg_contact_name" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Defaults to director name"> <p class="text-xs text-gray-400 mt-1">If same as director, leave empty — defaults to director's name.</p> </div> <div class="grid sm:grid-cols-2 gap-3"> <div> <label for="reg_contact_email" class="block text-sm font-medium text-gray-700 mb-1">Contact Email <span class="text-gray-400 font-normal">(optional)</span></label> <input type="email" id="reg_contact_email" name="reg_contact_email" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Auto-set to regulatory@yourdomain.ca"> <p class="text-xs text-gray-400 mt-1">Leave blank — we'll create <strong>regulatory@yourdomain.ca</strong> on your new .ca domain and use it as your CRTC contact address. This email will appear on your CRTC notification letter.</p> </div> <div> <label for="reg_contact_phone" class="block text-sm font-medium text-gray-700 mb-1">Contact Phone <span class="text-gray-400 font-normal">(optional)</span></label> <input type="tel" id="reg_contact_phone" name="reg_contact_phone" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Auto-set to your Canadian DID"> <p class="text-xs text-gray-400 mt-1">Leave blank — we'll use your provisioned Canadian phone number (DID).</p> </div> </div> </div> </div> </div> </div> <!-- ======================== STEP 4: Identity Verification ======================== --> <div id="step-4" class="step-panel hidden"> <h2 class="text-xl font-bold text-gray-900 mb-1">Identity Verification</h2> <p class="text-sm text-gray-500 mb-6">
Required for all payment methods. We verify your government-issued ID to confirm the director's identity before processing your order.
Your name and date of birth on the ID must match what you entered in Step 2.
</p> <!-- State A: Not yet started --> <div id="identity-start" class="space-y-5"> <!-- What to expect --> <div class="rounded-xl border border-gray-200 bg-gray-50 p-5"> <h3 class="text-sm font-semibold text-gray-900 mb-3">What you'll need</h3> <ul class="space-y-2 text-sm text-gray-600"> <li class="flex items-start gap-2"> <svg class="w-4 h-4 text-pw-600 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>
A government-issued photo ID — passport, driver's license, or national ID card
</li> <li class="flex items-start gap-2"> <svg class="w-4 h-4 text-pw-600 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>
IDs from 120+ countries accepted — passport recommended for best results
</li> <li class="flex items-start gap-2"> <svg class="w-4 h-4 text-pw-600 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>
Takes about 60 seconds — you'll be guided by Stripe's secure hosted flow
</li> <li class="flex items-start gap-2"> <svg class="w-4 h-4 text-pw-600 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>
No selfie required — document photo only
</li> </ul> </div> <!-- Director name echo --> <div class="rounded-lg border border-pw-200 bg-pw-50 p-4 text-sm"> <span class="text-pw-700 font-medium">Verifying identity for director: </span> <span id="identity-director-name-echo" class="text-pw-900 font-semibold"></span> </div> <!-- Start button --> <button type="button" id="btn-start-identity" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-pw-700 text-white text-sm font-semibold hover:bg-pw-800 active:bg-pw-900 transition-colors shadow-sm"> <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z"></path> </svg>
Verify Identity with Stripe
</button> <p class="text-xs text-gray-400">
Powered by <a href="https://stripe.com/identity" target="_blank" rel="noopener" class="underline hover:text-gray-600">Stripe Identity</a>.
Your ID images are handled by Stripe and are not stored on our servers.
We only receive the extracted name and date of birth for comparison.
</p> </div> <!-- State B: Loading / redirecting --> <div id="identity-loading" class="hidden text-center py-10"> <div class="inline-flex items-center gap-3 text-sm text-gray-600"> <svg class="w-5 h-5 animate-spin text-pw-600" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path> </svg>
Starting identity verification...
</div> </div> <!-- State C: Waiting for result (customer returned from Stripe) --> <div id="identity-waiting" class="hidden"> <div class="rounded-xl border border-blue-200 bg-blue-50 p-5"> <div class="flex items-start gap-3"> <svg class="w-6 h-6 text-blue-600 shrink-0 mt-0.5 animate-spin" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path> </svg> <div> <p class="text-sm font-semibold text-blue-900">Waiting for Stripe to finish verifying your identity...</p> <p class="text-xs text-blue-700 mt-1">This usually takes 10–30 seconds. The <strong>Next</strong> button will unlock automatically once the result arrives — please don't close or refresh this page.</p> </div> </div> </div> </div> <!-- State D: Verified --> <div id="identity-verified" class="hidden"> <div class="rounded-xl border border-green-200 bg-green-50 p-5"> <div class="flex items-start gap-3"> <svg class="w-6 h-6 text-green-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> <div> <p class="text-sm font-semibold text-green-900">Identity verified</p> <p class="text-xs text-green-700 mt-0.5" id="identity-verified-detail"></p> </div> </div> </div> </div> <!-- State E: Needs review (fuzzy match / DOB mismatch / expired doc) --> <div id="identity-review" class="hidden"> <div class="rounded-xl border border-amber-200 bg-amber-50 p-5"> <div class="flex items-start gap-3"> <svg class="w-6 h-6 text-amber-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"></path></svg> <div> <p class="text-sm font-semibold text-amber-900">Identity submitted — manual review required</p> <p class="text-xs text-amber-700 mt-1">We were unable to automatically verify your identity (possible name variation or document issue). Our team will review your documents before processing begins. You can proceed to payment now to reserve your place in queue.</p> </div> </div> </div> </div> <!-- State F: Failed --> <div id="identity-failed" class="hidden"> <div class="rounded-xl border border-red-200 bg-red-50 p-5"> <div class="flex items-start gap-3"> <svg class="w-6 h-6 text-red-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"></path></svg> <div> <p class="text-sm font-semibold text-red-900">Identity verification failed</p> <p class="text-xs text-red-700 mt-1" id="identity-failed-detail">The name on your ID document does not match the director name you entered. Please check the name in Step 1 matches your legal ID exactly, then try again.</p> <button type="button" id="btn-retry-identity" class="mt-3 inline-flex items-center gap-1.5 text-xs font-medium text-red-700 underline hover:text-red-900"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path></svg>
Go back to Step 1 and try again
</button> </div> </div> </div> </div> </div> <!-- ======================== STEP 5: Review & Submit ======================== --> <div id="step-5" class="step-panel hidden"> <h2 class="text-xl font-bold text-gray-900 mb-1">Review & Submit</h2> <p class="text-sm text-gray-500 mb-6">Review your order details and submit.</p> <!-- Summary sections --> <div class="space-y-6 mb-8"> <!-- Company summary --> <div class="rounded-lg border border-gray-200 p-4"> <h3 class="text-sm font-semibold text-gray-900 mb-3">Company Details</h3> <dl class="space-y-2 text-sm"> <div class="flex justify-between"> <dt class="text-gray-500">Type</dt> <dd id="review-company-type" class="text-gray-900 font-medium">Numbered</dd> </div> <div id="review-names-row" class="hidden"> <dt class="text-gray-500 mb-1">Name Choices</dt> <dd id="review-names" class="text-gray-900 text-sm"></dd> </div> <div class="flex justify-between"> <dt class="text-gray-500">Legal Ending</dt> <dd id="review-legal-ending" class="text-gray-900 font-medium">Ltd.</dd> </div> <div id="review-trade-name-row" class="flex justify-between hidden"> <dt class="text-gray-500">Trade Name (DBA)</dt> <dd id="review-trade-name" class="text-gray-900 font-medium"></dd> </div> </dl> </div> <!-- Director summary --> <div class="rounded-lg border border-gray-200 p-4"> <h3 class="text-sm font-semibold text-gray-900 mb-3">Director</h3> <dl class="space-y-2 text-sm"> <div class="flex justify-between"> <dt class="text-gray-500">Name</dt> <dd id="review-director-name" class="text-gray-900 font-medium"></dd> </div> <div> <dt class="text-gray-500 mb-1">Address</dt> <dd id="review-director-address" class="text-gray-900 text-sm"></dd> </div> <div id="review-citizenship-row" class="flex justify-between"> <dt class="text-gray-500">Citizenship</dt> <dd id="review-director-citizenship" class="text-gray-900 font-medium"></dd> </div> </dl> </div> <!-- Telecom summary --> <div class="rounded-lg border border-gray-200 p-4"> <h3 class="text-sm font-semibold text-gray-900 mb-3">Telecom Services</h3> <dl class="space-y-2 text-sm"> <div> <dt class="text-gray-500 mb-1">Services</dt> <dd id="review-services" class="text-gray-900 text-sm"></dd> </div> <div class="flex justify-between"> <dt class="text-gray-500">Coverage</dt> <dd id="review-coverage" class="text-gray-900 font-medium"></dd> </div> <div class="flex justify-between"> <dt class="text-gray-500">BITS (International)</dt> <dd id="review-bits" class="text-gray-900 font-medium"></dd> </div> </dl> </div> <!-- ID verification handled by Stripe Identity in step 4 --> </div> <!-- Pricing summary --> <div class="rounded-xl border border-gray-200 bg-gray-50 overflow-hidden mb-6"> <div class="px-5 py-3 bg-gray-100 border-b border-gray-200"> <h3 class="text-sm font-bold text-gray-900">Order Summary</h3> </div> <div class="px-5 py-4 text-sm"> <table class="w-full"> <colgroup> <col class="w-full"> <col class="w-px whitespace-nowrap"> </colgroup> <tbody class="divide-y divide-gray-100"> <tr> <td class="py-2 pr-6 text-gray-600">Base service fee — numbered company</td> <td class="py-2 text-right font-medium text-gray-900 tabular-nums">$3,899</td> </tr> <tr> <td class="py-2 pr-6 text-gray-500 text-xs pl-3">&mdash; BC incorporation, CRTC registration, CCTS, domain, email, DID, binder</td> <td></td> </tr> <tr id="summary-named-addon-row" class="hidden"> <td class="py-2 pr-6 text-gray-600">Named company service <span class="text-xs text-gray-400">(name search, reservation, handling)</span></td> <td class="py-2 text-right font-medium text-gray-900 tabular-nums">+$85</td> </tr> <tr id="summary-tradename-addon-row" class="hidden"> <td class="py-2 pr-6 text-gray-600">Trade name (DBA) service <span class="text-xs text-gray-400">(BC Registry filing after incorporation)</span></td> <td class="py-2 text-right font-medium text-gray-900 tabular-nums">+$75</td> </tr> <tr> <td class="py-2 pr-6 text-gray-600">BC government fees (passed through at cost)</td> <td class="py-2 text-right font-medium text-gray-900 tabular-nums" id="summary-gov-fee">~C$350</td> </tr> <tr id="summary-trade-name-row" class="hidden"> <td class="py-2 pr-6 text-gray-500 text-xs pl-3">&mdash; Trade name registration fee</td> <td class="py-2 text-right font-medium text-gray-500 tabular-nums text-xs">+C$40</td> </tr> <tr id="summary-mailbox-row" class="hidden"> <td class="py-2 pr-6 text-gray-600">Mailbox service — 1 yr</td> <td class="py-2 text-right font-medium text-gray-900 tabular-nums" id="summary-mailbox-fee">$0</td> </tr> <tr id="summary-expedited-row" class="hidden"> <td class="py-2 pr-6 text-amber-700 flex items-center gap-1"> <svg class="w-3.5 h-3.5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path></svg>
Expedited processing
</td> <td class="py-2 text-right font-medium text-amber-700 tabular-nums">+$500</td> </tr> <tr id="summary-discount-row" class="hidden"> <td class="py-2 pr-6 text-green-700">Discount &mdash; <span id="summary-discount-code" class="font-mono"></span></td> <td class="py-2 text-right font-medium text-green-700 tabular-nums" id="summary-discount-amount">-$0</td> </tr> </tbody> <tfoot> <tr class="border-t-2 border-gray-200"> <td class="pt-3 pb-1 font-bold text-gray-900">Total due</td> <td class="pt-3 pb-1 text-right font-bold text-pw-700 text-lg tabular-nums" id="summary-total">$3,899</td> </tr> <tr> <td colspan="2" class="pb-1 text-xs text-gray-400">+ payment processing surcharge (selected at checkout)</td> </tr> </tfoot> </table> </div> <div class="px-5 py-3 bg-gray-50 border-t border-gray-200"> <p class="text-xs text-gray-500">BC government fees are passed through at cost in CAD and charged separately at the current exchange rate. Service fee of $3,899 USD is fixed.</p> </div> </div> <!-- Discount code --> <div class="mb-6 rounded-lg border border-dashed border-gray-300 p-4"> <label for="discount_code" class="block text-sm font-medium text-gray-700 mb-2">Referral code</label> <div class="flex gap-2"> <input type="text" id="discount_code" placeholder="e.g. SAVE20" maxlength="30" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none uppercase"> <button type="button" id="btn-apply-discount" class="px-4 py-2 text-sm font-medium bg-gray-100 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-200 transition-colors">
Apply
</button> </div> <div id="discount-status" class="mt-2 text-xs hidden"></div> </div> <!-- Contact info --> <div class="space-y-5 mb-6"> <h3 class="text-sm font-semibold text-gray-900">Billing Contact Information</h3> <div class="grid sm:grid-cols-2 gap-5"> <div> <label for="customer_name" class="block text-sm font-medium text-gray-700 mb-1">Your Name <span class="text-red-500">*</span></label> <input type="text" id="customer_name" name="customer_name" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Full name"> </div> <div> <label for="customer_email" class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-500">*</span></label> <input type="email" id="customer_email" name="customer_email" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="you@company.com"> </div> </div> <div class="grid sm:grid-cols-2 gap-5"> <div> <label for="customer_phone" class="block text-sm font-medium text-gray-700 mb-1">Phone <span class="text-red-500">*</span></label> <input type="tel" id="customer_phone" name="customer_phone" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="+1 (555) 555-5555"> </div> <div> <label for="customer_company" class="block text-sm font-medium text-gray-700 mb-1">Existing Company (if any)</label> <input type="text" id="customer_company" name="customer_company" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Company name"> </div> </div> </div> <!-- Payment method --> <!-- Expedited processing toggle --> <div class="mb-5"> <label class="flex items-start gap-3 cursor-pointer rounded-xl border-2 border-amber-200 bg-amber-50 p-4 hover:border-amber-300 transition-colors has-[:checked]:border-amber-400 has-[:checked]:bg-amber-100"> <input type="checkbox" id="expedited" name="expedited" class="mt-0.5 rounded border-amber-400 text-amber-600 focus:ring-amber-500"> <div class="flex-1"> <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <svg class="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path></svg> <p class="text-sm font-bold text-amber-900">Expedited Processing</p> </div> <span class="text-sm font-bold text-amber-900">+$500 USD</span> </div> <p class="text-xs text-amber-800 mt-1">Priority handling: 1–3 week turnaround instead of 2–5 weeks. Filing starts the same business day. BC Registry expedited processing fee (~C$100) is passed through at cost.</p> <p class="text-xs text-amber-700 mt-1.5 font-medium">Expedited orders require instant-funds payment — PayPal or cryptocurrency only.</p> </div> </label> </div> <!-- Payment method --> <div class="mb-5"> <h4 class="text-sm font-semibold text-gray-900 mb-3">Payment Method</h4> <div id="payment-methods-list" class="space-y-2"> <label id="pm-ach" class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50" data-expedited="no"> <input type="radio" name="payment_method_choice" value="ach" checked class="text-pw-600"> <span class="text-sm font-medium text-gray-800">ACH Bank Transfer</span> <span class="ml-auto text-xs text-green-600 font-medium">Recommended - No fee</span> </label> <label id="pm-card" class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50" data-expedited="no"> <input type="radio" name="payment_method_choice" value="card" class="text-pw-600"> <span class="text-sm font-medium text-gray-800">Credit / Debit Card</span> <span class="ml-auto text-xs text-gray-400">+3%</span> </label> <label id="pm-paypal" class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50" data-expedited="yes"> <input type="radio" name="payment_method_choice" value="paypal" class="text-pw-600"> <span class="text-sm font-medium text-gray-800">PayPal</span> <span class="ml-auto text-xs text-gray-400">+3%</span> </label> <label id="pm-klarna" class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50" data-expedited="no"> <input type="radio" name="payment_method_choice" value="klarna" class="text-pw-600"> <span class="text-sm font-medium text-gray-800">Klarna <span class="text-[10px] text-gray-400 font-normal">(Pay in 4)</span></span> <span class="ml-auto text-xs text-gray-400">+6%</span> </label> <label id="pm-crypto" class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-pw-400 has-[:checked]:border-pw-500 has-[:checked]:bg-pw-50" data-expedited="yes"> <input type="radio" name="payment_method_choice" value="crypto" class="text-pw-600"> <span class="text-sm font-medium text-gray-800">Cryptocurrency</span> <span class="ml-auto text-xs text-green-600 font-medium">No fee</span> </label> </div> <p id="expedited-payment-note" class="hidden mt-2 text-xs text-amber-700 flex items-center gap-1.5"> <svg class="w-3.5 h-3.5 text-amber-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path></svg>
Expedited processing selected — only instant-funds payment methods are available.
</p> </div> <!-- Disclaimer — not legal advice --> <label class="flex items-start gap-3 cursor-pointer mb-4"> <input type="checkbox" id="disclaimer" required class="mt-0.5 rounded border-gray-300 text-pw-600 focus:ring-pw-500"> <span class="text-sm text-gray-600">
I understand that Performance West Inc. provides carrier formation and provincial incorporation services only. Performance West is <strong>not a law firm</strong> and does not provide legal advice on how to operate my business. I acknowledge that I should seek independent legal counsel for regulatory compliance, contractual matters, and operational decisions. <span class="text-red-500">*</span> </span> </label> <!-- Consent --> <label class="flex items-start gap-3 cursor-pointer mb-4"> <input type="checkbox" id="consent" required class="mt-0.5 rounded border-gray-300 text-pw-600 focus:ring-pw-500"> <span class="text-sm text-gray-600">
I authorize Performance West Inc. to incorporate a provincial corporation, set up a virtual registered office, and generate CRTC registration documents on my behalf. I agree to the
<a href="/terms" class="text-pw-700 underline hover:text-pw-800">Terms of Service</a> and
<a href="/privacy" class="text-pw-700 underline hover:text-pw-800">Privacy Policy</a>. <span class="text-red-500">*</span> </span> </label> <div id="submit-status" class="hidden"></div> </div> <!-- ======================== SUCCESS (legacy fallback) ======================== --> <div id="step-success" class="step-panel hidden text-center py-8"> <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-5"> <svg class="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </div> <h2 class="text-2xl font-bold text-gray-900 mb-2">Order Submitted</h2> <p class="text-gray-600 mb-1">Your order number is:</p> <p id="success-order-number" class="text-xl font-mono font-bold text-pw-700 mb-6">--</p> <p class="text-sm text-gray-500">You will be redirected to complete payment shortly.</p> </div> <!-- Navigation buttons --> <div id="form-nav" class="mt-8 pt-6 border-t border-gray-200"> <!-- Identity pending notice — shown while waiting for Stripe result on step 4 --> <p id="identity-pending-notice" class="hidden mb-3 text-xs text-blue-700 flex items-center gap-1.5"> <svg class="w-3.5 h-3.5 animate-spin shrink-0" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path> </svg>
Waiting for Stripe to finish identity verification — Next will unlock automatically.
</p> <div class="flex items-center justify-between gap-4"> <button type="button" id="btn-back" class="inline-flex items-center gap-1.5 px-5 py-2.5 rounded-lg border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:ring-offset-2 transition-colors hidden"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path></svg>
Back
</button> <button type="button" id="btn-start-over" class="hidden inline-flex items-center gap-1.5 px-5 py-2.5 rounded-lg border border-gray-300 text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:ring-offset-2 transition-colors"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"></path></svg>
Start over
</button> <button type="button" id="btn-next" class="ml-auto inline-flex items-center gap-1.5 px-6 py-2.5 rounded-lg bg-pw-700 text-white text-sm font-medium hover:bg-pw-800 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
Next
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path></svg> </button> </div> </div> </form> </div> </section> </main> <section class="py-10 border-t border-gray-100"> <div class="max-w-2xl mx-auto px-4 text-center"> <h2 class="text-lg font-bold text-gray-900 mb-2">Stay ahead of compliance changes</h2> <p class="text-sm text-gray-600 mb-5">Regulatory updates, enforcement trends, and compliance tips. No spam.</p> <button type="button" id="subscribe-btn-footer" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-pw-700 text-white text-sm font-medium hover:bg-pw-800 transition-colors"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path></svg>
Join Mailing List
</button> </div> </section> <!-- Subscribe modal --> <div id="subscribe-modal-global" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/50 backdrop-blur-sm"> <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 p-6"> <div class="flex justify-between items-start mb-4"> <h3 class="text-lg font-semibold text-gray-900">Join our mailing list</h3> <button type="button" id="subscribe-close-global" class="text-gray-400 hover:text-gray-600"> <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg> </button> </div> <form id="subscribe-form-global" class="space-y-4"> <div> <label for="sub-name-g" class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-gray-400">(optional)</span></label> <input type="text" id="sub-name-g" placeholder="Your name" maxlength="100" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none"> </div> <div> <label for="sub-company-g" class="block text-sm font-medium text-gray-700 mb-1">Company <span class="text-gray-400">(optional)</span></label> <input type="text" id="sub-company-g" placeholder="Your company" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none"> </div> <div> <label for="sub-email-g" class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-400">*</span></label> <input type="email" id="sub-email-g" required placeholder="you@company.com" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none"> </div> <div class="flex items-start gap-2"> <input type="checkbox" id="sub-consent-g" required class="mt-1 rounded border-gray-300 text-pw-600 focus:ring-pw-500"> <label for="sub-consent-g" class="text-xs text-gray-600 leading-relaxed">
I agree to receive compliance updates and service announcements from Performance West Inc. I can unsubscribe at any time. We never share your email.
</label> </div> <!-- Honeypot --> <div class="absolute opacity-0 h-0 overflow-hidden" aria-hidden="true" tabindex="-1"> <label for="sub-website-g">Website</label> <input type="text" id="sub-website-g" name="website" autocomplete="off" tabindex="-1"> </div> <input type="hidden" id="sub-ts-g" value=""> <button type="submit" id="sub-submit-g" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
Subscribe
</button> </form> <div id="subscribe-success-global" class="hidden text-center py-4"> <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-green-100 flex items-center justify-center"> <svg class="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg> </div> <p class="text-sm font-medium text-gray-900">You're on the list!</p> <p class="text-xs text-gray-500 mt-1">We'll send compliance updates and regulatory alerts.</p> </div> </div> </div> <footer class="border-t border-gray-200 bg-gray-50 mt-auto"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> <div> <h4 class="text-sm font-semibold text-gray-900 mb-3">Services</h4> <ul class="space-y-2 text-sm text-gray-600"> <li><a href="/services/telecom" class="hover:text-gray-900">Telecom Compliance</a></li> <li><a href="/services/privacy" class="hover:text-gray-900">Data Privacy</a></li> <li><a href="/services/tcpa" class="hover:text-gray-900">TCPA Compliance</a></li> <li><a href="/services/corporate" class="hover:text-gray-900">Corporate Services</a></li> <li><a href="/order/formation" class="font-medium text-pw-700 hover:text-pw-800">Form a Business</a></li> </ul> </div> <div> <h4 class="text-sm font-semibold text-gray-900 mb-3">Free Tools</h4> <ul class="space-y-2 text-sm text-gray-600"> <li><a href="/tools/formation-guide" class="hover:text-gray-900">Formation Guide</a></li> <li><a href="/tools/contractor-quiz" class="hover:text-gray-900">Contractor Quiz</a></li> <li><a href="/tools/privacy-check" class="hover:text-gray-900">Privacy Check</a></li> <li><a href="/tools/tcpa-check" class="hover:text-gray-900">TCPA Check</a></li> </ul> </div> <div> <h4 class="text-sm font-semibold text-gray-900 mb-3">Company</h4> <ul class="space-y-2 text-sm text-gray-600"> <li><a href="/about" class="hover:text-gray-900">About</a></li> <li><a href="/pricing" class="hover:text-gray-900">Pricing</a></li> <li><a href="/contact" class="hover:text-gray-900">Contact</a></li> <li><a href="https://portal.performancewest.net" class="hover:text-gray-900">Client Portal</a></li> <li><a href="/privacy" class="hover:text-gray-900">Privacy Policy</a></li> <li><a href="/terms" class="hover:text-gray-900">Terms of Service</a></li> </ul> </div> <div> <h4 class="text-sm font-semibold text-gray-900 mb-3">Contact</h4> <ul class="space-y-2 text-sm text-gray-600"> <li>Toll Free: 1-888-411-0383</li> <li><a href="mailto:info@performancewest.net" class="hover:text-gray-900">info@performancewest.net</a></li> <li class="text-xs leading-relaxed">525 Randall Ave Ste 100-1195<br>Cheyenne, WY 82001</li> <li><button type="button" id="footer-support-link" class="hover:text-gray-900">Open Support Ticket</button></li> </ul> </div> </div> <div class="mt-8 pt-8 border-t border-gray-200 flex flex-col items-center gap-3 text-sm text-gray-500"> <img src="/images/logo.png" alt="Performance West" class="h-12 w-auto" width="100" height="84" loading="lazy"> <p>&copy; 2026 Performance West Inc. &mdash; Professional compliance consulting.</p> <p class="text-xs text-gray-400">Performance West provides compliance consulting services. We do not provide legal advice or legal representation.</p> </div> </div> </footer> <!-- Floating help button --><button type="button" id="support-fab" aria-label="Open support" class="fixed bottom-6 left-6 z-[9999] w-14 h-14 rounded-full bg-pw-700 text-white shadow-lg hover:bg-pw-800 transition-all hover:scale-105 flex items-center justify-center"> <svg id="support-fab-icon-open" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <svg id="support-fab-icon-close" class="w-6 h-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Slide-out panel --> <div id="support-panel" class="fixed bottom-24 left-6 z-[9998] w-[380px] max-w-[calc(100vw-2rem)] bg-white rounded-xl shadow-2xl border border-gray-200 transform translate-y-4 opacity-0 pointer-events-none transition-all duration-200 ease-out"> <div class="px-5 py-4 border-b border-gray-100 bg-gray-50 rounded-t-xl"> <h3 class="text-base font-semibold text-gray-900">How can we help?</h3> <p class="text-xs text-gray-500 mt-0.5">Choose a category and tell us what you need.</p> </div> <!-- Category selector (step 1) --> <div id="support-step-categories" class="p-4 space-y-2"> <button type="button" data-category="question" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Ask a Question</span> <span class="block text-xs text-gray-500">About our compliance services or process</span> </div> </div> </button> <button type="button" data-category="support" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Get Support</span> <span class="block text-xs text-gray-500">Help with an ongoing engagement</span> </div> </div> </button> <button type="button" data-category="issue" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Report an Issue</span> <span class="block text-xs text-gray-500">Something isn't right with a deliverable</span> </div> </div> </button> <button type="button" data-category="service_request" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Request a Service</span> <span class="block text-xs text-gray-500">Start a new compliance engagement</span> </div> </div> </button> <button type="button" data-category="quote" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Request a Quote</span> <span class="block text-xs text-gray-500">Get pricing for a complex engagement</span> </div> </div> </button> <!-- Sign-in link (hidden when logged in) --> <div id="support-signin-link" class="pt-2 border-t border-gray-100 mt-2"> <button type="button" id="support-signin-btn" class="w-full flex items-center justify-center gap-2 px-4 py-2 text-xs text-gray-500 hover:text-pw-700 transition-colors"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Already a client? <span class="font-medium text-pw-600">Sign in</span> </button> </div> </div> <!-- Ticket form — Report an Issue + guest fallback (step 2a) --> <form id="support-step-form" class="hidden p-4"> <button type="button" id="support-back-btn" class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-3"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
Back
</button> <div id="support-category-badge" class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-pw-100 text-pw-700 mb-3"></div> <div class="space-y-3"> <div> <label for="support-name" class="block text-xs font-medium text-gray-700 mb-1">Name <span class="text-gray-400">(optional)</span></label> <input type="text" id="support-name" name="name" placeholder="Your name" maxlength="100" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="support-email" class="block text-xs font-medium text-gray-700 mb-1">Email <span class="text-gray-400">(for follow-up)</span></label> <input type="email" id="support-email" name="email" placeholder="you@company.com" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="support-subject" class="block text-xs font-medium text-gray-700 mb-1">Subject <span class="text-red-400">*</span></label> <input type="text" id="support-subject" name="subject" required minlength="3" maxlength="200" placeholder="Brief summary" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="support-message" class="block text-xs font-medium text-gray-700 mb-1">Message <span class="text-red-400">*</span></label> <textarea id="support-message" name="message" required minlength="10" maxlength="5000" rows="4" placeholder="Describe your question, issue, or request..." class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow resize-y"></textarea> <p class="text-[10px] text-gray-400 mt-0.5 text-right"><span id="support-char-count">0</span> / 5000</p> </div> <button type="submit" id="support-submit-btn" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
Submit
</button> </div> </form> <!-- Opportunity form — Request a Service / Request a Quote (step 2b) --> <form id="support-step-opportunity" class="hidden p-4"> <button type="button" id="opportunity-back-btn" class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-3"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
Back
</button> <div id="opportunity-category-badge" class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-pw-100 text-pw-700 mb-3"></div> <div class="space-y-3"> <div> <label for="opp-name" class="block text-xs font-medium text-gray-700 mb-1">Name <span class="text-red-400">*</span></label> <input type="text" id="opp-name" name="name" required minlength="2" maxlength="100" placeholder="Your name" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-email" class="block text-xs font-medium text-gray-700 mb-1">Email <span class="text-red-400">*</span></label> <input type="email" id="opp-email" name="email" required placeholder="you@company.com" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-company" class="block text-xs font-medium text-gray-700 mb-1">Company <span class="text-gray-400">(optional)</span></label> <input type="text" id="opp-company" name="company" placeholder="Company name" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-phone" class="block text-xs font-medium text-gray-700 mb-1">Phone <span class="text-gray-400">(optional)</span></label> <input type="tel" id="opp-phone" name="phone" placeholder="(555) 555-1234" maxlength="30" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-service" class="block text-xs font-medium text-gray-700 mb-1">Service interest <span class="text-red-400">*</span></label> <select id="opp-service" name="service_slug" required class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow bg-white"> <option value="" disabled selected>Select a service...</option> <option value="canada-crtc">Canada CRTC Carrier Package</option> <option value="llc-formation">LLC Formation</option> <option value="corporation-formation">Corporation Formation</option> <option value="registered-agent">Registered Agent</option> <option value="compliance-audit">Compliance Audit</option> <option value="other">Other / Not sure</option> </select> </div> <div> <label for="opp-details" class="block text-xs font-medium text-gray-700 mb-1">Details <span class="text-gray-400">(optional)</span></label> <textarea id="opp-details" name="details" maxlength="5000" rows="3" placeholder="Tell us about your project or what you need..." class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow resize-y"></textarea> </div> <button type="submit" id="opp-submit-btn" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
Submit Request
</button> </div> </form> <!-- Sign-in prompt — Ask a Question / Get Support when not logged in (step 2c) --> <div id="support-step-signin" class="hidden p-6"> <button type="button" id="signin-back-btn" class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-4"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
Back
</button> <div class="text-center"> <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-blue-100 flex items-center justify-center"> <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg> </div> <h4 class="text-sm font-semibold text-gray-900 mb-1">Sign in for support</h4> <p class="text-xs text-gray-500 mb-5">Sign in to access your client portal where you can view your orders, submit support requests, and manage your services.</p> <button type="button" id="signin-auth-btn" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors mb-3">
Sign In
</button> <button type="button" id="signin-guest-btn" class="text-xs text-gray-500 hover:text-gray-700 transition-colors">
Continue as guest &rarr;
</button> </div> </div> <!-- Success state (step 3) --> <div id="support-step-success" class="hidden p-6 text-center"> <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-green-100 flex items-center justify-center"> <svg class="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg> </div> <h4 class="text-sm font-semibold text-gray-900 mb-1">Request received</h4> <p id="support-success-message" class="text-xs text-gray-500 mb-4">We'll get back to you within one business day.</p> <p id="support-ticket-id" class="text-xs text-gray-400 mb-4 hidden">Ref: <span></span></p> <button type="button" id="support-new-ticket-btn" class="text-xs text-pw-600 hover:text-pw-700 font-medium">Submit another request</button> </div> </div> <!-- Modal backdrop --><div id="auth-modal-backdrop" class="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm hidden items-center justify-center p-4" role="dialog" aria-modal="true" aria-labelledby="auth-modal-title"> <div id="auth-modal" class="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden"> <!-- Close --> <button id="auth-modal-close" type="button" aria-label="Close" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors z-10"> <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Tab bar --> <div id="auth-tabs" class="flex border-b border-gray-100"> <button type="button" id="auth-tab-login" class="auth-tab flex-1 py-4 text-sm font-semibold text-pw-700 border-b-2 border-pw-600 transition-colors">
Sign In
</button> <button type="button" id="auth-tab-register" class="auth-tab flex-1 py-4 text-sm font-semibold text-gray-400 border-b-2 border-transparent hover:text-gray-600 transition-colors">
Create Account
</button> </div> <div class="px-6 py-6"> <!-- ── Login form ──────────────────────────────────────────────────── --> <form id="auth-login-form" class="space-y-4" novalidate> <div> <label for="auth-login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" id="auth-login-email" autocomplete="email" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="you@company.com"> </div> <div> <div class="flex items-center justify-between mb-1"> <label for="auth-login-password" class="text-sm font-medium text-gray-700">Password</label> <button type="button" id="auth-forgot-link" class="text-xs text-pw-600 hover:text-pw-800 underline underline-offset-2">
Forgot password?
</button> </div> <input type="password" id="auth-login-password" autocomplete="current-password" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="••••••••"> </div> <p id="auth-login-err" class="hidden text-xs text-red-600 font-medium"></p> <button type="submit" id="auth-login-btn" class="w-full py-2.5 rounded-lg bg-pw-700 text-white text-sm font-semibold hover:bg-pw-800 transition-colors disabled:opacity-50">
Sign In
</button> </form> <!-- ── Register form ──────────────────────────────────────────────── --> <form id="auth-register-form" class="space-y-4 hidden" novalidate> <div> <label for="auth-reg-name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label> <input type="text" id="auth-reg-name" autocomplete="name" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Full name"> </div> <div> <label for="auth-reg-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" id="auth-reg-email" autocomplete="email" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="you@company.com"> </div> <div> <label for="auth-reg-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> <input type="password" id="auth-reg-password" autocomplete="new-password" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="At least 8 characters"> </div> <p id="auth-reg-err" class="hidden text-xs text-red-600 font-medium"></p> <button type="submit" id="auth-reg-btn" class="w-full py-2.5 rounded-lg bg-pw-700 text-white text-sm font-semibold hover:bg-pw-800 transition-colors disabled:opacity-50">
Create Account
</button> </form> <!-- ── Forgot password form ────────────────────────────────────────── --> <div id="auth-forgot-form" class="hidden"> <button type="button" id="auth-back-to-login" class="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-4"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path></svg>
Back to sign in
</button> <h3 class="text-base font-semibold text-gray-900 mb-1">Reset your password</h3> <p class="text-sm text-gray-500 mb-4">Enter your email and we'll send you a reset link.</p> <form id="auth-forgot-email-form" class="space-y-4" novalidate> <div> <label for="auth-forgot-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" id="auth-forgot-email" autocomplete="email" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="you@company.com"> </div> <p id="auth-forgot-err" class="hidden text-xs text-red-600 font-medium"></p> <p id="auth-forgot-ok" class="hidden text-xs text-green-700 font-medium"></p> <button type="submit" id="auth-forgot-btn" class="w-full py-2.5 rounded-lg bg-pw-700 text-white text-sm font-semibold hover:bg-pw-800 transition-colors disabled:opacity-50">
Send reset link
</button> </form> </div> </div> </div> </div> <!-- Tawk.to Live Chat --> <script>
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/69d5a9ca0d1c3f1c37998081/1jll9ufph';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script> </body> </html>
Reference in a new issue View git blame Copy permalink