// FriedhoefeHifi.jsx — Hi-Fi Friedhöfe (Split-View) eingebaut in den UI-Kit-Prototyp.
//
// Spiegelt das akzeptierte Wireframe Friedhoefe_V1_KarteSplit 1:1, jetzt mit
// echtem Tschense-Design-System.
// Inhalte aus wf-friedhoefe.jsx — alle Stammdaten weiter Platzhalter und müssen
// vom Auftraggeber bestätigt werden (Adressen, Träger, Öffnungszeiten, Fotos).

const FH_LIST = [
  { name: 'Hauptfriedhof',       stadtteil: 'Heßlingen',    traeger: 'Stadt Wolfsburg', tags: ['Erd','Feuer'],         besonderheit: null, x: 52, y: 28, photo: window._r('assets/photos/cemetery-evening.jpg') },
  { name: 'Nordfriedhof',        stadtteil: 'Wolfsburg',    traeger: 'Stadt Wolfsburg', tags: ['Erd','Feuer'],         besonderheit: 'Muslimisches Grabfeld',         x: 60, y: 18, photo: window._r('assets/photos/grave-autumn.jpg') },
  { name: 'Waldfriedhof',        stadtteil: 'Wolfsburg',    traeger: 'Stadt Wolfsburg', tags: ['Erd','Feuer','Wald'],  besonderheit: 'Kriegsgräber-Gedenkstätte',     x: 38, y: 36, photo: window._r('assets/photos/tree-rose.webp') },
  { name: 'Friedhof St. Annen',  stadtteil: 'Wolfsburg',    traeger: 'Kirchengemeinde', tags: ['Erd'],                 besonderheit: '„Himmel für Kinder" · Sternenkinder', x: 46, y: 46, photo: window._r('assets/photos/church-cross.jpg') },
  { name: 'Friedhof',            stadtteil: 'Fallersleben', traeger: 'Stadt Wolfsburg', tags: ['Erd','Feuer'],         besonderheit: null, x: 18, y: 56, photo: window._r('assets/photos/lily-grave.jpg') },
  { name: 'Friedhof',            stadtteil: 'Vorsfelde',    traeger: 'Stadt Wolfsburg', tags: ['Erd','Feuer'],         besonderheit: null, x: 74, y: 50, photo: window._r('assets/photos/grave-autumn.jpg') },
  { name: 'Friedhof',            stadtteil: 'Detmerode',    traeger: 'Stadt Wolfsburg', tags: ['Erd','Feuer'],         besonderheit: null, x: 40, y: 72, photo: window._r('assets/photos/cemetery-evening.jpg') },
  { name: 'Friedwald · Region',  stadtteil: 'Umgebung',     traeger: 'FriedWald GmbH',  tags: ['Wald'],                besonderheit: 'Naturnahe Beisetzung',           x: 84, y: 78, photo: window._r('assets/photos/tree-rose.webp') },
];

const FH_GRABARTEN = [
  'Reihengrab · Sarg', 'Reihengrab · Urne', 'Wahlgrab · Sarg', 'Wahlgrab · Urne',
  'Naturnahe Grabstätten', 'Muslimisches Grabfeld', 'Sternenkinder · „Himmel für Kinder"',
];

const FH_TAG_LABEL = {
  Erd:   'Erdbestattung',
  Feuer: 'Feuerbestattung',
  Wald:  { label: 'Waldbestattung', vor: true },
  See:   { label: 'Seebestattung',  vor: true },
};

function FH_TagPill({ kind }) {
  const meta = FH_TAG_LABEL[kind];
  const isVor = typeof meta === 'object' && meta.vor;
  const label = typeof meta === 'object' ? meta.label : meta;
  const c = isVor ? 'var(--accent-vorsorge)' : 'var(--brand-accent)';
  return (
    <span style={{
      font:'500 9px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
      padding:'5px 9px', border:`1px solid ${c}`, color:c, background:'var(--surface)',
      whiteSpace:'nowrap',
    }}>{label}</span>
  );
}

/* ─────────────── Stilisierte Karte Wolfsburg ───────────────
   Eigene SVG-Karte (kein externes Tile-Set), Tschense-Palette.
   Pins werden absolut über der Karte positioniert (x/y in %). */

function FriedhoefeMap({ active = 0, onPick }) {
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', background: '#EDE6DC', overflow: 'hidden' }}>
      <svg viewBox="0 0 600 700" preserveAspectRatio="xMidYMid slice"
           style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
        <defs>
          <pattern id="fh-hatch" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
            <line x1="0" y1="0" x2="0" y2="14" stroke="#E6DDD1" strokeWidth="1.4"/>
          </pattern>
        </defs>

        {/* Grundfläche */}
        <rect width="600" height="700" fill="#EDE6DC"/>
        <rect width="600" height="700" fill="url(#fh-hatch)" opacity=".55"/>

        {/* Wasserflächen (Allerkanal / Mittellandkanal) */}
        <path d="M -20 250 Q 150 230, 280 270 T 620 250 L 620 280 Q 460 300, 280 295 T -20 280 Z" fill="#D8D8D2" opacity=".7"/>
        <path d="M -20 470 Q 150 460, 320 480 T 620 470 L 620 500 Q 380 510, 200 500 T -20 510 Z" fill="#D8D8D2" opacity=".55"/>

        {/* Park-/Grünflächen */}
        <ellipse cx="200" cy="180" rx="80" ry="40" fill="#D8DCC8" opacity=".55"/>
        <ellipse cx="430" cy="380" rx="100" ry="60" fill="#D8DCC8" opacity=".5"/>
        <ellipse cx="120" cy="540" rx="70" ry="42" fill="#D8DCC8" opacity=".5"/>
        <ellipse cx="500" cy="600" rx="90" ry="40" fill="#D8DCC8" opacity=".55"/>

        {/* Hauptstraßen */}
        <g stroke="#F5EFE6" fill="none" strokeLinecap="round">
          <path d="M -20 380 Q 150 370, 300 380 T 620 370" strokeWidth="14"/>
          <path d="M 300 -20 Q 290 200, 320 380 T 340 720" strokeWidth="12"/>
          <path d="M -20 150 Q 180 160, 360 130 T 620 110" strokeWidth="8"/>
          <path d="M 480 -20 Q 460 200, 480 380 T 500 720" strokeWidth="8"/>
          <path d="M 120 -20 Q 100 220, 140 460 T 160 720" strokeWidth="8"/>
        </g>

        {/* Nebenstraßen */}
        <g stroke="#E6DED3" fill="none" strokeWidth="2.5" opacity=".8">
          <path d="M 50 60 L 580 80"/>
          <path d="M 60 240 L 560 220"/>
          <path d="M 40 310 L 580 320"/>
          <path d="M 80 430 L 580 440"/>
          <path d="M 60 590 L 580 600"/>
          <path d="M 60 660 L 580 660"/>
          <path d="M 60 -20 L 70 720"/>
          <path d="M 200 -20 L 220 720"/>
          <path d="M 400 -20 L 410 720"/>
          <path d="M 560 -20 L 570 720"/>
        </g>

        {/* Bahnlinie */}
        <line x1="-20" y1="350" x2="620" y2="340" stroke="#B7AFA3" strokeWidth="1.5" strokeDasharray="6 4"/>

        {/* Ortskennungen */}
        <g fontFamily="var(--f-body), Mulish, sans-serif" fontSize="9" letterSpacing="2" fill="#9B9384">
          <text x="320" y="115" textAnchor="middle">WOLFSBURG MITTE</text>
          <text x="120" y="430" textAnchor="middle">FALLERSLEBEN</text>
          <text x="480" y="340" textAnchor="middle">VORSFELDE</text>
          <text x="260" y="540" textAnchor="middle">HEẞLINGEN</text>
          <text x="260" y="640" textAnchor="middle">DETMERODE</text>
          <text x="500" y="650" textAnchor="middle">UMGEBUNG</text>
        </g>
      </svg>

      {/* Pins (absolut über SVG) */}
      {FH_LIST.map((f, i) => {
        const isActive = i === active;
        return (
          <button key={i} type="button" onClick={() => onPick && onPick(i)}
            style={{
              all:'unset', cursor:'pointer',
              position: 'absolute', top: `${f.y}%`, left: `${f.x}%`,
              transform: 'translate(-50%, -100%)',
              zIndex: isActive ? 5 : 2,
            }}>
            <span style={{
              display:'block', position:'relative',
              filter: isActive ? 'drop-shadow(0 6px 10px rgba(199,134,101,.5))' : 'drop-shadow(0 4px 6px rgba(0,0,0,.18))',
            }}>
              <svg width={isActive ? 32 : 24} height={isActive ? 40 : 30} viewBox="0 0 24 32" fill="none">
                <path d="M12 1 C 5 1, 1.5 6.5, 1.5 12 C 1.5 19.5, 12 31, 12 31 C 12 31, 22.5 19.5, 22.5 12 C 22.5 6.5, 19 1, 12 1 Z"
                      fill={isActive ? 'var(--brand-accent)' : '#fff'}
                      stroke="var(--brand-accent)" strokeWidth="1.6"/>
                <circle cx="12" cy="12" r="4" fill={isActive ? '#fff' : 'var(--brand-accent)'}/>
              </svg>
              <span style={{
                position:'absolute', top: isActive ? 8 : 6, left: '50%', transform:'translateX(-50%)',
                font: `600 ${isActive ? 11 : 9}px/1 var(--f-body)`,
                color: isActive ? 'var(--brand-accent)' : '#fff',
                pointerEvents:'none',
              }}>{i + 1}</span>
            </span>
            {isActive && (
              <span style={{
                position:'absolute', top:-4, left:'100%', marginLeft:10, whiteSpace:'nowrap',
                padding:'7px 12px', background:'var(--surface)', border:'1px solid var(--brand-accent)',
                font:'600 9px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
                color:'var(--brand-accent-ink)',
                boxShadow:'0 12px 24px -16px rgba(0,0,0,.3)',
              }}>{f.name} {f.stadtteil}</span>
            )}
          </button>
        );
      })}

      {/* Karten-Label */}
      <span style={{
        position:'absolute', bottom:14, left:14,
        background:'var(--surface)', padding:'7px 14px',
        font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
        border:'1px solid var(--line)', color:'var(--ink-700)',
      }}>Karte · Wolfsburg &amp; Umgebung</span>

      {/* Zoom */}
      <div style={{
        position:'absolute', top:14, right:14,
        display:'flex', flexDirection:'column', boxShadow:'0 8px 18px -12px rgba(0,0,0,.3)',
      }}>
        {['+', '−'].map((s, i) => (
          <span key={s} style={{
            width:32, height:32, background:'var(--surface)',
            border:'1px solid var(--line)', borderTop: i === 0 ? '1px solid var(--line)' : 'none',
            display:'flex', alignItems:'center', justifyContent:'center',
            font:'400 18px/1 var(--f-body)', color:'var(--ink-700)', cursor:'pointer',
          }}>{s}</span>
        ))}
      </div>

      {/* Maßstab unten rechts */}
      <span style={{
        position:'absolute', bottom:14, right:14,
        display:'inline-flex', flexDirection:'column', alignItems:'flex-end', gap:4,
        font:'500 9px/1 var(--f-body)', letterSpacing:'.1em', color:'var(--ink-500)',
      }}>
        <span style={{ width:60, height:6, background:'var(--surface)', border:'1px solid var(--ink-500)' }}/>
        1 km
      </span>
    </div>
  );
}

/* ─────────────── Liste ─────────────── */

function FH_ListItem({ f, i, active, onPick }) {
  const [hover, setHover] = React.useState(false);
  const isActive = i === active;
  return (
    <button type="button"
      onClick={() => onPick(i)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        all:'unset', cursor:'pointer', display:'block', width:'100%',
        textAlign:'left',
        position:'relative',
        background: isActive ? 'var(--surface-warm)' : (hover ? '#FCFAF7' : '#fff'),
        borderBottom:'1px solid var(--line)',
        padding:'18px 24px',
        transition:'background .18s ease',
      }}>
      {isActive && (
        <span style={{ position:'absolute', left:0, top:0, bottom:0, width:3, background:'var(--brand-accent)' }}/>
      )}
      <div style={{ display:'grid', gridTemplateColumns:'92px 1fr auto', gap:18, alignItems:'center' }}>
        <div style={{
          width:92, height:72,
          background:`url('${f.photo}') center/cover`,
          boxShadow:'0 0 0 1px var(--line)',
          position:'relative',
        }}>
          <span style={{
            position:'absolute', top:5, left:5,
            width:22, height:22, background:'var(--surface)',
            display:'flex', alignItems:'center', justifyContent:'center',
            font:'500 11px/1 var(--f-body)', color:'var(--brand-accent)', fontVariantNumeric:'tabular-nums',
          }}>{String(i+1).padStart(2,'0')}</span>
        </div>

        <div>
          <div style={{ font:'400 19px/1.15 var(--f-display)', color:'var(--ink-900)' }}>
            {f.name} <span style={{ color:'var(--ink-500)' }}>{f.stadtteil}</span>
          </div>
          <div style={{ marginTop:4, font:'400 12px/1.4 var(--f-body)', color:'var(--ink-500)' }}>
            {f.traeger}
          </div>
          <div style={{ marginTop:10, display:'flex', gap:6, flexWrap:'wrap', alignItems:'center' }}>
            {f.tags.map(t => <FH_TagPill key={t} kind={t}/>)}
            {f.besonderheit && (
              <span style={{
                display:'inline-flex', alignItems:'center', gap:6,
                font:'400 13px/1 var(--f-script)', color:'var(--brand-accent)',
              }}>
                <span style={{ width:4, height:4, borderRadius:'50%', background:'var(--brand-accent)' }}/>
                {f.besonderheit}
              </span>
            )}
          </div>
        </div>

        <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:8 }}>
          <span style={{
            display:'inline-flex', alignItems:'center', gap:6,
            font:'600 9px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
            color: isActive ? 'var(--brand-accent)' : 'var(--ink-300)',
          }}>
            <PinIcon size={11}/> Pin {String(i+1).padStart(2,'0')}
          </span>
          <span style={{
            display:'inline-flex', alignItems:'center', gap:4,
            font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
            color:'var(--brand-accent)', borderBottom:'1px solid var(--brand-accent)', paddingBottom:3,
          }}>
            Details <ArrowRight size={11}/>
          </span>
        </div>
      </div>
    </button>
  );
}

/* ─────────────── Seite ─────────────── */

function FriedhoefeSplit() {
  const [active, setActive] = React.useState(0);
  const [filter, setFilter] = React.useState('Alle');
  const filters = ['Alle', 'Erd', 'Feuer', 'Wald'];

  const visible = filter === 'Alle'
    ? FH_LIST
    : FH_LIST.filter(f => f.tags.includes(filter));

  return (
    <div>
      {/* — 1 · Hero — */}
      <section style={{
        background:'var(--surface-warm)', padding:'72px var(--page-x) 64px',
        position:'relative', overflow:'hidden',
        backgroundImage:`url('${window._r('assets/photos/friedhof-sommer.jpg')}')`,
        backgroundSize:'cover', backgroundPosition:'center',
        minHeight:'var(--hero-page-h, 520px)',
        display:'flex', alignItems:'center',
      }}>
        <div style={{position:'absolute',inset:0,background:'linear-gradient(90deg,rgba(246,244,239,.96) 0%,rgba(246,244,239,.88) 45%,rgba(246,244,239,.6) 100%)'}}/>
        <div style={{ maxWidth:1140, margin:'0 auto', position:'relative', width:'100%' }}>
          <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)' }}/>
            Service · Friedhöfe
          </span>
          <h1 style={{
            fontFamily:'var(--f-body)', fontWeight:300,
            fontSize:54, lineHeight:1.18, letterSpacing:'-.015em',
            color:'var(--ink-900)', margin:'22px 0 14px', maxWidth:'18ch',
          }}>
            Friedhöfe in <em style={{
              fontStyle:'normal', fontFamily:'var(--f-display)', fontWeight:300,
              color:'var(--brand-accent)', fontSize:60, letterSpacing:'-.02em',
            }}>Wolfsburg und Umgebung.</em>
          </h1>
          <p style={{ color:'var(--ink-700)', fontSize:17, lineHeight:1.7, margin:0, maxWidth:'54ch' }}>
            Eine Übersicht der städtischen und kirchlichen Friedhöfe — mit Karte, Wegbeschreibung und einem Wort zu Besonderheiten.
          </p>
        </div>
      </section>

      {/* Breadcrumb — unter dem Hero */}
      <div style={{
        padding:'14px var(--page-x)', background:'var(--surface-paper)', borderBottom:'1px solid var(--line-soft)',
        font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'var(--ink-500)',
      }}>
        <div style={{maxWidth:'var(--page-max-w)', margin:'0 auto', display:'flex', alignItems:'center', gap:8}}>
          <a href="#" style={{ color:'inherit', textDecoration:'none' }}>Service</a>
          <span style={{ color:'var(--line)' }}>›</span>
          <span style={{ color:'var(--brand-accent)' }}>Friedhöfe in Wolfsburg</span>
        </div>
      </div>

      {/* — 2 · Einleitung + Fakten-Box — */}
      <section style={{ background:'var(--surface)', padding:'88px var(--page-x) 64px' }}>
        <div style={{ maxWidth:1140, margin:'0 auto', display:'grid', gridTemplateColumns:'1.6fr 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)' }}/>
              Friedhöfe im Raum Wolfsburg
            </span>
            <h2 style={{
              margin:'18px 0 18px',
              fontFamily:'var(--f-display)', fontWeight:300,
              fontSize:34, lineHeight:1.25, letterSpacing:'-.005em',
              color:'var(--ink-900)', maxWidth:'24ch',
            }}>
              Falls Sie noch keine Grabstätte haben, schauen Sie sich in Ruhe um.
            </h2>
            <p style={{ margin:'0 0 14px', color:'var(--ink-500)', fontSize:15.5, lineHeight:1.75 }}>
              Hier führen wir die wichtigsten Friedhöfe im Raum Wolfsburg auf. Selbstverständlich können wir auch auf jedem anderen Friedhof Ihrer Wahl für Sie tätig werden.
            </p>
            <p style={{ margin:0, color:'var(--ink-500)', fontSize:15.5, lineHeight:1.75 }}>
              Auf den 25 städtischen Friedhöfen bietet die Friedhofsverwaltung verschiedene Grabarten an, um individuelle Ansprüche zu erfüllen. Bei bestimmten Grabstätten besteht auch die Möglichkeit, sie bereits zu Lebzeiten zu erwerben.
            </p>
          </div>

          {/* Fakten */}
          <aside style={{ background:'var(--surface-warm)', padding:'30px 32px 32px', position:'relative' }}>
            <img src={window._r(window._r("assets/ornament-sprig.png"))} alt=""
                 style={{ position:'absolute', right:18, top:14, width:54, opacity:.35 }}/>
            <span style={{
              font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
              color:'var(--ink-500)',
            }}>Im Überblick</span>
            <div style={{ marginTop:22, display:'flex', flexDirection:'column', gap:18 }}>
              {[
                { n:'25', t:'städtische Friedhöfe' },
                { n:'7',  t:'Grabarten' },
                { n:'∞',  t:'zu Lebzeiten erwerbbar', label:'auch Vorsorge' },
              ].map((it, i) => (
                <div key={i} style={{ display:'grid', gridTemplateColumns:'72px 1fr', gap:18, alignItems:'baseline', borderBottom: i < 2 ? '1px dashed var(--line)' : 'none', paddingBottom: i < 2 ? 14 : 0 }}>
                  <div style={{
                    font:'300 56px/1 var(--f-display)', color:'var(--brand-accent)',
                    textAlign:'right', letterSpacing:'-.02em',
                  }}>{it.n}</div>
                  <div>
                    <div style={{ font:'500 11px/1.2 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'var(--ink-900)' }}>{it.t}</div>
                    {it.label && (
                      <div style={{ marginTop:4, font:'400 13px/1 var(--f-script)', color:'var(--brand-accent)' }}>
                        {it.label}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </aside>
        </div>

        {/* Grabarten-Strip */}
        <div style={{ maxWidth:1140, margin:'48px auto 0', paddingTop:32, borderTop:'1px dashed var(--line)' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:18, flexWrap:'wrap', gap:14 }}>
            <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)' }}/>
              Grabarten auf den städtischen Friedhöfen in Wolfsburg
            </span>
          </div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
            {FH_GRABARTEN.map((g, i) => (
              <span key={i} style={{
                font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
                padding:'10px 14px', border:'1px solid var(--brand-accent)', color:'var(--brand-accent-ink)',
                background:'var(--surface)',
              }}>{g}</span>
            ))}
          </div>
        </div>
      </section>

      {/* — 3 · Split-View · Karte + Liste — */}
      <section style={{ background:'var(--surface)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.05fr 1fr', minHeight:780 }}>
          {/* Karte */}
          <div style={{ position:'relative', borderRight:'1px solid var(--line)', overflow:'hidden' }}>
            <FriedhoefeMap active={active} onPick={setActive}/>
          </div>

          {/* Liste */}
          <div style={{ display:'flex', flexDirection:'column', background:'var(--surface)' }}>
            {/* Filter-Strip */}
            <div style={{
              padding:'18px 24px',
              borderBottom:'1px solid var(--line)',
              background:'var(--surface-warm)',
              display:'flex', alignItems:'center', gap:14, flexWrap:'wrap',
            }}>
              <span style={{
                font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
                color:'var(--ink-700)',
              }}>{visible.length} Standorte</span>
              <span style={{ flex:1 }}/>
              <span style={{
                font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
                color:'var(--ink-500)',
              }}>Filter</span>
              {filters.map(f => {
                const active = filter === f;
                return (
                  <button key={f} type="button" onClick={() => setFilter(f)} style={{
                    all:'unset', cursor:'pointer',
                    font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
                    padding:'8px 12px',
                    background: active ? 'var(--surface-ink)' : '#fff',
                    color:    active ? '#fff' : 'var(--ink-900)',
                    border: `1px solid ${active ? 'var(--surface-ink)' : 'var(--line)'}`,
                  }}>{f}</button>
                );
              })}
            </div>

            {/* Liste */}
            <div style={{ flex:1, overflow:'hidden' }}>
              {visible.map((f, i) => (
                <FH_ListItem key={`${f.name}-${f.stadtteil}`} f={f} i={FH_LIST.indexOf(f)} active={active}
                             onPick={setActive}/>
              ))}
            </div>

            {/* Liste-Footer */}
            <div style={{
              padding:'14px 24px', background:'var(--surface-warm)',
              borderTop:'1px solid var(--line)',
              display:'flex', alignItems:'center', justifyContent:'space-between', gap:14, flexWrap:'wrap',
            }}>
              <span style={{ font:'400 14px/1 var(--f-script)', color:'var(--ink-500)' }}>
                Wir können auch auf anderen Friedhöfen für Sie tätig werden.
              </span>
              <a href="#kontakt" style={{
                font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
                color:'var(--brand-accent)', textDecoration:'none',
                borderBottom:'1px solid var(--brand-accent)', paddingBottom:4,
              }}>Anderen Friedhof anfragen →</a>
            </div>
          </div>
        </div>
      </section>

      {/* — 4 · CTA — */}
      <section style={{ background:'var(--surface)', padding:'72px var(--page-x)', borderBottom:'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)',
            }}>Sie sind unsicher, wo der Abschied stattfinden soll?</span>
            <h3 style={{
              margin:'14px 0 0', font:'300 36px/1.2 var(--f-display)',
              color:'var(--ink-900)', letterSpacing:'-.01em', maxWidth:'26ch',
            }}>
              Wir kennen die Friedhöfe <em style={{ fontStyle:'normal', color:'var(--brand-accent)', fontWeight:400 }}>in der Region.</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, { FriedhoefeSplit, FriedhoefeMap });