const DS3 = window.IseeITDesignSystem_37fb1f;

function Stadt({ src, name, text, alt }) {
  return <div>
    <DS3.BildMitCaption src={src} alt={alt || name} ratio="4/3" />
    <p style={{ margin: '10px 0 0', fontSize: '16px', fontWeight: 600 }}>{name}</p>
    <p style={{ margin: '3px 0 0', fontSize: '14px', lineHeight: 1.5, color: 'var(--stein)' }}>{text}</p>
  </div>;
}

function Ankommen() {
  const { t } = React.useContext(window.SpracheCtx);
  const a = t.ankommen;
  const bilder = { de: ['assets/stadt-muenchen.jpg', 'assets/stadt-braunschweig.jpg', 'assets/stadt-nuernberg-henkersteg.jpg'], ch: ['assets/stadt-zuerich.jpg', 'assets/stadt-lausanne.jpg', 'assets/stadt-basel.jpg'] };
  return <section id="ankommen" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--sektion-abstand) var(--rand) 0', scrollMarginTop: '120px' }} data-screen-label="04 Ankommen">
    <DS3.Kicker nummer="03">{a.kicker}</DS3.Kicker>
    <h2 style={{ margin: '18px 0 0', maxWidth: '760px', fontSize: 'var(--fs-h2)', lineHeight: 'var(--lh-heading)', letterSpacing: 'var(--ls-tight)', fontWeight: 600 }}>{a.titel}</h2>
    <p style={{ margin: '16px 0 0', maxWidth: '800px', fontSize: '17px', lineHeight: 'var(--lh-body)' }}>{a.intro}</p>
    <div style={{ marginTop: '44px', maxWidth: '920px' }}>
      {a.zeilen.map((z, i) => <DS3.ZeilenEintrag key={i} dicht titel={z.t} letzter={i === a.zeilen.length - 1}>{z.x}</DS3.ZeilenEintrag>)}
    </div>
    <div style={{ marginTop: '44px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: '18px', maxWidth: '1040px' }}>
      {a.spalten.map((s) => <div key={s.label} className="kachel-ruhig" style={{ background: 'var(--papier-ton)', border: '1px solid var(--linie)', padding: 'clamp(20px,2.4vw,26px)' }}><p style={{ margin: 0, font: "500 11.5px/1 var(--font-mono)", letterSpacing: '.12em', color: 'var(--backstein)' }}>{s.label}</p><p style={{ margin: '12px 0 0', fontSize: '15.5px', lineHeight: 'var(--lh-body)' }}>{s.text}</p></div>)}
    </div>
    <DS3.BildMitCaption src="assets/gruppe-treffen.jpg" zoom={false} alt={a.gruppe.alt} ratio="21/10" filter="saturate(.72) contrast(.97) brightness(1.03)" caption={a.gruppe.caption} style={{ margin: '44px 0 0' }} />
    <DS3.FlaggenMarker land="de" label={a.landDe} style={{ marginTop: '38px' }} />
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: '18px', marginTop: '16px' }}>
      {a.staedteDe.map((s, i) => <Stadt key={s.name} src={bilder.de[i]} name={s.name} alt={s.alt} text={s.text} />)}
    </div>
    <DS3.FlaggenMarker land="ch" label={a.landCh} style={{ marginTop: '38px' }} />
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: '18px', marginTop: '16px' }}>
      {a.staedteCh.map((s, i) => <Stadt key={s.name} src={bilder.ch[i]} name={s.name} alt={s.alt} text={s.text} />)}
    </div>
    <div className="kachel-ruhig" style={{ margin: '30px 0 0', maxWidth: '760px', background: 'var(--papier-ton)', border: '1px solid var(--linie)', borderTop: '2px solid var(--gold)', padding: 'var(--pad-karte)' }}>
      <p style={{ margin: 0, display: 'inline-flex', alignItems: 'center', gap: '10px', font: "500 11.5px/1 var(--font-mono)", letterSpacing: 'var(--ls-kicker)', color: 'var(--tinte)' }}><span aria-hidden="true" style={{ width: '8px', height: '8px', background: 'var(--gold)', flex: 'none' }}></span>{a.kachel.label}</p>
      <p style={{ margin: '18px 0 0', fontSize: 'clamp(18px,2.1vw,23px)', lineHeight: 1.35, letterSpacing: '-.018em', fontWeight: 600 }}>{a.kachel.titel}</p>
      <p style={{ margin: '12px 0 0', fontSize: '16px', lineHeight: 'var(--lh-lang)' }}>{a.kachel.text}</p>
    </div>
  </section>;
}

function Gruender({ bild, name, lead, mehr, stark }) {
  const { t } = React.useContext(window.SpracheCtx);
  const [offen, setOffen] = React.useState(false);
  const [hov, setHov] = React.useState(false);
  return <div>
    {bild ? <div style={{ overflow: 'hidden', aspectRatio: '5/4' }}><img src={bild} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%', display: 'block', filter: 'saturate(.92)' }} /></div>
      : <div style={{ width: '100%', aspectRatio: '5/4', background: 'repeating-linear-gradient(135deg,#EDE5D9 0 10px,#E6DFD3 10px 20px)', border: '1px solid var(--linie)', display: 'flex', alignItems: 'flex-end', padding: '16px' }}><span style={{ font: "400 11.5px/1.5 var(--font-mono)", color: 'var(--stein)' }}>{t.wir.portraitFehlt}</span></div>}
    <h3 style={{ margin: '18px 0 0', fontSize: '21px', fontWeight: 600 }}>{name}</h3>
    <p style={{ margin: '4px 0 0', font: "400 12.5px/1 var(--font-mono)", color: 'var(--stein)' }}>{t.wir.rolle}</p>
    <div style={{ display: 'grid', gridTemplateRows: offen ? '1fr' : '0fr', transition: 'grid-template-rows .55s var(--ease)' }}>
      <div style={{ overflow: 'hidden' }}>
        <p style={{ margin: '14px 0 0', fontSize: '16px', lineHeight: 'var(--lh-lang)', maxWidth: '520px' }}>{lead}</p>
        <p style={{ margin: '12px 0 0', fontSize: '16px', lineHeight: 'var(--lh-lang)', maxWidth: '520px', color: 'var(--stein-tief)' }}>{mehr}</p>
        <p style={{ margin: '12px 0 0', fontSize: '16px', lineHeight: 'var(--lh-lang)', maxWidth: '520px' }}><strong style={{ fontWeight: 600 }}>{stark}</strong></p>
      </div>
    </div>
    <button onClick={() => setOffen(!offen)} aria-expanded={offen}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ marginTop: '14px', display: 'inline-flex', alignItems: 'center', gap: '8px', background: 'none', border: 'none', borderBottom: hov ? '1px solid var(--backstein-tief)' : '1px solid var(--backstein)', padding: '0 0 3px', cursor: 'pointer', font: "500 13.5px/1 var(--font-grotesk)", color: hov ? 'var(--backstein-tief)' : 'var(--backstein)', transition: 'color .25s ease,border-color .25s ease' }}>
      {offen ? t.wir.wenigerLabel : t.wir.mehrLabel}
      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ transform: offen ? 'rotate(180deg)' : 'none', transition: 'transform .4s var(--ease)' }}><path d="M6 9l6 6 6-6"></path></svg>
    </button>
  </div>;
}

function Wir() {
  const { t } = React.useContext(window.SpracheCtx);
  const w = t.wir;
  return <section id="ueber-uns" 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="05 Wir">
    <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--sektion-pad) var(--rand) calc(var(--sektion-pad) - 6px)' }}>
      <DS3.Kicker nummer="04">{w.kicker}</DS3.Kicker>
      <h2 style={{ margin: '18px 0 0', maxWidth: '860px', fontSize: 'var(--fs-h2)', lineHeight: 'var(--lh-heading)', letterSpacing: 'var(--ls-tight)', fontWeight: 600 }}>{w.titel}</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: '36px', marginTop: '44px', alignItems: 'start' }}>
        <Gruender bild="assets/david-bundies.jpg" name="David Bundies" lead={w.david.lead} mehr={w.david.mehr} stark={w.david.stark} />
        <Gruender bild="assets/evangelos-pourtsas.jpg" name="Evangelos Pourtsas" lead={w.evangelos.lead} mehr={w.evangelos.mehr} stark={w.evangelos.stark} />
      </div>
      <div style={{ marginTop: '52px', maxWidth: '960px' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 32px', alignItems: 'baseline' }}>
          <span style={{ fontSize: 'clamp(26px,3.6vw,44px)', lineHeight: 1.15, letterSpacing: '-.025em', fontWeight: 600, color: 'var(--backstein)' }}>Deutsch</span>
          <span style={{ fontSize: 'clamp(26px,3.6vw,44px)', lineHeight: 1.15, letterSpacing: '-.025em', fontWeight: 600, color: 'var(--tinte)' }}>English</span>
          <span style={{ fontSize: 'clamp(26px,3.6vw,44px)', lineHeight: 1.15, letterSpacing: '-.025em', fontWeight: 600, color: 'var(--sprach-el,#0E6E74)' }}>Ελληνικά</span>
          <span style={{ fontSize: 'clamp(26px,3.6vw,44px)', lineHeight: 1.15, letterSpacing: '-.025em', fontWeight: 600, color: 'var(--sprach-es,#A3521A)' }}>Español</span>
        </div>
        <p style={{ margin: '18px 0 0', maxWidth: '700px', fontSize: '17px', lineHeight: 'var(--lh-body)' }}>{w.sprachenText}</p>
      </div>
      <div style={{ marginTop: '56px', maxWidth: '860px' }}>
        <p style={{ margin: '18px 0 0', maxWidth: '760px', fontSize: 'clamp(18px,2.1vw,23px)', lineHeight: 1.4, letterSpacing: '-.015em', fontWeight: 600 }}>{w.verpflichtung.statement}</p>
        <DS3.MarkerListe style={{ marginTop: '24px' }} items={w.verpflichtung.items} />
      </div>
    </div>
  </section>;
}

Object.assign(window, { Ankommen, Wir });