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;
  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>
    <div style={{ marginTop: '36px', maxWidth: '860px' }}>
      {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>
    {/* Die letzte Antwort ist die Brücke zum Formular: keine zuklappbare Zeile, sondern eine stehende Kachel. */}
    <div className="kachel-ruhig" style={{ marginTop: '26px', 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 }}>{f.qa[f.qa.length - 1].f}</h3>
      <p style={{ margin: '12px 0 0', fontSize: '16px', lineHeight: 'var(--lh-lang)' }}>{window.FETT(f.qa[f.qa.length - 1].a)}</p>
    </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);
  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-Kachel im Kopf der Unternehmensseite: Flagge, Zielgruppe, sanfter Sprung zum Abschnitt.
function AdressatKachel({ land, titel, ziel }) {
  const [hov, setHov] = React.useState(false);
  return <a href={'#' + ziel} onClick={e => { e.preventDefault(); window.sanftZu(ziel, 88); }} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
    style={{ display: 'flex', alignItems: 'center', gap: '15px', background: hov ? 'var(--papier-ton)' : 'var(--karte-weiss,#FFFFFF)', border: hov ? '1px solid var(--backstein)' : '1px solid var(--linie)', padding: '18px 20px', minHeight: '64px', boxSizing: 'border-box', textDecoration: 'none', color: 'var(--tinte)', 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>
    <span aria-hidden="true" style={{ flex: 'none', color: 'var(--backstein)', fontSize: '18px', lineHeight: 1 }}>↓</span>
  </a>;
}

function UnternehmenSeite({ onGoto }) {
  const { t } = React.useContext(window.SpracheCtx);
  const u = t.unternehmen;
  const zweiSp = window.useMedia('(min-width: 720px)');
  // 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 || '');
  const B = ({ children }) => <p style={{ margin: 0, background: 'var(--papier-ton)', padding: '15px 20px', fontSize: '16px', fontWeight: 600, border: '1px solid var(--gold)', borderLeft: '4px solid var(--gold)', maxWidth: '900px' }}>{children}</p>;
  const FrageGrid = ({ titel, fragen }) => <React.Fragment>
    <h3 style={{ margin: '44px 0 0', fontSize: '21px', fontWeight: 600, letterSpacing: '-.015em' }}>{titel}</h3>
    <div style={{ marginTop: '18px', display: 'grid', gridTemplateColumns: zweiSp ? '1fr 1fr' : '1fr', gap: '18px', maxWidth: '900px' }}>
      {fragen.map((p) => <div key={p.q} style={{ background: 'var(--papier-ton)', border: '1px solid var(--linie)', padding: '24px' }}><h4 style={{ margin: 0, fontSize: '16.5px', fontWeight: 600 }}>{p.q}</h4><p style={{ margin: '9px 0 0', fontSize: '15.5px', lineHeight: 'var(--lh-body)' }}>{p.a}</p></div>)}
    </div>
  </React.Fragment>;
  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 style={{ marginTop: '24px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(272px,1fr))', gap: '14px', maxWidth: '820px' }}>
      <AdressatKachel land="de" titel={u.zielDe} ziel="u-de" />
      <AdressatKachel land="ch" titel={u.zielCh} ziel="u-ch" />
    </div>
    <section id="u-de" style={{ marginTop: '56px', scrollMarginTop: '88px' }}>
      <B>{u.bandDe}</B>
      <h2 style={{ margin: '28px 0 0', fontSize: '26px', fontWeight: 600, letterSpacing: '-.02em' }}>{u.wasTitel}</h2>
      <p style={{ margin: '12px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)', maxWidth: '900px' }}>{u.wasText}</p>
      <div style={{ marginTop: '32px', background: 'var(--sektion)', color: 'var(--sektion-text)', border: '1px solid var(--linie)', padding: 'clamp(22px,4.5vw,34px)', maxWidth: '900px' }}>
        <h3 style={{ margin: 0, fontSize: '21px', fontWeight: 600 }}>{u.kostenTitel}</h3>
        <p style={{ margin: '14px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)' }}>{window.FETT(u.kostenP1)}</p>
        <p style={{ margin: '10px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)' }}>{window.FETT(u.kostenP2)}</p>
        <p style={{ margin: '10px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)', color: 'var(--sektion-sekundaer)' }}>{u.kostenP3} <a href={mailKond} style={{ color: 'var(--gold-hell)' }}>info@iseeit-talent.de</a></p>
      </div>
      <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>
        <p style={{ margin: '12px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)' }}>{u.rechtText}</p>
        <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}
      <div style={{ marginTop: '28px', border: '1px solid var(--linie)', padding: '26px', maxWidth: '900px' }}>
        <p style={{ margin: 0, fontSize: '17px', lineHeight: 'var(--lh-body)' }}>{u.kondPre} <a href={mailKond}>info@iseeit-talent.de</a> · {u.kondBetreff}</p>
      </div>
    </section>
    <div style={{ marginTop: '60px', background: 'var(--sektion)', height: '5px' }}></div>
    <section id="u-ch" style={{ marginTop: '44px', scrollMarginTop: '88px' }}>
      <B>{u.bandCh}</B>
      {/* Hinweis für Schweizer Arbeitgeber — von der Startseite hierher gezogen (Texte liegen weiter unter fragen.chHinweis). */}
      <p style={{ margin: '16px 0 0', maxWidth: '900px', fontSize: '15px', lineHeight: 'var(--lh-body)', color: 'var(--stein)' }}>{t.fragen.chHinweis} <a href={mailChFirma}>info@iseeit-talent.de</a>. {t.fragen.chHinweisNach}</p>
      <h2 style={{ margin: '28px 0 0', fontSize: '26px', fontWeight: 600, letterSpacing: '-.02em' }}>{u.liefernTitel}</h2>
      <p style={{ margin: '12px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)', maxWidth: '900px' }}>{u.liefernText}</p>
      <ul style={{ margin: '26px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: '12px', maxWidth: '900px', fontSize: '16px', lineHeight: 'var(--lh-body)' }}>
        {u.punkte.map((p, i) => <li key={i} style={{ borderTop: 'var(--hairline)', paddingTop: '12px' }}>{window.FETT(p)}</li>)}
      </ul>
      <div style={{ marginTop: '32px', background: 'var(--sektion)', color: 'var(--sektion-text)', border: '1px solid var(--linie)', padding: 'clamp(22px,4.5vw,34px)', maxWidth: '900px' }}>
        <h3 style={{ margin: 0, fontSize: '21px', fontWeight: 600 }}>{u.kostenChTitel}</h3>
        <p style={{ margin: '14px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)' }}>{window.FETT(u.kostenChP1)}</p>
        <p style={{ margin: '10px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)' }}>{window.FETT(u.kostenChP2)}</p>
        <p style={{ margin: '10px 0 0', fontSize: '16.5px', lineHeight: 'var(--lh-body)', color: 'var(--sektion-sekundaer)' }}>{u.kostenChP3} <a href={mailPartner} style={{ color: 'var(--gold-hell)' }}>info@iseeit-talent.de</a></p>
      </div>
      <FrageGrid titel={u.fragenChTitel} fragen={u.fragenCh} />
      <div style={{ marginTop: '28px', border: '1px solid var(--linie)', padding: '26px', maxWidth: '900px' }}>
        <p style={{ margin: 0, fontSize: '17px', lineHeight: 'var(--lh-body)' }}>{u.partnerPre} <a href={mailPartner}>info@iseeit-talent.de</a> · {u.partnerBetreff}</p>
      </div>
    </section>
  </main>;
}

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