export const DEPARTMENT_OVERVIEW_APP = {
  id: 'department-overview',
  name: 'Department Overview',
  description: 'View departments and headcount distribution',
  html: `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Department 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); }
.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.dept-card { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.dept-card h3 { font-size: 20px; margin-bottom: 16px; color: #333; }
.headcount { font-size: 36px; font-weight: bold; color: #ff6b35; margin-bottom: 8px; }
.bar { height: 8px; background: #eee; border-radius: 4px; margin: 12px 0; }
.bar-fill { height: 100%; background: #ff6b35; border-radius: 4px; }
</style></head><body><div id="root"></div>
<script type="text/babel">
function DepartmentOverview() {
  const departments = [
    { name: 'Engineering', headcount: 42, percentage: 34 },
    { name: 'Sales', headcount: 28, percentage: 23 },
    { name: 'Marketing', headcount: 18, percentage: 15 },
    { name: 'Product', headcount: 15, percentage: 12 },
    { name: 'Operations', headcount: 12, percentage: 10 },
    { name: 'Finance', headcount: 9, percentage: 7 },
  ];
  return (<div className="container"><div className="header"><h1>🏢 Department Overview</h1><p>Employee distribution across departments</p></div>
  <div className="dept-grid">{departments.map((d, i) => (<div key={i} className="dept-card"><h3>{d.name}</h3>
  <div className="headcount">{d.headcount}</div><div style={{ color: '#666' }}>employees ({d.percentage}% of total)</div>
  <div className="bar"><div className="bar-fill" style={{ width: \`\${d.percentage}%\` }}></div></div></div>))}</div></div>);
}
ReactDOM.render(<DepartmentOverview />, document.getElementById('root'));
</script></body></html>`,
};
