// VorsorgeDetail.jsx — Detailseite des Vorsorge-Modus
// Cremig-warme Bühne (var(--mode-vor-bg)) mit Salbei-Akzenten.
// Voice: SACHLICH. Verben: selbst entscheiden · festhalten · sichern · regeln · ermitteln · entlasten.
// Niemals "begleiten", "wir nehmen ab" — das sind Trauerfall-Worte.
//
// Architektur-Spiegel zu TrauerfallDetail:
//   Trauerfall  → dunkle Telefon-Insel  (Akut-Handlung)
//   Vorsorge    → helle Kostenplaner-Insel (Planungs-Handlung)
// Beide tragen den Modus konsequent durch — der eine warm-drängend, der andere ruhig-sachlich.

const V_STEPS = [
  { n:1, title:'Festhalten',   text:'Sie entscheiden, wie Ihre Bestattung ablaufen soll — Form, Sarg oder Urne, Trauerfeier, Beisetzungsort. Wir halten Ihre Wünsche schriftlich fest.', active:true },
  { n:2, title:'Ermitteln',    text:'In einem unverbindlichen Gespräch ermitteln wir den voraussichtlichen Kostenrahmen — transparent, ohne Druck.' },
  { n:3, title:'Sichern',      text:'Der Betrag wird auf einem insolvenzgesicherten Treuhandkonto hinterlegt — getrennt von unserem Betriebsvermögen.' },
  { n:4, title:'Aktualisieren',text:'Ihre Vorsorgemappe können Sie jederzeit anpassen. Sie bleibt mit Ihnen — nicht mit uns.' },
];

const V_DECIDE = [
  { title:'Bestattungsform',      text:'Erd-, Feuer-, Baum- oder Seebestattung. Sie entscheiden in Ruhe, welche Form zu Ihnen passt.' },
  { title:'Sarg oder Urne',       text:'Material, Ausführung und Schmuck — schlicht, klassisch oder hochwertig.' },
  { title:'Trauerfeier',          text:'Im kleinen Kreis, in der Trauerhalle oder gänzlich ohne — Sie legen den Rahmen fest.' },
  { title:'Beisetzungsort',       text:'Heimatfriedhof, Wahlgrab, Friedwald, See — wir kennen die Optionen in der Region.' },
  { title:'Musik & Trauerredner', text:'Auf Wunsch vermerken wir Musikstücke, Redner-Wünsche und persönliche Texte.' },
  { title:'Bezugsberechtigte',    text:'Wer wird im Vorsorgefall informiert? Sie tragen Ansprechpersonen ein.' },
];

const V_TREUHAND = [
  'Verwaltung über das Kuratorium Deutsche Bestattungskultur',
  'Insolvenzgesichert — getrennt vom Betriebsvermögen',
  'Verzinsung der hinterlegten Beträge',
  'Im Vorsorgefall unmittelbar verfügbar',
];

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

      {/* Hero */}
      <HeroFoto page="vorsorge" style={{padding:'72px var(--page-x) 64px'}}>
        <ModusEyebrow tone="vorsorge"/>
        <h1 style={{
          fontFamily:'var(--f-body)', fontWeight:300, fontSize:36, lineHeight:1.15, letterSpacing:'-.015em',
          color:'var(--ink-900)', margin:'20px 0 14px', maxWidth:'18ch', position:'relative',
        }}>
          Selbst entschieden, <em style={{fontStyle:'normal', fontFamily:'var(--f-display)', fontWeight:400, color:'var(--mode-vor-accent-ink)', fontSize:40}}>schriftlich festgehalten.</em>
        </h1>
        <p style={{color:'var(--ink-700)', maxWidth:'54ch', fontSize:16, margin:'12px 0 0', lineHeight:1.7, position:'relative'}}>
          Mit der Bestattungsvorsorge sichern Sie die Kosten ab und legen Ihre Wünsche fest. Sie entlasten Ihre Angehörigen organisatorisch und finanziell — in Ihrem Tempo, ohne Verpflichtung.
        </p>

        {/* Kostenplaner-Insel — spiegelt das Muster der Telefon-Insel (Trauerfall) */}
        <div style={{
          background:'var(--mode-vor-island-bg, #2d3a2d)', color:'var(--mode-vor-island-fg, var(--surface))',
          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-vor-cta-bg)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, boxShadow:'0 12px 24px -10px var(--mode-vor-cta-glow)'}}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--surface)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <rect x="4" y="3" width="16" height="18" rx="1"/>
              <path d="M8 7h8M8 11h8M8 15h5"/>
            </svg>
          </div>
          <div style={{flex:1}}>
            <div style={{font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-vorsorge)', marginBottom:10}}>Unverbindlich · in vier Schritten</div>
            <div style={{font:'300 36px/1.1 var(--f-display)', color:'var(--surface)', letterSpacing:'-.01em', whiteSpace:'nowrap'}}>
              Ihren Kostenrahmen <em style={{fontStyle:'normal', color:'var(--accent-vorsorge)', fontWeight:400}}>selbst ermitteln.</em>
            </div>
            <div style={{fontSize:13, color:'rgba(255,255,255,.6)', marginTop:8, maxWidth:'56ch', lineHeight:1.55}}>
              Wählen Sie Bestattungsform, Abschied und Zusatzleistungen und erhalten Sie eine erste Orientierung.
            </div>
          </div>
          <a href="#" onClick={e=>{e.preventDefault();onKostenplaner && onKostenplaner()}} style={{
            font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            color:'var(--accent-vorsorge)', textDecoration:'none', paddingBottom:4, borderBottom:'1px solid var(--accent-vorsorge)', alignSelf:'center', flexShrink:0,
          }}>Kostenrechner starten →</a>
        </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="#" onClick={e=>{e.preventDefault();onBack && onBack()}} style={{color:'var(--ink-warm-mute)', textDecoration:'none'}}>Home</a>
          &emsp;›&emsp;
          <span style={{color:'var(--accent-vorsorge)'}}>Vorsorge</span>
        </div>
      </div>

      {/* Vier Schritte */}
      <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'}}>So funktioniert Vorsorge.</h2>
          <p style={{margin:'0 0 28px', color:'var(--ink-500)', fontSize:14, maxWidth:'52ch'}}>Vier Schritte, die Sie gemeinsam mit uns gehen. Jeder davon ist nach hinten offen — Sie können Ihre Entscheidungen jederzeit anpassen.</p>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:0}}>
            {V_STEPS.map((s, i) => (
              <div key={s.n} style={{padding:'24px 24px 24px 0', borderRight: i < V_STEPS.length - 1 ? '1px solid var(--line)' : 'none'}}>
                <div style={{
                  width:40, height:40, borderRadius:'50%',
                  border: s.active ? 'none' : '1px solid var(--mode-vor-accent)',
                  background: s.active ? 'var(--mode-vor-cta-bg)' : 'transparent',
                  color: s.active ? '#fff' : 'var(--mode-vor-accent-ink)',
                  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-vor-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:'26ch'}}>{s.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Was Sie festlegen — 6 Punkte (Spiegel zu "Was wir übernehmen" im Trauerfall) */}
      <section style={{padding:'64px var(--page-x)', background:'var(--mode-vor-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-vor-accent-ink)', display:'inline-flex', alignItems:'center', gap:10}}>
            <span style={{width:24, height:1, background:'var(--mode-vor-accent-ink)', display:'inline-block'}}/>
            Was Sie festlegen
          </span>
          <h2 style={{margin:'14px 0 32px', font:'300 32px/1.15 var(--f-display)', color:'var(--ink-900)', letterSpacing:'-.005em', maxWidth:'26ch'}}>
            Ihre Vorsorge — <em style={{fontStyle:'normal', fontFamily:'var(--f-display)', color:'var(--mode-vor-accent-ink)', fontWeight:400}}>nach Ihren Wünschen.</em>
          </h2>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:0, borderTop:'1px solid var(--line)'}}>
            {V_DECIDE.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-vor-accent-ink)', 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>

      {/* Treuhand-Block — sachlich, transparent (Spiegel zu "Was Sie mitbringen" im Trauerfall,
          aber inhaltlich umgedreht: hier sagen WIR Ihnen, was wir mit Ihrem Geld tun) */}
      <section style={{background:'var(--surface)', padding:'64px var(--page-x)', borderTop:'1px solid var(--line)'}}>
        <div style={{maxWidth:'var(--page-max-w)', margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'start'}}>
          <div>
            <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--mode-vor-accent-ink)', display:'inline-flex', alignItems:'center', gap:10}}>
              <span style={{width:24, height:1, background:'var(--mode-vor-accent-ink)', display:'inline-block'}}/>
              Wo Ihr Geld liegt
            </span>
            <h2 style={{margin:'14px 0 18px', font:'300 32px/1.15 var(--f-display)', color:'var(--ink-900)', letterSpacing:'-.005em', maxWidth:'22ch'}}>
              Treuhänderisch verwahrt — <em style={{fontStyle:'normal', fontFamily:'var(--f-display)', color:'var(--mode-vor-accent-ink)', fontWeight:400}}>nicht bei uns.</em>
            </h2>
            <p style={{margin:'0 0 16px', color:'var(--ink-500)', fontSize:16, lineHeight:1.7, maxWidth:'48ch'}}>
              Der Vorsorgebetrag wird beim Kuratorium Deutsche Bestattungskultur hinterlegt. Das Geld ist dort insolvenzgesichert verwahrt, getrennt von unserem Betriebsvermögen — und im Vorsorgefall sofort verfügbar.
            </p>
          </div>
          <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:14}}>
            {V_TREUHAND.map(t => (
              <li key={t} style={{display:'flex', alignItems:'flex-start', gap:14, fontSize:15, color:'var(--ink-700)', lineHeight:1.5}}>
                <span style={{width:24, height:24, borderRadius:'50%', background:'var(--mode-vor-check)', color:'var(--mode-vor-accent-ink)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:1}}>
                  <svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 10l3 3 7-7"/></svg>
                </span>
                {t}
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Kostenplaner — embedded */}
      <KostenplanerSection embedded onAnfrage={onKontakt}/>

      {/* Sekundär-CTA */}
      <section style={{padding:'48px var(--page-x)', background:'var(--mode-vor-bg)', 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:'26ch'}}>
            Möchten Sie persönlich sprechen? <em style={{fontStyle:'normal', fontFamily:'var(--f-display)', color:'var(--mode-vor-accent-ink)', fontWeight:400}}>Vereinbaren Sie einen Termin.</em>
          </h3>
          <p style={{margin:0, color:'var(--ink-500)', fontSize:14, maxWidth:'48ch', lineHeight:1.7}}>
            Eine Vorsorge-Beratung ist immer unverbindlich. Sie können Ihre Entscheidungen in Ruhe treffen — bei uns oder bei Ihnen zuhause.
          </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-vor-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-vor-cta-glow), inset 0 1px 0 rgba(255,255,255,.18)',
          }}>Termin vereinbaren</a>
        </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { VorsorgeDetail });