/* global React */
// Jobs — Übersicht + Detailseiten (Inhalte aus den 4its-Ausschreibungen)

const JOBS = [
  {
    slug: 'senior-systemadministrator',
    title: 'Senior Systemadministrator',
    level: 'Senior',
    typ: 'Vollzeit · 40 Std.',
    ort: 'Hamburg',
    teaser: 'Third-Level-Support, komplette Server-Administration und spannende fachübergreifende IT-Projekte — mit mehrjähriger Erfahrung in hochverfügbaren Systemen.',
    intro: 'In unseren Outsourcing-Projekten übernehmen Sie hauptsächlich Aufgaben im Third Level Support — dazu Second Level Support, Wartung und Erweiterung der bestehenden Infrastruktur sowie die Umsetzung neuer Projekte.',
    aufgaben: [
      'Verantwortung der kompletten Administration der internen und externen Betriebssysteme und Server im Rahmen eines Projektgeschäfts',
      'Administration, kontinuierliche Weiterentwicklung, Optimierung sowie Sicherstellung der heterogenen IT-Infrastruktur, basierend auf Microsoft',
      'Verwaltung des Active Directory unter Berücksichtigung aktueller IT-Sicherheitsanforderungen',
      'Überwachung von IT-Services sowie Erstellung und Pflege von technischen Dokumentationen',
      'Proaktive Mitarbeit an spannenden fachübergreifenden IT-Projekten',
    ],
    quali: [
      'Mehrjährige Berufserfahrung in der Administration hochperformanter und redundant ausgelegter IT-Systeme',
      'Sehr gute Kenntnisse aktueller MS-Server- und Virtualisierungstechnologien, Citrix-Administration sowie Kollaborationssysteme wie MS Exchange',
      'Windows, Office 365, Hyper-V',
      'Fortgeschrittene Linux-Kenntnisse, einfaches Programmieren (z. B. Bash, PowerShell)',
      'Erfahrung mit Veeam Backup',
      'Gutes Verständnis der Funktionalität von Clustersystemen und Netzwerken',
      'Idealerweise Erfahrung mit Webservern, Datenbanken (MS SQL), Storage-Technologien und Firewalls',
    ],
    persoenlich: [
      'Kunden- und Serviceorientierung (Selbstverständnis als Dienstleister)',
      'Freundliches und geduldiges Auftreten gegenüber Kunden, auch am Telefon',
      'Zuverlässigkeit, selbständige und gewissenhafte Arbeitsweise',
      'Sehr gute Deutsch- und gute Englischkenntnisse in Wort und Schrift',
      'Spaß daran, Neues zu lernen und umzusetzen',
      'Führerschein Klasse 3 / B',
    ],
  },
  {
    slug: 'first-level-supporter',
    title: 'IT-Mitarbeiter 1st-Level-Support',
    level: 'Junior–Mid',
    typ: 'Vollzeit',
    ort: 'Hamburg',
    teaser: 'Erste Anlaufstelle für unsere Kunden im Servicedesk — Telefon, Remoteunterstützung, Incident-Bearbeitung. Auch Quereinsteiger mit Praxiserfahrung willkommen.',
    intro: 'In unseren Outsourcing-Projekten übernehmen Sie hauptsächlich Aufgaben im First Level Support. Sie sind die erste Stimme, die unsere Kunden hören — ruhig, freundlich, lösungsorientiert.',
    aufgaben: [
      'Telefonischer 1st-Level-Support im Servicedesk',
      'Begleitung von Anwendern bei IT-Problemen inklusive Remoteunterstützung',
      'Bearbeitung eingehender Incidents und ggf. Weiterleitung an den nachgelagerten Support',
      'Installation von Anwendungsprogrammen',
      'Beschaffung und Verwaltung der Hard- und Software',
    ],
    quali: [
      'Abgeschlossene Ausbildung als Fachinformatiker (m/w/d) Systemintegration oder gleichwertige Weiterbildung im IT-Umfeld — auch Quereinsteiger mit Praxiserfahrung willkommen',
      'Sicherer Umgang mit Windows-Betriebssystemen und den aktuellen Office-Versionen',
      'Erste Berufserfahrung im 1st-Level-Support von Vorteil',
      'Sehr gute Kommunikations- und Teamfähigkeit',
      'Freundliches und ruhiges Auftreten, auch in Stresssituationen',
      'Gute Englischkenntnisse',
      'Spaß daran, Neues zu lernen und umzusetzen',
    ],
    persoenlich: [
      'Noch nicht vorhandene Kenntnisse vermitteln wir Ihnen.',
    ],
  },
  {
    slug: 'junior-administrator',
    title: 'Junior System- / Netzwerk-Administrator',
    level: 'Junior',
    typ: 'Vollzeit · 40 Std.',
    ort: 'Hamburg',
    teaser: 'Einstieg im First & Second Level Support mit Mentoring — Linux, Windows, Netzwerk. Sie wachsen mit realen Projekten und festen Ansprechpartnern.',
    intro: 'In unseren Outsourcing-Projekten übernehmen Sie hauptsächlich Aufgaben im First & Second Level Support — Wartung und Erweiterung der bestehenden Infrastruktur, dazu Second/Third Level Support und die Umsetzung neuer Projekte.',
    aufgaben: [
      'Wartung und Erweiterung der bestehenden Infrastruktur',
      'Second und Third Level Support',
      'Umsetzen neuer Projekte',
    ],
    quali: [
      'Installation und Betrieb: Linux Ubuntu & Debian',
      'Installation und Betrieb: Windows Server 2008–2016 sowie Windows 7 / 8.1 / 10',
      'Unterstützung bei Office-2003–2016-Problemen',
      'Ausbildung zum Fachinformatiker (m/w/d) Systemintegration oder vergleichbar — auch Quereinsteiger mit Praxiserfahrung willkommen',
    ],
    wunsch: [
      'Virtualisierung mit VMware vSphere',
      'Citrix XenApp 6.5 oder neuer',
      'TCP/IP-Dienste: DNS (Bind), DHCP, Routing, VPN (OpenVPN/TINC), iptables',
      'VLAN / Routing',
      'Windows: ADS, GPO, WSUS, Backup/Restore, Exchange, OWA, ActiveSync',
      'Linux-Mailserver: Exim4, SpamAssassin, Amavis',
      'Linux-Server: z. B. LAMP (Linux, Apache, MySQL, PHP)',
      'Shell-Scripting (Bash, SH)',
      'Cisco CallManager',
    ],
    persoenlich: [
      'Kunden- und Serviceorientierung (Selbstverständnis als Dienstleister)',
      'Freundliches und geduldiges Auftreten gegenüber Kunden, insbesondere am Telefon',
      'Zuverlässigkeit, selbständige und gewissenhafte Arbeitsweise',
      'Sehr gute Deutsch- und gute Englischkenntnisse in Wort und Schrift',
      'Spaß daran, Neues zu lernen und umzusetzen',
      'Führerschein Klasse 3 / B',
    ],
  },
];

const JOB_BENEFITS = [
  'Interessante, abwechslungsreiche Position mit viel Lernpotential — unbefristet',
  'Attraktives Gehalt und gute Sozialleistungen',
  'Sehr gute Entwicklungsmöglichkeiten durch regelmäßige externe Weiterbildungen',
  'Flexible Arbeitszeiten (Gleitzeit) und Home-Office-Optionen',
  'Offene Firmenkultur mit Raum, sich einzubringen und selbst zu verwirklichen',
  'Flache Hierarchien und kurze Entscheidungswege',
  'Freie Getränke, moderner Arbeitsplatz in bester City-Lage Hamburgs',
  'Bezuschussung der HVV-Monatskarte',
];

function JobsPage() {
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Jobs'}]}
        eyebrow="Jobs · Offene Stellen"
        title="Mit uns arbeiten."
        lead="Wir wachsen bewusst — und suchen Menschen, die Lust auf direkte Kundenbeziehungen haben. Kein Open-Space-Theater, keine synthetische Agilität."
      />
      <section className="section">
        <div className="container" style={{maxWidth:960}}>
          {JOBS.map((j) => (
            <a key={j.slug} className="job-card" href={`#/jobs/${j.slug}`}>
              <div>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:8,textTransform:'uppercase'}}>{j.ort}</div>
                <h3>{j.title} (m/w/d)</h3>
                <p style={{fontSize:14,marginTop:8}}>{j.teaser}</p>
                <div className="job-tags">
                  <span className="tag">{j.typ}</span>
                  <span className="tag">{j.level}</span>
                  <span className="tag">Festanstellung</span>
                </div>
              </div>
              <span className="btn btn-ghost">Details ansehen <ArrowRight/></span>
            </a>
          ))}
          <div style={{marginTop:48,padding:32,border:'1px dashed var(--border)',borderRadius:12,textAlign:'center'}}>
            <p style={{fontSize:15}}>Nichts Passendes dabei?<br/>Initiativbewerbungen sind willkommen — wir lesen jede.</p>
            <a className="btn btn-ghost" href="mailto:bewerbung@4its.de" style={{marginTop:16}}>bewerbung@4its.de</a>
          </div>
        </div>
      </section>
    </div>
  );
}

function JobDetailPage({ slug }) {
  const job = JOBS.find(j => j.slug === slug);
  if (!job) {
    return (
      <div className="page">
        <PageHeader crumbs={[{label:'Start',path:'#/'},{label:'Jobs',path:'#/jobs'},{label:'Stelle'}]} eyebrow="Jobs" title="Stelle nicht gefunden." />
        <section className="section"><div className="container"><a className="btn btn-ghost" href="#/jobs">← Alle offenen Stellen</a></div></section>
      </div>
    );
  }
  const Block = ({ label, items }) => items && items.length > 0 ? (
    <div style={{marginBottom:36}}>
      <div className="mono" style={{fontSize:11,letterSpacing:'0.1em',color:'var(--accent)',marginBottom:16,textTransform:'uppercase'}}>{label}</div>
      <ul style={{listStyle:'none',padding:0,margin:0,display:'grid',gap:12}}>
        {items.map((p,i) => (
          <li key={i} style={{display:'flex',gap:12,fontSize:15,color:'var(--fg-muted)',lineHeight:1.55}}>
            <span style={{color:'var(--accent)',marginTop:2,flexShrink:0}}>▸</span><span>{p}</span>
          </li>
        ))}
      </ul>
    </div>
  ) : null;

  return (
    <div className="page">
      <header className="page-header">
        <div className="bg-grid"></div>
        <div className="container" style={{position:'relative',zIndex:2}}>
          <div className="breadcrumb">
            <a href="#/">Start</a><span className="sep">/</span>
            <a href="#/jobs">Jobs</a><span className="sep">/</span><span>{job.title}</span>
          </div>
          <div className="eyebrow" style={{marginBottom:20}}>Offene Stelle</div>
          <h1 style={{fontSize:'clamp(34px,4.5vw,60px)',maxWidth:'18ch',marginBottom:20}}>{job.title} <span style={{color:'var(--fg-muted)'}}>(m/w/d)</span></h1>
          <div className="job-tags" style={{marginBottom:24}}>
            <span className="tag">{job.ort}</span>
            <span className="tag">{job.typ}</span>
            <span className="tag">{job.level}</span>
            <span className="tag">Eintritt: kurzfristig</span>
          </div>
          <p style={{fontSize:17,maxWidth:'60ch'}}>{job.intro}</p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="two-col" style={{gap:64,alignItems:'start'}}>
            <div>
              <Block label="Ihre Aufgaben" items={job.aufgaben} />
              <Block label="Ihr Profil" items={job.quali} />
              <Block label="Wünschenswert, aber kein Muss" items={job.wunsch} />
              <Block label="Das ist uns persönlich wichtig" items={job.persoenlich} />
              <p className="mono" style={{fontSize:12,color:'var(--fg-dim)',marginTop:8}}>Noch nicht vorhandene Kenntnisse vermitteln wir Ihnen.</p>
            </div>
            <aside style={{position:'sticky',top:96}}>
              <div style={{padding:28,background:'var(--surface)',border:'1px solid var(--border-soft)',borderRadius:16}}>
                <div className="mono" style={{fontSize:11,letterSpacing:'0.1em',color:'var(--fg-dim)',marginBottom:16,textTransform:'uppercase'}}>Wir bieten Ihnen</div>
                <ul style={{listStyle:'none',padding:0,margin:'0 0 24px',display:'grid',gap:10}}>
                  {JOB_BENEFITS.map((b,i) => (
                    <li key={i} style={{display:'flex',gap:10,fontSize:13.5,color:'var(--fg-muted)',lineHeight:1.5}}>
                      <span style={{color:'var(--brand-green)',marginTop:1,flexShrink:0}}>✓</span><span>{b}</span>
                    </li>
                  ))}
                </ul>
                <a className="btn btn-primary" style={{width:'100%',justifyContent:'center'}} href={`mailto:bewerbung@4its.de?subject=${encodeURIComponent('Bewerbung: ' + job.title + ' (m/w/d)')}`}>Jetzt bewerben <ArrowRight/></a>
                <p style={{fontSize:12,color:'var(--fg-dim)',marginTop:14,textAlign:'center',lineHeight:1.5}}>Aussagefähige Bewerbung mit Eintrittstermin &amp; Gehaltsvorstellung an<br/><a href="mailto:bewerbung@4its.de" style={{color:'var(--fg-muted)',textDecoration:'underline'}}>bewerbung@4its.de</a></p>
              </div>
              <a className="btn btn-ghost" href="#/jobs" style={{marginTop:16,width:'100%',justifyContent:'center'}}>← Alle Stellen</a>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { JobsPage, JobDetailPage });