// RanfftOrgan — the signature content page: full technical depth, elegantly set.
// Disposition + specs are authoritative FAKT data (Eule restoration report 2009–2013).
const orgNS = window.RoyHeyneDesignSystem_df1161;

function SpecRow({ label, value }) {
  // Mobil: gestapelt statt zwei Spalten — die Kategorie (Messing) links OBEN, der Wert
  // links darunter. Löst dasselbe Problem wie beim Konzert-Ledger: das Label darf nicht
  // rechts abgekoppelt vom linken Wert schweben. Am Desktop unverändert (150px-Spur, Label rechts).
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  return (
    <div style={isMobile
      ? { padding: '13px 0', borderBottom: '1px solid var(--border-hairline)' }
      : { display: 'grid', gridTemplateColumns: '150px 1fr', gap: 26, alignItems: 'first baseline', padding: '14px 0', borderBottom: '1px solid var(--border-hairline)' }}>
      <dt style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--fs-12)', fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--messing-dunkel)', lineHeight: 1.5, textAlign: isMobile ? 'left' : 'right', marginBottom: isMobile ? 5 : 0 }}>{label}</dt>
      <dd style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: 'var(--fs-17)', color: 'var(--text-strong)', lineHeight: 1.5 }}>{value}</dd>
    </div>
  );
}

function Disposition({ title, compass, stops }) {
  return (
    <div>
      <div className="rh-label" style={{ color: 'var(--messing-dunkel)', marginBottom: 4 }}>{title}</div>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--fs-12-5)', color: 'var(--text-muted)', letterSpacing: '0.02em', marginBottom: 14 }}>{compass}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {stops.map((s, i) => (
          <li key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 16, padding: '9px 0', borderBottom: '1px solid var(--border-hairline)' }}>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-17)', color: 'var(--text-strong)' }}>{s[0]}</span>
            <span style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--fs-14)', color: 'var(--text-muted)', flexShrink: 0 }}>{s[1]}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function RanfftOrgan({ onNav, t }) {
  const { Button, ImagePlate, Ornament } = orgNS;
  const I = window.RH_IMG;
  const L = t.lang;
  const heroSlot = window.RH_slot ? window.RH_slot('organ-hero', { src: I.ranftFull }) : null;
  const stopsSlot = window.RH_slot ? window.RH_slot('organ-prospekt', { src: I.ranftFullWide }) : null;
  const intro = { de: 'Das Herzstück des Geisinger Orgelsommers und der klangliche Mittelpunkt vieler Konzerte: die historische Ranft-Orgel von 1757, erbaut von Daniel Ranft aus Geising. Nach Jahren des Verfalls 2009–2013 durch die Firma H. Eule aus Bautzen in ihrer Originaldisposition rekonstruiert.',
    en: 'The heart of the Geising Organ Summer and the tonal centre of many concerts: the historic Ranft organ of 1757, built by Daniel Ranft of Geising. After years of decay it was reconstructed in its original disposition by H. Eule of Bautzen between 2009 and 2013.',
    cs: 'Srdce geisingského varhanního léta a zvukový střed mnoha koncertů: historické Ranftovy varhany z roku 1757, které postavil Daniel Ranft z Geisingu. Po letech chátrání byly v letech 2009–2013 firmou H. Eule z Budyšína zrekonstruovány v původní dispozici.' }[L];
  const substanceLead = { de: 'Daniel Ranft schuf 1757 ein Instrument von seltener klanglicher Vielfalt — im tiefen Kammerton, ungleichstufig temperiert, mit rein mechanischer Traktur. 2009 bis 2013 wurde es in seiner Originaldisposition wiederhergestellt.',
    en: 'In 1757 Daniel Ranft built an instrument of rare tonal variety — in low chamber pitch, unequally tempered, with purely mechanical action. Between 2009 and 2013 it was restored to its original disposition.',
    cs: 'Daniel Ranft vytvořil v roce 1757 nástroj vzácné zvukové pestrosti — v hlubokém komorním ladění, nerovnoměrně temperovaný, s čistě mechanickou trakturou. V letech 2009–2013 byl obnoven ve své původní dispozici.' }[L];
  const substanceTitle = { de: 'Technische Substanz', en: 'Technical Substance', cs: 'Technická podstata' }[L];
  const specLabels = {
    de: ['Orgelbauer', 'Baujahr', 'Stimmtonhöhe', 'Temperierung', 'Spiel- und Registertraktur', 'Windladen', 'Restaurierung'],
    en: ['Organ builder', 'Year built', 'Pitch', 'Temperament', 'Key & stop action', 'Windchests', 'Restoration'],
    cs: ['Varhanář', 'Rok stavby', 'Ladění (výška)', 'Temperace', 'Hrací a rejstříková traktura', 'Vzdušnice', 'Restaurování'],
  }[L];
  const specValues = {
    de: ['Daniel Ranft (1727–1804) aus Geising', '1757', 'a′ = 415 Hz bei 15 °C (tiefer Kammerton)', 'ungleichstufig', 'mechanisch', 'Schleiflade', '2009–2013, Fa. H. Eule aus Bautzen'],
    en: ['Daniel Ranft (1727–1804) of Geising', '1757', 'a′ = 415 Hz at 15 °C (low chamber pitch)', 'unequal', 'mechanical', 'slider chests', '2009–2013, H. Eule, Bautzen'],
    cs: ['Daniel Ranft (1727–1804) z Geisingu', '1757', 'a′ = 415 Hz při 15 °C (hluboký komorní tón)', 'nerovnoměrná', 'mechanická', 'zásuvkové vzdušnice', '2009–2013, fa. H. Eule z Budyšína'],
  }[L];
  const compassLabel = { de: 'Umfang', en: 'Compass', cs: 'Rozsah' }[L];
  const dispositions = [
    { title: 'Hauptwerk', compass: compassLabel + ' C, D – e′′′', stops: [['Principal', '8′'], ['Viola di Gamba', '8′'], ['Unda maris', '8′ (ab c′)'], ['Quinta Viola', '8′'], ['Praestanda', '4′'], ['Quinta', '3′'], ['Octava', '2′'], ['Süifflout', '1′'], ['Mixtur', '4fach']] },
    { title: 'Oberwerk', compass: compassLabel + ' C, D – e′′′', stops: [['Flaute major', '8′'], ['Flaute travers', '8′'], ['Salitional', '8′'], ['Principal', '4′'], ['Flaute minor', '4′'], ['Nasat', '3′'], ['Octava', '2′'], ['Flageolet', '1′'], ['Mixtur', '3fach']] },
    { title: 'Pedal', compass: compassLabel + ' C, D – d′', stops: [['Principalbass', '16′'], ['Subbass', '16′'], ['Octavenbass', '8′'], ['Posaunenbass', '16′']] },
  ];
  const auxLabel = { de: 'Spielhilfen', en: 'Accessories', cs: 'Pomocná zařízení' }[L];
  const aux = ['Coppel', 'Calcant', 'Manualschiebekoppel'];
  const note = { de: 'Disposition nach dem Restaurierungsbefund der Firma H. Eule, Bautzen (2009–2013).',
    en: 'Disposition after the restoration findings of H. Eule, Bautzen (2009–2013).',
    cs: 'Dispozice podle restaurátorského nálezu firmy H. Eule, Budyšín (2009–2013).' }[L];
  return (
    <div>
      {/* Hero with the real Bohemian positive organ */}
      <section style={{ position: 'relative', overflow: 'hidden', color: 'var(--pergament-text)', background: 'var(--scrim-1)' }}>
        <img loading="lazy" decoding="async" src={I.ranftAngle} alt="" aria-hidden="true"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'right 40%', opacity: 0.4 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(96deg, rgba(18,16,12,0.92) 0%, rgba(18,16,12,0.62) 56%, rgba(18,16,12,0.34) 100%)' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container)', margin: '0 auto', padding: '120px var(--gutter) 78px',
          display: 'grid', gridTemplateColumns: '1.25fr 0.75fr', gap: 56, alignItems: 'start' }}>
          <div className="rh-stagger">
            <div className="rh-eyebrow rh-eyebrow--dark" style={{ marginBottom: 18 }}>{t('organ.eyebrow')}</div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.6rem, 1.8rem + 3vw, 4.4rem)', lineHeight: 1.02, color: 'var(--pergament-text)', margin: 0 }}>
              {t('organ.title')}.
            </h1>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-20)', lineHeight: 1.7, color: 'rgba(236,230,216,0.86)', maxWidth: '46ch', marginTop: 22 }}>
              {intro}
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 30 }}>
              <Button variant="inverse" onClick={() => onNav('konzerte', 'Ranft-Orgel')}>{t('organ.cta')}</Button>
            </div>
          </div>
          <ImagePlate className="rh-plate-in" tone="dark" src={heroSlot ? heroSlot.src : I.ranftFull} slot="organ-hero" imgPosition={heroSlot ? heroSlot.imgPosition : undefined} zoom={heroSlot ? heroSlot.zoom : undefined} arch ratio="4 / 5"
            caption={t.f({ de: 'Die Ranft-Orgel von 1757 · Stadtkirche Geising', en: 'The Ranft organ of 1757 · Geising Town Church', cs: 'Ranftovy varhany z roku 1757 · městský kostel Geising' })} />
        </div>
      </section>

      {/* Specs + a plate */}
      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '80px var(--gutter) 40px' }}>
        {/* Aussage → Beleg (kanonisch, linksbündig): erst der Kernsatz zur Substanz,
            darunter die Fakten (Spec-Sheet, Messing-Label-Spur) neben dem vollen
            Prospekt — die Orgel selbst trägt ihre technische Sektion. Oben-bündig,
            damit Tabelle und Tafel eine gemeinsame Oberkante teilen. */}
        <div style={{ maxWidth: '62ch', marginBottom: 48 }}>
          <h2 style={{ fontSize: 'var(--fs-32)', margin: '0 0 16px' }}>{window.RH_pt(substanceTitle)}</h2>
          <p style={{ fontSize: 'var(--fs-20)', lineHeight: 1.7, color: 'var(--text-body)', margin: 0, textWrap: 'pretty' }}>
            {substanceLead}
          </p>
        </div>
        <div className="rh-organ-specs" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          <dl className="rh-num" style={{ margin: 0, borderTop: '1px solid var(--border-hairline)' }}>
            {specLabels.map((lab, i) => <SpecRow key={i} label={lab} value={specValues[i]} />)}
          </dl>
          <div>
            <ImagePlate src={stopsSlot ? stopsSlot.src : I.ranftFullWide} slot="organ-prospekt" imgPosition={stopsSlot ? stopsSlot.imgPosition : undefined} zoom={stopsSlot ? stopsSlot.zoom : undefined} ratio="4 / 5" arch plate={t.f({ de: 'Prospekt', en: 'Case', cs: 'Skříň' })}
              caption={t.f({ de: 'Vollprospekt · Empore »Singet dem Herrn«', en: 'Full case · gallery “Singet dem Herrn”', cs: 'Celá skříň · kruchta „Singet dem Herrn“' })} />
          </div>
        </div>

        <Ornament mark="asterism" style={{ margin: '72px auto' }} />

        <h2 style={{ fontSize: 'var(--fs-32)', margin: '0 0 32px' }}>{window.RH_pt(t('organ.disposition'))}</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
          {dispositions.map((d, i) => <Disposition key={i} title={d.title} compass={d.compass} stops={d.stops} />)}
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: '10px 18px', marginTop: 40, paddingTop: 22, borderTop: '1px solid var(--border-hairline)' }}>
          <span className="rh-label" style={{ color: 'var(--messing-dunkel)' }}>{auxLabel}</span>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-17)', color: 'var(--text-strong)' }}>{aux.join(' · ')}</span>
        </div>

        <p style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--fs-13)', color: 'var(--text-muted)', marginTop: 24 }}>
          {note}
        </p>
      </section>

      {/* Die Orgel in Bildern — Galerie wie „Meine Claviere" (Bogenbild + Miniaturen + Lupe) */}
      {window.InstrumentFigure && (
        <section style={{ maxWidth: '760px', margin: '0 auto', padding: '24px var(--gutter) 110px' }}>
          <div className="rh-eyebrow" style={{ marginBottom: 14 }}>{t.f({ de: 'Die Orgel in Bildern', en: 'The organ in pictures', cs: 'Varhany v obrazech' })}</div>
          <h2 style={{ fontSize: 'var(--fs-32)', margin: '0 0 28px' }}>{window.RH_pt(t.f({ de: 'Prospekt, Spieltisch und Raum', en: 'Case, console and room', cs: 'Skříň, hrací stůl a prostor' }))}</h2>
          {React.createElement(window.InstrumentFigure, { t, flip: false, it: {
            name: { de: 'Ranft-Orgel · Geising, 1757', en: 'Ranft organ · Geising, 1757', cs: 'Ranftovy varhany · Geising, 1757' },
            plate: window.RH_PLATE('ranft'),
            gallery: [
              { src: I.ranftFullWide, cap: { de: 'Vollprospekt · Empore »Singet dem Herrn«', en: 'Full case · gallery “Singet dem Herrn”', cs: 'Celá skříň · kruchta „Singet dem Herrn“' } },
              { src: I.ranftGesamt, cap: { de: 'Gesamtansicht', en: 'Overall view', cs: 'Celkový pohled' } },
              { src: I.ranftConsole, cap: { de: 'Spieltisch · zwei Manuale und Registerzüge', en: 'Console · two manuals and stop knobs', cs: 'Hrací stůl · dva manuály a rejstříková manubria' } },
              { src: I.ranftStops, cap: { de: 'Registerzüge · Praestanda, Principal, Viola di Gamba, Unda Maris', en: 'Stop knobs · Praestanda, Principal, Viola di Gamba, Unda Maris', cs: 'Rejstříková manubria · Praestanda, Principal, Viola di Gamba, Unda Maris' } },
              { src: I.ranftAngle, cap: { de: 'Seitlicher Blick auf den Prospekt', en: 'The case from the side', cs: 'Boční pohled na skříň' } },
              { src: I.ranftNave, cap: { de: 'Blick vom Altar zur Orgel', en: 'From the altar towards the organ', cs: 'Pohled od oltáře k varhanám' } },
            ],
          } })}
        </section>
      )}
    </div>
  );
}

Object.assign(window, { RanfftOrgan });