// UeberUnsHifi.jsx — Hi-Fi Über uns (Klassisch) eingebaut in den UI-Kit-Prototyp.
//
// Spiegelt die 8 Sektionen des akzeptierten Wireframes 1:1, jetzt mit echtem
// Tschense-Design-System (Mulish, Cormorant Garamond, Kupfer, Ornamente).
// Alle Inhalte ausschließlich aus Tschense - Recherche-Sammlung.md.

function PersonPlaceholder({ initial, size = 130, accent = true }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: 'linear-gradient(160deg, #F4F0ED 0%, #E6DDD2 100%)',
      border: `1.5px solid ${accent ? 'var(--brand-accent)' : 'var(--line)'}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden', margin: '0 auto',
    }}>
      <img src={window._r(window._r("assets/ornament-sprig.png"))} alt=""
           style={{ position: 'absolute', right: -size * .15, bottom: -size * .15, width: size * .7, opacity: .22 }}/>
      <span style={{
        font: `300 ${size * .45}px/1 var(--f-display)`,
        color: 'var(--brand-accent)', letterSpacing: '-.02em',
        position: 'relative', zIndex: 1,
      }}>{initial}</span>
      <span style={{
        position: 'absolute', top: 8, left: 10,
        font: '600 8px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)',
        textTransform: 'uppercase', color: 'var(--ink-300)',
      }}>Foto folgt</span>
    </div>
  );
}

function UeberUnsEntwurf() {
  return (
    <div>
      {/* — 1 · Hero — */}
      <HeroFoto page="ueberuns" style={{padding:'72px var(--page-x) 64px'}}>
        <div style={{ maxWidth: 1140, margin: '0 auto', position: 'relative' }}>
          <span style={{
            font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
          }}>
            <span style={{width:24, height:1, background:'var(--brand-accent)', display:'inline-block'}}/>
            Über uns · Tschense Bestattungen
          </span>
          <h1 style={{
            fontFamily: 'var(--f-body)', fontWeight: 300,
            fontSize: 38, lineHeight: 1.15, letterSpacing: '-.015em',
            color: 'var(--ink-900)', margin: '20px 0 14px', maxWidth: '18ch',
          }}>
            Wir begleiten Menschen{' '}
            <em style={{
              fontStyle: 'normal', fontFamily: 'var(--f-display)', fontWeight: 300,
              color: 'var(--brand-accent)', fontSize: 42, letterSpacing: '-.02em',
            }}>in schweren Zeiten.</em>
          </h1>
          <p style={{ color: 'var(--ink-700)', maxWidth: '54ch', fontSize: 17, margin: '20px 0 0', lineHeight: 1.7 }}>
            Mit Zeit, Herz und großem Respekt — seit über fünfzig Jahren in Wolfsburg.
          </p>
        </div>
      </HeroFoto>

      {/* Breadcrumb */}
      <div style={{padding:'14px var(--page-x)', background:'var(--surface-paper)', borderTop:'1px solid var(--line-soft)', borderBottom:'1px solid var(--line-soft)', font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'var(--ink-warm-mute)'}}>
        <div style={{maxWidth:'var(--page-max-w)', margin:'0 auto'}}>
          <a href="#" style={{color:'var(--ink-warm-mute)', textDecoration:'none'}}>Home</a>
          &emsp;›&emsp;
          <span style={{color:'var(--brand-accent)'}}>Über uns</span>
        </div>
      </div>

      {/* — 2 · Mindset & Werte — */}
      <section style={{ background: 'var(--surface)', padding:'96px var(--page-x)' }}>
        <div style={{ maxWidth: 1140, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <span style={{
              font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
              color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
            }}>
              <span style={{width:6, height:6, borderRadius:'50%', background:'var(--brand-accent)'}}/>
              Unser Leitgedanke
            </span>
            <h2 style={{
              margin: '20px 0 14px',
              fontFamily: 'var(--f-display)', fontWeight: 300,
              fontSize: 44, lineHeight: 1.1, letterSpacing: '-.01em',
              color: 'var(--ink-900)',
            }}>
              Vertrauen <em style={{ fontStyle: 'normal', color: 'var(--brand-accent)', fontWeight: 400 }}>·</em> Respekt <em style={{ fontStyle: 'normal', color: 'var(--brand-accent)', fontWeight: 400 }}>·</em> Erinnerung
            </h2>
            <p style={{ color: 'var(--ink-500)', fontSize: 16, lineHeight: 1.7, margin: 0, maxWidth: '52ch', marginInline: 'auto' }}>
              Drei Worte, die jedes Gespräch tragen — vom ersten Anruf bis zur Trauerfeier.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { num: '01', wort: 'Vertrauen',  desc: 'Über fünfzig Jahre Beständigkeit an einem Ort. Familien, die uns kennen, bringen uns die nächste Generation.' },
              { num: '02', wort: 'Respekt',    desc: 'Vor dem Leben, das war, und vor dem Tempo, in dem Sie Abschied nehmen möchten. Wir hören zu, bevor wir sprechen.' },
              { num: '03', wort: 'Erinnerung', desc: 'In jedem Gespräch, in jeder Begleitung, in jedem Abschied. Dafür stehen wir.' },
            ].map((w, i) => (
              <article key={i} style={{
                background: 'var(--surface)', border: '1px solid var(--line)',
                padding: '36px 28px 32px',
              }}>
                <div style={{
                  width: 52, height: 52, borderRadius: '50%',
                  background: 'var(--brand-accent-soft)',
                  border: '1px solid var(--brand-accent)',
                  color: 'var(--brand-accent-ink)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  font: '300 22px/1 var(--f-display)', marginBottom: 22,
                }}>{w.num}</div>
                <h3 style={{ margin: 0, font: '300 32px/1.1 var(--f-display)', color: 'var(--ink-900)', letterSpacing: '-.01em' }}>
                  {w.wort}
                </h3>
                <p style={{ margin: '14px 0 0', color: 'var(--ink-500)', fontSize: 14.5, lineHeight: 1.7 }}>
                  {w.desc}
                </p>
              </article>
            ))}
          </div>

          {/* Schluss-Zitat aus Welcome-Post */}
          <div style={{
            marginTop: 48, padding: '32px 36px',
            background: 'var(--surface-warm)', borderLeft: '2px solid var(--brand-accent)',
            maxWidth: 820, marginInline: 'auto',
          }}>
            <p style={{
              margin: 0, color: 'var(--ink-700)', fontSize: 19, lineHeight: 1.6,
              fontStyle: 'italic', fontFamily: 'var(--f-display)', fontWeight: 300,
            }}>
              „Dafür stehen wir — in jedem Gespräch, in jeder Begleitung, in jedem Abschied."
            </p>
          </div>
        </div>
      </section>

      {/* — 3 · Begrüßung Patriz Brünsch — */}
      <section style={{ background: 'var(--surface-warm)', padding:'96px var(--page-x)', position: 'relative', overflow: 'hidden' }}>
        <img src={window._r(window._r("assets/ornament-branch-large.png"))} alt=""
             style={{ position:'absolute', left:'-4%', bottom:'-10%', width:560, opacity:.08, pointerEvents:'none' }}/>
        <div style={{ maxWidth: 1140, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '.85fr 1.15fr', gap: 80, alignItems: 'start' }}>
            {/* Portrait */}
            <div>
              <div style={{
                width: '100%', aspectRatio: '3/4',
                background: 'linear-gradient(160deg, #F4F0ED 0%, #E6DDD2 100%)',
                position: 'relative', overflow: 'hidden',
                boxShadow: '0 0 0 1px var(--line)',
              }}>
                <img src={window._r(window._r("assets/ornament-sprig.png"))} alt=""
                     style={{ position: 'absolute', right: -40, bottom: -40, width: 240, opacity: .3 }}/>
                <span style={{
                  position: 'absolute', inset: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  font: '300 220px/1 var(--f-display)', color: 'var(--brand-accent)', letterSpacing: '-.04em',
                }}>P</span>
                <span style={{
                  position: 'absolute', top: 16, left: 18,
                  font: '600 9px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)',
                  textTransform: 'uppercase', color: 'var(--ink-300)',
                }}>Foto folgt</span>
              </div>
              <div style={{ textAlign: 'center', marginTop: 22 }}>
                <div style={{ font: '400 24px/1.2 var(--f-display)', color: 'var(--ink-900)' }}>Patriz Brünsch</div>
                <div style={{ marginTop: 6, font: '600 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase', color: 'var(--brand-accent)' }}>
                  Inhaber · seit 2021
                </div>
              </div>
            </div>

            {/* Brief */}
            <div style={{ background: 'var(--surface)', padding: '48px 56px 44px', position: 'relative' }}>
              <img src={window._r(window._r("assets/quote-icon.png"))} alt=""
                   style={{ position:'absolute', top:-22, left:48, width:54, opacity:.7 }}/>
              <span style={{
                font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
                color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
              }}>
                <span style={{width:24, height:1, background:'var(--brand-accent)'}}/>
                Ein Wort vorab
              </span>

              <h2 style={{
                fontFamily: 'var(--f-body)', fontWeight: 300,
                fontSize: 38, lineHeight: 1.2, letterSpacing: '-.01em',
                color: 'var(--ink-900)', margin: '22px 0 22px',
              }}>
                Begrüßung von <em style={{
                  fontStyle: 'normal', fontFamily: 'var(--f-display)', fontWeight: 400,
                  color: 'var(--brand-accent)', fontSize: 42,
                }}>Patriz Brünsch.</em>
              </h2>

              <p style={{
                margin: 0, color: 'var(--ink-300)', fontSize: 12.5, lineHeight: 1.6,
                fontStyle: 'italic', borderLeft: '2px solid var(--brand-accent-soft)', paddingLeft: 14,
              }}>
                Platzhalter — finaler Begrüßungstext folgt nach Freigabe durch Herrn Brünsch.
                Layout und Länge sind hier abgesteckt; der echte Brief wird an dieser Stelle eingesetzt.
              </p>

              <div style={{ marginTop: 24, color: 'var(--ink-500)', fontSize: 15, lineHeight: 1.75 }}>
                <div style={{ height: 14, background: 'var(--ink-100, #F2EFE9)', marginBottom: 10, width: '92%' }}/>
                <div style={{ height: 14, background: 'var(--ink-100, #F2EFE9)', marginBottom: 10, width: '88%' }}/>
                <div style={{ height: 14, background: 'var(--ink-100, #F2EFE9)', marginBottom: 10, width: '94%' }}/>
                <div style={{ height: 14, background: 'var(--ink-100, #F2EFE9)', marginBottom: 18, width: '62%' }}/>
                <div style={{ height: 14, background: 'var(--ink-100, #F2EFE9)', marginBottom: 10, width: '90%' }}/>
                <div style={{ height: 14, background: 'var(--ink-100, #F2EFE9)', marginBottom: 10, width: '70%' }}/>
              </div>

              {/* Verifizierte Bio-Anker */}
              <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                <span style={{
                  font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
                  color:'var(--ink-500)',
                }}>Verifizierte Bio-Anker</span>
                <div style={{ marginTop: 12, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {[
                    'Branche seit 2007',
                    'Inhaber Tschense seit 2021',
                    'Ausgebildeter Trauerredner',
                    'Organist',
                    'Chorleiter · Gemischter Chor Vorsfelde',
                  ].map((t, i) => (
                    <span key={i} style={{
                      font: '500 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase',
                      padding: '7px 12px', border: '1px solid var(--brand-accent)',
                      color: 'var(--brand-accent-ink)',
                    }}>{t}</span>
                  ))}
                </div>
              </div>

              {/* Signatur */}
              <div style={{ marginTop: 30, display: 'flex', justifyContent: 'flex-end', alignItems: 'baseline', gap: 14 }}>
                <span style={{ font: '500 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase', color: 'var(--ink-500)' }}>
                  Ihr
                </span>
                <div style={{ font: '400 44px/.9 var(--f-script)', color: 'var(--brand-accent)' }}>P. Brünsch</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* — 4 · Team — */}
      <section style={{ background: 'var(--surface)', padding:'96px var(--page-x)' }}>
        <div style={{ maxWidth: 1140, margin: '0 auto' }}>
          <div style={{ marginBottom: 48 }}>
            <span style={{
              font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
              color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
            }}>
              <span style={{width:24, height:1, background:'var(--brand-accent)'}}/>
              Unser Team
            </span>
            <h2 style={{
              margin: '14px 0 10px',
              fontFamily: 'var(--f-display)', fontWeight: 300,
              fontSize: 44, lineHeight: 1.1, letterSpacing: '-.01em',
              color: 'var(--ink-900)',
            }}>
              Vier Menschen, <em style={{ fontStyle: 'normal', fontWeight: 400, color: 'var(--brand-accent)' }}>eine Haltung.</em>
            </h2>
            <p style={{ margin: '10px 0 0', color: 'var(--ink-500)', fontSize: 16, lineHeight: 1.7, maxWidth: '54ch' }}>
              Wer Sie betreut, ergibt sich aus der Situation — Sie erreichen uns immer über dieselbe Nummer.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {[
              {
                initial: 'P', name: 'Patriz Brünsch',
                role: 'Inhaber',
                line: 'Trauerredner, Organist und Chorleiter — gestaltet Trauerfeiern musikalisch und sprachlich aus eigener Hand.',
              },
              {
                initial: 'A', name: 'Andreas Neumann',
                role: 'Trauerbegleitung',
                line: 'Mit über 20 Jahren Berufserfahrung. Beratend, begleitend, helfend — mit Ruhe und einem sicheren Gespür für die richtigen Worte.',
              },
              {
                initial: 'P', name: 'Patricia Riecher',
                role: 'Backoffice',
                line: 'Die freundliche Stimme aus dem Backoffice — erste Anlaufstelle, strukturiert, serviceorientiert, immer ansprechbar.',
              },
              {
                initial: 'T', name: 'Tanja Seeland',
                role: 'Koordination · Beratung',
                line: 'Koordination und Verwaltung im Hintergrund — von Terminabsprachen bis zur Organisation. Führt Vorsorge- und Trauergespräche.',
              },
            ].map((p, i) => (
              <article key={i} style={{
                background: 'var(--surface)', border: '1px solid var(--line)',
                padding: '36px 24px 28px',
              }}>
                <PersonPlaceholder initial={p.initial} size={130} />
                <div style={{ textAlign: 'center', marginTop: 22 }}>
                  <div style={{ font: '400 20px/1.2 var(--f-display)', color: 'var(--ink-900)' }}>{p.name}</div>
                  <div style={{ marginTop: 6, font: '600 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase', color: 'var(--brand-accent)' }}>
                    {p.role}
                  </div>
                </div>
                <p style={{
                  margin: '18px 0 0', color: 'var(--ink-500)',
                  fontSize: 13.5, lineHeight: 1.65, textAlign: 'left',
                }}>
                  {p.line}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* — 5 · Traditionsunternehmen — */}
      <section style={{ background: 'var(--surface-warm)', padding:'96px var(--page-x)', position: 'relative', overflow: 'hidden' }}>
        <img src={window._r(window._r("assets/ornament-branch-tall.png"))} alt=""
             style={{ position:'absolute', left:'-3%', top:'10%', height:460, opacity:.10, pointerEvents:'none', transform: 'scaleX(-1)' }}/>
        <div style={{ maxWidth: 1140, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'start' }}>
            <div>
              <span style={{
                font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
                color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
              }}>
                <span style={{width:24, height:1, background:'var(--brand-accent)'}}/>
                Traditionsunternehmen
              </span>
              <h2 style={{
                margin: '14px 0 14px',
                fontFamily: 'var(--f-display)', fontWeight: 300,
                fontSize: 44, lineHeight: 1.1, letterSpacing: '-.01em',
                color: 'var(--ink-900)',
              }}>
                Über fünfzig Jahre <em style={{ fontStyle: 'normal', fontWeight: 400, color: 'var(--brand-accent)' }}>am selben Ort.</em>
              </h2>
              <p style={{ color: 'var(--ink-500)', fontSize: 17, lineHeight: 1.7, margin: '12px 0 0', maxWidth: '52ch', fontStyle: 'italic' }}>
                Tschense Bestattungen ist ein traditionsreiches Bestattungsinstitut mit über fünfzig Jahren Geschichte in Wolfsburg.
              </p>

              <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 24 }}>
                {[
                  { num: '01', headline: 'Gegründet um 1970',                body: 'von Gerhard Tschense in Wolfsburg, etabliert in rund fünfzehn Jahren Aufbauarbeit.' },
                  { num: '02', headline: 'Über drei Jahrzehnte Gunhild Tschense', body: 'Sie übernahm Mitte der 1980er Jahre und führte das Haus als Einzelunternehmen — Stammsitz war jahrzehntelang die Röntgenstraße 19.' },
                  { num: '03', headline: 'Seit 2021 Patriz Brünsch',         body: 'Übergabe in Altersnachfolge. Name, Standorte und Team bleiben unverändert erhalten.' },
                ].map((f, i) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '52px 1fr', gap: 18, alignItems: 'flex-start' }}>
                    <div style={{
                      width: 52, height: 52, borderRadius: '50%',
                      background: 'var(--surface)', border: '1.5px solid var(--brand-accent)',
                      color: 'var(--brand-accent)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      font: '300 18px/1 var(--f-display)', flexShrink: 0,
                    }}>{f.num}</div>
                    <div>
                      <h4 style={{ margin: 0, font: '500 13px/1.2 var(--f-body)', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ink-900)' }}>
                        {f.headline}
                      </h4>
                      <p style={{ margin: '8px 0 0', color: 'var(--ink-500)', fontSize: 14.5, lineHeight: 1.7 }}>
                        {f.body}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Standort-Karten */}
            <aside style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <article style={{ background: 'var(--surface)', border: '1px solid var(--line)', padding: '28px 30px 30px' }}>
                <span style={{
                  font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
                  color:'var(--brand-accent)',
                }}>Hauptsitz</span>
                <h3 style={{ margin: '12px 0 8px', font: '300 24px/1.2 var(--f-display)', color: 'var(--ink-900)' }}>
                  Kurt-Schumacher-Ring 256
                </h3>
                <p style={{ margin: 0, color: 'var(--ink-500)', fontSize: 14, lineHeight: 1.6 }}>
                  38444 Wolfsburg · Detmerode
                </p>
                <div style={{
                  marginTop: 16, paddingTop: 14, borderTop: '1px dashed var(--line)',
                  fontFamily: 'var(--f-script)', fontSize: 22, color: 'var(--brand-accent)', lineHeight: 1,
                }}>
                  seit 30.12.2025
                </div>
              </article>
              <article style={{ background: 'var(--surface)', border: '1px solid var(--line)', padding: '28px 30px 30px' }}>
                <span style={{
                  font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
                  color:'var(--brand-accent)',
                }}>Filiale</span>
                <h3 style={{ margin: '12px 0 8px', font: '300 24px/1.2 var(--f-display)', color: 'var(--ink-900)' }}>
                  Röntgenstraße 19
                </h3>
                <p style={{ margin: 0, color: 'var(--ink-500)', fontSize: 14, lineHeight: 1.6 }}>
                  38440 Wolfsburg · Klieversberg
                </p>
                <div style={{
                  marginTop: 16, paddingTop: 14, borderTop: '1px dashed var(--line)',
                  fontFamily: 'var(--f-script)', fontSize: 20, color: 'var(--brand-accent)', lineHeight: 1.2,
                }}>
                  historischer Stammsitz
                </div>
              </article>
            </aside>
          </div>
        </div>
      </section>

      {/* — 6 · Zeitstrahl — */}
      <section style={{ background: 'var(--surface)', padding:'96px var(--page-x)' }}>
        <div style={{ maxWidth: 1140, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <span style={{
              font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
              color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
            }}>
              <span style={{width:6, height:6, borderRadius:'50%', background:'var(--brand-accent)'}}/>
              Hausgeschichte
            </span>
            <h2 style={{
              margin: '14px 0 8px',
              fontFamily: 'var(--f-display)', fontWeight: 300,
              fontSize: 44, lineHeight: 1.1, letterSpacing: '-.01em',
              color: 'var(--ink-900)',
            }}>
              Vier Stationen, <em style={{ fontStyle: 'normal', fontWeight: 400, color: 'var(--brand-accent)' }}>ein Name.</em>
            </h2>
          </div>

          <div style={{ position: 'relative', padding: '0 60px' }}>
            <div style={{ position: 'absolute', left: '6%', right: '6%', top: 36, height: 2, background: 'var(--line)' }} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, position: 'relative' }}>
              {[
                { year: 'um 1970',     phase: 'Gründung',     name: 'Gerhard Tschense',           desc: 'Aufbau des Hauses in Wolfsburg',           current: false },
                { year: 'Mitte 1980er', phase: 'Übernahme',   name: 'Gunhild Tschense',           desc: 'Drei Jahrzehnte alleinige Inhaberin',       current: false },
                { year: '2021',        phase: 'Übernahme',    name: 'Patriz Brünsch',             desc: 'Altersnachfolge · Name & Team bleiben',     current: true  },
                { year: '30.12.2025',  phase: 'Neueröffnung', name: 'Kurt-Schumacher-Ring 256',   desc: 'Tag der offenen Tür · neuer Hauptsitz',     current: true  },
              ].map((p, i) => (
                <div key={i} style={{ textAlign: 'center', position: 'relative' }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: '50%', margin: '0 auto',
                    background: p.current ? 'var(--brand-accent)' : '#fff',
                    border: '2px solid var(--brand-accent)',
                    position: 'relative', zIndex: 1,
                    boxShadow: p.current ? '0 0 0 6px var(--brand-accent-soft)' : 'none',
                  }} />
                  <div style={{
                    marginTop: 18, fontFamily: 'var(--f-script)', fontSize: 26,
                    color: 'var(--brand-accent)', lineHeight: 1,
                  }}>{p.year}</div>
                  <div style={{
                    marginTop: 10, font: '600 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)',
                    textTransform: 'uppercase', color: 'var(--ink-500)',
                  }}>{p.phase}</div>
                  <div style={{ marginTop: 8, font: '400 16px/1.2 var(--f-display)', color: 'var(--ink-900)' }}>
                    {p.name}
                  </div>
                  <div style={{ marginTop: 6, font: '300 13px/1.5 var(--f-body)', color: 'var(--ink-500)' }}>
                    {p.desc}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* — 7 · Stimmen aus Wolfsburg — */}
      <section style={{ background: 'var(--surface-warm)', padding:'96px var(--page-x)', position: 'relative', overflow: 'hidden' }}>
        <img src={window._r(window._r("assets/quote-icon.png"))} alt=""
             style={{ position:'absolute', right:'5%', top:'8%', width:120, opacity:.18, pointerEvents:'none' }}/>
        <div style={{ maxWidth: 1140, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 16, marginBottom: 48 }}>
            <div>
              <span style={{
                font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
                color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
              }}>
                <span style={{width:24, height:1, background:'var(--brand-accent)'}}/>
                Stimmen aus Wolfsburg
              </span>
              <h2 style={{
                margin: '14px 0 0',
                fontFamily: 'var(--f-display)', fontWeight: 300,
                fontSize: 40, lineHeight: 1.1, letterSpacing: '-.01em',
                color: 'var(--ink-900)',
              }}>
                Was Angehörige <em style={{ fontStyle: 'normal', fontWeight: 400, color: 'var(--brand-accent)' }}>über uns sagen.</em>
              </h2>
            </div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '10px 16px', background: 'var(--surface)', border: '1px solid var(--brand-accent)',
            }}>
              <span style={{ letterSpacing: '.06em', color: 'var(--brand-accent)', fontSize: 16 }}>★ ★ ★ ★ ★</span>
              <span style={{ font: '600 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase', color: 'var(--ink-700)' }}>
                Google · 5,0
              </span>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { text: 'Immer erreichbar, einfühlsam, zugänglich, respektvoller Umgang, empathisch, zuverlässig — alles Eigenschaften, die man gerade in einer so sensiblen Zeit unbedingt braucht.', name: 'Wolfgang König' },
              { text: 'Empathie, Gefühl und sich viel Zeit für den Gegenüber nehmen, wird dort sehr groß geschrieben. Um alles wurde sich liebevoll gekümmert.', name: 'Sonja' },
              { text: 'Wir fühlten uns ab der ersten Sekunde super gut aufgehoben. Das Team vom Bestatter TSCHENSE war immer für uns da und hat ganz viel abgenommen.', name: 'Thomas Eberius' },
            ].map((q, i) => (
              <blockquote key={i} style={{
                background: 'var(--surface)', border: '1px solid var(--line)',
                padding: '36px 30px 28px',
                margin: 0, position: 'relative',
              }}>
                <div style={{ font: '300 56px/.6 var(--f-display)', color: 'var(--brand-accent)', marginBottom: 14 }}>„</div>
                <p style={{
                  margin: 0, color: 'var(--ink-700)', fontSize: 15, lineHeight: 1.65,
                  fontStyle: 'italic',
                }}>{q.text}</p>
                <footer style={{
                  marginTop: 22, paddingTop: 14, borderTop: '1px dashed var(--line)',
                  font: '600 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase',
                  color: 'var(--brand-accent)',
                }}>{q.name} · Google-Rezension</footer>
              </blockquote>
            ))}
          </div>

          {/* Herzensmensch-Block */}
          <div style={{
            marginTop: 40, background: 'var(--surface)', border: '1px solid var(--brand-accent)',
            padding: '32px 36px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap',
          }}>
            <div>
              <span style={{
                font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
                color:'var(--brand-accent)',
              }}>Patriz Brünsch in Worten der Angehörigen</span>
              <div style={{
                marginTop: 12,
                fontFamily: 'var(--f-display)', fontWeight: 300,
                fontSize: 44, lineHeight: 1, letterSpacing: '-.01em',
                color: 'var(--ink-900)', fontStyle: 'italic',
              }}>
                „Herzensmensch."
              </div>
            </div>
            <p style={{
              margin: 0, maxWidth: '34ch', color: 'var(--ink-500)',
              fontSize: 14.5, lineHeight: 1.7,
            }}>
              In Kundenbewertungen häufig wiederkehrend — besonders für seine einfühlsamen Trauerreden und die Fähigkeit, schweren Abschieden eine tröstliche Würde zu verleihen.
            </p>
          </div>
        </div>
      </section>

      {/* — 8 · CTA — */}
      <section style={{ background: 'var(--surface)', padding:'72px var(--page-x)', borderTop: '1px solid var(--line)' }}>
        <div style={{
          maxWidth: 1140, margin: '0 auto',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap',
        }}>
          <div>
            <span style={{
              font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
              color:'var(--brand-accent)',
            }}>Lernen Sie uns kennen</span>
            <h3 style={{
              margin: '14px 0 0', font: '300 36px/1.2 var(--f-display)',
              color: 'var(--ink-900)', letterSpacing: '-.01em', maxWidth: '24ch',
            }}>
              Ein Vorgespräch — <em style={{ fontStyle: 'normal', color: 'var(--brand-accent)', fontWeight: 400 }}>in Ruhe, ohne Verpflichtung.</em>
            </h3>
          </div>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <Button variant="ghost">Termin vereinbaren</Button>
            <PhoneCTA/>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { UeberUnsEntwurf, PersonPlaceholder });
