const DS4 = window.IseeITDesignSystem_37fb1f;

// Auf Modulebene, nicht im Kontakt-Render definiert: sonst bekommt React bei jedem
// Tastenanschlag einen neuen Komponententyp und baut die Fotos neu auf (Flackern).
const KZ = ({ label, children }) => <div style={{ borderTop: 'var(--hairline)', padding: '18px 0' }}>
  <p style={{ margin: 0, font: "400 11.5px/1 var(--font-mono)", letterSpacing: '.12em', color: 'var(--stein)' }}>{label}</p>
  <div style={{ marginTop: '10px', fontSize: '17px' }}>{children}</div>
</div>;
const KPerson = ({ bild, name, rolle }) => <div style={{ display: 'flex', alignItems: 'center', gap: '12px', minWidth: 0 }}>
  {bild ? <img src={bild} alt={name} style={{ width: '46px', height: '46px', borderRadius: '50%', objectFit: 'cover', objectPosition: 'center 18%', flex: 'none' }} /> : <span style={{ width: '46px', height: '46px', borderRadius: '50%', background: 'repeating-linear-gradient(135deg,#EDE5D9 0 6px,#E6DFD3 6px 12px)', display: 'block', flex: 'none' }}></span>}
  <span style={{ minWidth: 0 }}>
    <span style={{ display: 'block', fontSize: '15.5px', fontWeight: 600 }}>{name}</span>
    <span style={{ display: 'block', marginTop: '2px', font: "400 12px/1 var(--font-mono)", color: 'var(--stein)' }}>{rolle}</span>
  </span>
</div>;

function Fragen() {
  const { t } = React.useContext(window.SpracheCtx);
  const f = t.fragen;
  const [alle, setAlle] = React.useState(false);
  const [hov, setHov] = React.useState(false);
  const letzte = f.qa[f.qa.length - 1];
  return <section id="faq" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--sektion-abstand) var(--rand) 0', scrollMarginTop: '120px' }} data-screen-label="06 Fragen">
    <DS4.Kicker nummer="05">{f.kicker}</DS4.Kicker>
    <h2 style={{ margin: '18px 0 0', maxWidth: '760px', fontSize: 'var(--fs-h2)', lineHeight: 'var(--lh-heading)', letterSpacing: 'var(--ls-tight)', fontWeight: 600 }}>{f.titel}</h2>
    {/* Die wichtigste Antwort steht: eine Kachel als Brücke zum Formular. Die übrigen Fragen liegen zusammengeklappt darunter. */}
    <div className="kachel-ruhig" style={{ marginTop: '36px', maxWidth: '860px', background: 'var(--papier-ton)', border: '1px solid var(--linie)', borderTop: '2px solid var(--gold)', padding: 'var(--pad-karte)' }}>
      <h3 style={{ margin: 0, fontSize: 'clamp(18px,2.1vw,22px)', lineHeight: 1.35, letterSpacing: '-.015em', fontWeight: 600 }}>{letzte.f}</h3>
      {f.nutzen ? <React.Fragment>
        <p style={{ margin: '12px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)' }}>{window.FETT(f.nutzen.lead)}</p>
        <DS4.MarkerListe items={f.nutzen.punkte} style={{ marginTop: '14px' }} />
        <p style={{ margin: '16px 0 0', fontSize: '16px', lineHeight: 'var(--lh-body)', color: 'var(--stein)' }}>{f.nutzen.schluss}</p>
      </React.Fragment> : <p style={{ margin: '12px 0 0', fontSize: '16px', lineHeight: 'var(--lh-lang)' }}>{window.FETT(letzte.a)}</p>}
    </div>
    <div style={{ marginTop: '26px', maxWidth: '860px' }}>
      <button type="button" onClick={() => setAlle(a => !a)} aria-expanded={alle} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
        style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', background: 'none', border: 'none', borderBottom: hov ? '1px solid var(--backstein-tief)' : '1px solid var(--backstein)', padding: '0 0 3px', cursor: 'pointer', font: "500 15px/1 var(--font-grotesk)", color: hov ? 'var(--backstein-tief)' : 'var(--backstein)', transition: 'color .25s ease,border-color .25s ease' }}>
        {alle ? f.alleVerbergen : f.alleZeigen}
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ transform: alle ? 'rotate(180deg)' : 'none', transition: 'transform .4s var(--ease)' }}><path d="M6 9l6 6 6-6"></path></svg>
      </button>
      <div style={{ display: 'grid', gridTemplateRows: alle ? '1fr' : '0fr', transition: 'grid-template-rows .6s var(--ease)' }}>
        <div style={{ overflow: 'hidden' }}>
          <div style={{ marginTop: '18px' }}>
            {f.qa.slice(0, -1).map((q, i) => <DS4.Akkordeon key={i} frage={q.f}><p style={{ margin: 0 }}>{window.FETT(q.a)}</p></DS4.Akkordeon>)}
            <div style={{ borderTop: 'var(--hairline)' }}></div>
          </div>
        </div>
      </div>
    </div>
  </section>;
}

function Kontakt({ onGoto }) {
  const { t } = React.useContext(window.SpracheCtx);
  const k = t.kontakt;
  const weit = window.useMedia('(min-width: 760px)');
  const laeuftMit = window.useMedia('(min-width: 1000px)');
  const [status, setStatus] = React.useState('offen'); // offen | sendet | danke | mailweg
  const [t0] = React.useState(() => Date.now());
  const [f, setF] = React.useState({ name: '', mail: '', fokus: '', land: '', profil: '', links: [], nachricht: '', firma: '', ok: false });
  const [datei, setDatei] = React.useState(null);
  const [dateiFehler, setDateiFehler] = React.useState('');
  const [schluessel, setSchluessel] = React.useState(0);
  // Vorwahl aus den Weg-Kacheln („Ihr Weg nach Deutschland" / „in die Schweiz"): das Zielland steht schon im Formular.
  React.useEffect(() => {
    const f = (e) => { const land = e && e.detail && e.detail.land; if (land) setF(v => ({ ...v, land })); };
    window.addEventListener('kontakt-vorwahl', f);
    return () => window.removeEventListener('kontakt-vorwahl', f);
  }, []);
  const set = (kk) => (e) => setF({ ...f, [kk]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
  const setLink = (i) => (e) => setF(v => { const l = v.links.slice(); l[i] = e.target.value; return { ...v, links: l }; });
  const linkWeg = (i) => () => setF(v => ({ ...v, links: v.links.filter((_, j) => j !== i) }));
  const linkDazu = () => setF(v => v.links.length >= 3 ? v : { ...v, links: v.links.concat('') });
  // Anhang: nur PDF und Word, höchstens 4 MB. Geprüft wird hier für die Rechenzeit des
  // Besuchers und ein zweites Mal auf dem Server — dort zählt allein die Serverprüfung.
  const dateiWaehlen = (e) => {
    const d = e.target.files && e.target.files[0];
    setDateiFehler(''); setDatei(null);
    if (!d) return;
    if (!/\.(pdf|doc|docx)$/i.test(d.name)) { setDateiFehler(k.form.cvTyp); e.target.value = ''; return; }
    if (d.size > 4 * 1024 * 1024) { setDateiFehler(k.form.cvGross); e.target.value = ''; return; }
    const r = new FileReader();
    r.onload = () => setDatei({ name: d.name, groesse: d.size, daten: String(r.result).split(',')[1] || '' });
    r.onerror = () => { setDateiFehler(k.form.cvFehler); e.target.value = ''; };
    r.readAsDataURL(d);
  };
  const dateiWeg = () => { setDatei(null); setDateiFehler(''); setSchluessel(n => n + 1); };
  // Die linke Spalte („06 Schreiben Sie uns", Titel, Ansprechpartner) bleibt unter der
  // Kopfzeile verankert, während das Formular rechts weiterläuft: Der Abschnittsanfang
  // ist immer im Blick — genau wie beim Aufsetzen der Sektion.
  const mailOk = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(f.mail.trim());
  const ready = f.name && mailOk && f.ok;
  const absenden = () => {
    if (status === 'sendet') return;
    setStatus('sendet');
    const links = f.links.map(s => s.trim()).filter(Boolean);
    const ctrl = new AbortController();
    const timer = setTimeout(() => ctrl.abort(), datei ? 30000 : 8000);
    fetch('kontakt.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: f.name, mail: f.mail, fokus: f.fokus, land: f.land, profil: f.profil, links, nachricht: f.nachricht, firma: f.firma, t0, datei: datei ? { name: datei.name, daten: datei.daten } : null }), signal: ctrl.signal })
      .then(r => r.json().then(j => { if (!r.ok || !j.ok) throw new Error('senden'); setStatus('danke'); }))
      .catch(() => {
        // Rückfallweg ohne Server: E-Mail-Programm mit fertiger Nachricht öffnen.
        const betreff = encodeURIComponent('Kontakt: ' + f.name + (f.fokus ? ' · ' + f.fokus : '') + (f.land ? ' → ' + f.land : ''));
        const rumpf = encodeURIComponent('Name: ' + f.name + '\nE-Mail: ' + f.mail + (f.fokus ? '\nFachgebiet: ' + f.fokus : '') + (f.land ? '\nZielland: ' + f.land : '') + (f.profil ? '\nProfil: ' + f.profil : '') + (links.length ? '\nWeitere Links: ' + links.join(' · ') : '') + (datei ? '\n\n' + k.form.mailAnhang : '') + (f.nachricht ? '\n\n' + f.nachricht : ''));
        window.location.href = 'mailto:info@iseeit-talent.de?subject=' + betreff + '&body=' + rumpf;
        setStatus('mailweg');
      })
      .finally(() => clearTimeout(timer));
  };
  const offen = [!f.name && k.form.offenFelder[0], !mailOk && k.form.offenFelder[1], !f.ok && k.form.offenFelder[4]].filter(Boolean).join(', ');
  return <section id="kontakt" style={{ marginTop: 'var(--sektion-abstand)', background: 'var(--papier-tief,var(--papier-ton))', borderTop: '2px solid var(--gold)', color: 'var(--tinte)', scrollMarginTop: '120px' }} data-screen-label="07 Kontakt">
    <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--sektion-pad) var(--rand) calc(var(--sektion-pad) + 4px)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: weit ? 'minmax(0,.94fr) minmax(0,1.06fr)' : '1fr', gap: '38px 44px', alignItems: 'start' }}>
        <div style={{ minWidth: 0, position: laeuftMit ? 'sticky' : 'static', top: laeuftMit ? '90px' : 'auto' }}>
          <DS4.Kicker nummer="06">{k.kicker}</DS4.Kicker>
          <h2 style={{ margin: '18px 0 0', fontSize: 'var(--fs-h2)', lineHeight: 'var(--lh-heading)', letterSpacing: 'var(--ls-tight)', fontWeight: 600 }}>{k.titel}</h2>
          <p style={{ margin: '18px 0 0', maxWidth: '560px', fontSize: '17px', lineHeight: 'var(--lh-body)', color: 'var(--stein)' }}>{window.FETT(k.intro)}</p>
          <p style={{ margin: '34px 0 0', font: "400 11.5px/1 var(--font-mono)", letterSpacing: '.12em', color: 'var(--stein)' }}>{k.ansprechLabel}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '18px 36px', marginTop: '16px' }}>
            <KPerson rolle={t.wir.rolle} bild="assets/david-bundies.jpg" name="David Bundies" />
            <KPerson rolle={t.wir.rolle} bild="assets/evangelos-pourtsas.jpg" name="Evangelos Pourtsas" />
          </div>
          <p style={{ margin: '16px 0 0', fontSize: '15px', lineHeight: 1.55, color: 'var(--stein)', maxWidth: '440px' }}>{k.ansprechZeile}</p>
          <div style={{ marginTop: '24px' }}>
            <KZ label={k.mailLabel}><a href="mailto:info@iseeit-talent.de" style={{ color: 'var(--tinte)' }}>info@iseeit-talent.de</a></KZ>
            <KZ label={k.sprachenLabel}><span style={{ fontWeight: 600, color: 'var(--backstein)' }}>Deutsch</span> · <span style={{ fontWeight: 600 }}>English</span> · <span style={{ fontWeight: 600, color: 'var(--sprach-el,#0E6E74)' }}>Ελληνικά</span> · <span style={{ fontWeight: 600, color: 'var(--sprach-es,#A3521A)' }}>Español</span></KZ>
            <div style={{ borderTop: 'var(--hairline)', padding: '18px 0 0' }}>
              <p style={{ margin: 0, font: "400 11.5px/1 var(--font-mono)", letterSpacing: '.12em', color: 'var(--backstein)' }}>{k.danachLabel}</p>
              <div style={{ marginTop: '6px' }}>
                {k.danach.map((d, i) => <p key={i} style={{ margin: '10px 0 0', fontSize: '15.5px', lineHeight: 1.55 }}><strong style={{ fontWeight: 600 }}>{d.t}</strong> {d.x}</p>)}
              </div>
              <p style={{ margin: '18px 0 0', fontSize: '14px', lineHeight: 1.6, color: 'var(--stein)' }}>{k.datenHinweis}</p>
            </div>
          </div>
        </div>
        <div style={{ minWidth: 0, background: 'var(--karte-weiss,#FFFFFF)', border: '1px solid var(--linie)', borderTop: '2px solid var(--gold)', color: 'var(--tinte)', padding: 'clamp(22px,3vw,34px)' }}>
          {(status === 'offen' || status === 'sendet') ? <div style={{ display: 'grid', gap: '15px' }}>
            <p style={{ margin: 0, paddingBottom: '14px', borderBottom: '1px solid var(--linie)', fontSize: '14.5px', lineHeight: 1.55, color: 'var(--stein)' }}>{window.FETT(k.form.intro)}</p>
            <DS4.Formularfeld label={k.form.name} erforderlich erforderlichText={k.form.erforderlich} placeholder={k.form.nameP} value={f.name} onChange={set('name')} />
            <div>
              <DS4.Formularfeld label={k.form.mail} erforderlich erforderlichText={k.form.erforderlich} type="email" placeholder={k.form.mailP} value={f.mail} onChange={set('mail')} />
              {f.mail.trim() !== '' && !mailOk && <p style={{ margin: '8px 0 0', fontSize: '13.5px', lineHeight: 1.45, color: 'var(--backstein)' }}>{k.form.mailPruefen}</p>}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(172px,1fr))', gap: '15px 16px', alignItems: 'end' }}>
              <DS4.Formularfeld label={k.form.fokus} type="select" platzhalterOption={k.form.bitteWaehlen} options={k.form.fokusOpt} value={f.fokus} onChange={set('fokus')} />
              <DS4.Formularfeld label={k.form.land} type="select" platzhalterOption={k.form.bitteWaehlen} options={k.form.landOpt} value={f.land} onChange={set('land')} />
            </div>
            <div>
              <DS4.Formularfeld label={k.form.profil} placeholder={k.form.profilP} value={f.profil} onChange={set('profil')} />
              {f.links.map((v, i) => <div key={i} style={{ display: 'flex', gap: '10px', alignItems: 'flex-end', marginTop: '14px' }}>
                <DS4.Formularfeld label={k.form.linkWeiter} placeholder={k.form.linkP} value={v} onChange={setLink(i)} style={{ flex: '1 1 auto', minWidth: 0 }} />
                <button type="button" onClick={linkWeg(i)} aria-label={k.form.linkWeg} title={k.form.linkWeg} style={{ flex: 'none', width: '44px', height: '46px', background: 'none', border: '1px solid var(--linie)', color: 'var(--stein)', cursor: 'pointer', fontSize: '18px', lineHeight: 1 }}>×</button>
              </div>)}
              {f.links.length < 3 && <button type="button" onClick={linkDazu} style={{ marginTop: '14px', background: 'none', border: 0, padding: 0, color: 'var(--backstein)', font: "500 14.5px/1 var(--font-grotesk)", cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: '3px' }}>{k.form.linkDazu}</button>}
            </div>
            <div style={{ borderTop: '1px solid var(--linie)', paddingTop: '15px' }}>
              <DS4.Formularfeld key={'cv' + schluessel} type="file" accept=".pdf,.doc,.docx" label={k.form.cv} hinweis={datei ? null : k.form.cvHinweis} onChange={dateiWaehlen} />
              {datei && <p style={{ margin: '10px 0 0', display: 'flex', gap: '12px', alignItems: 'baseline', fontSize: '14px', lineHeight: 1.5, color: 'var(--stein-tief)' }}>
                <span style={{ minWidth: 0, overflowWrap: 'anywhere' }}>{datei.name} · {Math.max(1, Math.round(datei.groesse / 1024))} KB</span>
                <button type="button" onClick={dateiWeg} style={{ flex: 'none', background: 'none', border: 0, padding: 0, color: 'var(--backstein)', font: "500 14px/1 var(--font-grotesk)", cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: '3px' }}>{k.form.cvWeg}</button>
              </p>}
              {dateiFehler && <p style={{ margin: '10px 0 0', padding: '11px 13px', background: 'var(--backstein-hauch)', borderLeft: '3px solid var(--backstein)', fontSize: '14px', lineHeight: 1.5, color: 'var(--stein-tief)' }}>{dateiFehler}</p>}
            </div>
            <DS4.Formularfeld label={k.form.nachricht} type="textarea" value={f.nachricht} onChange={set('nachricht')} />
            <input type="text" name="firma" value={f.firma} onChange={set('firma')} tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: 'absolute', left: '-6000px', width: '1px', height: '1px', opacity: 0, pointerEvents: 'none' }} />
            <DS4.Formularfeld type="checkbox" checked={f.ok} onChange={set('ok')} label={<span>{k.form.einwilligung} <a href="#" onClick={e => { e.preventDefault(); onGoto && onGoto('datenschutz'); }}>{k.form.datenschutzLink}</a></span>} />
            {!ready && <p style={{ margin: 0, padding: '13px 15px', background: 'var(--papier-ton)', borderLeft: '3px solid var(--gold)', fontSize: '14.5px', lineHeight: 1.5, color: 'var(--stein-tief)' }}>{k.form.offenPrefix} {offen}.</p>}
            <DS4.Button disabled={!ready || status === 'sendet'} onClick={absenden} style={{ width: '100%' }}>{status === 'sendet' ? k.form.sendet : k.form.senden}</DS4.Button>
          </div> : <div style={{ animation: 'fadeUp .7s var(--ease) both' }}>
            <DS4.Kicker>{k.form.dankeKicker}</DS4.Kicker>
            {status === 'danke' ? <p style={{ margin: '16px 0 0', fontSize: '21px', lineHeight: 1.35, fontWeight: 600, letterSpacing: '-.015em' }}>{k.form.dankeText}</p>
              : <p style={{ margin: '16px 0 0', fontSize: '16px', lineHeight: 1.6 }}>{k.form.mailHinweis}</p>}
            <DS4.Button variant="ghost" onClick={() => setStatus('offen')} style={{ marginTop: '22px' }}>{k.form.nochmal}</DS4.Button>
          </div>}
        </div>
      </div>
    </div>
  </section>;
}

function SiteFooter({ page, onGoto, onNav }) {
  const { t } = React.useContext(window.SpracheCtx);
  const ft = t.footer;
  const col = { margin: 0, font: "400 11.5px/1 var(--font-mono)", letterSpacing: '.1em', color: 'var(--sektion-tertiaer)' };
  const lnk = { color: 'var(--sektion-text)' };
  const karte = page === 'home' ? ft.karteHome : ft.karteSub;
  const toolKarte = ft.karteTool || { kicker: t.wahl.tool.kicker, titel: t.wahl.tool.titel, unter: t.wahl.tool.unter };
  const Karte = ({ href, onClick, k, pfeil, breit }) => <a href={href} onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: '22px', maxWidth: breit ? '700px' : 'none', border: '1px solid var(--sektion-linie)', background: 'rgba(251,248,243,.04)', padding: '24px 26px', color: 'var(--sektion-text)', textDecoration: 'none', transition: 'background .3s ease,border-color .3s ease' }} onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--gold-hell)'; e.currentTarget.style.background = 'rgba(251,248,243,.09)'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--sektion-linie)'; e.currentTarget.style.background = 'rgba(251,248,243,.04)'; }}>
    <span style={{ flex: '1 1 auto' }}>
      <span style={{ display: 'block', font: "500 11px/1 var(--font-mono)", letterSpacing: '.14em', color: 'var(--sektion-tertiaer)' }}>{k.kicker}</span>
      <span style={{ display: 'block', marginTop: '10px', fontSize: 'clamp(19px,2.2vw,24px)', fontWeight: 600, letterSpacing: '-.015em' }}>{k.titel}</span>
      <span style={{ display: 'block', marginTop: '7px', fontSize: '14.5px', lineHeight: 1.5, color: 'var(--sektion-sekundaer)' }}>{k.unter}</span>
    </span>
    <span style={{ flex: 'none', fontSize: '24px', color: 'var(--gold-hell)' }}>{pfeil}</span>
  </a>;
  const claimFarbe = { rot: 'color-mix(in oklab, var(--backstein-hell) 55%, var(--sektion-tertiaer))', gold: 'color-mix(in oklab, var(--gold-hell) 55%, var(--sektion-tertiaer))' };
  return <footer style={{ background: 'var(--sektion-tief,var(--sektion))', color: 'var(--sektion-text)', borderTop: '1px solid rgba(200,129,26,.55)' }}>
    <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '56px var(--rand) 34px' }}>
      {page === 'unternehmen' ? <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: '16px', maxWidth: '900px' }}>
        <Karte href="vergleich/index.html" k={toolKarte} pfeil="→" />
        <Karte href="?seite=nischen" onClick={e => { e.preventDefault(); onGoto('nischen'); }} k={ft.karteNischen} pfeil="→" />
      </div> : page === 'nischen' ? <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: '16px', maxWidth: '900px' }}>
        <Karte href="?seite=unternehmen" onClick={e => { e.preventDefault(); onGoto('unternehmen'); }} k={ft.karteUnternehmen} pfeil="→" />
        <Karte href="vergleich/index.html" k={toolKarte} pfeil="→" />
      </div> : <Karte breit href="#" onClick={e => { e.preventDefault(); onGoto(page === 'home' ? 'unternehmen' : 'home'); }} k={karte} pfeil={page === 'home' ? '→' : '←'} />}
      <p style={{ margin: '44px 0 0', font: "500 11.5px/1.6 var(--font-mono)", letterSpacing: '.18em', color: 'var(--sektion-tertiaer)' }}>{ft.claim.map((s, i) => s.f ? <span key={i} style={{ color: claimFarbe[s.f] }}>{s.x}</span> : <span key={i}>{s.x}</span>)}</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))', gap: '30px', marginTop: '26px' }}>
        <div><p style={col}>{ft.colWeg}</p><ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: '8px', fontSize: '15px' }}>{[['wahl', t.nav.wahl], ['prozess', t.nav.prozess], ['ankommen', t.nav.ankommen]].map(([id, tx]) => <li key={id}><a href={'#' + id} onClick={e => { e.preventDefault(); onNav(id); }} style={lnk}>{tx}</a></li>)}<li><a href="vergleich/index.html" style={lnk}>{ft.vergleichstool}</a></li></ul></div>
        <div><p style={col}>{ft.colIseeit}</p><ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: '8px', fontSize: '15px' }}>{[['ueber-uns', t.nav.wir], ['faq', t.nav.fragen], ['kontakt', t.nav.kontakt]].map(([id, tx]) => <li key={id}><a href={'#' + id} onClick={e => { e.preventDefault(); onNav(id); }} style={lnk}>{tx}</a></li>)}<li><a href="?seite=nischen" onClick={e => { e.preventDefault(); onGoto('nischen'); }} style={lnk}>{ft.fachgebiete}</a></li></ul></div>
        <div><p style={col}>{ft.colFirma}</p><p style={{ margin: '12px 0 0', fontSize: '15px', lineHeight: 1.7 }}>Braunschweig<br /><a href="mailto:info@iseeit-talent.de" style={lnk}>info@iseeit-talent.de</a></p><ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: '8px', fontSize: '15px' }}><li><a href="?seite=impressum" style={lnk} onClick={e => { e.preventDefault(); onGoto('impressum'); }}>{ft.impressum}</a></li><li><a href="?seite=datenschutz" style={lnk} onClick={e => { e.preventDefault(); onGoto('datenschutz'); }}>{ft.datenschutz}</a></li></ul></div>
      </div>
      <p style={{ margin: '40px 0 0', paddingTop: '22px', borderTop: '1px solid var(--sektion-linie)', fontSize: '13.5px', lineHeight: 1.7, color: 'var(--sektion-sekundaer)' }}>{ft.rechtlich}</p>
    </div>
  </footer>;
}

const FL = {
  de: <svg width="26" height="16" viewBox="0 0 5 3" aria-hidden="true"><rect width="5" height="1" y="0" fill="#111111"></rect><rect width="5" height="1" y="1" fill="#C8102E"></rect><rect width="5" height="1" y="2" fill="#EBC33F"></rect></svg>,
  ch: <svg width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" fill="#C8102E"></rect><rect x="13" y="6" width="6" height="20" fill="#FFFFFF"></rect><rect x="6" y="13" width="20" height="6" fill="#FFFFFF"></rect></svg>
};

// Adressaten-Wahl: zwei Reiter unter der Überschrift. Ein Reiter, ein Abschnitt; nichts liegt kreuz und quer.
function AdressatReiter({ land, titel, aktiv, onClick }) {
  const [hov, setHov] = React.useState(false);
  return <button type="button" role="tab" aria-selected={aktiv} onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
    style={{ font: 'inherit', display: 'flex', alignItems: 'center', gap: '15px', padding: '18px 20px', minHeight: '64px', boxSizing: 'border-box', textAlign: 'left', cursor: aktiv ? 'default' : 'pointer', color: 'var(--tinte)', background: aktiv || hov ? 'var(--papier-ton)' : 'var(--karte-weiss,#FFFFFF)', border: aktiv ? '1px solid var(--gold)' : hov ? '1px solid var(--backstein)' : '1px solid var(--linie)', borderBottom: aktiv ? '3px solid var(--gold)' : hov ? '1px solid var(--backstein)' : '1px solid var(--linie)', transition: 'border-color var(--dauer-hover) var(--ease), background var(--dauer-hover) var(--ease)' }}>
    <span style={{ display: 'inline-flex', flex: 'none', boxShadow: '0 0 0 1px rgba(34,30,25,.16)' }}>{FL[land]}</span>
    <span style={{ flex: '1 1 auto', fontSize: '16.5px', fontWeight: 600, letterSpacing: '-.01em', lineHeight: 1.3 }}>{titel}</span>
  </button>;
}

// Onepager: der Überblick zum Mitnehmen. Herunterladen, über Outlook oder ein anderes
// Mailprogramm weitergeben, oder den Link kopieren. Der Kasten steht bewusst direkt über
// der Konditionsanfrage: eine Seite zum Weitergeben, das Genaue kommt auf Anfrage.
function OnepagerKachel({ o, op }) {
  const [hovA, setHovA] = React.useState(false);
  const [hovB, setHovB] = React.useState(false);
  const [hovC, setHovC] = React.useState(false);
  const [kopiert, setKopiert] = React.useState(false);
  const mailto = 'mailto:?subject=' + encodeURIComponent(o.betreff) + '&body=' + encodeURIComponent(o.mail);
  const basis = { font: 'inherit', display: 'inline-flex', alignItems: 'center', gap: '9px', padding: '12px 18px', fontSize: '15.5px', fontWeight: 500, lineHeight: 1.2, textDecoration: 'none', cursor: 'pointer', transition: 'background var(--dauer-hover) var(--ease), border-color var(--dauer-hover) var(--ease), color var(--dauer-hover) var(--ease)' };
  const Ikon = ({ d }) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flex: 'none' }}>{d}</svg>;
  const kopieren = () => {
    const fertig = () => { setKopiert(true); setTimeout(() => setKopiert(false), 1800); };
    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(o.adresse).then(fertig, () => {});
    else { const ta = document.createElement('textarea'); ta.value = o.adresse; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); fertig(); } catch (e) {} document.body.removeChild(ta); }
  };
  return <div style={{ marginTop: '40px', maxWidth: '900px', background: 'var(--papier-ton)', border: '1px solid var(--linie)', borderTop: '3px solid var(--gold)', padding: 'clamp(22px,4vw,30px)' }}>
    <p style={{ margin: 0, font: "500 11px/1 var(--font-mono)", letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--stein)' }}>{op.kicker}</p>
    <h3 style={{ margin: '12px 0 0', fontSize: '21px', fontWeight: 600, letterSpacing: '-.015em' }}>{o.titel}</h3>
    <p style={{ margin: '10px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)' }}>{o.text}</p>
    <p style={{ margin: '14px 0 0', font: "400 12.5px/1.5 var(--font-mono)", letterSpacing: '.05em', color: 'var(--stein)' }}>{o.meta}</p>
    <div style={{ marginTop: '20px', display: 'flex', flexWrap: 'wrap', gap: '10px', alignItems: 'center' }}>
      <a href={o.datei} download onMouseEnter={() => setHovA(true)} onMouseLeave={() => setHovA(false)}
        style={{ ...basis, background: hovA ? '#7F2A12' : '#A63A1E', color: '#FFFFFF', border: '1px solid #A63A1E' }}>
        <Ikon d={<React.Fragment><path d="M12 3v12"></path><path d="M7 11l5 5 5-5"></path><path d="M4 20h16"></path></React.Fragment>} />{op.laden}
      </a>
      <a href={mailto} onMouseEnter={() => setHovB(true)} onMouseLeave={() => setHovB(false)}
        style={{ ...basis, background: 'var(--papier)', color: 'var(--tinte)', border: hovB ? '1px solid var(--gold)' : '1px solid var(--linie-stark,var(--linie))' }}>
        <Ikon d={<React.Fragment><rect x="3" y="5" width="18" height="14" rx="1"></rect><path d="M3.4 6.2L12 12.6l8.6-6.4"></path></React.Fragment>} />{op.weiter}
      </a>
      <button type="button" onClick={kopieren} onMouseEnter={() => setHovC(true)} onMouseLeave={() => setHovC(false)}
        style={{ ...basis, background: 'none', border: 'none', padding: '12px 6px', color: hovC ? 'var(--tinte)' : 'var(--stein)', textDecoration: 'underline', textUnderlineOffset: '3px' }}>
        {kopiert ? op.kopiert : op.kopieren}
      </button>
    </div>
  </div>;
}

function UnternehmenSeite({ onGoto }) {
  const { t } = React.useContext(window.SpracheCtx);
  const u = t.unternehmen;
  const zweiSp = window.useMedia('(min-width: 720px)');
  const [ziel, setZiel] = React.useState(() => (window.location.hash === '#u-ch' ? 'ch' : 'de'));
  // Vorbefüllte Anfrage-Mails: Betreff aus der sichtbaren Betreffzeile, kurzer Rumpf aus der Sprachdatei — ein Klick, absenden, fertig.
  const mailAn = (betreff, text) => 'mailto:info@iseeit-talent.de?subject=' + encodeURIComponent((betreff || '').replace(/^[^:]+:\s*/, '')) + '&body=' + encodeURIComponent(text || '');
  const mailKond = mailAn(u.kondBetreff, u.kondMail);
  const mailPartner = mailAn(u.partnerBetreff, u.partnerMail);
  const mailChFirma = 'mailto:info@iseeit-talent.de?subject=' + encodeURIComponent(t.fragen.chMailBetreff || '') + '&body=' + encodeURIComponent(t.fragen.chMail || '');
  // Hinweis für Schweizer Arbeitgeber: die Frage wird zur Zeile, die Antwort klappt auf (Griechisch fragt mit „;").
  const chTeile = [null, t.fragen.chFrage || t.fragen.chHinweis, t.fragen.chFrage ? (t.fragen.chHinweis || '') : ''];
  const zeile = { fontSize: '16.5px', lineHeight: 'var(--lh-body)' };
  const Blick = ({ items, cta, href }) => items ? <div style={{ marginTop: '26px', maxWidth: '900px' }}>
    <p style={{ margin: 0, font: "500 11px/1 var(--font-mono)", letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--stein)' }}>{u.blickLabel}</p>
    <div style={{ marginTop: '10px', display: 'grid', gridTemplateColumns: zweiSp ? 'repeat(2,minmax(0,1fr))' : '1fr', gap: '0 32px', borderTop: '1px solid var(--linie)' }}>
      {items.map((x, i) => <p key={i} style={{ margin: 0, padding: '12px 0', borderBottom: '1px solid var(--linie)', fontSize: '16px', lineHeight: 1.4, fontWeight: 500, display: 'flex', gap: '12px', alignItems: 'baseline' }}><span aria-hidden="true" style={{ width: '8px', height: '8px', background: 'var(--gold)', flex: 'none' }}></span>{x}</p>)}
    </div>
    {cta && <p style={{ margin: '14px 0 0', fontSize: '16px' }}><a href={href}>{cta}</a> <span style={{ color: 'var(--backstein)' }}>→</span></p>}
  </div> : null;
  // Gegenüberstellung wie auf dem Onepager: links, was Sie bekommen; rechts, was es kostet.
  const Paar = ({ linksTitel, links, rechtsTitel, rechts }) => <div style={{ marginTop: '36px', display: 'grid', gridTemplateColumns: zweiSp ? 'repeat(2,minmax(0,1fr))' : '1fr', gap: '14px', maxWidth: '900px', alignItems: 'stretch' }}>
    <div style={{ background: 'var(--papier-ton)', border: '1px solid var(--linie)', borderTop: '3px solid var(--gold)', padding: 'clamp(22px,3.5vw,30px)' }}>
      <h2 style={{ margin: 0, fontSize: '21px', fontWeight: 600, letterSpacing: '-.015em' }}>{linksTitel}</h2>
      {links}
    </div>
    <div style={{ background: 'var(--sektion)', color: 'var(--sektion-text)', borderTop: '3px solid var(--backstein-hell,#D2542F)', padding: 'clamp(22px,3.5vw,30px)' }}>
      <h2 style={{ margin: 0, fontSize: '21px', fontWeight: 600, letterSpacing: '-.015em' }}>{rechtsTitel}</h2>
      {rechts}
    </div>
  </div>;
  // Fließtext als ruhige Liste: ein Satz, eine Zeile.
  const Saetze = ({ text }) => <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: '9px' }}>
    {String(text || '').split(/(?<=[.!?])\s+(?=[A-ZÄÖÜ¿¡Α-Ω])/).map((x, i) => <li key={i} style={{ display: 'flex', gap: '11px', alignItems: 'baseline', fontSize: '16px', lineHeight: 'var(--lh-body)' }}><span aria-hidden="true" style={{ width: '6px', height: '6px', background: 'var(--gold)', flex: 'none', transform: 'translateY(-2px)' }}></span><span>{x}</span></li>)}
  </ul>;
  // Punktliste mit fettem Auftakt je Zeile, hell oder auf dunkler Fläche.
  const Punkte = ({ items, hell }) => <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: '10px', fontSize: '15.5px', lineHeight: 'var(--lh-body)' }}>
    {items.map((p, i) => <li key={i} style={{ borderTop: hell ? '1px solid var(--sektion-linie)' : '1px solid var(--linie)', paddingTop: '10px' }}>{window.FETT(p)}</li>)}
  </ul>;
  const FrageGrid = ({ titel, fragen }) => <div style={{ marginTop: '44px', maxWidth: '900px' }}>
    <h3 style={{ margin: 0, fontSize: '21px', fontWeight: 600, letterSpacing: '-.015em' }}>{titel}</h3>
    <div style={{ marginTop: '14px' }}>
      {fragen.map((p) => <DS4.Akkordeon key={p.q} frage={p.q}><p style={{ margin: 0 }}>{p.a}</p></DS4.Akkordeon>)}
      <div style={{ borderTop: 'var(--hairline)' }}></div>
    </div>
  </div>;
  const Anfrage = ({ pre, href, betreff }) => <div style={{ marginTop: '16px', border: '1px solid var(--linie)', padding: '26px', maxWidth: '900px' }}>
    <p style={{ margin: 0, fontSize: '17px', lineHeight: 'var(--lh-body)' }}>{pre} <a href={href}>info@iseeit-talent.de</a> · {betreff}</p>
  </div>;
  return <main style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '44px var(--rand) 80px' }} data-screen-label="Für Unternehmen">
    <p style={{ margin: 0, fontSize: '15px' }}><a href="#" onClick={e => { e.preventDefault(); onGoto('home'); }}>{u.zurueck}</a></p>
    <p style={{ margin: '26px 0 0', font: "400 12px/1 var(--font-mono)", letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--stein)' }}>{u.kicker}</p>
    <h1 style={{ margin: '14px 0 0', maxWidth: '920px', fontSize: 'clamp(25px,3.1vw,38px)', lineHeight: 1.12, letterSpacing: '-.025em', fontWeight: 600 }}>{u.h1}</h1>
    <div role="tablist" style={{ marginTop: '30px', display: 'grid', gridTemplateColumns: zweiSp ? 'repeat(2,minmax(0,1fr))' : '1fr', gap: '10px', maxWidth: '820px' }}>
      <AdressatReiter land="de" titel={u.zielDe} aktiv={ziel === 'de'} onClick={() => setZiel('de')} />
      <AdressatReiter land="ch" titel={u.zielCh} aktiv={ziel === 'ch'} onClick={() => setZiel('ch')} />
    </div>
    {ziel === 'de' ? <section id="u-de" role="tabpanel" style={{ marginTop: '8px', scrollMarginTop: '88px', animation: 'fadeIn .35s ease both' }}>
      <Blick items={u.blickDe} cta={u.blickCtaDe} href={mailKond} />
      <Paar linksTitel={u.wasTitel} links={u.wasPunkte ? <Punkte items={u.wasPunkte} /> : <Saetze text={u.wasText} />}
        rechtsTitel={u.kostenTitel} rechts={<React.Fragment>
          <Punkte hell items={[u.kostenP1, u.kostenP2]} />
          <p style={{ margin: '18px 0 0', ...zeile, color: 'var(--sektion-sekundaer)' }}>{u.kostenP3} <a href={mailKond} style={{ color: 'var(--gold-hell)' }}>info@iseeit-talent.de</a></p>
        </React.Fragment>} />
      <FrageGrid titel={u.fragenTitel} fragen={u.fragen} />
      {u.rechtPunkte ? <section id="u-recht" style={{ marginTop: '48px', maxWidth: '900px', scrollMarginTop: '88px' }}>
        <h2 style={{ margin: 0, fontSize: '26px', fontWeight: 600, letterSpacing: '-.02em' }}>{u.rechtTitel}</h2>
        <ul style={{ margin: '24px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: '12px', fontSize: '16px', lineHeight: 'var(--lh-body)' }}>
          {u.rechtPunkte.map((p, i) => <li key={i} style={{ borderTop: 'var(--hairline)', paddingTop: '12px' }}>{window.FETT(p)}</li>)}
        </ul>
        <p style={{ margin: '18px 0 0', fontSize: '14px', lineHeight: 1.6, color: 'var(--stein)' }}>{u.rechtFuss}</p>
      </section> : null}
      {u.onepager ? <OnepagerKachel o={u.onepager.de} op={u.onepager} /> : null}
      <Anfrage pre={u.kondPre} href={mailKond} betreff={u.kondBetreff} />
    </section> : <section id="u-ch" role="tabpanel" style={{ marginTop: '8px', scrollMarginTop: '88px', animation: 'fadeIn .35s ease both' }}>
      <Blick items={u.blickCh} cta={u.blickCtaCh} href={mailPartner} />
      <Paar linksTitel={u.liefernTitel} links={<React.Fragment>
          <Saetze text={u.liefernText} />
          <Punkte items={u.punkte} />
        </React.Fragment>}
        rechtsTitel={u.kostenChTitel} rechts={<React.Fragment>
          <Punkte hell items={[u.kostenChP1, u.kostenChP2]} />
          <p style={{ margin: '18px 0 0', ...zeile, color: 'var(--sektion-sekundaer)' }}>{u.kostenChP3} <a href={mailPartner} style={{ color: 'var(--gold-hell)' }}>info@iseeit-talent.de</a></p>
        </React.Fragment>} />
      <FrageGrid titel={u.fragenChTitel} fragen={u.fragenCh} />
      {u.onepager ? <OnepagerKachel o={u.onepager.ch} op={u.onepager} /> : null}
      <Anfrage pre={u.partnerPre} href={mailPartner} betreff={u.partnerBetreff} />
      <div style={{ marginTop: '44px', maxWidth: '900px' }}>
        <DS4.Akkordeon frage={chTeile[1]}><p style={{ margin: 0 }}>{chTeile[2]} <a href={mailChFirma}>info@iseeit-talent.de</a>. {t.fragen.chHinweisNach}</p></DS4.Akkordeon>
        <div style={{ borderTop: 'var(--hairline)' }}></div>
      </div>
    </section>}
  </main>;
}

Object.assign(window, { Fragen, Kontakt, SiteFooter, UnternehmenSeite });