/* global React, Topo, Button, Icon, Section, Container, Eyebrow */

const JOBS = [
  { id: 'sysadmin', title: 'Senior Systems Engineer (m/w/d)', loc: 'Schweiz (Hybrid) · 80 – 100%', focus: 'Cloud Office, Virtualisierung, Netzwerk', open: true,
    teaser: 'Du betreust 20 – 30 KMU als technischer Hauptansprechpartner. Selbständig, mit Backup vom Team.' },
  { id: 'service', title: 'Service Desk Engineer (m/w/d)', loc: 'Schweiz (Hybrid) · 60 – 100%', focus: '1st & 2nd Level Support', open: true,
    teaser: 'Du bist die Stimme am Telefon — und löst die meisten Tickets selber. Lust auf Menschen ist Pflicht.' },
  { id: 'lehre', title: 'Lehrstelle Informatik EFZ Plattform­entwicklung', loc: 'Schweiz (Hybrid) · ab August 2026', focus: '4 Jahre Ausbildung', open: true,
    teaser: 'Wir bilden aus, weil wir es können — und weil wir noch wissen, wie es ist, am Anfang zu stehen.' },
  { id: 'praktikum', title: 'Praktikum Informatik (3 – 6 Monate)', loc: 'Schweiz (Hybrid) · 100%', focus: 'Allrounder', open: false,
    teaser: 'Aktuell besetzt — schreib uns trotzdem, wir hören gerne von dir.' },
];

const PERKS = [
  { icon: 'coffee',  t: '5 Wochen Ferien',   b: 'Plus den Geburtstag frei. Selbstverständlich.' },
  { icon: 'briefcase', t: 'Hybrid arbeiten', b: '2 Tage Home‑Office sind Standard. Mehr nach Absprache.' },
  { icon: 'tool',    t: 'Eigenes Material',  b: 'Notebook, Telefon, Tools — alles auf der Höhe der Zeit.' },
  { icon: 'sparkle', t: 'Weiterbildungs­budget', b: 'CHF 2’500 / Jahr. Du wählst, wir bezahlen.' },
  { icon: 'users',   t: 'Kleines Team',      b: 'Sechs Menschen, kein Konzern. Jede Stimme zählt.' },
  { icon: 'heart',   t: 'Sinnvolle Arbeit',  b: 'Du siehst, was du bewirkst — direkt beim Kunden.' },
];

function PageJobs() {
  return (
    <div data-screen-label="Jobs">
      <Section pad="120px 28px 80px" bg="var(--kmu-paper)" label="Jobs Hero">
        <Topo opacity={0.55}/>
        <Container>
          <Eyebrow dot>JOBS · KARRIERE</Eyebrow>
          <h1 className="kmu-display" style={{ margin: '18px 0 0', fontSize: 'clamp(48px, 6.4vw, 88px)' }}>
            Komm zu einem<br/>
            <span style={{ color: 'var(--kmu-blue)' }}>kleinen</span> Team mit<br/>
            grossem Verstand.
          </h1>
          <p className="kmu-lead" style={{ marginTop: 28, maxWidth: 660 }}>
            Wir suchen Menschen, die IT verstehen — und Menschen mögen. Bei uns gibt es keine Stempeluhr, keine Konzern‑Politik, keine 50 Tickets pro Tag. Aber Verantwortung, Vertrauen und einen guten Espresso.
          </p>
        </Container>
      </Section>

      {/* Open positions */}
      <Section bg="#fff" label="Offene Stellen">
        <Container>
          <Eyebrow>OFFENE STELLEN</Eyebrow>
          <h2 className="kmu-h2" style={{ margin: '10px 0 36px' }}>Aktuell suchen wir.</h2>
          <div style={{ display: 'grid', gap: 14 }}>
            {JOBS.map((j) => <JobRow key={j.id} {...j}/>)}
          </div>
          <p className="kmu-small" style={{ marginTop: 30 }}>
            Nichts Passendes dabei? Schreib uns trotzdem — wir behalten dich im Hinterkopf.{' '}
            <a href="#/kontakt" style={{ color: 'var(--kmu-blue-700)' }}>Initiativbewerbung</a>.
          </p>
        </Container>
      </Section>

      {/* Perks */}
      <Section bg="var(--kmu-paper)" label="Was wir bieten">
        <Topo opacity={0.4}/>
        <Container>
          <Eyebrow>WAS WIR BIETEN</Eyebrow>
          <h2 className="kmu-h2" style={{ margin: '10px 0 48px' }}>Sechs Gründe, warum wir bleiben.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
            {PERKS.map((p) => (
              <div key={p.t} style={{
                background: '#fff', border: '1px solid var(--kmu-line)',
                borderRadius: 18, padding: 28,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12, background: 'var(--kmu-blue-100)',
                  color: 'var(--kmu-blue-700)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 20,
                }}><Icon name={p.icon} size={22}/></div>
                <h3 style={{ fontWeight: 700, fontSize: 19, margin: '0 0 8px' }}>{p.t}</h3>
                <p className="kmu-small" style={{ margin: 0 }}>{p.b}</p>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Process */}
      <Section bg="#fff" label="Bewerbung">
        <Container max={920}>
          <Eyebrow>SO LÄUFT'S AB</Eyebrow>
          <h2 className="kmu-h2" style={{ margin: '10px 0 36px' }}>Vier Schritte. Keine Tricks.</h2>
          <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 18 }}>
            {[
              ['Du schreibst.', 'Lebenslauf reicht. Ein Anschreiben ist nett, aber nicht Pflicht.'],
              ['Wir antworten.', 'Innert 5 Werktagen — auch wenn die Antwort «danke, aber nein» lautet.'],
              ['Wir treffen uns.', 'Ein Espresso, 60 Minuten. Du lernst Jonas und einen aus dem Fachteam kennen.'],
              ['Probetag.', 'Du arbeitest einen Tag mit. Du siehst uns, wir sehen dich. Bezahlt, versteht sich.'],
            ].map(([t, b], i) => (
              <li key={t} style={{ display: 'grid', gridTemplateColumns: '52px 1fr', gap: 20, alignItems: 'flex-start',
                padding: '20px 0', borderTop: i === 0 ? 'none' : '1px solid var(--kmu-line)' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 999, background: 'var(--kmu-blue)',
                  color: '#fff', fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 13,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{(i+1).toString().padStart(2,'0')}</div>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, margin: '0 0 6px' }}>{t}</h3>
                  <p className="kmu-small" style={{ margin: 0 }}>{b}</p>
                </div>
              </li>
            ))}
          </ol>
          <div style={{ marginTop: 36 }}>
            <Button variant="primary" size="lg" icon="arrow-right" as="a" href="#/kontakt">Jetzt bewerben</Button>
          </div>
        </Container>
      </Section>
    </div>
  );
}

function JobRow({ id, title, loc, focus, open, teaser }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={open ? `#/kontakt?job=${id}` : undefined}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'block', background: '#fff',
        border: `1px solid ${hover && open ? 'var(--kmu-blue)' : 'var(--kmu-line)'}`,
        borderRadius: 18, padding: '24px 28px',
        textDecoration: 'none', color: 'inherit',
        cursor: open ? 'pointer' : 'default',
        opacity: open ? 1 : 0.6,
        boxShadow: hover && open ? 'var(--shadow-md)' : 'var(--shadow-xs)',
        transition: 'all 200ms var(--ease-out)',
      }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 40px', gap: 24, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, margin: 0 }}>{title}</h3>
            {!open && <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-4)', background: 'var(--kmu-mist)', padding: '3px 8px', borderRadius: 999 }}>Besetzt</span>}
          </div>
          <p className="kmu-small" style={{ margin: 0 }}>{teaser}</p>
        </div>
        <div className="kmu-meta" style={{ fontSize: 13, color: 'var(--fg-3)' }}>
          <Icon name="map-pin" size={14} style={{ display: 'inline-block', marginRight: 6, verticalAlign: '-2px' }}/>{loc}
        </div>
        <div className="kmu-meta" style={{ fontSize: 13, color: 'var(--fg-3)' }}>
          <Icon name="briefcase" size={14} style={{ display: 'inline-block', marginRight: 6, verticalAlign: '-2px' }}/>{focus}
        </div>
        <div style={{
          width: 36, height: 36, borderRadius: 999,
          background: hover && open ? 'var(--kmu-blue)' : 'transparent',
          border: '1px solid var(--kmu-line-strong)',
          color: hover && open ? '#fff' : 'var(--fg-3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all 200ms', justifySelf: 'end',
        }}>
          <Icon name={open ? 'arrow-up-right' : 'x'} size={16}/>
        </div>
      </div>
    </a>
  );
}

window.PageJobs = PageJobs;