${letterContent} `; const blob = new Blob([fullDocument], { type: 'application/msword' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `Breach_Contract_Demand_Letter_${formData.breachingPartyName || 'Draft'}.doc`; link.click(); URL.revokeObjectURL(url); }; // E-Sign Document Function const eSignDocument = async () => { if (!hasPaywallAccess) { if (window.PaywallSystem) { window.PaywallSystem.showAccessDenied('esign'); window.PaywallSystem.createPaywallModal(() => { if (window.PaywallSystem && window.PaywallSystem.hasAccess()) { setHasPaywallAccess(true); window.PaywallSystem.enablePreviewInteraction(); eSignDocument(); } }); } return; } // Check eSignature click limit (5 clicks per payment) if (window.PaywallSystem && !window.PaywallSystem.canClickESignature()) { const paymentStatus = window.PaywallSystem.getPaymentStatus(); const clickCount = paymentStatus.esignatureClicks || 0; alert(`🚫 eSignature Click Limit Reached\\n\\nYou have used ${clickCount}/5 eSignature clicks for this payment.\\n\\n⚠️ Each click sends a document to our API and regenerates it, costing us API fees even if you don't ultimately sign.\\n\\nTo create more eSignatures, please make a new payment.`); return; } // Show warning about API costs const proceed = confirm(`📝 eSignature API Notice\\n\\n⚠️ IMPORTANT: This button sends your document to eSignatures.com API and costs us money for each click, even if you don't complete the signing.\\n\\n✅ Please ensure your document is complete and correct before proceeding.\\n\\n🔢 You have ${5 - (window.PaywallSystem?.getPaymentStatus()?.esignatureClicks || 0)} API calls remaining.\\n\\nProceed with eSignature creation?`); if (!proceed) { return; } // Increment click counter if (window.PaywallSystem) { window.PaywallSystem.incrementESignatureClicks(); } // Use pre-filled test credentials for quick testing const testEmail = 'owner@terms.law'; const testName = formData.yourContactName || 'Test Legal Professional'; // Validate required fields (use test data if not provided) const signerEmail = formData.yourEmail || testEmail; const signerName = formData.yourContactName || testName; if (!signerEmail || !signerName) { alert('Please fill in your contact name and email address before signing the document.'); return; } try { setESignLoading(true); console.log("eSignature button clicked with test mode"); const finalDocumentText = generateLetterContent().replace(/<[^>]*>/g, ''); const documentTitle = `Breach of Contract Demand Letter - ${formData.breachingPartyName || 'Draft'}`; // eSignatures.com API call with test mode const apiData = { test: "yes", // TEST MODE - no charges template: { title: documentTitle, content: finalDocumentText, content_type: "text" }, signers: [{ email: signerEmail, name: signerName, role: "signer" }] }; console.log("Sending to eSignatures.com API (TEST MODE):", apiData); // Use API endpoint (compatible with Vercel/Netlify deployment) const response = await fetch('/api/esignatures-api', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(apiData) }); const result = await response.json(); console.log("eSignatures.com API response:", result); if (response.ok && result.signing_url) { // Open signing URL in new window window.open(result.signing_url, '_blank', 'width=1000,height=800,scrollbars=yes,resizable=yes'); // Show success message alert(`✅ eSignature Created Successfully!\\n\\n📧 Document sent to: ${signerEmail}\\n\\n🔗 Signing link opened in new window\\n\\n⚠️ TEST MODE: This is a test signature and won't create legal obligations.\\n\\n💡 For production use, contact support to enable live mode.`); } else { throw new Error(result.message || 'Failed to create eSignature contract'); } } catch (error) { console.error("eSignature error:", error); // Fallback demo mode alert(`⚠️ eSignature API Error\\n\\n${error.message}\\n\\n🔄 Demo Mode Activated\\n\\nThis would create a real eSignature in production. For testing, please ensure:\\n\\n1. API endpoint is configured\\n2. eSignatures.com credentials are set\\n3. CORS settings allow API calls\\n\\nContact support for production setup.`); } finally { setESignLoading(false); } }; // Tab content renderers const renderContractTab = () => { return React.createElement('div', { className: 'tab-content' }, [ // Your Company Information React.createElement('div', { key: 'your-company', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '🏢 Your Company Information'), React.createElement('div', { key: 'company-name', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Your Company/Organization Name *'), React.createElement('input', { key: 'input', type: 'text', value: formData.yourCompanyName, onChange: (e) => updateFormData('yourCompanyName', e.target.value), placeholder: 'ABC Corporation', title: 'Legal name of your company or organization' }) ]), React.createElement('div', { key: 'contact-info', className: 'form-row' }, [ React.createElement('div', { key: 'contact-name', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Your Name *'), React.createElement('input', { key: 'input', type: 'text', value: formData.yourContactName, onChange: (e) => updateFormData('yourContactName', e.target.value), placeholder: 'John Smith', title: 'Name of person sending this demand letter' }) ]), React.createElement('div', { key: 'title', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Your Title'), React.createElement('input', { key: 'input', type: 'text', value: formData.yourTitle, onChange: (e) => updateFormData('yourTitle', e.target.value), placeholder: 'CEO, Legal Counsel, etc.', title: 'Your professional title or role' }) ]) ]), React.createElement('div', { key: 'contact-details', className: 'form-row' }, [ React.createElement('div', { key: 'email', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Email Address *'), React.createElement('input', { key: 'input', type: 'email', value: formData.yourEmail, onChange: (e) => updateFormData('yourEmail', e.target.value), placeholder: 'legal@abccorp.com', title: 'Contact email for legal communications' }) ]), React.createElement('div', { key: 'phone', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Phone Number'), React.createElement('input', { key: 'input', type: 'tel', value: formData.yourPhone, onChange: (e) => updateFormData('yourPhone', e.target.value), placeholder: '(555) 123-4567', title: 'Contact phone number' }) ]) ]), React.createElement('div', { key: 'address', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Company Address'), React.createElement('textarea', { key: 'input', value: formData.yourCompanyAddress, onChange: (e) => updateFormData('yourCompanyAddress', e.target.value), placeholder: '123 Business Ave\nSuite 100\nCity, State 12345', title: 'Complete business address for legal notices' }) ]) ]), // Breaching Party Information React.createElement('div', { key: 'breaching-party', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '⚠️ Breaching Party Information'), React.createElement('div', { key: 'party-name', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Breaching Party Name/Company *'), React.createElement('input', { key: 'input', type: 'text', value: formData.breachingPartyName, onChange: (e) => updateFormData('breachingPartyName', e.target.value), placeholder: 'XYZ Services Inc.', title: 'Legal name of the party who breached the contract' }) ]), React.createElement('div', { key: 'contact-info', className: 'form-row' }, [ React.createElement('div', { key: 'contact-name', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Contact Person'), React.createElement('input', { key: 'input', type: 'text', value: formData.breachingContactName, onChange: (e) => updateFormData('breachingContactName', e.target.value), placeholder: 'Jane Doe', title: 'Primary contact at the breaching party' }) ]), React.createElement('div', { key: 'contact-title', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Contact Title'), React.createElement('input', { key: 'input', type: 'text', value: formData.breachingContactTitle, onChange: (e) => updateFormData('breachingContactTitle', e.target.value), placeholder: 'Project Manager, CEO, etc.', title: 'Title of the contact person' }) ]) ]), React.createElement('div', { key: 'address', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Breaching Party Address'), React.createElement('textarea', { key: 'input', value: formData.breachingPartyAddress, onChange: (e) => updateFormData('breachingPartyAddress', e.target.value), placeholder: '456 Contract St\nCity, State 67890', title: 'Complete address of the breaching party for service of legal notice' }) ]) ]), // Contract Information React.createElement('div', { key: 'contract-info', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '📄 Contract Information'), React.createElement('div', { key: 'contract-type', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Contract Type *'), React.createElement('select', { key: 'input', value: formData.contractType, onChange: (e) => updateFormData('contractType', e.target.value), title: 'Type of contract that was breached - affects legal remedies available' }, Object.entries(contractTypes).map(([value, label]) => React.createElement('option', { key: value, value }, label) )) ]), React.createElement('div', { key: 'contract-title', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Contract Title/Description'), React.createElement('input', { key: 'input', type: 'text', value: formData.contractTitle, onChange: (e) => updateFormData('contractTitle', e.target.value), placeholder: 'Software Development Agreement, Service Contract, etc.', title: 'Official title or description of the contract' }) ]), React.createElement('div', { key: 'contract-details', className: 'form-row-three' }, [ React.createElement('div', { key: 'date', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Contract Date *'), React.createElement('input', { key: 'input', type: 'date', value: formData.contractDate, onChange: (e) => updateFormData('contractDate', e.target.value), title: 'Date the contract was signed or became effective' }) ]), React.createElement('div', { key: 'value', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Contract Value ($)'), React.createElement('input', { key: 'input', type: 'number', step: '0.01', value: formData.contractValue, onChange: (e) => updateFormData('contractValue', e.target.value), placeholder: '50000.00', title: 'Total value of the contract - affects damages and legal strategy' }) ]), React.createElement('div', { key: 'term', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Contract Term'), React.createElement('input', { key: 'input', type: 'text', value: formData.contractTerm, onChange: (e) => updateFormData('contractTerm', e.target.value), placeholder: '12 months, 3 years, etc.', title: 'Duration or term of the contract' }) ]) ]), React.createElement('div', { key: 'governing-law', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Governing Law State 🏛️'), React.createElement('select', { key: 'input', value: formData.governingLaw, onChange: (e) => updateFormData('governingLaw', e.target.value), title: 'State law that governs the contract - critical for legal remedies and procedures' }, US_STATES.map(state => React.createElement('option', { key: state.value, value: state.value }, state.label) )) ]) ]) ]); }; const renderBreachTab = () => { return React.createElement('div', { className: 'tab-content' }, [ // Breach Classification React.createElement('div', { key: 'breach-classification', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '⚖️ Breach Classification'), React.createElement('div', { key: 'breach-type', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Type of Breach 📊'), React.createElement('select', { key: 'input', value: formData.breachType, onChange: (e) => updateFormData('breachType', e.target.value), title: 'Legal classification of breach - determines available remedies and damages' }, Object.entries(breachTypes).map(([value, label]) => React.createElement('option', { key: value, value }, label) )) ]), React.createElement('div', { key: 'breach-category', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Breach Category 🎯'), React.createElement('select', { key: 'input', value: formData.breachCategory, onChange: (e) => updateFormData('breachCategory', e.target.value), title: 'Specific nature of the breach - affects legal strategy and remedies' }, Object.entries(breachCategories).map(([value, label]) => React.createElement('option', { key: value, value }, label) )) ]), React.createElement('div', { key: 'breach-date', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Breach Date *'), React.createElement('input', { key: 'input', type: 'date', value: formData.breachDate, onChange: (e) => updateFormData('breachDate', e.target.value), title: 'Date when the breach occurred or was discovered - affects statute of limitations' }) ]) ]), // Detailed Breach Description React.createElement('div', { key: 'breach-details', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '📝 Breach Details'), React.createElement('div', { key: 'breach-description', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Detailed Breach Description *'), React.createElement('textarea', { key: 'input', value: formData.breachDescription, onChange: (e) => updateFormData('breachDescription', e.target.value), placeholder: 'Describe exactly what the breaching party failed to do, did incorrectly, or did in violation of the contract. Be specific about dates, deliverables, and requirements.', title: 'Detailed factual description of the breach - be specific and objective', rows: 4 }) ]), React.createElement('div', { key: 'contract-provision', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Contract Provision Violated'), React.createElement('textarea', { key: 'input', value: formData.contractProvision, onChange: (e) => updateFormData('contractProvision', e.target.value), placeholder: 'Quote the specific section, clause, or provision of the contract that was breached. Include section numbers if available.', title: 'Exact contract language that was violated - strengthens legal position', rows: 3 }) ]), React.createElement('div', { key: 'specific-obligations', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Specific Obligations Not Performed'), React.createElement('textarea', { key: 'input', value: formData.specificObligations, onChange: (e) => updateFormData('specificObligations', e.target.value), placeholder: 'List the specific obligations, deliverables, or performance requirements that were not met.', title: 'Specific contractual obligations that were not fulfilled', rows: 3 }) ]) ]), // Performance Analysis React.createElement('div', { key: 'performance-analysis', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '✅ Performance Analysis'), React.createElement('div', { key: 'your-performance', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Your Complete Performance'), React.createElement('textarea', { key: 'input', value: formData.yourPerformance, onChange: (e) => updateFormData('yourPerformance', e.target.value), placeholder: 'Describe how you fully performed your obligations under the contract. Include dates, deliverables, and evidence of completion.', title: 'Documentation of your complete performance - establishes right to demand performance', rows: 3 }) ]), React.createElement('div', { key: 'their-failure', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Their Failure to Perform'), React.createElement('textarea', { key: 'input', value: formData.theirFailure, onChange: (e) => updateFormData('theirFailure', e.target.value), placeholder: 'Describe specifically how the other party failed to perform their obligations. Be detailed and factual.', title: 'Specific description of how they failed to perform - core of breach claim', rows: 3 }) ]), React.createElement('div', { key: 'notice-cure', className: 'form-row' }, [ React.createElement('div', { key: 'notice', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Prior Notice Given'), React.createElement('textarea', { key: 'input', value: formData.noticeProvided, onChange: (e) => updateFormData('noticeProvided', e.target.value), placeholder: 'Describe any prior notice given to the breaching party about their non-performance.', title: 'Documentation of prior notice - may be required before demanding cure', rows: 2 }) ]), React.createElement('div', { key: 'cure-attempts', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Cure Attempts Made'), React.createElement('textarea', { key: 'input', value: formData.cureAttempts, onChange: (e) => updateFormData('cureAttempts', e.target.value), placeholder: 'Describe any attempts made to cure the breach or work with the other party.', title: 'Efforts to resolve the breach - shows good faith', rows: 2 }) ]) ]) ]), // Communication History React.createElement('div', { key: 'communication-history', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '💬 Communication History'), React.createElement('div', { key: 'prior-notices', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Prior Notices and Communications'), React.createElement('textarea', { key: 'input', value: formData.priorNotices, onChange: (e) => updateFormData('priorNotices', e.target.value), placeholder: 'Detail all prior communications about the breach, including dates, methods, and responses.', title: 'Complete record of communications - important for legal proceedings', rows: 3 }) ]), React.createElement('div', { key: 'their-response', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Breaching Party\'s Response'), React.createElement('textarea', { key: 'input', value: formData.breachingPartyResponse, onChange: (e) => updateFormData('breachingPartyResponse', e.target.value), placeholder: 'Describe any responses, excuses, or communications from the breaching party.', title: 'Their responses may affect legal strategy and available remedies', rows: 2 }) ]) ]) ]); }; const renderStrategyTab = () => { return React.createElement('div', { className: 'tab-content' }, [ // Damages Assessment React.createElement('div', { key: 'damages-assessment', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '💰 Damages Assessment'), React.createElement('div', { key: 'damage-type', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Primary Damage Type 📊'), React.createElement('select', { key: 'input', value: formData.damageType, onChange: (e) => updateFormData('damageType', e.target.value), title: 'Type of damages affects legal remedies and recovery options' }, [ React.createElement('option', { key: 'direct', value: 'direct' }, 'Direct Damages'), React.createElement('option', { key: 'consequential', value: 'consequential' }, 'Consequential Damages'), React.createElement('option', { key: 'incidental', value: 'incidental' }, 'Incidental Damages'), React.createElement('option', { key: 'liquidated', value: 'liquidated' }, 'Liquidated Damages'), React.createElement('option', { key: 'punitive', value: 'punitive' }, 'Punitive Damages') ]) ]), React.createElement('div', { key: 'damages-amounts', className: 'form-row-three' }, [ React.createElement('div', { key: 'direct', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Direct Damages ($)'), React.createElement('input', { key: 'input', type: 'number', step: '0.01', value: formData.directDamages, onChange: (e) => updateFormData('directDamages', e.target.value), placeholder: '25000.00', title: 'Direct financial losses from the breach - easiest to recover' }) ]), React.createElement('div', { key: 'consequential', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Consequential Damages ($)'), React.createElement('input', { key: 'input', type: 'number', step: '0.01', value: formData.consequentialDamages, onChange: (e) => updateFormData('consequentialDamages', e.target.value), placeholder: '15000.00', title: 'Indirect losses that were foreseeable - harder to recover' }) ]), React.createElement('div', { key: 'lost-profits', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Lost Profits ($)'), React.createElement('input', { key: 'input', type: 'number', step: '0.01', value: formData.lostProfits, onChange: (e) => updateFormData('lostProfits', e.target.value), placeholder: '10000.00', title: 'Lost business profits - requires strong proof of causation' }) ]) ]), React.createElement('div', { key: 'mitigation', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Mitigation Efforts'), React.createElement('textarea', { key: 'input', value: formData.mitigationEfforts, onChange: (e) => updateFormData('mitigationEfforts', e.target.value), placeholder: 'Describe efforts made to minimize damages from the breach.', title: 'Legal duty to mitigate damages - affects recovery amount', rows: 2 }) ]) ]), // Legal Strategy React.createElement('div', { key: 'legal-strategy', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '⚖️ Legal Strategy'), React.createElement('div', { key: 'demand-action', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Primary Demand 🎯'), React.createElement('select', { key: 'input', value: formData.demandAction, onChange: (e) => updateFormData('demandAction', e.target.value), title: 'Primary relief sought - affects legal strategy and negotiation position' }, [ React.createElement('option', { key: 'cure_and_damages', value: 'cure_and_damages' }, 'Cure Breach + Damages'), React.createElement('option', { key: 'specific_performance', value: 'specific_performance' }, 'Specific Performance'), React.createElement('option', { key: 'termination_damages', value: 'termination_damages' }, 'Termination + Damages'), React.createElement('option', { key: 'damages_only', value: 'damages_only' }, 'Damages Only'), React.createElement('option', { key: 'injunctive_relief', value: 'injunctive_relief' }, 'Injunctive Relief') ]) ]), React.createElement('div', { key: 'cure-deadline', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Cure Deadline (Days) ⏰'), React.createElement('select', { key: 'input', value: formData.cureDeadline, onChange: (e) => updateFormData('cureDeadline', e.target.value), title: 'Time given to cure breach - affects urgency and legal options' }, [ React.createElement('option', { key: '7', value: '7' }, '7 Days - Urgent'), React.createElement('option', { key: '14', value: '14' }, '14 Days - Standard'), React.createElement('option', { key: '30', value: '30' }, '30 Days - Reasonable'), React.createElement('option', { key: '60', value: '60' }, '60 Days - Extended'), React.createElement('option', { key: '90', value: '90' }, '90 Days - Maximum') ]) ]), React.createElement('div', { key: 'legal-remedies', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Legal Remedies Sought 🔨'), React.createElement('div', { key: 'remedies-grid', style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' } }, [ React.createElement('div', { key: 'damages', className: 'checkbox-group' }, [ React.createElement('input', { key: 'input', type: 'checkbox', checked: formData.legalRemedies.includes('damages'), onChange: (e) => { const newRemedies = e.target.checked ? [...formData.legalRemedies, 'damages'] : formData.legalRemedies.filter(r => r !== 'damages'); updateFormData('legalRemedies', newRemedies); }, title: 'Monetary compensation for losses' }), React.createElement('label', { key: 'label' }, 'Monetary Damages') ]), React.createElement('div', { key: 'specific', className: 'checkbox-group' }, [ React.createElement('input', { key: 'input', type: 'checkbox', checked: formData.legalRemedies.includes('specific_performance'), onChange: (e) => { const newRemedies = e.target.checked ? [...formData.legalRemedies, 'specific_performance'] : formData.legalRemedies.filter(r => r !== 'specific_performance'); updateFormData('legalRemedies', newRemedies); }, title: 'Court order requiring performance as contracted' }), React.createElement('label', { key: 'label' }, 'Specific Performance') ]), React.createElement('div', { key: 'injunctive', className: 'checkbox-group' }, [ React.createElement('input', { key: 'input', type: 'checkbox', checked: formData.legalRemedies.includes('injunctive_relief'), onChange: (e) => { const newRemedies = e.target.checked ? [...formData.legalRemedies, 'injunctive_relief'] : formData.legalRemedies.filter(r => r !== 'injunctive_relief'); updateFormData('legalRemedies', newRemedies); }, title: 'Court order to stop harmful behavior' }), React.createElement('label', { key: 'label' }, 'Injunctive Relief') ]), React.createElement('div', { key: 'termination', className: 'checkbox-group' }, [ React.createElement('input', { key: 'input', type: 'checkbox', checked: formData.legalRemedies.includes('termination'), onChange: (e) => { const newRemedies = e.target.checked ? [...formData.legalRemedies, 'termination'] : formData.legalRemedies.filter(r => r !== 'termination'); updateFormData('legalRemedies', newRemedies); }, title: 'Right to terminate contract and seek restitution' }), React.createElement('label', { key: 'label' }, 'Contract Termination') ]) ]) ]), React.createElement('div', { key: 'dispute-resolution', className: 'form-group' }, [ React.createElement('label', { key: 'label' }, 'Dispute Resolution Method 🏛️'), React.createElement('select', { key: 'input', value: formData.disputeResolution, onChange: (e) => updateFormData('disputeResolution', e.target.value), title: 'Method for resolving dispute if cure is not achieved' }, [ React.createElement('option', { key: 'litigation', value: 'litigation' }, 'Court Litigation'), React.createElement('option', { key: 'arbitration', value: 'arbitration' }, 'Binding Arbitration'), React.createElement('option', { key: 'mediation', value: 'mediation' }, 'Mediation First'), React.createElement('option', { key: 'negotiation', value: 'negotiation' }, 'Direct Negotiation') ]) ]) ]), // Additional Factors React.createElement('div', { key: 'additional-factors', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '⚡ Additional Factors'), React.createElement('div', { key: 'factors-grid', style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' } }, [ React.createElement('div', { key: 'time-critical', className: 'checkbox-group' }, [ React.createElement('input', { key: 'input', type: 'checkbox', checked: formData.timeIsCritical, onChange: (e) => updateFormData('timeIsCritical', e.target.checked), title: 'Time-sensitive performance affects damages and remedy options' }), React.createElement('label', { key: 'label' }, 'Time is Critical ⏰') ]), React.createElement('div', { key: 'ongoing-harm', className: 'checkbox-group' }, [ React.createElement('input', { key: 'input', type: 'checkbox', checked: formData.ongoingHarm, onChange: (e) => updateFormData('ongoingHarm', e.target.checked), title: 'Continuing harm supports injunctive relief' }), React.createElement('label', { key: 'label' }, 'Ongoing Harm 🔄') ]), React.createElement('div', { key: 'reputation', className: 'checkbox-group' }, [ React.createElement('input', { key: 'input', type: 'checkbox', checked: formData.reputationalDamage, onChange: (e) => updateFormData('reputationalDamage', e.target.checked), title: 'Reputational damage may support additional damages' }), React.createElement('label', { key: 'label' }, 'Reputational Damage 📉') ]), React.createElement('div', { key: 'third-party', className: 'checkbox-group' }, [ React.createElement('input', { key: 'input', type: 'checkbox', checked: formData.thirdPartyImpact, onChange: (e) => updateFormData('thirdPartyImpact', e.target.checked), title: 'Impact on third parties may affect damages calculation' }), React.createElement('label', { key: 'label' }, 'Third Party Impact 👥') ]) ]) ]), // Statute of Limitations Timer React.createElement('div', { key: 'statute-section', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '⏰ Statute of Limitations Timer'), React.createElement('div', { key: 'statute-calculator', style: { background: '#fef2f2', borderRadius: '12px', padding: '1.5rem', border: '2px solid #fca5a5' } }, [ React.createElement('div', { key: 'statute-info', style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem', alignItems: 'center' } }, [ React.createElement('div', { key: 'timer-display' }, [ React.createElement('h4', { key: 'days-remaining', style: { fontSize: '2.5rem', fontWeight: 'bold', color: '#dc2626', margin: '0 0 0.5rem 0', textAlign: 'center' } }, (() => { if (!formData.breachDate) return '???'; const breachDate = new Date(formData.breachDate); const today = new Date(); const stateLimitation = (() => { // State-specific statute of limitations (in years) const stateLimitations = { 'AL': 6, 'AK': 6, 'AZ': 6, 'AR': 5, 'CA': 4, 'CO': 3, 'CT': 6, 'DE': 3, 'FL': 5, 'GA': 6, 'HI': 6, 'ID': 5, 'IL': 10, 'IN': 6, 'IA': 5, 'KS': 5, 'KY': 15, 'LA': 10, 'ME': 6, 'MD': 3, 'MA': 6, 'MI': 6, 'MN': 6, 'MS': 3, 'MO': 5, 'MT': 8, 'NE': 4, 'NV': 6, 'NH': 3, 'NJ': 6, 'NM': 6, 'NY': 6, 'NC': 3, 'ND': 6, 'OH': 8, 'OK': 5, 'OR': 6, 'PA': 4, 'RI': 10, 'SC': 3, 'SD': 6, 'TN': 6, 'TX': 4, 'UT': 6, 'VT': 6, 'VA': 5, 'WA': 6, 'WV': 5, 'WI': 6, 'WY': 10 }; return stateLimitations[formData.governingLaw] || 4; })(); const limitationDate = new Date(breachDate); limitationDate.setFullYear(limitationDate.getFullYear() + stateLimitation); const daysRemaining = Math.ceil((limitationDate - today) / (1000 * 60 * 60 * 24)); return daysRemaining > 0 ? `${daysRemaining}` : 'EXPIRED'; })()), React.createElement('p', { key: 'days-label', style: { margin: 0, textAlign: 'center', color: '#6b7280', fontSize: '0.9rem' } }, 'Days Remaining to File Lawsuit') ]), React.createElement('div', { key: 'statute-details' }, [ React.createElement('h4', { key: 'state-info', style: { margin: '0 0 0.5rem 0', color: '#374151' } }, `${US_STATES.find(s => s.value === formData.governingLaw)?.label || 'California'} Law`), React.createElement('p', { key: 'limitation-period', style: { margin: '0 0 0.5rem 0', color: '#6b7280', fontSize: '0.9rem' } }, `${(() => { const stateLimitations = { 'AL': 6, 'AK': 6, 'AZ': 6, 'AR': 5, 'CA': 4, 'CO': 3, 'CT': 6, 'DE': 3, 'FL': 5, 'GA': 6, 'HI': 6, 'ID': 5, 'IL': 10, 'IN': 6, 'IA': 5, 'KS': 5, 'KY': 15, 'LA': 10, 'ME': 6, 'MD': 3, 'MA': 6, 'MI': 6, 'MN': 6, 'MS': 3, 'MO': 5, 'MT': 8, 'NE': 4, 'NV': 6, 'NH': 3, 'NJ': 6, 'NM': 6, 'NY': 6, 'NC': 3, 'ND': 6, 'OH': 8, 'OK': 5, 'OR': 6, 'PA': 4, 'RI': 10, 'SC': 3, 'SD': 6, 'TN': 6, 'TX': 4, 'UT': 6, 'VT': 6, 'VA': 5, 'WA': 6, 'WV': 5, 'WI': 6, 'WY': 10 }; return stateLimitations[formData.governingLaw] || 4; })()} year limitation period for contract breaches`), React.createElement('div', { key: 'urgency-indicator', style: { background: (() => { if (!formData.breachDate) return '#6b7280'; const breachDate = new Date(formData.breachDate); const today = new Date(); const stateLimitation = (() => { const stateLimitations = { 'AL': 6, 'AK': 6, 'AZ': 6, 'AR': 5, 'CA': 4, 'CO': 3, 'CT': 6, 'DE': 3, 'FL': 5, 'GA': 6, 'HI': 6, 'ID': 5, 'IL': 10, 'IN': 6, 'IA': 5, 'KS': 5, 'KY': 15, 'LA': 10, 'ME': 6, 'MD': 3, 'MA': 6, 'MI': 6, 'MN': 6, 'MS': 3, 'MO': 5, 'MT': 8, 'NE': 4, 'NV': 6, 'NH': 3, 'NJ': 6, 'NM': 6, 'NY': 6, 'NC': 3, 'ND': 6, 'OH': 8, 'OK': 5, 'OR': 6, 'PA': 4, 'RI': 10, 'SC': 3, 'SD': 6, 'TN': 6, 'TX': 4, 'UT': 6, 'VT': 6, 'VA': 5, 'WA': 6, 'WV': 5, 'WI': 6, 'WY': 10 }; return stateLimitations[formData.governingLaw] || 4; })(); const limitationDate = new Date(breachDate); limitationDate.setFullYear(limitationDate.getFullYear() + stateLimitation); const daysRemaining = Math.ceil((limitationDate - today) / (1000 * 60 * 60 * 24)); if (daysRemaining <= 0) return '#dc2626'; if (daysRemaining <= 90) return '#ea580c'; if (daysRemaining <= 365) return '#d97706'; return '#059669'; })(), color: 'white', padding: '0.5rem 1rem', borderRadius: '6px', fontSize: '0.85rem', fontWeight: '600', textAlign: 'center' } }, (() => { if (!formData.breachDate) return 'Enter breach date for countdown'; const breachDate = new Date(formData.breachDate); const today = new Date(); const stateLimitation = (() => { const stateLimitations = { 'AL': 6, 'AK': 6, 'AZ': 6, 'AR': 5, 'CA': 4, 'CO': 3, 'CT': 6, 'DE': 3, 'FL': 5, 'GA': 6, 'HI': 6, 'ID': 5, 'IL': 10, 'IN': 6, 'IA': 5, 'KS': 5, 'KY': 15, 'LA': 10, 'ME': 6, 'MD': 3, 'MA': 6, 'MI': 6, 'MN': 6, 'MS': 3, 'MO': 5, 'MT': 8, 'NE': 4, 'NV': 6, 'NH': 3, 'NJ': 6, 'NM': 6, 'NY': 6, 'NC': 3, 'ND': 6, 'OH': 8, 'OK': 5, 'OR': 6, 'PA': 4, 'RI': 10, 'SC': 3, 'SD': 6, 'TN': 6, 'TX': 4, 'UT': 6, 'VT': 6, 'VA': 5, 'WA': 6, 'WV': 5, 'WI': 6, 'WY': 10 }; return stateLimitations[formData.governingLaw] || 4; })(); const limitationDate = new Date(breachDate); limitationDate.setFullYear(limitationDate.getFullYear() + stateLimitation); const daysRemaining = Math.ceil((limitationDate - today) / (1000 * 60 * 60 * 24)); if (daysRemaining <= 0) return '🚨 STATUTE EXPIRED - Consult Attorney Immediately'; if (daysRemaining <= 90) return '🚨 URGENT - File lawsuit within 90 days'; if (daysRemaining <= 365) return '⚠️ ACTION NEEDED - File within 1 year'; return '✅ Sufficient time remaining'; })()) ]) ]) ]) ]) ]); }; // Case Assessment Tab with Professional Legal Analysis const renderAssessmentTab = () => { // Enhanced breach severity calculator const calculateBreachSeverity = () => { const contractValue = parseFloat(formData.contractValue) || 0; const totalDamages = (parseFloat(formData.directDamages) || 0) + (parseFloat(formData.consequentialDamages) || 0) + (parseFloat(formData.lostProfits) || 0); if (contractValue === 0) return { severity: 'Unknown', ratio: 0, description: 'Contract value not specified' }; const damageRatio = totalDamages / contractValue; if (damageRatio >= 1.0) { return { severity: 'Catastrophic', ratio: damageRatio, description: 'Damages exceed contract value - extremely severe breach', color: '#dc2626', urgency: 'Immediate legal action recommended' }; } else if (damageRatio >= 0.5) { return { severity: 'Severe', ratio: damageRatio, description: 'Major damages relative to contract value', color: '#ea580c', urgency: 'Urgent resolution required' }; } else if (damageRatio >= 0.25) { return { severity: 'Moderate', ratio: damageRatio, description: 'Significant damages relative to contract value', color: '#d97706', urgency: 'Prompt action recommended' }; } else if (damageRatio >= 0.1) { return { severity: 'Minor', ratio: damageRatio, description: 'Limited damages relative to contract value', color: '#ca8a04', urgency: 'Standard resolution timeline' }; } else { return { severity: 'Minimal', ratio: damageRatio, description: 'Low damages relative to contract value', color: '#65a30d', urgency: 'Negotiated resolution preferred' }; } }; // Calculate comprehensive case strength const calculateCaseStrength = () => { let score = 0; let factors = []; let weaknesses = []; // Contract Documentation (25 points max) if (formData.contractTitle && formData.contractDate) { score += 15; factors.push('✅ Written contract with clear terms'); } if (formData.contractValue && parseFloat(formData.contractValue) > 0) { score += 10; factors.push('✅ Quantifiable contract value'); } // Breach Severity Bonus based on damage ratio const breachSeverity = calculateBreachSeverity(); if (breachSeverity.ratio >= 0.5) { score += 15; factors.push('✅ High damage-to-value ratio strengthens case'); } else if (breachSeverity.ratio >= 0.25) { score += 10; factors.push('✅ Moderate damage-to-value ratio'); } else if (breachSeverity.ratio < 0.1 && breachSeverity.ratio > 0) { weaknesses.push('⚠️ Low damage-to-value ratio may limit remedies'); } // Performance Documentation (20 points max) if (formData.yourPerformance && formData.yourPerformance.length > 50) { score += 15; factors.push('✅ Well-documented complete performance'); } if (formData.theirFailure && formData.theirFailure.length > 50) { score += 5; factors.push('✅ Detailed breach documentation'); } // Breach Severity (20 points max) if (formData.breachType === 'material_breach' || formData.breachType === 'fundamental_breach') { score += 15; factors.push('✅ Material/fundamental breach classification'); } else if (formData.breachType === 'total_breach') { score += 20; factors.push('✅ Total breach - strongest case'); } else { score += 5; weaknesses.push('⚠️ Minor breach may limit remedies'); } // Damages Documentation (15 points max) if (formData.directDamages && parseFloat(formData.directDamages) > 0) { score += 10; factors.push('✅ Quantified direct damages'); } if (formData.mitigationEfforts && formData.mitigationEfforts.length > 20) { score += 5; factors.push('✅ Documented mitigation efforts'); } // Communication and Notice (10 points max) if (formData.priorNotices && formData.priorNotices.length > 30) { score += 8; factors.push('✅ Prior notice provided'); } if (formData.noticeProvided && formData.noticeProvided.length > 20) { score += 2; factors.push('✅ Formal notice given'); } // Contract-Specific Factors (10 points max) if (formData.contractProvision && formData.contractProvision.length > 30) { score += 5; factors.push('✅ Specific contract provision identified'); } if (formData.timeIsCritical) { score += 3; factors.push('✅ Time-critical performance'); } if (formData.ongoingHarm) { score += 2; factors.push('✅ Ongoing harm supports urgency'); } // Potential Weaknesses if (!formData.mitigationEfforts || formData.mitigationEfforts.length < 20) { weaknesses.push('⚠️ Limited mitigation documentation'); } if (!formData.priorNotices || formData.priorNotices.length < 20) { weaknesses.push('⚠️ Insufficient prior notice documentation'); } if (formData.breachType === 'minor_breach') { weaknesses.push('⚠️ Minor breaches have limited remedies'); } return { score: Math.min(score, 100), factors, weaknesses }; }; const assessment = calculateCaseStrength(); const breachSeverity = calculateBreachSeverity(); const getStrengthColor = (score) => { if (score >= 85) return '#10b981'; if (score >= 70) return '#059669'; if (score >= 55) return '#f59e0b'; if (score >= 40) return '#ef4444'; return '#991b1b'; }; const getStrengthLabel = (score) => { if (score >= 85) return 'Excellent'; if (score >= 70) return 'Strong'; if (score >= 55) return 'Moderate'; if (score >= 40) return 'Weak'; return 'Poor'; }; // Calculate estimated damages const totalDamages = (parseFloat(formData.directDamages) || 0) + (parseFloat(formData.consequentialDamages) || 0) + (parseFloat(formData.lostProfits) || 0); return React.createElement('div', { className: 'tab-content' }, [ // Breach Severity Calculator React.createElement('div', { key: 'severity-section', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '📊 Breach Severity Analysis'), React.createElement('div', { key: 'severity-calculator', style: { background: '#fefbf3', borderRadius: '12px', padding: '1.5rem', marginBottom: '1rem', border: `2px solid ${breachSeverity.color || '#e5e7eb'}` } }, [ React.createElement('div', { key: 'severity-header', style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1rem' } }, [ React.createElement('div', { key: 'severity-info' }, [ React.createElement('h4', { key: 'severity-level', style: { margin: '0 0 0.25rem 0', color: breachSeverity.color || '#374151', fontSize: '1.3rem' } }, `${breachSeverity.severity} Breach`), React.createElement('p', { key: 'severity-desc', style: { margin: 0, color: '#6b7280', fontSize: '0.9rem' } }, breachSeverity.description) ]), React.createElement('div', { key: 'ratio-display', style: { textAlign: 'right' } }, [ React.createElement('div', { key: 'ratio-number', style: { fontSize: '2rem', fontWeight: 'bold', color: breachSeverity.color || '#374151' } }, breachSeverity.ratio > 0 ? `${(breachSeverity.ratio * 100).toFixed(1)}%` : 'N/A'), React.createElement('div', { key: 'ratio-label', style: { fontSize: '0.8rem', color: '#6b7280' } }, 'Damage/Value Ratio') ]) ]), breachSeverity.ratio > 0 && React.createElement('div', { key: 'urgency-banner', style: { background: breachSeverity.color || '#f3f4f6', color: 'white', padding: '0.75rem 1rem', borderRadius: '6px', textAlign: 'center', fontWeight: '600', fontSize: '0.9rem' } }, `⚡ ${breachSeverity.urgency}`) ]) ]), // Case Strength Meter React.createElement('div', { key: 'strength-section', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '⚖️ Professional Case Assessment'), React.createElement('div', { key: 'strength-meter', style: { background: '#f9fafb', borderRadius: '12px', padding: '1.5rem', marginBottom: '1rem', border: '1px solid #e5e7eb' } }, [ React.createElement('div', { key: 'score-display', style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1rem' } }, [ React.createElement('span', { key: 'score-text', style: { fontSize: '1.3rem', fontWeight: '600', color: '#1f2937' } }, `Case Strength Score: ${assessment.score}/100`), React.createElement('span', { key: 'strength-label', style: { background: getStrengthColor(assessment.score), color: 'white', padding: '0.5rem 1rem', borderRadius: '6px', fontWeight: '600', fontSize: '0.9rem' } }, getStrengthLabel(assessment.score)) ]), React.createElement('div', { key: 'progress-bar', style: { background: '#e5e7eb', height: '14px', borderRadius: '7px', overflow: 'hidden' } }, [ React.createElement('div', { key: 'progress-fill', style: { background: getStrengthColor(assessment.score), height: '100%', width: `${assessment.score}%`, transition: 'width 0.5s ease' } }) ]) ]) ]), // Strengths and Weaknesses React.createElement('div', { key: 'analysis-section', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '📊 Legal Analysis'), React.createElement('div', { key: 'analysis-grid', style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' } }, [ // Strengths React.createElement('div', { key: 'strengths', style: { background: '#ecfdf5', border: '1px solid #10b981', borderRadius: '8px', padding: '1rem' } }, [ React.createElement('h4', { key: 'title', style: { margin: '0 0 0.5rem 0', color: '#059669' } }, '💪 Case Strengths'), React.createElement('ul', { key: 'list', style: { listStyle: 'none', padding: 0, margin: 0 } }, assessment.factors.map((factor, index) => React.createElement('li', { key: index, style: { padding: '0.25rem 0', color: '#065f46', fontSize: '0.9rem' } }, factor) )) ]), // Weaknesses React.createElement('div', { key: 'weaknesses', style: { background: '#fef3c7', border: '1px solid #f59e0b', borderRadius: '8px', padding: '1rem' } }, [ React.createElement('h4', { key: 'title', style: { margin: '0 0 0.5rem 0', color: '#92400e' } }, '⚠️ Areas to Strengthen'), React.createElement('ul', { key: 'list', style: { listStyle: 'none', padding: 0, margin: 0 } }, assessment.weaknesses.length > 0 ? assessment.weaknesses.map((weakness, index) => React.createElement('li', { key: index, style: { padding: '0.25rem 0', color: '#92400e', fontSize: '0.9rem' } }, weakness) ) : [ React.createElement('li', { key: 'none', style: { padding: '0.25rem 0', color: '#059669', fontSize: '0.9rem' } }, '✅ No significant weaknesses identified') ]) ]) ]) ]), // Strategic Recommendations React.createElement('div', { key: 'strategy-section', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '🎯 Strategic Recommendations'), React.createElement('div', { key: 'recommendations' }, [ // Primary Strategy React.createElement('div', { key: 'primary-strategy', style: { background: '#dbeafe', border: '1px solid #3b82f6', borderRadius: '8px', padding: '1rem', marginBottom: '1rem' } }, [ React.createElement('h4', { key: 'title', style: { margin: '0 0 0.5rem 0', color: '#1e40af' } }, '🏆 Recommended Strategy'), React.createElement('p', { key: 'content', style: { margin: 0, color: '#1e40af' } }, assessment.score >= 70 ? 'Strong case for immediate escalation. Send formal demand with short cure period and clear consequences. Consider litigation if no prompt response.' : assessment.score >= 55 ? 'Moderate case strength. Send detailed demand letter with reasonable cure period. Negotiate in good faith but prepare for potential litigation.' : 'Case needs strengthening. Gather additional documentation, provide detailed notice, and attempt negotiated resolution before litigation.' ) ]), // Recovery Prospects React.createElement('div', { key: 'recovery-prospects', style: { background: '#f0f9ff', borderRadius: '8px', padding: '1rem', marginBottom: '1rem' } }, [ React.createElement('h4', { key: 'title' }, '💰 Recovery Analysis'), React.createElement('div', { key: 'recovery-grid', style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' } }, [ React.createElement('div', { key: 'estimated-damages' }, [ React.createElement('strong', null, 'Estimated Total Damages: '), React.createElement('span', { style: { color: '#059669', fontWeight: '600' } }, totalDamages > 0 ? `$${totalDamages.toLocaleString()}` : 'To be determined' ) ]), React.createElement('div', { key: 'recovery-likelihood' }, [ React.createElement('strong', null, 'Recovery Likelihood: '), React.createElement('span', { style: { color: assessment.score >= 70 ? '#059669' : assessment.score >= 55 ? '#f59e0b' : '#dc2626', fontWeight: '600' } }, assessment.score >= 70 ? 'High (70-90%)' : assessment.score >= 55 ? 'Moderate (40-70%)' : 'Low (20-40%)' ) ]) ]) ]), // Next Steps Timeline React.createElement('div', { key: 'timeline', style: { background: '#f3f4f6', borderRadius: '8px', padding: '1rem' } }, [ React.createElement('h4', { key: 'title' }, '📅 Recommended Timeline'), React.createElement('ol', { key: 'steps', style: { marginLeft: '1rem' } }, [ React.createElement('li', { key: '1' }, `Immediate: Send formal demand letter via certified mail`), React.createElement('li', { key: '2' }, `Day ${parseInt(formData.cureDeadline) + 1}: Follow up if no response received`), React.createElement('li', { key: '3' }, `Day ${parseInt(formData.cureDeadline) + 7}: Begin litigation preparation if no cure`), React.createElement('li', { key: '4' }, `Day ${parseInt(formData.cureDeadline) + 15}: File lawsuit or initiate alternative dispute resolution`), totalDamages > 50000 && React.createElement('li', { key: '5' }, 'Consider attorney consultation for high-value case') ].filter(Boolean)) ]) ]) ]), // Legal Precedent and Considerations React.createElement('div', { key: 'legal-considerations', className: 'form-section' }, [ React.createElement('h3', { key: 'title' }, '📚 Legal Considerations'), React.createElement('div', { key: 'considerations-grid', style: { display: 'grid', gap: '1rem' } }, [ // Contract Type Specific Advice React.createElement('div', { key: 'contract-advice', style: { background: '#fefce8', border: '1px solid #eab308', borderRadius: '6px', padding: '1rem' } }, [ React.createElement('h4', { key: 'title', style: { margin: '0 0 0.5rem 0', color: '#a16207' } }, `📋 ${contractTypes[formData.contractType]} Considerations` ), React.createElement('p', { key: 'advice', style: { margin: 0, fontSize: '0.9rem', color: '#a16207' } }, (() => { const contractAdvice = { 'saas_contract': 'SaaS contracts often include specific performance metrics and service level agreements. Focus on quantifiable failures, uptime violations, and business impact from service disruptions.', 'development_contract': 'Development contracts require clear deliverable specifications. Document scope deviations, missed milestones, and acceptance criteria violations with technical evidence.', 'service_agreement': 'Service agreements focus on performance standards and timing. Emphasize business disruption, replacement costs, and quantifiable service failures.', 'consulting_agreement': 'Consulting agreements involve professional standards and confidentiality. Consider reputational damages, opportunity costs, and breach of professional duties.', 'real_estate_purchase': 'Real estate purchase agreements involve significant financial commitments. Focus on specific performance remedies, earnest money, and market condition changes.', 'real_estate_lease': 'Lease agreements require attention to notice periods, cure rights, and habitability issues. Document property condition and compliance failures.', 'construction_contract': 'Construction contracts involve complex performance standards and lien rights. Document delays, defective work, and change order disputes with detailed evidence.', 'ip_licensing': 'IP licensing agreements require careful attention to usage rights, royalty calculations, and territorial restrictions. Document unauthorized use and revenue impact.', 'franchise_agreement': 'Franchise agreements involve ongoing operational requirements and brand standards. Focus on territory violations, operational failures, and brand damage.', 'employment_contract': 'Employment contracts involve specific notice periods and restrictive covenants. Consider competition issues, confidentiality breaches, and compensation disputes.', 'loan_agreement': 'Loan agreements involve strict payment schedules and default provisions. Focus on payment history, collateral issues, and acceleration clauses.', 'supply_chain': 'Supply chain contracts involve delivery schedules and quality standards. Document delays, defective goods, and business disruption from supply failures.', 'international_trade': 'International contracts involve complex jurisdictional and currency issues. Consider trade regulations, force majeure clauses, and cross-border enforcement.', 'subscription_service': 'Subscription agreements involve recurring payment obligations and service levels. Focus on billing disputes, service interruptions, and cancellation procedures.', 'data_processing': 'Data processing agreements involve strict compliance and security requirements. Consider GDPR, privacy violations, and security breach implications.' }; return contractAdvice[formData.contractType] || 'Focus on specific contractual obligations and measurable performance standards. Document breaches with clear evidence and quantify business impact.'; })() ) ]), // Jurisdiction Specific Notes React.createElement('div', { key: 'jurisdiction-notes', style: { background: '#f0fdf4', border: '1px solid #16a34a', borderRadius: '6px', padding: '1rem' } }, [ React.createElement('h4', { key: 'title', style: { margin: '0 0 0.5rem 0', color: '#15803d' } }, `🏛️ ${US_STATES.find(s => s.value === formData.governingLaw)?.label || 'California'} Law Notes` ), React.createElement('p', { key: 'notes', style: { margin: 0, fontSize: '0.9rem', color: '#15803d', lineHeight: '1.4' } }, (() => { const stateInfo = { 'CA': 'California: 4 years for written contracts (CCP §337), 2 years for oral contracts. SOL runs from breach date or when party knew/should have known of breach. Discovery rule applies for hidden defects. No mandatory cure period unless contract specifies.', 'NY': 'New York: 6 years for written contracts (CPLR §213), 6 years for oral contracts. SOL begins on breach date. UCC Article 2 (sales): 4 years. Demand requirement may extend SOL for payment obligations.', 'TX': 'Texas: 4 years for written contracts (Civ. Prac. & Rem. Code §16.004), 2 years for oral contracts. SOL runs from accrual (when breach occurs + damages). Discovery rule for fraud/mistake. Notice requirements vary by contract type.', 'FL': 'Florida: 5 years for written contracts (FS §95.11), 4 years for oral contracts. SOL begins at breach or when last payment due. UCC contracts: 4 years. Construction contracts have specific notice requirements.', 'IL': 'Illinois: 10 years for written contracts (735 ILCS 5/13-206), 5 years for oral contracts. SOL runs from breach date. Discovery rule for latent defects. Notice requirements for construction contracts within 2 years.', 'MA': 'Massachusetts: 6 years for written contracts (MGL c. 260 §2), 6 years for oral contracts. SOL begins when cause of action accrues (breach occurs). UCC: 4 years. Chapter 93A claims: 4 years.', 'WA': 'Washington: 6 years for written contracts (RCW 4.16.040), 3 years for oral contracts. SOL runs from breach date or when performance due. Discovery rule applies to fraud/concealment. Notice requirements for construction.', 'CO': 'Colorado: 3 years for both written and oral contracts (CRS §13-80-101). SOL begins when claim accrues (breach + knowledge of harm). Shortest SOL in US. Notice requirements for mechanic\'s liens within 4 months.', 'MD': 'Maryland: 3 years for written contracts (Cts. & Jud. Proc. §5-101), 3 years for oral contracts. SOL runs from breach date. Discovery rule for fraud. UCC: 4 years. Notice required for home improvement contracts.', 'NC': 'North Carolina: 3 years for written contracts (NCGS §1-52), 3 years for oral contracts. SOL begins at breach. UCC contracts: 4 years. Construction: notice within 6 years of substantial completion.', 'PA': 'Pennsylvania: 4 years for written contracts (42 Pa. C.S. §5525), 4 years for oral contracts. SOL runs from breach date. Discovery rule for fraud/concealment. UCC: 4 years. Prompt notice required for defects.', 'OH': 'Ohio: 8 years for written contracts (ORC §2305.06), 6 years for oral contracts. SOL begins when cause of action accrues. Discovery rule applies to latent defects. Mechanic\'s liens: notice within 75 days.', 'MI': 'Michigan: 6 years for written contracts (MCL §600.5807), 6 years for oral contracts. SOL runs from breach date or when performance due. Discovery rule for fraud. UCC: 4 years. Notice requirements vary.', 'GA': 'Georgia: 6 years for written contracts (OCGA §9-3-24), 4 years for oral contracts. SOL begins at breach. Demand may be required for payment obligations. Construction: notice within 8 years of substantial completion.' }; return stateInfo[formData.governingLaw] || `${US_STATES.find(s => s.value === formData.governingLaw)?.label || 'Selected State'}: Specific statute of limitations varies by state. Written contracts typically 3-10 years, oral contracts 2-6 years. SOL generally runs from breach date or when performance was due. Consult state-specific statutes for exact requirements, notice provisions, and discovery rules.`; })() ) ]) ]) ]) ]); }; // Main tab content renderer const renderTabContent = () => { switch(currentTab) { case 0: return renderContractTab(); case 1: return renderBreachTab(); case 2: return renderStrategyTab(); case 3: return renderAssessmentTab(); default: return renderContractTab(); } }; // Render main component return React.createElement('div', { className: 'app-container' }, [ // Header React.createElement('header', { key: 'header', className: 'app-header' }, [ React.createElement('h1', { key: 'title' }, '⚖️ Breach of Contract Demand Letter Generator'), React.createElement('p', { key: 'subtitle' }, 'Professional legal tool for service agreements, vendor contracts, partnerships, and business relationships') ]), // Main container React.createElement('div', { key: 'main', className: 'main-container' }, [ // Form pane React.createElement('div', { key: 'form', className: 'form-pane' }, [ // Tab navigation React.createElement('div', { key: 'tabs', className: 'tab-navigation' }, tabs.map((tab, index) => React.createElement('button', { key: tab.id, className: `tab-button ${currentTab === index ? 'active' : ''}`, onClick: () => { setCurrentTab(index); // Highlight tab-specific content in preview setTimeout(() => { highlightTabContent(tab.id); }, 150); } }, [ React.createElement(Icon, { key: 'icon', name: tab.icon }), React.createElement('span', { key: 'label' }, tab.label) ]) ) ), // Tab content React.createElement('div', { key: 'content', className: 'tab-content-container' }, renderTabContent() ), // Action buttons React.createElement('div', { key: 'actions', className: 'action-buttons' }, [ // Navigation buttons React.createElement('button', { key: 'prev-tab', className: 'btn btn-secondary', disabled: currentTab === 0, onClick: () => setCurrentTab(Math.max(0, currentTab - 1)) }, [ React.createElement(Icon, { key: 'icon', name: 'chevron-left' }), React.createElement('span', { key: 'text' }, 'Previous') ]), React.createElement('button', { key: 'next-tab', className: 'btn btn-primary', disabled: currentTab === tabs.length - 1, onClick: () => setCurrentTab(Math.min(tabs.length - 1, currentTab + 1)) }, [ React.createElement('span', { key: 'text' }, 'Next'), React.createElement(Icon, { key: 'icon', name: 'chevron-right' }) ]), // Document action buttons React.createElement('button', { key: 'copy', className: 'btn btn-secondary', onClick: copyToClipboard }, [ React.createElement(Icon, { key: 'icon', name: 'copy' }), React.createElement('span', { key: 'text' }, 'Copy') ]), React.createElement('button', { key: 'download', className: 'btn btn-primary', onClick: downloadLetter }, [ React.createElement(Icon, { key: 'icon', name: 'download' }), React.createElement('span', { key: 'text' }, 'Word Doc') ]), React.createElement('button', { key: 'esign', className: 'btn btn-accent', disabled: eSignLoading, onClick: eSignDocument, title: 'Send for electronic signature - uses API calls (limit 5 per payment)', style: { backgroundColor: '#dc2626', color: 'white' } }, [ React.createElement(Icon, { key: 'icon', name: eSignLoading ? 'loader' : 'edit-3', style: eSignLoading ? { animation: 'spin 1s linear infinite' } : {} }), React.createElement('span', { key: 'text' }, eSignLoading ? 'Processing...' : 'E-Sign') ]) ]) ]), // Preview pane React.createElement('div', { key: 'preview', className: 'preview-pane' }, [ React.createElement('div', { key: 'header', className: 'preview-header' }, [ React.createElement('h3', { key: 'title' }, 'Live Preview'), !hasPaywallAccess && React.createElement('div', { key: 'preview-notice', style: { fontSize: '0.8rem', color: '#6b7280', marginTop: '0.25rem' } }, '👀 Full preview available • Copy/download requires payment') ]), React.createElement('div', { key: 'content', className: 'preview-content', ref: previewRef, style: { userSelect: hasPaywallAccess ? 'text' : 'none', WebkitUserSelect: hasPaywallAccess ? 'text' : 'none', MozUserSelect: hasPaywallAccess ? 'text' : 'none', msUserSelect: hasPaywallAccess ? 'text' : 'none', overflow: 'auto', // Always allow scrolling maxHeight: 'calc(100vh - 200px)', cursor: hasPaywallAccess ? 'text' : 'default', position: 'relative' }, onContextMenu: (e) => { if (!hasPaywallAccess) { e.preventDefault(); return false; } }, dangerouslySetInnerHTML: { __html: generateLetterContent() } }) ]) ]) ]); }; // Render the component when DOM is ready document.addEventListener('DOMContentLoaded', function() { ReactDOM.render(React.createElement(BreachContractGenerator), document.getElementById('root')); // Initialize feather icons after render setTimeout(() => { if (window.feather) { window.feather.replace(); } }, 100); // Initialize PayPal if available if (typeof PaywallSystem !== 'undefined') { PaywallSystem.initializePayPal().catch(console.error); } });

Related Resources

📖 Ghostwriting Agreement Generator | Free Freelance Writer Contract Guide 📖 Internet Advertising Agreement Generator | Free PPC Contract Template Guide 📖 Photography Services Contract Generator | Free Template Guide 📖 Brand Ambassador Agreement Generator | Free Influencer Contract Guide 📖 Refund Demand Letter Generator — Get Your Money Back Guide