// TrauerfallDetail.jsx — Detailseite des Trauerfall-Modus
// Cremehelle Bühne mit Tiefrot-Akzenten. Eine einzige dunkle Telefon-Insel
// trägt die wichtigste Handlung. Schritte hier sind ERWEITERT gegenüber der
// kompakten Steps-Section auf der Home — fünf statt drei Schritte mit mehr Detail.

const TD_STEPS_EXTENDED = [
  { n:1, title:'Anrufen',                  text:'Sie erreichen uns Tag und Nacht. Wir besprechen in Ruhe die Situation, klären Erstes und vereinbaren einen Termin.', active:true },
  { n:2, title:'Überführung',              text:'Wir holen die verstorbene Person aus Krankenhaus, Pflegeheim oder von zuhause ab — zu jeder Tages- und Nachtzeit.' },
  { n:3, title:'Erstes Gespräch',          text:'Bei Ihnen zuhause oder in unseren Räumen besprechen wir Wünsche, Form und Ablauf — in Ruhe, ohne Druck.' },
  { n:4, title:'Wir übernehmen Formales',  text:'Sterbeurkunde, Versicherungen, Rentenstelle, Anzeige — wir koordinieren das für Sie.' },
  { n:5, title:'Abschied gestalten',       text:'Trauerfeier, Beisetzung, Begleitung der Familie — wir richten alles so, dass es zum Menschen passt.' },
];

const TD_TAKE = [
  { title:'Überführung des Verstorbenen',  text:'Aus Krankenhaus, Pflegeheim oder von zuhause — zu jeder Tages- und Nachtzeit.' },
  { title:'Behördengänge & Urkunden',      text:'Sterbeurkunde, Versicherungen, Rentenstelle — wir koordinieren das für Sie.' },
  { title:'Bestattungsorganisation',       text:'Sarg- oder Urnenwahl, Trauerfeier, Beisetzung — in Ruhe geplant, ohne Druck.' },
  { title:'Drucksachen & Anzeige',         text:'Trauerkarten, Zeitungsanzeige, Dankschreiben — gestaltet im persönlichen Gespräch.' },
  { title:'Trauerredner & Musik',          text:'Auf Wunsch vermitteln wir Trauerredner, Musiker, Floristik und einen warmen Empfang nach der Feier.' },
  { title:'Begleitung nach dem Abschied',  text:'Grabpflege, Steinmetz-Vermittlung, Nachlass-Beratung — auch in den Wochen danach.' },
];

const TD_BRING = [
  'Personalausweis der verstorbenen Person',
  'Personalausweis des Auftraggebenden',
  'Familienstammbuch, falls vorhanden',
  'Bei Verheirateten: Heiratsurkunde',
  'Bei Verwitweten: Sterbeurkunde des Ehepartners',
  'Versicherungs- oder Vorsorgeunterlagen',
  'Bestattungsverfügung, falls vorhanden',
  'Nachweis einer Grabstätte, falls vorhanden',
];

function TrauerfallDetail({ onBack, onKontakt }) {
  return (
    <div className="page" style={{background:'var(--mode-traue-bg)'}}>

      {/* Hero */}
      <HeroFoto page="trauerfall" style={{padding:'72px var(--page-x) 64px'}}>
        <ModusEyebrow tone="trauerfall"/>
        <h1 style={{
          fontFamily:'var(--f-body)', fontWeight:300, fontSize:38, lineHeight:1.15, letterSpacing:'-.015em',
          color:'var(--color-fg-inverse)', margin:'20px 0 14px', maxWidth:'18ch', position:'relative',
        }}>
          Was tun, wenn jemand <em style={{fontStyle:'normal', fontFamily:'var(--f-display)', fontWeight:300, color:'var(--mode-traue-island-eyebrow)', fontSize:42}}>gegangen ist.</em>
        </h1>
        <p style={{color:'rgba(255,255,255,.82)', maxWidth:'54ch', fontSize:16, margin:'12px 0 0', lineHeight:1.7, position:'relative'}}>
          In den ersten Stunden nach einem Sterbefall ist vieles zu klären. Sie müssen das nicht allein tragen — wir nehmen Ihnen den Behörden-, Formalitäten- und Organisationsteil ab. Rufen Sie uns an, wann immer Sie soweit sind.
        </p>

        {/* Telefon-Insel — die einzige dunkle Stelle */}
        <div style={{
          background:'var(--mode-traue-island-bg)', color:'var(--mode-traue-island-fg)',
          padding:'32px 36px', margin:'32px 0 0',
          display:'flex', alignItems:'center', gap:28, position:'relative', zIndex:1,
        }}>
          <div style={{width:64, height:64, borderRadius:'50%', background:'var(--mode-traue-cta-bg)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, boxShadow:'0 12px 24px -10px var(--mode-traue-cta-glow)'}}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--surface)" strokeWidth="1.6" strokeLinecap="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          </div>
          <div style={{flex:1}}>
            <div style={{font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--mode-traue-island-eyebrow)', marginBottom:10}}>24 Stunden erreichbar</div>
            <a href="tel:053614222" style={{font:'300 38px/1 var(--f-body)', color:'var(--mode-traue-island-fg)', letterSpacing:'-.01em', fontVariantNumeric:'tabular-nums', textDecoration:'none'}}>05361 · 4 22 22</a>
            <div style={{fontSize:13, color:'var(--mode-traue-island-muted)', marginTop:8}}>Sie müssen kein Formular ausfüllen. Ein Anruf genügt — wir nehmen den Rest in die Hand.</div>
          </div>
          <a href="#" onClick={e=>{e.preventDefault();onKontakt && onKontakt()}} style={{
            font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            color:'var(--mode-traue-island-eyebrow)', textDecoration:'none', paddingBottom:4, borderBottom:'1px solid var(--mode-traue-island-eyebrow)', alignSelf:'center',
          }}>Per Formular →</a>
        </div>
      </HeroFoto>

      {/* Breadcrumbs */}
      <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="#" onClick={e=>{e.preventDefault();onBack && onBack()}} style={{color:'var(--ink-warm-mute)', textDecoration:'none'}}>Home</a>
          &emsp;›&emsp;
          <span style={{color:'var(--mode-traue-accent)'}}>Im Trauerfall</span>
        </div>
      </div>

      {/* Fünf Schritte — erweitert */}
      <section style={{padding:'64px var(--page-x)', background:'var(--surface)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
        <div style={{maxWidth:'var(--page-max-w)', margin:'0 auto'}}>
          <h2 style={{margin:'0 0 6px', font:'300 28px/1.2 var(--f-display)', color:'var(--ink-900)', letterSpacing:'-.005em'}}>Fünf Schritte — in Ihrem Tempo.</h2>
          <p style={{margin:'0 0 28px', color:'var(--ink-500)', fontSize:14, maxWidth:'52ch'}}>Sie müssen sich nichts merken. Wir gehen jeden Schritt mit Ihnen durch — telefonisch oder im persönlichen Gespräch.</p>
          <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:0}}>
            {TD_STEPS_EXTENDED.map((s, i) => (
              <div key={s.n} style={{padding:'24px 24px 24px 0', borderRight: i < TD_STEPS_EXTENDED.length - 1 ? '1px solid var(--line)' : 'none'}}>
                <div style={{
                  width:40, height:40, borderRadius:'50%',
                  border: s.active ? 'none' : '1px solid var(--mode-traue-accent)',
                  background: s.active ? 'var(--mode-traue-cta-bg)' : 'transparent',
                  color: s.active ? '#fff' : 'var(--mode-traue-accent)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  font:'300 16px/1 var(--f-body)', fontVariantNumeric:'tabular-nums', marginBottom:14,
                  boxShadow: s.active ? '0 8px 18px -8px var(--mode-traue-cta-glow)' : 'none',
                }}>{s.n}</div>
                <h3 style={{margin:'0 0 6px', font:'400 18px/1.2 var(--f-display)', color:'var(--ink-900)'}}>{s.title}</h3>
                <p style={{margin:0, color:'var(--ink-500)', fontSize:13.5, lineHeight:1.6, maxWidth:'24ch'}}>{s.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Was wir übernehmen — 6 Punkte (gegenüber 4 in der Doc) */}
      <section style={{padding:'64px var(--page-x)', background:'var(--mode-traue-bg)'}}>
        <div style={{maxWidth:'var(--page-max-w)', margin:'0 auto'}}>
          <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--mode-traue-accent)', display:'inline-flex', alignItems:'center', gap:10}}>
            <span style={{width:24, height:1, background:'var(--mode-traue-accent)', display:'inline-block'}}/>
            Was wir übernehmen
          </span>
          <h2 style={{margin:'14px 0 32px', font:'300 32px/1.15 var(--f-display)', color:'var(--ink-900)', letterSpacing:'-.005em', maxWidth:'24ch'}}>
            Sie müssen <em style={{fontStyle:'normal', fontFamily:'var(--f-display)', color:'var(--mode-traue-accent)', fontWeight:400}}>nichts allein</em> tragen.
          </h2>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:0, borderTop:'1px solid var(--line)'}}>
            {TD_TAKE.map((it, i) => (
              <div key={it.title} style={{
                padding:'22px 32px 22px 0',
                borderBottom:'1px solid var(--line)',
                ...(i % 2 === 1 ? { paddingLeft:32, paddingRight:0, borderLeft:'1px solid var(--line)' } : {}),
              }}>
                <div style={{display:'flex', alignItems:'baseline', gap:14}}>
                  <span style={{color:'var(--mode-traue-accent)', font:'300 22px/1 var(--f-display)'}}>—</span>
                  <h4 style={{margin:0, font:'400 20px/1.2 var(--f-display)', color:'var(--ink-900)'}}>{it.title}</h4>
                </div>
                <p style={{margin:'6px 0 0 30px', color:'var(--ink-500)', fontSize:13.5, lineHeight:1.6}}>{it.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Was Sie mitbringen — cremig-warmer Unter-Block */}
      <section style={{background:'var(--surface-warm)', padding:'56px var(--page-x)'}}>
        <div style={{maxWidth:'var(--page-max-w)', margin:'0 auto'}}>
          <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--mode-traue-accent-ink)', display:'inline-flex', alignItems:'center', gap:10}}>
            <span style={{width:24, height:1, background:'var(--mode-traue-accent-ink)', display:'inline-block'}}/>
            Für unser erstes Gespräch
          </span>
          <h2 style={{margin:'14px 0 22px', font:'300 28px/1.2 var(--f-display)', color:'var(--ink-900)', letterSpacing:'-.005em'}}>Was Sie nach Möglichkeit mitbringen.</h2>
          <ul style={{listStyle:'none', margin:0, padding:0, display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:'8px 32px'}}>
            {TD_BRING.map(t => (
              <li key={t} style={{display:'flex', gap:12, alignItems:'flex-start', padding:'6px 0', fontSize:14, color:'var(--ink-700)', lineHeight:1.55}}>
                <span style={{flexShrink:0, width:6, height:6, marginTop:8, background:'var(--mode-traue-accent-ink)', borderRadius:'50%'}}/>
                {t}
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Sekundär-CTA */}
      <section style={{padding:'48px var(--page-x)', background:'var(--surface)', borderTop:'1px solid var(--line)'}}>
        <div style={{maxWidth:'var(--page-max-w)', margin:'0 auto', display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:32, alignItems:'center'}}>
        <div>
          <h3 style={{margin:'0 0 8px', font:'300 24px/1.25 var(--f-display)', color:'var(--ink-900)', letterSpacing:'-.005em', maxWidth:'24ch'}}>
            Lieber persönlich? <em style={{fontStyle:'normal', fontFamily:'var(--f-display)', color:'var(--mode-traue-accent)', fontWeight:400}}>Wir kommen zu Ihnen.</em>
          </h3>
          <p style={{margin:0, color:'var(--ink-500)', fontSize:14, maxWidth:'48ch', lineHeight:1.7}}>
            Wenn Ihnen das Telefon zu unmittelbar ist, vereinbaren wir gern einen Termin bei Ihnen zuhause oder in unseren Räumen — in Ruhe, ohne Verpflichtung.
          </p>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:10, alignItems:'flex-end'}}>
          <a href="#" onClick={e=>{e.preventDefault();onKontakt && onKontakt()}} style={{
            display:'inline-flex', alignItems:'center', padding:'14px 26px',
            background:'var(--mode-traue-cta-bg)', color:'#fff', textDecoration:'none',
            font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            boxShadow:'0 12px 24px -10px var(--mode-traue-cta-glow), inset 0 1px 0 rgba(255,255,255,.18)',
          }}>Termin vereinbaren</a>
          <a href="#" onClick={e=>{e.preventDefault();onKontakt && onKontakt()}} style={{
            display:'inline-flex', alignItems:'center', padding:'13px 26px',
            background:'transparent', color:'var(--ink-900)', textDecoration:'none',
            font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            border:'1px solid var(--ink-200)',
          }}>Schreiben Sie uns</a>
        </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { TrauerfallDetail });