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>
};
// Statische Weg-Kachel: Beleg ohne Link — kein Pfeil, kein Schlusssatz; nur ein ruhiges Anheben unter dem Zeiger.
function WegKachel({ land, titel, fussnote, zahl, text, quelle }) {
  return <div className="kachel-ruhig" style={{ display: 'flex', flexDirection: 'column', background: 'var(--papier-ton)', border: '1px solid var(--linie)', padding: 'var(--pad-karte)', color: 'var(--tinte)' }}>
    <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}{fussnote && <sup style={{ fontSize: '.55em', color: 'var(--backstein)' }}>*</sup>}</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>
  </div>;
}

function Wahl({ onNav }) {
  const { t } = React.useContext(window.SpracheCtx);
  const w = t.wahl;
  const geh = (id) => (e) => { e.preventDefault(); onNav && onNav(id); };
  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" titel={w.karteDe.titel} zahl={w.karteDe.zahl} text={w.karteDe.text} quelle={w.karteDe.quelle} />
      <WegKachel land="ch" fussnote 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={w.standard.statement} fussnote={w.standard.fussnote}>{w.standard.text}</DS2.StandardKachel>
    <p style={{ margin: '34px 0 0', fontSize: '17px', lineHeight: 'var(--lh-body)' }}>{window.FETT(w.nochOffen)} <a href="#kontakt" onClick={geh('kontakt')}>{w.schreiben}</a> <span style={{ color: 'var(--backstein)' }}>→</span></p>
    <DS2.Druckknopf href="../vergleichstool/index.html" kickerText={w.tool.kicker} titel={w.tool.titel} untertitel={w.tool.unter} style={{ marginTop: '44px', maxWidth: '620px' }} />
    <p style={{ margin: '28px 0 0', maxWidth: '760px', fontSize: '13.5px', lineHeight: 'var(--lh-body)', whiteSpace: 'pre-line', color: 'var(--stein)' }}><span style={{ color: 'var(--backstein)' }}>*</span> {w.fussnote}</p>
  </section>;
}

function Weg() {
  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: '800px', fontSize: '17px', lineHeight: 'var(--lh-body)' }}>{g.intro}</p>
      <figure style={{ margin: '44px 0 0', maxWidth: '760px' }}>
        <div style={{ overflow: 'hidden', aspectRatio: '21/9' }}><img src="assets/weg-herbst.jpg" alt={g.wegAlt} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 62%', display: 'block', filter: 'saturate(.9) contrast(1.02)' }} /></div>
        <figcaption style={{ marginTop: '10px', font: "400 11.5px/1.6 var(--font-mono)", letterSpacing: '.06em', color: 'var(--stein)' }}>{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>
    </div>
  </section>;
}

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