export const BENEFITS_ENROLLMENT_APP = {
  id: 'benefits-enrollment',
  name: 'Benefits Enrollment',
  description: 'Enroll employees in benefits and manage elections',
  html: `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Benefits Enrollment</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; padding: 20px; }
.container { max-width: 800px; margin: 0 auto; }
.header { background: white; padding: 24px; border-radius: 8px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.form { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-weight: 500; }
select, input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; }
.checkbox-group { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.checkbox-group input { width: auto; }
.btn { padding: 12px 24px; background: #ff6b35; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 500; cursor: pointer; }
</style></head><body><div id="root"></div>
<script type="text/babel">
const { useState } = React;
function BenefitsEnrollment() {
  const [employee, setEmployee] = useState('');
  return (<div className="container"><div className="header"><h1>🎯 Benefits Enrollment</h1><p>Enroll employees in company benefits</p></div>
  <div className="form"><div className="form-group"><label>Employee</label>
  <select value={employee} onChange={e => setEmployee(e.target.value)}><option value="">Select employee...</option>
  <option value="1">Sarah Johnson</option><option value="2">Michael Chen</option></select></div>
  <div className="form-group"><label>Select Benefits</label>
  <div className="checkbox-group"><input type="checkbox" id="health" /><label htmlFor="health">Health Insurance</label></div>
  <div className="checkbox-group"><input type="checkbox" id="dental" /><label htmlFor="dental">Dental Insurance</label></div>
  <div className="checkbox-group"><input type="checkbox" id="vision" /><label htmlFor="vision">Vision Insurance</label></div>
  <div className="checkbox-group"><input type="checkbox" id="401k" /><label htmlFor="401k">401(k) Plan</label></div></div>
  <button className="btn">Enroll Employee</button></div></div>);
}
ReactDOM.render(<BenefitsEnrollment />, document.getElementById('root'));
</script></body></html>`,
};
