Hugging Face's logo

Spaces:
masoudmarandi
/
clinicalflow
Running

App Files Community
clinicalflow / script.js
masoudmarandi's picture
masoudmarandi
inside each and ALL modals, all email, name, company, etc. entry boxes must be fixed, icons, etc. must be fixed - growth pricing 1,999/mo
2611ab6 verified
raw
history blame contribute delete
71.8 kB
document.addEventListener('DOMContentLoaded', () => {
// Modal Content Definitions
const modalContents = {
'get-api-key': {
title: 'Get Your Free API Key',
content: `
<div class="space-y-6">
<p class="text-slate-600 leading-relaxed">Start processing clinical documents in minutes with our free tier. No credit card required.</p>
<div class="space-y-3">
<div class="flex items-center p-3 bg-primary-50 border border-primary-100 rounded-lg group hover:border-primary-300 transition-colors">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-white flex items-center justify-center text-primary-600 shadow-sm mr-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<span class="text-sm font-semibold text-slate-800">5,000 characters free per month</span>
</div>
<div class="flex items-center p-3 bg-slate-50 border border-slate-200 rounded-lg group hover:border-slate-300 transition-colors">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-white flex items-center justify-center text-slate-500 shadow-sm mr-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
</div>
<span class="text-sm font-semibold text-slate-700">Access to all core processing packs</span>
</div>
<div class="flex items-center p-3 bg-slate-50 border border-slate-200 rounded-lg group hover:border-slate-300 transition-colors">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-white flex items-center justify-center text-slate-500 shadow-sm mr-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
</div>
<span class="text-sm font-semibold text-slate-700">Comprehensive documentation & SDKs</span>
</div>
</div>
<div class="space-y-2 pt-2">
<label class="text-xs font-bold text-slate-500 uppercase tracking-wide">Email Address</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<input type="email" class="w-full pl-10 pr-4 py-3 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm placeholder:text-slate-400" placeholder="you@company.com">
</div>
<p class="text-xs text-slate-500">We'll send your API key instantly to this address.</p>
</div>
</div>
`,
confirmText: 'Generate API Key'
},
'book-demo': {
title: 'Schedule a Personalized Demo',
content: `
<div class="space-y-6">
<div class="p-4 bg-primary-50 border-l-4 border-primary-500 rounded-r-lg">
<p class="text-sm font-semibold text-primary-800">See ClinicalAPI in action with a demo tailored to your specific use case and compliance requirements.</p>
</div>
<div class="space-y-4">
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Full Name</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<input type="text" class="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="Dr. Jane Smith">
</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Work Email</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<input type="email" class="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="jane@hospital.com">
</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Company</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
<input type="text" class="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="Healthcare Inc.">
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3 pt-2">
<div class="text-center p-3 border border-slate-200 rounded-lg">
<div class="text-primary-600 font-bold text-lg mb-1 flex items-center justify-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>30m</div>
<div class="text-xs text-slate-500">Live Session</div>
</div>
<div class="text-center p-3 border border-slate-200 rounded-lg">
<div class="text-primary-600 font-bold text-lg mb-1 flex items-center justify-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>24h</div>
<div class="text-xs text-slate-500">Response Time</div>
</div>
</div>
</div>
`,
confirmText: 'Request Demo'
},
'view-docs': {
title: 'Explore Our Documentation',
content: `
<div class="space-y-4">
<p class="text-slate-600 text-sm">Comprehensive documentation to help you integrate ClinicalAPI:</p>
<div class="grid gap-2">
<a href="#" class="flex items-center p-4 bg-slate-50 rounded-lg border border-transparent hover:border-primary-200 hover:bg-white hover:shadow-sm transition-all group">
<div class="w-10 h-10 rounded bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
</div>
<div>
<div class="font-bold text-slate-900 group-hover:text-primary-600 transition-colors">Quick Start Guide</div>
<div class="text-xs text-slate-500 mt-0.5">Get up and running in 5 minutes</div>
</div>
</a>
<a href="#" class="flex items-center p-4 bg-slate-50 rounded-lg border border-transparent hover:border-primary-200 hover:bg-white hover:shadow-sm transition-all group">
<div class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</div>
<div>
<div class="font-bold text-slate-900 group-hover:text-primary-600 transition-colors">API Reference</div>
<div class="text-xs text-slate-500 mt-0.5">Complete endpoint documentation</div>
</div>
</a>
<a href="#" class="flex items-center p-4 bg-slate-50 rounded-lg border border-transparent hover:border-primary-200 hover:bg-white hover:shadow-sm transition-all group">
<div class="w-10 h-10 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
</div>
<div>
<div class="font-bold text-slate-900 group-hover:text-primary-600 transition-colors">SDK Documentation</div>
<div class="text-xs text-slate-500 mt-0.5">Python, JavaScript, Java, .NET</div>
</div>
</a>
<a href="#" class="flex items-center p-4 bg-slate-50 rounded-lg border border-transparent hover:border-primary-200 hover:bg-white hover:shadow-sm transition-all group">
<div class="w-10 h-10 rounded bg-green-100 flex items-center justify-center text-green-600 mr-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
</div>
<div>
<div class="font-bold text-slate-900 group-hover:text-primary-600 transition-colors">Security Guide</div>
<div class="text-xs text-slate-500 mt-0.5">HIPAA, SOC2, and best practices</div>
</div>
</a>
</div>
</div>
`,
confirmText: null
},
'byoc-overview': {
title: 'BYOC (Bring Your Own Cloud) Overview',
content: `
<div class="space-y-6">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 rounded-xl bg-slate-900 flex items-center justify-center text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
</div>
<div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-wide">Deployment Model</div>
<div class="font-bold text-slate-900">Deploy in Your Cloud</div>
</div>
</div>
<p class="text-slate-600 text-sm">Deploy ClinicalAPI processing runtimes directly in your cloud infrastructure:</p>
<div class="grid grid-cols-2 gap-4">
<div class="p-4 bg-white border border-slate-200 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<div class="w-8 h-8 rounded-lg bg-teal-100 flex items-center justify-center text-teal-600 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
<div class="font-bold text-slate-900 text-sm">Zero Data Egress</div>
<div class="text-xs text-slate-500 mt-1">PHI never leaves your VPC</div>
</div>
<div class="p-4 bg-white border border-slate-200 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<div class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</div>
<div class="font-bold text-slate-900 text-sm">Full Control</div>
<div class="text-xs text-slate-500 mt-1">Manage infrastructure your way</div>
</div>
<div class="p-4 bg-white border border-slate-200 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center text-green-600 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div class="font-bold text-slate-900 text-sm">Compliance</div>
<div class="text-xs text-slate-500 mt-1">Meet strictest requirements</div>
</div>
<div class="p-4 bg-white border border-slate-200 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<div class="w-8 h-8 rounded-lg bg-orange-100 flex items-center justify-center text-orange-600 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
</div>
<div class="font-bold text-slate-900 text-sm">Performance</div>
<div class="text-xs text-slate-500 mt-1">Low latency, high throughput</div>
</div>
</div>
<div class="bg-slate-900 text-white p-4 rounded-xl flex items-center justify-between">
<div>
<div class="font-bold text-sm">Cloud Providers</div>
<div class="text-xs text-slate-400">Currently available for AWS</div>
</div>
<div class="text-xs font-mono bg-slate-800 px-3 py-1.5 rounded">Azure & GCP Soon</div>
</div>
</div>
`,
confirmText: 'Learn More'
},
'security-overview': {
title: 'Security & Compliance Overview',
content: `
<div class="space-y-6">
<div class="bg-green-50 border border-green-200 rounded-lg p-4 flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#166534" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-0.5 mr-3"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
<div>
<div class="text-sm font-bold text-green-800">Enterprise-Grade Security</div>
<div class="text-xs text-green-700 mt-1">Built for the most demanding security requirements</div>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:border-primary-300 transition-colors">
<div class="flex items-center">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center text-slate-600 mr-3 font-bold text-xs">HIPAA</div>
<div class="text-sm font-semibold text-slate-800">HIPAA Compliant</div>
</div>
<div class="text-xs text-slate-500">BAA Available</div>
</div>
<div class="flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:border-primary-300 transition-colors">
<div class="flex items-center">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center text-slate-600 mr-3 font-bold text-xs">SOC2</div>
<div class="text-sm font-semibold text-slate-800">SOC 2 Type II</div>
</div>
<div class="text-xs text-slate-500">Audited & Certified</div>
</div>
<div class="flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:border-primary-300 transition-colors">
<div class="flex items-center">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center text-slate-600 mr-3 font-bold text-xs">GDPR</div>
<div class="text-sm font-semibold text-slate-800">GDPR Ready</div>
</div>
<div class="text-xs text-slate-500">DPA Included</div>
</div>
<div class="flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:border-primary-300 transition-colors">
<div class="flex items-center">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center text-slate-600 mr-3 font-bold text-xs">ISO</div>
<div class="text-sm font-semibold text-slate-800">ISO 27001</div>
</div>
<div class="text-xs text-slate-500">Certified</div>
</div>
</div>
<div class="pt-2 border-t border-slate-100">
<div class="text-xs text-slate-500 mb-3">Technical Standards</div>
<div class="flex gap-2">
<span class="px-2 py-1 bg-slate-100 border border-slate-200 rounded text-xs font-mono text-slate-600">AES-256</span>
<span class="px-2 py-1 bg-slate-100 border border-slate-200 rounded text-xs font-mono text-slate-600">TLS 1.3</span>
<span class="px-2 py-1 bg-slate-100 border border-slate-200 rounded text-xs font-mono text-slate-600">BYOC</span>
</div>
</div>
</div>
`,
confirmText: 'Contact Security Team'
},
'preprocessing': {
title: 'Intelligent Preprocessing',
content: `
<div class="space-y-5">
<p class="text-slate-600 text-sm">Transform raw clinical documents into structured, machine-ready data with our advanced preprocessing pipeline.</p>
<div class="grid gap-3">
<div class="flex items-start p-3 bg-white border border-slate-200 rounded-lg">
<div class="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center text-slate-500 mr-3 mt-0.5">📄</div>
<div>
<div class="text-sm font-bold text-slate-900">Document Parsing</div>
<div class="text-xs text-slate-500 mt-1">PDF, DOCX, TXT, DICOM support</div>
</div>
</div>
<div class="flex items-start p-3 bg-white border border-slate-200 rounded-lg">
<div class="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center text-slate-500 mr-3 mt-0.5">🔍</div>
<div>
<div class="text-sm font-bold text-slate-900">OCR Enhancement</div>
<div class="text-xs text-slate-500 mt-1">99.5% accuracy on scanned documents</div>
</div>
</div>
<div class="flex items-start p-3 bg-white border border-slate-200 rounded-lg">
<div class="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center text-slate-500 mr-3 mt-0.5">✂️</div>
<div>
<div class="text-sm font-bold text-slate-900">Section Detection</div>
<div class="text-xs text-slate-500 mt-1">Identify HPI, ROS, PE, A&P sections</div>
</div>
</div>
<div class="flex items-start p-3 bg-white border border-slate-200 rounded-lg">
<div class="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center text-slate-500 mr-3 mt-0.5">📦</div>
<div>
<div class="text-sm font-bold text-slate-900">Smart Chunking</div>
<div class="text-xs text-slate-500 mt-1">Maintain context with optimal spans</div>
</div>
</div>
</div>
</div>
`,
confirmText: 'View API Docs'
},
'phi-protection': {
title: 'Enterprise PHI Protection',
content: `
<div class="space-y-6">
<p class="text-slate-600 text-sm">Military-grade de-identification with customizable policies designed for clinical text.</p>
<div class="bg-gradient-to-r from-teal-50 to-emerald-50 border border-teal-100 p-4 rounded-xl text-center">
<div class="text-2xl font-extrabold text-teal-800 mb-1">99.8% PHI Recall</div>
<div class="text-sm font-semibold text-teal-700">97.5% Precision</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="p-3 bg-red-50 border border-red-100 rounded-lg">
<div class="text-xs font-bold text-red-700 uppercase tracking-wide mb-1">Coverage</div>
<div class="text-sm font-semibold text-slate-800">18 HIPAA Identifiers</div>
</div>
<div class="p-3 bg-purple-50 border border-purple-100 rounded-lg">
<div class="text-xs font-bold text-purple-700 uppercase tracking-wide mb-1">Modes</div>
<div class="text-sm font-semibold text-slate-800">Mask, Replace, Tokenize</div>
</div>
<div class="p-3 bg-blue-50 border border-blue-100 rounded-lg">
<div class="text-xs font-bold text-blue-700 uppercase tracking-wide mb-1">Profiles</div>
<div class="text-sm font-semibold text-slate-800">HIPAA, GDPR, Custom</div>
</div>
<div class="p-3 bg-orange-50 border border-orange-100 rounded-lg">
<div class="text-xs font-bold text-orange-700 uppercase tracking-wide mb-1">Control</div>
<div class="text-sm font-semibold text-slate-800">Whitelist/Blacklist</div>
</div>
</div>
</div>
`,
confirmText: 'Try De-ID Demo'
},
'entity-extraction': {
title: 'Clinical Entity Extraction',
content: `
<div class="space-y-5">
<p class="text-slate-600 text-sm">Extract clinically-relevant entities with clinical-grade accuracy powered by our proprietary NLP models.</p>
<div class="space-y-2">
<div class="flex items-center justify-between p-2.5 bg-slate-50 rounded-lg border border-slate-100">
<span class="text-sm font-medium text-slate-800">💊 Medications</span>
<span class="text-xs text-slate-500">Drugs, Dosages, Routes</span>
</div>
<div class="flex items-center justify-between p-2.5 bg-slate-50 rounded-lg border border-slate-100">
<span class="text-sm font-medium text-slate-800">🏥 Problems</span>
<span class="text-xs text-slate-500">Diagnoses, Symptoms</span>
</div>
<div class="flex items-center justify-between p-2.5 bg-slate-50 rounded-lg border border-slate-100">
<span class="text-sm font-medium text-slate-800">🔬 Procedures</span>
<span class="text-xs text-slate-500">Surgeries, Tests</span>
</div>
<div class="flex items-center justify-between p-2.5 bg-slate-50 rounded-lg border border-slate-100">
<span class="text-sm font-medium text-slate-800">🧪 Labs</span>
<span class="text-xs text-slate-500">Results, Units</span>
</div>
</div>
<div class="bg-indigo-50 border border-indigo-100 p-3 rounded-lg">
<div class="flex items-center mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<span class="text-xs font-bold text-indigo-800">Advanced Features</span>
</div>
<p class="text-xs text-indigo-700">Includes negation, speculation, temporality, and assertion modeling.</p>
</div>
</div>
`,
confirmText: 'View Entity Types'
},
'normalization': {
title: 'Clinical Code Normalization',
content: `
<div class="space-y-5">
<p class="text-slate-600 text-sm">Map extracted entities to standard medical vocabularies for interoperability and analytics.</p>
<div class="grid grid-cols-2 gap-3">
<div class="bg-white border border-slate-200 rounded-lg p-3 text-center hover:border-primary-300 transition-colors">
<div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 mx-auto mb-2 font-bold text-sm">SN</div>
<div class="text-xs font-bold text-slate-800">SNOMED CT</div>
<div class="text-[10px] text-slate-500 mt-1">350k+ Concepts</div>
</div>
<div class="bg-white border border-slate-200 rounded-lg p-3 text-center hover:border-primary-300 transition-colors">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mx-auto mb-2 font-bold text-sm">IC</div>
<div class="text-xs font-bold text-slate-800">ICD-10-CM</div>
<div class="text-[10px] text-slate-500 mt-1">Diagnosis Codes</div>
</div>
<div class="bg-white border border-slate-200 rounded-lg p-3 text-center hover:border-primary-300 transition-colors">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mx-auto mb-2 font-bold text-sm">Rx</div>
<div class="text-xs font-bold text-slate-800">RxNorm</div>
<div class="text-[10px] text-slate-500 mt-1">Medication Norm</div>
</div>
<div class="bg-white border border-slate-200 rounded-lg p-3 text-center hover:border-primary-300 transition-colors">
<div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mx-auto mb-2 font-bold text-sm">LO</div>
<div class="text-xs font-bold text-slate-800">LOINC</div>
<div class="text-[10px] text-slate-500 mt-1">Lab Observations</div>
</div>
</div>
<div class="bg-slate-50 border border-slate-200 rounded-lg p-3 flex items-center justify-between">
<span class="text-xs text-slate-600">Includes CPT/HCPCS & Unit Conversion</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
</div>
`,
confirmText: 'View Code Systems'
},
'evidence-packs': {
title: 'Audit-Ready Evidence Packs',
content: `
<div class="space-y-5">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</div>
<div>
<div class="text-sm font-bold text-slate-900">Cryptographically Verifiable</div>
<div class="text-xs text-slate-500">Tamper-evident audit trails</div>
</div>
</div>
<p class="text-slate-600 text-sm">Generate cryptographically-verifiable audit trails for every processing decision.</p>
<div class="space-y-2">
<div class="flex items-center text-sm text-slate-700 p-2 hover:bg-slate-50 rounded transition-colors">
<div class="w-5 h-5 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center mr-3 text-xs">1</div>
<span>Pipeline Versioning (Model & Config)</span>
</div>
<div class="flex items-center text-sm text-slate-700 p-2 hover:bg-slate-50 rounded transition-colors">
<div class="w-5 h-5 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center mr-3 text-xs">2</div>
<span>Step-by-Step Processing Logs</span>
</div>
<div class="flex items-center text-sm text-slate-700 p-2 hover:bg-slate-50 rounded transition-colors">
<div class="w-5 h-5 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center mr-3 text-xs">3</div>
<span>ISO 8601 Timestamping</span>
</div>
<div class="flex items-center text-sm text-slate-700 p-2 hover:bg-slate-50 rounded transition-colors">
<div class="w-5 h-5 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center mr-3 text-xs">4</div>
<span>Entity Source Provenance</span>
</div>
</div>
<div class="bg-amber-50 border border-amber-200 p-3 rounded-lg text-xs text-amber-800">
<span class="font-bold">Use Case:</span> Perfect for FDA submissions, internal audits, and AI model governance.
</div>
</div>
`,
confirmText: 'View Evidence Schema'
},
'deployment': {
title: 'Flexible Deployment Options',
content: `
<div class="space-y-4">
<p class="text-slate-600 text-sm mb-4">Choose the deployment model that fits your security and infrastructure requirements.</p>
<div class="space-y-3">
<label class="cursor-pointer">
<input type="radio" name="deployment" class="peer sr-only" checked>
<div class="p-4 border-2 border-slate-200 rounded-xl peer-checked:border-primary-500 peer-checked:bg-primary-50 transition-all">
<div class="flex items-center justify-between mb-2">
<div class="font-bold text-slate-900 peer-checked:text-primary-800 flex items-center">
<span class="mr-2">☁️</span> SaaS (Managed)
</div>
<div class="text-xs bg-white border border-slate-200 px-2 py-1 rounded-full text-slate-600 font-mono">$249/mo</div>
</div>
<div class="text-xs text-slate-500 space-y-1 pl-6">
<div>• Fastest to deploy (minutes)</div>
<div>• Automatic updates and scaling</div>
</div>
</div>
</label>
<label class="cursor-pointer">
<input type="radio" name="deployment" class="peer sr-only">
<div class="p-4 border-2 border-slate-200 rounded-xl peer-checked:border-primary-500 peer-checked:bg-primary-50 transition-all">
<div class="flex items-center justify-between mb-2">
<div class="font-bold text-slate-900 peer-checked:text-primary-800 flex items-center">
<span class="mr-2">🏢</span> BYOC (Your Cloud)
</div>
<div class="text-xs bg-slate-900 text-white px-2 py-1 rounded-full font-mono">Enterprise</div>
</div>
<div class="text-xs text-slate-500 space-y-1 pl-6">
<div>• Deploy to your AWS VPC</div>
<div>• Zero data egress</div>
</div>
</div>
</label>
</div>
</div>
`,
confirmText: 'Compare Deployments'
},
'explore-packs': {
title: 'Processing Packs Documentation',
content: `
<div class="space-y-4">
<p>Deep dive into each processing pack:</p>
<div class="space-y-2 text-sm">
<a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 Preprocess Pack Guide</a>
<a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 De-ID Pack Guide</a>
<a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 Extraction Pack Guide</a>
<a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 Normalization Pack Guide</a>
<a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 Evidence Pack Guide</a>
<a href="#" class="block p-2 hover:bg-slate-50 rounded">📖 Context Pack Guide</a>
</div>
<p class="text-sm text-slate-500">Combine packs to build custom pipelines.</p>
</div>
`,
confirmText: null
},
'byoc-guide': {
title: 'BYOC Deployment Guide',
content: `
<div class="space-y-4">
<p>Deploy ClinicalAPI in your AWS account:</p>
<ol class="space-y-3 text-sm list-decimal list-inside">
<li>Configure your AWS VPC and subnets</li>
<li>Provide IAM credentials with required permissions</li>
<li>Run our CloudFormation or Terraform templates</li>
<li>Verify deployment with health check endpoint</li>
<li>Start processing with your BYOC endpoint URL</li>
</ol>
<p class="text-sm text-slate-500">Our team provides full deployment support.</p>
</div>
`,
confirmText: 'Start Deployment'
},
'architecture-review': {
title: 'Book Architecture Review',
content: `
<div class="space-y-4">
<p class="text-slate-600">Get expert guidance on your ClinicalAPI implementation:</p>
<ul class="space-y-2 text-sm text-slate-700">
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Architecture design review</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Security and compliance assessment</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Performance optimization recommendations</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Integration best practices</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Cost optimization strategies</li>
</ul>
<div class="bg-slate-50 p-4 rounded-lg space-y-4">
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Your Name</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<input type="text" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="John Doe">
</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Work Email</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<input type="email" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="you@company.com">
</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Company</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
<input type="text" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="Company Name">
</div>
</div>
</div>
</div>
`,
confirmText: 'Request Review'
},
'read-docs-dev': {
title: 'Developer Documentation',
content: `
<div class="space-y-4">
<p>Everything developers need to integrate ClinicalAPI:</p>
<div class="grid grid-cols-2 gap-2">
<div class="p-3 bg-slate-50 rounded-lg text-center">
<div class="text-2xl mb-1">📘</div>
<div class="text-sm font-medium">API Reference</div>
</div>
<div class="p-3 bg-slate-50 rounded-lg text-center">
<div class="text-2xl mb-1">🐍</div>
<div class="text-sm font-medium">Python SDK</div>
</div>
<div class="p-3 bg-slate-50 rounded-lg text-center">
<div class="text-2xl mb-1">⚡</div>
<div class="text-sm font-medium">JavaScript SDK</div>
</div>
<div class="p-3 bg-slate-50 rounded-lg text-center">
<div class="text-2xl mb-1">☕</div>
<div class="text-sm font-medium">Java SDK</div>
</div>
</div>
</div>
`,
confirmText: null
},
'npm-install': {
title: 'Install ClinicalAPI SDK',
content: `
<div class="space-y-4">
<p>Install the official ClinicalAPI SDK for Node.js:</p>
<div class="bg-slate-900 p-4 rounded-lg">
<code class="text-green-400 text-sm">npm install @clinicalapi/sdk</code>
</div>
<p class="text-sm text-slate-600">Or use yarn:</p>
<div class="bg-slate-900 p-4 rounded-lg">
<code class="text-green-400 text-sm">yarn add @clinicalapi/sdk</code>
</div>
<a href="#" class="text-primary-600 text-sm font-medium hover:underline">View SDK Documentation →</a>
</div>
`,
confirmText: null
},
'security-overview-detail': {
title: 'Security & Compliance Details',
content: `
<div class="space-y-4">
<p>Our comprehensive security posture:</p>
<ul class="space-y-2 text-sm">
<li>🔒 <strong>Encryption</strong> — AES-256 at rest, TLS 1.3 in transit</li>
<li>👤 <strong>Access Control</strong> — RBAC/ABAC, MFA required</li>
<li>📋 <strong>Audit Logging</strong> — Immutable logs for all access</li>
<li>✅ <strong>Certifications</strong> — SOC 2 Type II, HIPAA, ISO 27001</li>
<li>🧪 <strong>Penetration Testing</strong> — Quarterly third-party audits</li>
<li>🔄 <strong>Vulnerability Management</strong> — Continuous scanning</li>
</ul>
<p class="text-sm text-slate-500">Download our full security whitepaper for detailed information.</p>
</div>
`,
confirmText: 'Download Whitepaper'
},
'get-started-starter': {
title: 'Start with Free Tier',
content: `
<div class="space-y-4">
<p class="text-slate-600">Begin exploring ClinicalAPI with our free tier:</p>
<ul class="space-y-2 text-sm text-slate-700">
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>5,000 characters/month free</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>All core processing packs</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Community support</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>No credit card required</li>
</ul>
<div class="bg-slate-50 p-4 rounded-lg">
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Email Address</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<input type="email" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="you@company.com">
</div>
</div>
</div>
`,
confirmText: 'Create Free Account'
},
'get-api-key-growth': {
title: 'Upgrade to Growth Plan',
content: `
<div class="space-y-4">
<p class="text-slate-600">Unlock powerful features with the Growth plan:</p>
<ul class="space-y-2 text-sm text-slate-700">
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>2 million characters included</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>All processing packs enabled</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Evidence packs included</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Priority email support</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Starting at $1,999/month</li>
</ul>
<div class="bg-primary-50 border border-primary-200 p-4 rounded-lg text-sm text-primary-700 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
First month free for new customers!
</div>
</div>
`,
confirmText: 'Start Free Trial'
},
'contact-sales': {
title: 'Contact Enterprise Sales',
content: `
<div class="space-y-4">
<p class="text-slate-600">Let's discuss your enterprise needs:</p>
<ul class="space-y-2 text-sm text-slate-700">
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>High volume processing</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Dedicated BYOC runtimes</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>SSO & custom SLAs</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Dedicated account manager</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Custom integrations</li>
</ul>
<div class="space-y-4">
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Full Name</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<input type="text" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="John Doe">
</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Work Email</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<input type="email" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="you@company.com">
</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Company</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
<input type="text" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="Company Name">
</div>
</div>
</div>
</div>
`,
confirmText: 'Request Callback'
},
'final-get-api-key': {
title: 'Get Your API Key Now',
content: `
<div class="space-y-4">
<p class="text-slate-600">Start processing clinical documents in minutes:</p>
<div class="bg-slate-50 p-4 rounded-lg">
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Email Address</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<input type="email" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="you@company.com">
</div>
</div>
<p class="text-sm text-slate-500 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary-500"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>Free tier: 5,000 characters/month. No credit card required.</p>
</div>
`,
confirmText: 'Generate API Key'
},
'final-book-demo': {
title: 'Schedule Your Demo',
content: `
<div class="space-y-4">
<p class="text-slate-600">See ClinicalAPI in action with your own data:</p>
<div class="space-y-4">
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Full Name</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
<input type="text" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="John Doe">
</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Work Email</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<input type="email" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="you@company.com">
</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Company</label>
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 pointer-events-none"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
<input type="text" class="w-full pl-10 pr-4 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-shadow outline-none text-sm" placeholder="Company Name">
</div>
</div>
</div>
</div>
`,
confirmText: 'Book Demo'
},
'final-byoc': {
title: 'BYOC Deployment Options',
content: `
<div class="space-y-4">
<p class="text-slate-600">Keep PHI within your security boundary:</p>
<ul class="space-y-2 text-sm text-slate-700">
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Deploy to your AWS VPC</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Zero data egress</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Full infrastructure control</li>
<li class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><polyline points="20 6 9 17 4 12"></polyline></svg>Enterprise-grade security</li>
</ul>
<p class="text-sm text-slate-500 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary-500"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>Contact sales for BYOC pricing and setup.</p>
</div>
`,
confirmText: 'Contact Sales'
}
};
// Modal Functionality
const modal = document.getElementById('main-modal');
const modalTriggers = document.querySelectorAll('.modal-trigger');
modalTriggers.forEach(trigger => {
trigger.addEventListener('click', (e) => {
e.preventDefault();
const modalType = trigger.getAttribute('data-modal');
const content = modalContents[modalType];
if (content) {
// Pass the trigger element to manage focus restoration
modal.open(content.title, content.content, content.confirmText, null, trigger);
}
});
});
// Solution Carousel Logic
const tabs = document.querySelectorAll('.solution-tab');
const contents = document.querySelectorAll('.solution-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Remove active classes
tabs.forEach(t => {
t.classList.remove('text-primary-600', 'border-b-2', 'border-primary-600', 'font-bold');
t.classList.add('text-slate-500', 'font-medium');
});
// Add active classes to clicked tab
tab.classList.remove('text-slate-500', 'font-medium');
tab.classList.add('text-primary-600', 'border-b-2', 'border-primary-600', 'font-bold');
// Hide all content
contents.forEach(c => c.classList.add('hidden'));
// Show target content
const targetId = tab.getAttribute('data-target');
const targetContent = document.getElementById(targetId);
if (targetContent) {
targetContent.classList.remove('hidden');
}
});
});
// FAQ Accordion Logic
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const trigger = item.querySelector('.faq-trigger');
const content = item.querySelector('.faq-content');
const icon = item.querySelector('.faq-icon');
trigger.addEventListener('click', () => {
const isExpanded = !content.classList.contains('hidden');
// Close all other FAQs
faqItems.forEach(otherItem => {
const otherContent = otherItem.querySelector('.faq-content');
const otherIcon = otherItem.querySelector('.faq-icon');
otherContent.classList.add('hidden');
otherIcon.classList.remove('rotate-180');
});
// Toggle current FAQ
if (!isExpanded) {
content.classList.remove('hidden');
icon.classList.add('rotate-180');
}
});
});
// Mobile Menu Toggle
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const navLinks = document.querySelector('.nav-links');
if(mobileMenuBtn) {
mobileMenuBtn.addEventListener('click', () => {
navLinks.classList.toggle('hidden');
});
}
});