export const BENEFITS_OVERVIEW_APP = {
  id: 'benefits-overview',
  name: 'Benefits Overview',
  description: 'Company benefits overview with enrollment statistics',
  html: `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Benefits Overview</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: 1200px; 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); }
.benefits-grid { display: grid; gap: 20px; }
.benefit-card { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.benefit-name { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.enrollment-bar { height: 8px; background: #eee; border-radius: 4px; margin: 12px 0; }
.enrollment-fill { height: 100%; background: #ff6b35; border-radius: 4px; }
</style></head><body><div id="root"></div>
<script type="text/babel">
function BenefitsOverview() {
  const benefits = [
    { name: 'Health Insurance', enrolled: 98, total: 124, rate: 79 },
    { name: '401(k) Retirement', enrolled: 112, total: 124, rate: 90 },
    { name: 'Dental Insurance', enrolled: 87, total: 124, rate: 70 },
    { name: 'Vision Insurance', enrolled: 92, total: 124, rate: 74 },
  ];
  return (<div className="container"><div className="header"><h1>🏥 Benefits Overview</h1><p>Company benefits and enrollment status</p></div>
  <div className="benefits-grid">{benefits.map((b, i) => (<div key={i} className="benefit-card"><div className="benefit-name">{b.name}</div>
  <div>{b.enrolled} of {b.total} employees enrolled ({b.rate}%)</div><div className="enrollment-bar">
  <div className="enrollment-fill" style={{ width: \`\${b.rate}%\` }}></div></div></div>))}</div></div>);
}
ReactDOM.render(<BenefitsOverview />, document.getElementById('root'));
</script></body></html>`,
};
