import React from 'react';
import { Users, Phone, Mail, MapPin } from 'lucide-react';

export const TechniciansView: React.FC = () => {
  const technicians = [
    { name: 'Max Müller', role: 'Heizungsbaumeister', status: 'Im Einsatz (Musterweg 12)', phone: '0170 1112233', email: 'm.mueller@handwerksfreund.de' },
    { name: 'Stefan Bauer', role: 'Anlagenmechaniker SHK', status: 'Unterwegs zu Anja Klein', phone: '0170 2223344', email: 's.bauer@handwerksfreund.de' },
    { name: 'Tom Gerber', role: 'Servicetechniker', status: 'Im Einsatz (Hausverwaltung Schmidt)', phone: '0170 3334455', email: 't.gerber@handwerksfreund.de' },
    { name: 'Janina Wagner', role: 'Elektrotechnikerin', status: 'Verfügbar / Werkstatt', phone: '0170 4445566', email: 'j.wagner@handwerksfreund.de' },
  ];

  return (
    <>
      <header className="header-bar">
        <h1 className="header-title">Monteure & Servicekräfte</h1>
        <span style={{ fontWeight: 600, color: '#2563eb' }}>8 von 10 im Außeneinsatz</span>
      </header>

      <section className="content-card">
        <h2 className="card-heading">Mitarbeiterübersicht & Status</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '20px' }}>
          {technicians.map((t, idx) => (
            <div key={idx} style={{
              border: '1px solid #e2e8f0',
              borderRadius: '12px',
              padding: '20px',
              backgroundColor: '#ffffff'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
                <div style={{
                  width: '44px',
                  height: '44px',
                  borderRadius: '50%',
                  backgroundColor: '#eff6ff',
                  color: '#2563eb',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontWeight: '700'
                }}>
                  {t.name.split(' ').map(n => n[0]).join('')}
                </div>
                <div>
                  <h3 style={{ fontSize: '1.05rem', fontWeight: 700, color: '#0f172a' }}>{t.name}</h3>
                  <p style={{ fontSize: '0.85rem', color: '#64748b' }}>{t.role}</p>
                </div>
              </div>

              <div style={{ fontSize: '0.875rem', color: '#334155', display: 'flex', flexDirection: 'column', gap: '8px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <MapPin size={16} color="#2563eb" />
                  <span style={{ fontWeight: 600 }}>{t.status}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <Phone size={16} color="#64748b" />
                  <span>{t.phone}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <Mail size={16} color="#64748b" />
                  <span>{t.email}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
};
