const RDS = window.IseeITDesignSystem_37fb1f;
const W = '../index.html';
// Deutsche Rückfalltexte: entwurf.html lädt keine Sprachpakete.
const NAV_DE = { menue: 'Menü', schliessen: 'Schließen', wahl: 'Ihre Wahl', prozess: 'Ihr Weg', ankommen: 'Ankommen', wir: 'Wir', fragen: 'Fragen', vergleich: 'Vergleichstool', kontakt: 'Kontakt' };
const FOOT_DE = { karteUnternehmen: { kicker: 'EIGENE SEITE', titel: 'Für Unternehmen und Partner', unter: 'Konditionen Deutschland · Partnerschaft Schweiz' },
  karteNischen: { kicker: 'FACHGEBIETE IM DETAIL', titel: 'Vier Nischen. Und die Unterschiede darin.', unter: 'Cybersecurity, Cloud, DevOps, Platform Engineering: welche Rollen dazugehören und wo die Grenzen verlaufen.' }, claim: [{ x: 'RATIONAL', f: 'rot' }, { x: ' GERECHNET. ' }, { x: 'MENSCHLICH', f: 'gold' }, { x: ' BEGLEITET.' }], colWeg: 'IHR WEG', colIseeit: 'ISEEIT', colFirma: 'ISEEIT UG (HAFTUNGSBESCHRÄNKT)', vergleichstool: 'Vergleichstool', fachgebiete: 'Fachgebiete im Detail', impressum: 'Impressum', datenschutz: 'Datenschutz' };

// Hell/Dunkel auch im Werkzeug-Rahmen: derselbe Schalter wie auf der Website; der Rechner im Frame schaltet direkt mit.
function ToolThemaKnopf({ nav }) {
  const [dunkel, setDunkel] = React.useState(() => document.documentElement.getAttribute('data-thema') === 'dunkel');
  const [hov, setHov] = React.useState(false);
  const wechsle = () => setDunkel(d => {
    const n = !d;
    if (n) document.documentElement.setAttribute('data-thema', 'dunkel'); else document.documentElement.removeAttribute('data-thema');
    try { localStorage.setItem('iseeit-thema', n ? 'dunkel' : 'hell'); } catch (e) {}
    try { document.querySelectorAll('iframe').forEach(f => { if (f.contentDocument) f.contentDocument.documentElement.setAttribute('data-theme', n ? 'dark' : 'light'); }); } catch (e) {}
    return n;
  });
  const label = dunkel ? (nav.themaHell || 'Helles Design einschalten') : (nav.themaDunkel || 'Dunkles Design einschalten');
  return <button type="button" onClick={wechsle} aria-label={label} title={label} aria-pressed={dunkel} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
    style={{ width: '38px', height: '38px', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', background: hov ? 'rgba(251,248,243,.1)' : 'rgba(251,248,243,.05)', border: hov ? '1px solid var(--gold-hell)' : '1px solid rgba(251,248,243,.62)', color: hov ? 'var(--gold-hell)' : '#FBF8F3', cursor: 'pointer', padding: 0, transition: 'color .25s ease, border-color .25s ease' }}>
    {dunkel
      ? <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4.1"></circle><path d="M12 2.6v2.5M12 18.9v2.5M2.6 12h2.5M18.9 12h2.5M5.2 5.2l1.8 1.8M17 17l1.8 1.8M18.8 5.2L17 7M7 17l-1.8 1.8"></path></svg>
      : <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M20.4 13.9A8.4 8.4 0 0 1 10.1 3.6a8.4 8.4 0 1 0 10.3 10.3z"></path></svg>}
  </button>;
}

function ToolHeader({ t, sprachen = true }) {
  const nav = (t && t.nav) || NAV_DE;
  const schmal = window.useSchmal();
  const [offen, setOffen] = React.useState(false);
  const [lang, setLang] = React.useState('DE');
  const [prog, setProg] = React.useState(0);
  const [kopfH, setKopfH] = React.useState(58);
  const kopfRef = React.useRef(null);
  React.useEffect(() => {
    const f = () => { const m = document.documentElement.scrollHeight - window.innerHeight; setProg(m > 0 ? Math.min(1, window.pageYOffset / m) : 0); };
    window.addEventListener('scroll', f, { passive: true }); f();
    return () => window.removeEventListener('scroll', f);
  }, []);
  React.useEffect(() => { if (!schmal) setOffen(false); }, [schmal]);
  React.useEffect(() => {
    document.body.style.overflow = offen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [offen]);
  React.useLayoutEffect(() => { if (offen && kopfRef.current) setKopfH(kopfRef.current.offsetHeight); }, [offen, schmal]);
  const A = (href, txt) => <a key={txt} href={href} style={{ color: 'var(--sektion-text)', textDecoration: 'none', padding: '4px 0', transition: 'color .25s ease' }} onMouseEnter={e => e.target.style.color = 'var(--gold-hell)'} onMouseLeave={e => e.target.style.color = 'var(--sektion-text)'}>{txt}</a>;
  const S = (k) => <span key={k} onClick={() => setLang(k)} style={{ cursor: 'pointer', color: lang === k ? 'var(--sektion-text)' : 'var(--sektion-tertiaer)', borderBottom: lang === k ? '2px solid var(--gold)' : '2px solid transparent', paddingBottom: '2px', transition: 'color .25s ease' }}>{k}</span>;
  const eintraege = [[W + '#wahl', nav.wahl], [W + '#prozess', nav.prozess], [W + '#ankommen', nav.ankommen], [W + '#ueber-uns', nav.wir], [W + '#faq', nav.fragen]];
  const mLnk = { color: 'var(--sektion-text)', textDecoration: 'none', font: "500 19px/1.25 var(--font-grotesk)", padding: '16px 0', borderBottom: '1px solid rgba(251,248,243,.12)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '14px' };
  return <header ref={kopfRef} style={{ position: 'sticky', top: 0, zIndex: 60, background: 'var(--sektion)', borderBottom: '1px solid rgba(251,248,243,.14)' }}>
    <div style={{ maxWidth: 'calc(66rem + 2*var(--rand))', margin: '0 auto', padding: schmal ? '9px var(--rand)' : '11px var(--rand)', display: 'flex', alignItems: 'center', ...(schmal ? { justifyContent: 'space-between', gap: '12px' } : { flexWrap: 'wrap', gap: '12px 24px' }) }}>
      <a href={W} title="Zur Startseite" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}>
        <RDS.Wortmarke size={25} hell />
      </a>
      {!schmal && <nav style={{ display: 'flex', flexWrap: 'wrap', gap: '2px 20px', alignItems: 'center', fontSize: '14.5px', flex: '1 1 300px' }}>
        {eintraege.map(([h, tx]) => A(h, tx))}<span style={{ color: 'var(--gold-hell)', borderBottom: '2px solid var(--gold)', padding: '4px 0' }}>{nav.vergleich}</span>
      </nav>}
      {!schmal && <div style={{ display: 'flex', alignItems: 'center', gap: '16px', flexWrap: 'wrap' }}>
        {sprachen && <div style={{ display: 'flex', gap: '12px', font: "400 12px/1 var(--font-mono)" }}>{['DE', 'EN', 'EL', 'ES'].map(S)}</div>}
        <ToolThemaKnopf nav={nav} />
        <a href={W + '#kontakt'} onMouseEnter={e => e.currentTarget.style.background = '#7F2A12'} onMouseLeave={e => e.currentTarget.style.background = '#A63A1E'} style={{ background: '#A63A1E', color: '#FFFFFF', border: '1px solid rgba(251,247,242,.85)', textDecoration: 'none', padding: '9px 10px', minWidth: '122px', textAlign: 'center', boxSizing: 'border-box', fontSize: '13.5px', fontWeight: 500, whiteSpace: 'nowrap', transition: 'background var(--dauer-hover) var(--ease)' }}>{nav.kontakt}</a>
      </div>}
      {schmal && <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flex: 'none', margin: '-4px -10px -4px 0' }}><ToolThemaKnopf nav={nav} /><button onClick={() => setOffen(!offen)} aria-expanded={offen} aria-label={offen ? nav.schliessen : nav.menue} style={{ width: '44px', height: '44px', margin: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'none', border: 'none', color: 'var(--sektion-text)', cursor: 'pointer', padding: 0 }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">{offen ? <path d="M6 6l12 12M18 6L6 18"></path> : <path d="M4 7h16M4 12h16M4 17h16"></path>}</svg>
      </button></div>}
    </div>
    <div style={{ height: '2px', background: 'rgba(251,247,242,.16)' }}><div style={{ height: '2px', width: (prog * 100) + '%', background: 'var(--gold)' }}></div></div>
    {schmal && offen && <div style={{ position: 'fixed', left: 0, right: 0, top: kopfH + 'px', bottom: 0, zIndex: 59, background: 'var(--sektion)', overflowY: 'auto', WebkitOverflowScrolling: 'touch', animation: 'fadeIn .25s ease both' }}>
      <nav style={{ maxWidth: 'calc(66rem + 2*var(--rand))', margin: '0 auto', padding: '10px var(--rand) 44px', display: 'flex', flexDirection: 'column' }}>
        <span style={{ ...mLnk, color: 'var(--gold-hell)', cursor: 'default' }}>{nav.vergleich} <span aria-hidden="true" style={{ font: "400 11.5px/1 var(--font-mono)", letterSpacing: '.1em', color: 'var(--sektion-tertiaer)' }}>•</span></span>
        {eintraege.map(([h, tx]) => <a key={tx} href={h} style={mLnk}>{tx}</a>)}
        <a href={W + '#kontakt'} style={{ marginTop: '28px', display: 'block', textAlign: 'center', background: '#A63A1E', color: '#FFFFFF', textDecoration: 'none', padding: '16px 18px', fontSize: '16px', fontWeight: 500, border: '1px solid rgba(251,247,242,.85)' }}>{nav.kontakt}</a>
      </nav>
    </div>}
  </header>;
}

function FKarte({ href, k }) {
  const [hov, setHov] = React.useState(false);
  return <a href={href} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ display: 'flex', alignItems: 'center', gap: '18px', border: hov ? '1px solid var(--gold-hell)' : '1px solid var(--sektion-linie)', background: hov ? 'rgba(251,248,243,.09)' : 'rgba(251,248,243,.04)', padding: '22px 24px', color: 'var(--sektion-text)', textDecoration: 'none', transition: 'background .3s ease,border-color .3s ease' }}>
    <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(18px,2vw,22px)', fontWeight: 600, letterSpacing: '-.015em' }}>{k.titel}</span>
      <span style={{ display: 'block', marginTop: '7px', fontSize: '14px', lineHeight: 1.5, color: 'var(--sektion-sekundaer)' }}>{k.unter}</span>
    </span>
    <span style={{ flex: 'none', fontSize: '22px', color: 'var(--gold-hell)' }}>→</span>
  </a>;
}

function ToolFooter({ t }) {
  const nav = (t && t.nav) || NAV_DE;
  const ft = (t && t.footer) || FOOT_DE;
  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 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))' };
  const liste = (items) => <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: '8px', fontSize: '15px' }}>{items.map(([h, tx]) => <li key={tx}><a href={h} style={lnk}>{tx}</a></li>)}</ul>;
  return <footer style={{ background: 'var(--sektion-tief,var(--sektion))', color: 'var(--sektion-text)', borderTop: '1px solid rgba(200,129,26,.55)' }}>
    <div style={{ maxWidth: 'calc(66rem + 2*var(--rand))', margin: '0 auto', padding: '56px var(--rand) 34px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: '16px', maxWidth: '900px' }}>
        <FKarte href={W + '?seite=unternehmen'} k={ft.karteUnternehmen || FOOT_DE.karteUnternehmen} />
        <FKarte href={W + '?seite=nischen'} k={ft.karteNischen || FOOT_DE.karteNischen} />
      </div>
      <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>{liste([[W + '#wahl', nav.wahl], [W + '#prozess', nav.prozess], [W + '#ankommen', nav.ankommen], ['#', ft.vergleichstool]])}</div>
        <div><p style={col}>{ft.colIseeit}</p>{liste([[W + '#ueber-uns', nav.wir], [W + '#faq', nav.fragen], [W + '#kontakt', nav.kontakt], [W + '?seite=nischen', ft.fachgebiete]])}</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>{liste([[W + '?seite=impressum', ft.impressum], [W + '?seite=datenschutz', ft.datenschutz]])}</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)' }}>Diese Berechnung läuft vollständig lokal in Ihrem Browser. Wir arbeiten mit geprüften Quellen und aus der Praxis. Verbindliche Rechts- oder Steuerberatung ist Sache der dafür zugelassenen Berufe, und dafür sagen wir Ihnen rechtzeitig, wann sich der Weg dorthin lohnt. Dabei bewegen wir uns innerhalb der gesetzlichen Rahmen beider Länder: in Deutschland als private Arbeitsvermittlung nach Gewerbeordnung und SGB III, in der Schweiz ausschließlich in Zusammenarbeit mit nach dem Arbeitsvermittlungsgesetz (AVG) bewilligten Agenturen, beim Umgang mit Ihren Daten nach der DSGVO. Stand der Angaben: 08.08.2026.</p>
    </div>
  </footer>;
}

Object.assign(window, { ToolHeader, ToolFooter });