const DS2 = window.IseeITDesignSystem_37fb1f;

const FLW = {
  de: <svg width="27" height="17" 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="17" height="17" 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>
};
// Weg-Kachel: ein Beleg, der zugleich Einladung ist. Ein Klick führt zum Kontaktformular, das Zielland steht dann schon drin.
function WegKachel({ land, titel, info, infoLabel, zahl, text, quelle, cta, onClick }) {
  const [hov, setHov] = React.useState(false);
  return <a href="#kontakt" onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} className="kachel-ruhig" style={{ display: 'flex', flexDirection: 'column', background: 'var(--papier-ton)', border: hov ? '1px solid var(--backstein)' : '1px solid var(--linie)', padding: 'var(--pad-karte)', color: 'var(--tinte)', textDecoration: 'none', transition: 'border-color var(--dauer-hover) var(--ease)' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}><span style={{ display: 'inline-flex', flex: 'none', boxShadow: '0 0 0 1px rgba(34,30,25,.16)' }}>{FLW[land]}</span></div>
    <h3 style={{ margin: '20px 0 0', fontSize: 'var(--fs-h3-karte)', letterSpacing: '-.02em', fontWeight: 600 }}>{titel}{info && <InfoPunkt text={info} label={infoLabel} />}</h3>
    <p style={{ margin: '26px 0 0', fontSize: 'var(--fs-zahl)', lineHeight: 1, letterSpacing: '-.03em', fontWeight: 600 }}>{zahl}</p>
    <p style={{ margin: '10px 0 0', fontSize: 'var(--fs-body-klein)', lineHeight: 1.55 }}>{text}<br /><span style={{ font: "400 12px/1.8 var(--font-mono)", color: 'var(--stein)' }}>{quelle}</span></p>
    <p style={{ margin: 'auto 0 0', paddingTop: '26px', fontSize: '15.5px', fontWeight: 500, color: 'var(--backstein)' }}>{cta} <span aria-hidden="true">→</span></p>
  </a>;
}

// Der Vergleichsrechner als ruhige Einladung: eine Frage, die der Kandidat sich ohnehin stellt, und ein (i) für das Wie.
function RechnerKachel({ tool, infoLabel }) {
  const [hov, setHov] = React.useState(false);
  const href = 'vergleich/index.html';
  return <div className="kachel-ruhig" onClick={() => { window.location.href = href; }} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ marginTop: '40px', maxWidth: '640px', display: 'flex', alignItems: 'center', gap: '20px', background: 'var(--papier-ton)', border: hov ? '1px solid var(--backstein)' : '1px solid var(--linie)', borderTop: '2px solid var(--gold)', padding: 'clamp(20px,2.4vw,26px)', cursor: 'pointer', transition: 'border-color var(--dauer-hover) var(--ease)' }}>
    <div style={{ flex: '1 1 auto', minWidth: 0 }}>
      <p style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '10px', font: "500 12px/1 var(--font-mono)", letterSpacing: 'var(--ls-kicker)', textTransform: 'uppercase', color: 'var(--backstein)' }}><span aria-hidden="true" style={{ width: '8px', height: '8px', background: 'var(--gold)', flex: 'none' }}></span>{tool.kicker}</p>
      <p style={{ margin: '14px 0 0', fontSize: 'clamp(18px,2.1vw,22px)', lineHeight: 1.3, letterSpacing: '-.015em', fontWeight: 600 }}><a href={href} style={{ color: 'var(--tinte)', textDecoration: 'none' }}>{tool.titel}</a>{tool.info && <InfoPunkt text={tool.info} label={infoLabel} />}</p>
      <p style={{ margin: '8px 0 0', fontSize: '15.5px', lineHeight: 'var(--lh-body)', color: 'var(--stein)' }}>{tool.unter}</p>
    </div>
    <span aria-hidden="true" style={{ flex: 'none', fontSize: '22px', color: 'var(--backstein)', transform: hov ? 'translateX(4px)' : 'none', transition: 'transform var(--dauer-hover) var(--ease)' }}>→</span>
  </div>;
}

function Wahl({ onNav }) {
  const { t } = React.useContext(window.SpracheCtx);
  const w = t.wahl;
  const geh = (id) => (e) => { e.preventDefault(); onNav && onNav(id); };
  const zielLand = (land) => (e) => { e.preventDefault(); try { window.dispatchEvent(new CustomEvent('kontakt-vorwahl', { detail: { land } })); } catch (err) {} onNav && onNav('kontakt'); };
  return <section id="wahl" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--sektion-abstand) var(--rand) 0', scrollMarginTop: '120px' }} data-screen-label="02 Ihre Wahl">
    <DS2.Kicker nummer="01">{w.kicker}</DS2.Kicker>
    <h2 style={{ margin: '18px 0 0', maxWidth: '760px', fontSize: 'var(--fs-h2)', lineHeight: 'var(--lh-heading)', letterSpacing: 'var(--ls-tight)', fontWeight: 600 }}>{w.titel}</h2>
    <p style={{ margin: '16px 0 0', maxWidth: '860px', fontSize: '17px', lineHeight: 'var(--lh-body)' }}>{w.intro}</p>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: '18px', marginTop: '44px', maxWidth: '1000px' }}>
      <WegKachel land="de" cta={w.kachelCta} onClick={zielLand(t.kontakt.form.landOpt[0])} titel={w.karteDe.titel} zahl={w.karteDe.zahl} text={w.karteDe.text} quelle={w.karteDe.quelle} />
      <WegKachel land="ch" info={w.fussnote.replace(/\n/g, ' ')} infoLabel={t.nav.info} cta={w.kachelCta} onClick={zielLand(t.kontakt.form.landOpt[1])} titel={w.karteCh.titel} zahl={w.karteCh.zahl} text={w.karteCh.text} quelle={w.karteCh.quelle} />
    </div>
    <DS2.StandardKachel style={{ marginTop: '18px' }} labelLinks={w.standard.labelL} labelRechts={w.standard.labelR} statement={<React.Fragment>{w.standard.statement}<InfoPunkt text={w.standard.text} label={t.nav.info} /></React.Fragment>} />
    <RechnerKachel tool={w.tool} infoLabel={t.nav.info} />
  </section>;
}

function Weg({ onNav }) {
  const { t } = React.useContext(window.SpracheCtx);
  const g = t.weg;
  return <section id="prozess" style={{ marginTop: 'var(--sektion-abstand)', background: 'var(--papier-hell,var(--papier-ton))', borderTop: '1px solid var(--linie)', borderBottom: '1px solid var(--linie)', scrollMarginTop: '120px' }} data-screen-label="03 Ihr Weg">
    <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--sektion-pad) var(--rand) calc(var(--sektion-pad) - 6px)' }}>
      <DS2.Kicker nummer="02">{g.kicker}</DS2.Kicker>
      <h2 style={{ margin: '18px 0 0', maxWidth: '870px', fontSize: 'var(--fs-h2)', lineHeight: 'var(--lh-heading)', letterSpacing: 'var(--ls-tight)', fontWeight: 600 }}>{g.titel}</h2>
      <p style={{ margin: '16px 0 0', maxWidth: '1000px', fontSize: '17px', lineHeight: 'var(--lh-body)' }}>{g.intro}</p>
      <figure style={{ position: 'relative', margin: '44px 0 0', maxWidth: '760px', overflow: 'hidden', aspectRatio: '21/9' }}>
        <img src="assets/weg-herbst.jpg" alt={g.wegAlt} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 62%', display: 'block', filter: 'saturate(.9) contrast(1.02)' }} />
        <figcaption style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '60px 22px 16px', background: 'linear-gradient(to top, rgba(34,30,25,.62), rgba(34,30,25,0))', color: '#FBF8F3', font: "400 11.5px/1.5 var(--font-mono)", letterSpacing: '.1em' }}>{g.caption}</figcaption>
      </figure>
      <ol style={{ margin: '52px 0 0', padding: 0 }}>
        {g.etappen.map((e, i) => <DS2.EtappenPunkt key={i} label={e.label} letzter={i === g.etappen.length - 1}>{e.text}</DS2.EtappenPunkt>)}
      </ol>
      {g.cta && <p style={{ margin: '44px 0 0', fontSize: '17px', lineHeight: 'var(--lh-body)' }}><strong style={{ fontWeight: 600 }}>{g.cta.pre}</strong> <a href="#kontakt" onClick={e => { e.preventDefault(); onNav && onNav('kontakt'); }}>{g.cta.link}</a> <span style={{ color: 'var(--backstein)' }}>→</span></p>}
    </div>
  </section>;
}

Object.assign(window, { Wahl, Weg });