export const ONBOARDING_TRACKER_APP = {
  id: 'onboarding-tracker',
  name: 'Onboarding Tracker',
  description: 'Track employee onboarding progress and completion',
  html: `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Onboarding Tracker</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); }
.employee-list { display: grid; gap: 20px; }
.employee-card { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.employee-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.progress-bar { height: 8px; background: #eee; border-radius: 4px; margin: 12px 0; }
.progress-fill { height: 100%; background: #ff6b35; border-radius: 4px; }
.checklist { list-style: none; }
.checklist li { padding: 8px 0; display: flex; align-items: center; gap: 8px; }
</style></head><body><div id="root"></div>
<script type="text/babel">
function OnboardingTracker() {
  const employees = [
    { name: 'Emily Rodriguez', startDate: 'Jan 15, 2025', progress: 60, tasks: [
      { name: 'Personal Info', done: true },
      { name: 'Tax Forms (W-4)', done: true },
      { name: 'Direct Deposit', done: true },
      { name: 'Benefits Election', done: false },
      { name: 'I-9 Verification', done: false },
    ]},
    { name: 'David Kim', startDate: 'Jan 20, 2025', progress: 20, tasks: [
      { name: 'Personal Info', done: true },
      { name: 'Tax Forms (W-4)', done: false },
      { name: 'Direct Deposit', done: false },
      { name: 'Benefits Election', done: false },
      { name: 'I-9 Verification', done: false },
    ]},
  ];
  return (<div className="container"><div className="header"><h1>🎓 Onboarding Tracker</h1><p>Monitor new hire onboarding progress</p></div>
  <div className="employee-list">{employees.map((emp, i) => (<div key={i} className="employee-card">
  <div className="employee-header"><div><div style={{ fontSize: 18, fontWeight: 600 }}>{emp.name}</div>
  <div style={{ color: '#666', fontSize: 14 }}>Start Date: {emp.startDate}</div></div>
  <div style={{ fontSize: 24, fontWeight: 'bold', color: '#ff6b35' }}>{emp.progress}%</div></div>
  <div className="progress-bar"><div className="progress-fill" style={{ width: \`\${emp.progress}%\` }}></div></div>
  <ul className="checklist">{emp.tasks.map((task, j) => (<li key={j}>
  <span style={{ fontSize: 20 }}>{task.done ? '✅' : '⬜'}</span><span>{task.name}</span></li>))}</ul></div>))}</div></div>);
}
ReactDOM.render(<OnboardingTracker />, document.getElementById('root'));
</script></body></html>`,
};
