const DS5 = window.IseeITDesignSystem_37fb1f;
const NPFAD = {
  Cybersecurity: <path d="M12 3.2l7.2 3v5.1c0 4.3-3 7.8-7.2 9.2-4.2-1.4-7.2-4.9-7.2-9.2V6.2l7.2-3z"></path>,
  Cloud: <path d="M7.4 18.6h9.4a3.6 3.6 0 0 0 .4-7.2 5.2 5.2 0 0 0-9.9-1.1 4.1 4.1 0 0 0 .1 8.3z"></path>,
  DevOps: <path d="M3.6 12c0-2 1.5-3.5 3.4-3.5 2.7 0 3.7 3.1 5 3.1s2.3-3.1 5-3.1c1.9 0 3.4 1.5 3.4 3.5s-1.5 3.5-3.4 3.5c-2.7 0-3.7-3.1-5-3.1s-2.3 3.1-5 3.1C5.1 15.5 3.6 14 3.6 12z"></path>,
  'Platform Engineering': <><path d="M12 3.4l8 4-8 4-8-4 8-4z"></path><path d="M4 11.6l8 4 8-4"></path><path d="M4 15.8l8 4 8-4"></path></>
};

function Nische({ id, name, claim, text, items, achtenLabel }) {
  return <section id={id} style={{ borderTop: '2px solid var(--tinte)', marginTop: '52px', paddingTop: '20px', scrollMarginTop: '96px' }} data-screen-label={'Nische ' + name}>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="var(--stein)" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{NPFAD[name]}</svg>
      <p style={{ margin: 0, font: "500 12px/1 var(--font-mono)", letterSpacing: 'var(--ls-kicker)', textTransform: 'uppercase', color: 'var(--tinte)' }}>{name}</p>
    </div>
    <h2 style={{ margin: '16px 0 0', maxWidth: '760px', fontSize: 'clamp(21px,2.4vw,27px)', lineHeight: 1.25, letterSpacing: '-.02em', fontWeight: 600 }}>{claim}</h2>
    <p style={{ margin: '14px 0 0', maxWidth: '820px', fontSize: '16.5px', lineHeight: 'var(--lh-lang)' }}>{text}</p>
    <p style={{ margin: '24px 0 0', font: "500 11.5px/1 var(--font-mono)", letterSpacing: '.12em', color: 'var(--backstein)' }}>{achtenLabel}</p>
    <DS5.MarkerListe items={items} style={{ marginTop: '10px', maxWidth: '860px' }} />
  </section>;
}

function NSlug(name) { return 'nische-' + name.toLowerCase().replace(/\s+/g, '-'); }

// Kompakter Sprungschalter: Icon + Mono-Name, scrollt sanft zur jeweiligen Nische auf dieser Seite.
function SprungKnopf({ name }) {
  const [hov, setHov] = React.useState(false);
  return <button type="button" onClick={() => window.sanftZu(NSlug(name), 96)} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
    style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: '11px', background: 'var(--karte-weiss,#FFFFFF)', borderStyle: 'solid', borderWidth: '1px', borderColor: hov ? 'var(--gold)' : 'rgba(200,129,26,.5)', boxShadow: hov ? '0 0 0 3px rgba(200,129,26,.18)' : '0 0 0 3px rgba(200,129,26,0)', color: hov ? 'var(--backstein)' : 'var(--stein)', padding: '13px 15px', minHeight: '48px', cursor: 'pointer', textAlign: 'left', transition: 'color var(--dauer-hover) ease, border-color var(--dauer-hover) ease, box-shadow .45s ease' }}>
    <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flex: 'none' }}>{NPFAD[name]}</svg>
    <span style={{ font: "500 11.5px/1.35 var(--font-mono)", letterSpacing: '.09em', textTransform: 'uppercase', color: 'inherit' }}>{name}</span>
  </button>;
}

function NischenSeite({ onGoto, onNav }) {
  const { t } = React.useContext(window.SpracheCtx);
  const n = t.nischen;
  return <main style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '44px var(--rand) 90px' }} data-screen-label="Fachgebiete im Detail">
    <p style={{ margin: 0, fontSize: '15px' }}><a href="#" onClick={e => { e.preventDefault(); onGoto('home'); }}>{n.zurueck}</a></p>
    <div style={{ marginTop: '26px' }}><DS5.Kicker>{n.kicker}</DS5.Kicker></div>
    <h1 style={{ margin: '16px 0 0', maxWidth: '860px', fontSize: 'clamp(25px,3.1vw,38px)', lineHeight: 1.12, letterSpacing: '-.025em', fontWeight: 600 }}>{n.h1}</h1>
    <p style={{ margin: '18px 0 0', maxWidth: '760px', fontSize: '17px', lineHeight: 'var(--lh-lang)' }}>{n.intro}</p>
    <div style={{ marginTop: '26px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(168px,1fr))', gap: '12px', maxWidth: '860px' }}>
      {n.liste.map((x) => <SprungKnopf key={x.name} name={x.name} />)}
    </div>
    {n.liste.map((x) => <Nische key={x.name} id={NSlug(x.name)} name={x.name} claim={x.claim} text={x.text} items={x.items} achtenLabel={n.achtenLabel} />)}
    <p style={{ margin: '56px 0 0', maxWidth: '760px', fontSize: '16.5px', lineHeight: 'var(--lh-body)', borderTop: '1px solid var(--linie)', paddingTop: '22px' }}>{n.schlussPre} <a href="?seite=unternehmen" onClick={e => { e.preventDefault(); onGoto('unternehmen'); }}>{n.schlussLink}</a> <span style={{ color: 'var(--backstein)' }}>→</span></p>
    <p style={{ margin: '16px 0 0', fontSize: '16.5px' }}><span style={{ color: 'var(--backstein)' }}>←</span> <a href="#" onClick={e => { e.preventDefault(); onNav && onNav('nischen-kacheln'); }}>{n.zurueckNischen}</a></p>
  </main>;
}

Object.assign(window, { NischenSeite });
