import React, { useState } from 'react';
// --- Helper Components ---
// Icon for various UI elements
const Icon = ({ path, className = "w-6 h-6" }) => (
);
// Icons paths
const ICONS = {
user: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
calendar: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z",
location: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",
children: "M16.5 12c1.38 0 2.5-1.12 2.5-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.41C10.5 13.1 9.66 13 9 13z",
asset: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5-10-5-10 5z",
debt: "M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z",
check: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
legal: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
};
// --- Main Application Component ---
export default function App() {
// State for current step in the questionnaire
const [currentStep, setCurrentStep] = useState(0);
// State for all form data
const [formData, setFormData] = useState({
// Basic Info
petitionerName: '',
respondentName: '',
marriageDate: '',
marriageLocation: '',
// Children Info
hasChildren: null,
children: [{ name: '', dob: '', parentingPlan: '' }],
// Financials
assets: [{ name: '', value: '', owner: 'Petitioner' }],
debts: [{ name: '', amount: '', owner: 'Petitioner' }],
});
// --- Event Handlers ---
// Generic handler for simple input changes
const handleChange = (e) => {
const { name, value, type, checked } = e.target;
setFormData(prev => ({
...prev,
[name]: type === 'checkbox' ? checked : value,
}));
};
// Handler for radio button changes (e.g., Yes/No for children)
const handleRadioChange = (name, value) => {
setFormData(prev => ({
...prev,
[name]: value,
}));
};
// Generic handler for lists (children, assets, debts)
const handleListChange = (listName, index, e) => {
const { name, value } = e.target;
const newList = [...formData[listName]];
newList[index][name] = value;
setFormData(prev => ({ ...prev, [listName]: newList }));
};
// Add an item to a list
const addListItem = (listName) => {
let newItem;
if (listName === 'children') {
newItem = { name: '', dob: '', parentingPlan: '' };
} else if (listName === 'assets') {
newItem = { name: '', value: '', owner: 'Petitioner' };
} else { // debts
newItem = { name: '', amount: '', owner: 'Petitioner' };
}
setFormData(prev => ({ ...prev, [listName]: [...prev[listName], newItem] }));
};
// Remove an item from a list
const removeListItem = (listName, index) => {
const newList = formData[listName].filter((_, i) => i !== index);
setFormData(prev => ({ ...prev, [listName]: newList }));
};
// Navigation handlers
const nextStep = () => setCurrentStep(prev => prev + 1);
const prevStep = () => setCurrentStep(prev => prev - 1);
const startOver = () => {
setCurrentStep(0);
setFormData({
petitionerName: '', respondentName: '', marriageDate: '', marriageLocation: '',
hasChildren: null, children: [{ name: '', dob: '', parentingPlan: '' }],
assets: [{ name: '', value: '', owner: 'Petitioner' }],
debts: [{ name: '', amount: '', owner: 'Petitioner' }],
});
}
// --- Questionnaire Steps Definition ---
const steps = [
{ name: 'Introduction', component:
{currentStep > 0 && currentStep < steps.length -1 && (
)}
{currentComponent}
{currentStep > 0 && currentStep < steps.length - 1 && (
)}
);
}
// --- Step Components ---
const Introduction = ({ nextStep }) => (
handleRadioChange('hasChildren', true)} label="Yes" />
handleRadioChange('hasChildren', false)} label="No" />
{formData.hasChildren && (
)}
);
const AssetsStep = ({ formData, handleListChange, addListItem, removeListItem }) => (
);
const DebtsStep = ({ formData, handleListChange, addListItem, removeListItem }) => (
);
const ReviewStep = ({ formData, startOver }) => (
{formData.hasChildren ? (
formData.children.map((child, index) => (
{formData.assets.map((asset, index) => (
{formData.debts.map((debt, index) => (
);
// --- Reusable Form Field Components ---
const Input = ({ label, ...props }) => (
);
const InputWithIcon = ({ icon, label, ...props }) => (
);
const ReviewItem = ({ label, value }) => (
);
Colorado Divorce Guide
A step-by-step tool to help you prepare.
{steps[currentStep].name}
{Math.round(progress)}%
Welcome! Let's Get Started.
This tool will guide you through the questions needed to prepare your initial Colorado divorce documents. Please answer each question to the best of your ability.
Legal Disclaimer
This tool is for informational purposes only and does not constitute legal advice. It is not a substitute for consultation with a licensed attorney. We strongly recommend you consult with a qualified attorney regarding your specific situation.
Basic Information
Information About Children
Child Details
{formData.children.map((child, index) => (
handleListChange('children', index, e)} />
handleListChange('children', index, e)} type="date" />
handleListChange('children', index, e)} placeholder="e.g., Petitioner"/>
{formData.children.length > 1 && (
)}
))}
Marital Assets
List all significant assets acquired during the marriage (e.g., real estate, vehicles, bank accounts).
{formData.assets.map((asset, index) => (
handleListChange('assets', index, e)} placeholder="e.g., Family Home"/>
handleListChange('assets', index, e)} type="number" placeholder="500000"/>
))}
Marital Debts
List all significant debts acquired during the marriage (e.g., mortgage, car loans, credit cards).
{formData.debts.map((debt, index) => (
handleListChange('debts', index, e)} placeholder="e.g., Mortgage"/>
handleListChange('debts', index, e)} type="number" placeholder="250000"/>
))}
Questionnaire Complete!
Please review your answers below. If everything is correct, you can proceed to generate your documents.
No minor children reported.
}
{children}
{label}:
{value || 'N/A'}