export const EMPLOYEE_DETAIL_APP = {
  id: 'employee-detail',
  name: 'Employee Detail View',
  description: 'Detailed employee information with personal data, compensation, benefits, and history',
  html: `<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Employee Details - Gusto</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; }
    .profile-header { background: white; padding: 24px; border-radius: 8px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; gap: 24px; }
    .avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #ff6b35, #f7931e); display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: bold; }
    .profile-info h1 { font-size: 24px; color: #333; margin-bottom: 4px; }
    .profile-info p { color: #666; margin-bottom: 8px; }
    .status-badge { display: inline-block; padding: 4px 12px; background: #e8f5e9; color: #27ae60; border-radius: 12px; font-size: 12px; font-weight: 500; }
    .tabs { display: flex; gap: 8px; background: white; padding: 0 24px; border-radius: 8px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .tab { padding: 16px 24px; background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 500; color: #666; border-bottom: 2px solid transparent; }
    .tab.active { color: #ff6b35; border-bottom-color: #ff6b35; }
    .content { background: white; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .info-item { padding-bottom: 16px; border-bottom: 1px solid #eee; }
    .info-label { font-size: 12px; color: #999; text-transform: uppercase; margin-bottom: 4px; }
    .info-value { font-size: 16px; color: #333; font-weight: 500; }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState } = React;

    function EmployeeDetail() {
      const [activeTab, setActiveTab] = useState('personal');
      
      const employee = {
        name: 'Sarah Johnson',
        role: 'Senior Software Engineer',
        department: 'Engineering',
        email: 'sarah.johnson@company.com',
        phone: '(555) 123-4567',
        hireDate: 'January 15, 2022',
        employeeId: 'EMP-2022-0015',
        salary: '$125,000/year',
        manager: 'Alex Chen',
        location: 'San Francisco, CA',
        dob: 'March 12, 1990',
        ssn: '***-**-4567'
      };

      return (
        <div className="container">
          <div className="profile-header">
            <div className="avatar">SJ</div>
            <div className="profile-info">
              <h1>{employee.name}</h1>
              <p>{employee.role} • {employee.department}</p>
              <span className="status-badge">Active</span>
            </div>
          </div>

          <div className="tabs">
            <button className={\`tab \${activeTab === 'personal' ? 'active' : ''}\`} onClick={() => setActiveTab('personal')}>Personal Info</button>
            <button className={\`tab \${activeTab === 'job' ? 'active' : ''}\`} onClick={() => setActiveTab('job')}>Job Details</button>
            <button className={\`tab \${activeTab === 'compensation' ? 'active' : ''}\`} onClick={() => setActiveTab('compensation')}>Compensation</button>
            <button className={\`tab \${activeTab === 'benefits' ? 'active' : ''}\`} onClick={() => setActiveTab('benefits')}>Benefits</button>
            <button className={\`tab \${activeTab === 'documents' ? 'active' : ''}\`} onClick={() => setActiveTab('documents')}>Documents</button>
          </div>

          <div className="content">
            {activeTab === 'personal' && (
              <div className="info-grid">
                <div className="info-item">
                  <div className="info-label">Email</div>
                  <div className="info-value">{employee.email}</div>
                </div>
                <div className="info-item">
                  <div className="info-label">Phone</div>
                  <div className="info-value">{employee.phone}</div>
                </div>
                <div className="info-item">
                  <div className="info-label">Date of Birth</div>
                  <div className="info-value">{employee.dob}</div>
                </div>
                <div className="info-item">
                  <div className="info-label">SSN</div>
                  <div className="info-value">{employee.ssn}</div>
                </div>
                <div className="info-item">
                  <div className="info-label">Location</div>
                  <div className="info-value">{employee.location}</div>
                </div>
                <div className="info-item">
                  <div className="info-label">Employee ID</div>
                  <div className="info-value">{employee.employeeId}</div>
                </div>
              </div>
            )}
            {activeTab === 'job' && (
              <div className="info-grid">
                <div className="info-item">
                  <div className="info-label">Job Title</div>
                  <div className="info-value">{employee.role}</div>
                </div>
                <div className="info-item">
                  <div className="info-label">Department</div>
                  <div className="info-value">{employee.department}</div>
                </div>
                <div className="info-item">
                  <div className="info-label">Hire Date</div>
                  <div className="info-value">{employee.hireDate}</div>
                </div>
                <div className="info-item">
                  <div className="info-label">Manager</div>
                  <div className="info-value">{employee.manager}</div>
                </div>
              </div>
            )}
            {activeTab === 'compensation' && (
              <div className="info-grid">
                <div className="info-item">
                  <div className="info-label">Base Salary</div>
                  <div className="info-value">{employee.salary}</div>
                </div>
                <div className="info-item">
                  <div className="info-label">Pay Frequency</div>
                  <div className="info-value">Bi-weekly</div>
                </div>
                <div className="info-item">
                  <div className="info-label">Last Raise</div>
                  <div className="info-value">July 1, 2023 (+8%)</div>
                </div>
                <div className="info-item">
                  <div className="info-label">Next Review</div>
                  <div className="info-value">January 15, 2025</div>
                </div>
              </div>
            )}
          </div>
        </div>
      );
    }

    ReactDOM.render(<EmployeeDetail />, document.getElementById('root'));
  </script>
</body>
</html>`,
};
