// Kostenplaner.jsx — Step-flow für die unverbindliche Kostenorientierung
// Eine ruhige, klare Annäherung — keine Werbesprache, kein Druck.

/* ───────────── data ───────────── */

const ART = [
  { id:'feuer', name:'Feuerbestattung', sub:'Die häufigste Form. Sarg-Aussegnung, Einäscherung, Urnenbeisetzung.',
    img:window._r('assets/photos/mourners-coffin.jpg'), from:2400, to:4400 },
  { id:'erde',  name:'Erdbestattung',   sub:'Klassischer Abschied im Sarg mit fester Grabstätte.',
    img:window._r('assets/photos/grave-autumn.jpg'), from:4000, to:7200 },
  { id:'baum',  name:'Baumbestattung',  sub:'Naturnahe Urnen-Beisetzung im Wurzelbereich eines Baumes.',
    img:window._r('assets/photos/cemetery-evening.jpg'), from:3500, to:6200 },
  { id:'see',   name:'Seebestattung',   sub:'Urnen-Beisetzung auf dem Wasser. Schlicht und würdevoll.',
    img:window._r('assets/photos/sea-misty.jpg'), from:3300, to:5800 },
];

const FEIER = [
  { id:'keine', name:'Keine Trauerfeier',  sub:'Schlichte Beisetzung im engsten Kreis.',                from:0,    to:0 },
  { id:'klein', name:'Im kleinen Kreis',   sub:'Aussegnung am Sarg / der Urne — Familie & Nahestehende.', from:550,  to:1100 },
  { id:'gross', name:'In der Trauerhalle', sub:'Größere Feier mit Musik, Rede und Empfang.',             from:1400, to:2600 },
];

const SARG = [
  { id:'std',   name:'Standard',  sub:'Schlichte, hochwertige Ausführung.', from:0,    to:0 },
  { id:'holz',  name:'Naturholz', sub:'Eiche, Kiefer, Buche — unbehandelt.', from:400,  to:850 },
  { id:'prem',  name:'Edelholz',  sub:'Edelholz, Innenausstattung, Beschläge.', from:950, to:1800 },
];
const URNE = [
  { id:'std',   name:'Standard',  sub:'Schlichte Naturholz-Urne.',        from:0,   to:0 },
  { id:'kera',  name:'Keramik',   sub:'Handgetöpferte Keramik-Urne.',     from:180, to:380 },
  { id:'bio',   name:'Bio-Urne',  sub:'Naturmaterial, vollständig kompostierbar.', from:120, to:260 },
];

const EXTRAS = [
  { id:'aussegnung', name:'Aussegnung am Sarg / an der Urne', from:200, to:500 },
  { id:'druck',      name:'Trauerdrucksachen (Karten, Anzeige)', from:180, to:450 },
  { id:'blumen',     name:'Blumenschmuck (Sarg/Urne)', from:200, to:450 },
  { id:'beileid',    name:'Beileidsblumen für Gäste',  from:150, to:350 },
  { id:'gedenk',     name:'Gedenkstein / Grabstein',   from:1200, to:3500 },
  { id:'begleit',    name:'Persönliche Trauerbegleitung im Nachgang', from:280, to:680 },
];

const eur = n => n.toLocaleString('de-DE', { style:'currency', currency:'EUR', maximumFractionDigits:0 });

function calcRange(state) {
  let lo = 0, hi = 0;
  const a = ART.find(x => x.id === state.art);
  if (a) { lo += a.from; hi += a.to; }
  const f = FEIER.find(x => x.id === state.feier);
  if (f) { lo += f.from; hi += f.to; }
  if (state.art === 'erde') {
    const s = SARG.find(x => x.id === state.sarg);
    if (s) { lo += s.from; hi += s.to; }
  } else {
    const u = URNE.find(x => x.id === state.urne);
    if (u) { lo += u.from; hi += u.to; }
  }
  state.extras.forEach(id => {
    const e = EXTRAS.find(x => x.id === id);
    if (e) { lo += e.from; hi += e.to; }
  });
  return { lo, hi };
}

/* ───────────── radio card ───────────── */

function RadioCard({ checked, name, sub, right, onClick, img }) {
  return (
    <button type="button" onClick={onClick}
      style={{
        all:'unset', cursor:'pointer', display:'flex', alignItems:'stretch',
        background:'var(--surface)',
        border: checked ? '1px solid var(--accent-vorsorge)' : '1px solid var(--line)',
        boxShadow: checked ? 'inset 0 0 0 1px var(--accent-vorsorge)' : 'none',
        transition:'border-color .18s, box-shadow .18s, background .18s',
        textAlign:'left', width:'100%',
      }}
      onMouseEnter={e=>{ if(!checked) e.currentTarget.style.borderColor = 'var(--ink-200)'; }}
      onMouseLeave={e=>{ if(!checked) e.currentTarget.style.borderColor = 'var(--line)'; }}>
      {img && <div style={{flexShrink:0, width:96, background:`url('${img}') center/cover`, alignSelf:'stretch'}}/>}
      <div style={{flex:1, padding:'18px 22px', display:'flex', alignItems:'center', gap:18}}>
        <span style={{
          width:18, height:18, borderRadius:'50%',
          border: checked ? '1px solid var(--accent-vorsorge)' : '1px solid var(--ink-200)',
          background:'var(--surface)', position:'relative', flexShrink:0,
        }}>
          {checked && <span style={{position:'absolute', inset:3, borderRadius:'50%', background:'var(--accent-vorsorge)'}}/>}
        </span>
        <div style={{flex:1, minWidth:0}}>
          <div style={{font:'400 19px/1.2 var(--f-display)', color:'var(--ink-900)', marginBottom:4}}>{name}</div>
          <div style={{fontSize:13, color:'var(--ink-500)', lineHeight:1.55}}>{sub}</div>
        </div>
        {right && <div style={{textAlign:'right', fontSize:13, color:'var(--ink-500)', fontVariantNumeric:'tabular-nums', whiteSpace:'nowrap'}}>{right}</div>}
      </div>
    </button>
  );
}

function CheckCard({ checked, name, right, onClick }) {
  return (
    <button type="button" onClick={onClick}
      style={{
        all:'unset', cursor:'pointer', display:'flex', alignItems:'center', gap:18,
        background:'var(--surface)',
        border: checked ? '1px solid var(--accent-vorsorge)' : '1px solid var(--line)',
        boxShadow: checked ? 'inset 0 0 0 1px var(--accent-vorsorge)' : 'none',
        padding:'18px 22px', width:'100%',
        transition:'border-color .18s, box-shadow .18s',
      }}
      onMouseEnter={e=>{ if(!checked) e.currentTarget.style.borderColor = 'var(--ink-200)'; }}
      onMouseLeave={e=>{ if(!checked) e.currentTarget.style.borderColor = 'var(--line)'; }}>
      <span style={{
        width:18, height:18, flexShrink:0,
        background: checked ? 'var(--accent-vorsorge)' : '#fff',
        border: checked ? '1px solid var(--accent-vorsorge)' : '1px solid var(--ink-200)',
        display:'flex', alignItems:'center', justifyContent:'center',
      }}>
        {checked && <svg width="12" height="12" viewBox="0 0 20 20" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 10l3 3 7-7"/></svg>}
      </span>
      <div style={{flex:1, font:'400 17px/1.2 var(--f-display)', color:'var(--ink-900)'}}>{name}</div>
      <div style={{fontSize:13, color:'var(--ink-500)', fontVariantNumeric:'tabular-nums', whiteSpace:'nowrap'}}>{right}</div>
    </button>
  );
}

/* ───────────── step pages ───────────── */

function StepArt({ value, onChange }) {
  return (
    <div>
      <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-vorsorge)'}}>Schritt 1 von 4</span>
      <h2 style={{margin:'14px 0 8px', font:'300 36px/1.15 var(--f-display)', letterSpacing:'-.01em', color:'var(--ink-900)'}}>
        Welche <em style={{fontStyle:'normal', color:'var(--accent-vorsorge)', fontWeight:400}}>Bestattungsform</em> haben Sie im Sinn?
      </h2>
      <p style={{margin:'0 0 28px', color:'var(--ink-500)', fontSize:15, lineHeight:1.7, maxWidth:'52ch'}}>
        Sie können in den nächsten Schritten noch alles anpassen. Falls Sie unsicher sind, beraten wir Sie gern persönlich.
      </p>
      <div style={{display:'flex', flexDirection:'column', gap:12}}>
        {ART.map(a => (
          <RadioCard key={a.id} checked={value===a.id} name={a.name} sub={a.sub} img={a.img}
            right={<>ab&nbsp;{eur(a.from)}</>}
            onClick={()=>onChange(a.id)}/>
        ))}
      </div>
    </div>
  );
}

function StepFeier({ value, onChange }) {
  return (
    <div>
      <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-vorsorge)'}}>Schritt 2 von 4</span>
      <h2 style={{margin:'14px 0 8px', font:'300 36px/1.15 var(--f-display)', letterSpacing:'-.01em', color:'var(--ink-900)'}}>
        Wie möchten Sie <em style={{fontStyle:'normal', color:'var(--accent-vorsorge)', fontWeight:400}}>Abschied</em> nehmen?
      </h2>
      <p style={{margin:'0 0 28px', color:'var(--ink-500)', fontSize:15, lineHeight:1.7, maxWidth:'52ch'}}>
        Eine Trauerfeier kann ganz schlicht im Kreis der Nahestehenden stattfinden — oder größer mit Musik und Rede in unserer Trauerhalle.
      </p>
      <div style={{display:'flex', flexDirection:'column', gap:12}}>
        {FEIER.map(f => (
          <RadioCard key={f.id} checked={value===f.id} name={f.name} sub={f.sub}
            right={f.from === 0 ? '— inklusive' : <>+&nbsp;{eur(f.from)}</>}
            onClick={()=>onChange(f.id)}/>
        ))}
      </div>
    </div>
  );
}

function StepBehältnis({ state, onChange }) {
  const isErd = state.art === 'erde';
  const opts  = isErd ? SARG : URNE;
  const key   = isErd ? 'sarg' : 'urne';
  const title = isErd ? 'Sarg' : 'Urne';
  return (
    <div>
      <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-vorsorge)'}}>Schritt 3 von 4</span>
      <h2 style={{margin:'14px 0 8px', font:'300 36px/1.15 var(--f-display)', letterSpacing:'-.01em', color:'var(--ink-900)'}}>
        {title} <em style={{fontStyle:'normal', color:'var(--accent-vorsorge)', fontWeight:400}}>nach Ihrem Wunsch.</em>
      </h2>
      <p style={{margin:'0 0 28px', color:'var(--ink-500)', fontSize:15, lineHeight:1.7, maxWidth:'52ch'}}>
        Wir führen ein ruhiges Sortiment — von schlichten Naturholzausführungen bis hin zu hochwertigen Modellen. Eine Auswahl zur ersten Orientierung.
      </p>
      <div style={{display:'flex', flexDirection:'column', gap:12}}>
        {opts.map(o => (
          <RadioCard key={o.id} checked={state[key]===o.id} name={o.name} sub={o.sub}
            right={o.from === 0 ? '— inklusive' : <>+&nbsp;{eur(o.from)}</>}
            onClick={()=>onChange(key, o.id)}/>
        ))}
      </div>
    </div>
  );
}

function StepExtras({ value, onToggle }) {
  return (
    <div>
      <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-vorsorge)'}}>Schritt 4 von 4</span>
      <h2 style={{margin:'14px 0 8px', font:'300 36px/1.15 var(--f-display)', letterSpacing:'-.01em', color:'var(--ink-900)'}}>
        Begleitende <em style={{fontStyle:'normal', color:'var(--accent-vorsorge)', fontWeight:400}}>Leistungen.</em>
      </h2>
      <p style={{margin:'0 0 28px', color:'var(--ink-500)', fontSize:15, lineHeight:1.7, maxWidth:'52ch'}}>
        Wählen Sie aus, was zu Ihrer Vorstellung passt — Sie können jederzeit etwas hinzufügen oder weglassen. Nichts davon ist verpflichtend.
      </p>
      <div style={{display:'flex', flexDirection:'column', gap:12}}>
        {EXTRAS.map(e => (
          <CheckCard key={e.id} checked={value.includes(e.id)} name={e.name}
            right={<>+&nbsp;{eur(e.from)} – {eur(e.to)}</>}
            onClick={()=>onToggle(e.id)}/>
        ))}
      </div>
    </div>
  );
}

function Summary({ state, onAnfrage, onRestart }) {
  const { lo, hi } = calcRange(state);
  const art  = ART.find(x=>x.id===state.art);
  const feier= FEIER.find(x=>x.id===state.feier);
  const beh  = state.art==='erde' ? SARG.find(x=>x.id===state.sarg) : URNE.find(x=>x.id===state.urne);
  const extras = EXTRAS.filter(e => state.extras.includes(e.id));

  return (
    <div>
      <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-vorsorge)'}}>Ihre Auswahl</span>
      <h2 style={{margin:'14px 0 6px', font:'300 40px/1.1 var(--f-display)', letterSpacing:'-.01em', color:'var(--ink-900)'}}>
        Eine erste <em style={{fontStyle:'normal', color:'var(--accent-vorsorge)', fontWeight:400}}>Orientierung.</em>
      </h2>
      <p style={{margin:'0 0 28px', color:'var(--ink-500)', fontSize:15, lineHeight:1.7, maxWidth:'58ch'}}>
        Dies ist eine Schätzung auf Basis Ihrer Angaben — kein verbindliches Angebot. Das verbindliche Angebot erstellen wir transparent im persönlichen Gespräch.
      </p>

      <div style={{
        background:'var(--surface)', border:'1px solid var(--accent-vorsorge)',
        padding:'32px 36px', marginBottom:24,
      }}>
        <div style={{font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--ink-300)', marginBottom:10}}>Geschätzte Gesamtkosten</div>
        <div style={{font:'200 56px/1 var(--f-body)', color:'var(--ink-900)', letterSpacing:'-.02em', fontVariantNumeric:'tabular-nums'}}>
          {eur(lo)} <span style={{color:'var(--ink-300)', fontWeight:200}}>–</span> {eur(hi)}
        </div>
        <div style={{marginTop:14, fontSize:13, color:'var(--ink-500)', maxWidth:'42ch', lineHeight:1.6}}>
          Inklusive aller von Ihnen ausgewählten Leistungen. Friedhofsgebühren und kommunale Kosten kommen je nach Ort hinzu.
        </div>
      </div>

      <div style={{background:'var(--surface)', border:'1px solid var(--line)', marginBottom:28}}>
        {[
          { k:'Bestattungsform', v: art ? `${art.name}` : '—', range: art && `${eur(art.from)} – ${eur(art.to)}` },
          { k:'Abschied',        v: feier ? feier.name : '—',   range: feier && (feier.from===0 ? '— inklusive' : `+ ${eur(feier.from)} – ${eur(feier.to)}`) },
          { k: state.art==='erde' ? 'Sarg' : 'Urne', v: beh ? beh.name : '—', range: beh && (beh.from===0 ? '— inklusive' : `+ ${eur(beh.from)} – ${eur(beh.to)}`) },
          ...extras.map(e => ({ k:'Zusatzleistung', v:e.name, range:`+ ${eur(e.from)} – ${eur(e.to)}` })),
        ].map((r, i, a) => (
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'180px 1fr 200px', gap:24, alignItems:'baseline',
            padding:'16px 24px',
            borderBottom: i < a.length - 1 ? '1px solid var(--line)' : '0',
          }}>
            <span style={{font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-sm)', textTransform:'uppercase', color:'var(--ink-300)'}}>{r.k}</span>
            <span style={{font:'400 17px/1.3 var(--f-display)', color:'var(--ink-900)'}}>{r.v}</span>
            <span style={{textAlign:'right', font:'300 14px/1 var(--f-body)', color:'var(--ink-500)', fontVariantNumeric:'tabular-nums'}}>{r.range}</span>
          </div>
        ))}
        {extras.length === 0 && (
          <div style={{padding:'16px 24px', color:'var(--ink-300)', fontSize:13, borderTop:'1px solid var(--line)'}}>Keine Zusatzleistungen ausgewählt.</div>
        )}
      </div>

      <div style={{
        background:'var(--surface-warm)', padding:'36px 36px', border:'1px solid var(--line-soft)',
        display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:32, alignItems:'center',
      }}>
        <div>
          <h3 style={{margin:'0 0 8px', font:'400 26px/1.2 var(--f-display)', color:'var(--ink-900)'}}>
            Ein <em style={{fontStyle:'normal', color:'var(--accent-vorsorge)', fontWeight:400}}>verbindliches Angebot</em> im persönlichen Gespräch.
          </h3>
          <p style={{margin:0, color:'var(--ink-500)', fontSize:14, lineHeight:1.65, maxWidth:'42ch'}}>
            Sie senden uns Ihre Auswahl, wir erstellen Ihr verbindliches Angebot — transparent, ohne Verpflichtung. Erreichbar unter 05361 · 4 22 22.
          </p>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          <button type="button" onClick={onAnfrage} style={{
              all:'unset', cursor:'pointer',
              font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
              padding:'14px 26px', background:'var(--accent-vorsorge)', color:'#fff',
              border:'2px solid var(--accent-vorsorge)', transition:'background .18s, border-color .18s',
            }}
            onMouseEnter={e=>{e.currentTarget.style.background='var(--accent-vorsorge-ink)';e.currentTarget.style.borderColor='var(--accent-vorsorge-ink)'}}
            onMouseLeave={e=>{e.currentTarget.style.background='var(--accent-vorsorge)';e.currentTarget.style.borderColor='var(--accent-vorsorge)'}}>
            Beratung anfragen
          </button>
          <button type="button" onClick={onRestart} style={{
            all:'unset', cursor:'pointer',
            font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            color:'var(--ink-500)', padding:'8px 0', alignSelf:'flex-start',
          }}>Auswahl zurücksetzen</button>
        </div>
      </div>
    </div>
  );
}

/* ───────────── left rail: progress + live total ───────────── */

function Sidebar({ step, state, totalSteps }) {
  const { lo, hi } = calcRange(state);
  const stepLabels = ['Bestattungsform', 'Abschied', state.art==='erde' ? 'Sarg' : 'Urne', 'Zusatzleistungen'];
  return (
    <aside style={{
      background:'var(--surface-ink)', color:'var(--color-fg-inverse)',
      padding:'48px 36px', display:'flex', flexDirection:'column', gap:36,
      minHeight:680, position:'relative', overflow:'hidden',
    }}>
      <img src={window._r(window._r("assets/ornament-branch-tall.png"))} alt=""
           style={{position:'absolute', right:-40, top:'50%', transform:'translateY(-50%)', height:360, opacity:.10, pointerEvents:'none'}}/>
      <div style={{position:'relative'}}>
        <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-vorsorge)'}}>Kostenplaner</span>
        <h3 style={{margin:'12px 0 0', font:'300 28px/1.15 var(--f-display)', color:'var(--color-fg-inverse)'}}>In vier Schritten zu einem Kostenrahmen.</h3>
      </div>

      <div style={{position:'relative', display:'flex', flexDirection:'column', gap:14}}>
        {stepLabels.map((l, i) => {
          const done = i < step;
          const active = i === step;
          return (
            <div key={i} style={{display:'flex', alignItems:'center', gap:14, opacity: active || done ? 1 : .5}}>
              <span style={{
                width:32, height:32, borderRadius:'50%', flexShrink:0,
                border:'1px solid var(--accent-vorsorge)',
                background: done ? 'var(--accent-vorsorge)' : active ? 'var(--accent-vorsorge-soft)' : 'transparent',
                color: done ? '#fff' : 'var(--accent-vorsorge)',
                display:'flex', alignItems:'center', justifyContent:'center',
                font:'300 14px/1 var(--f-body)', fontVariantNumeric:'tabular-nums',
              }}>{done ? <svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M5 10l3 3 7-7"/></svg> : i+1}</span>
              <span style={{font: active ? '500 15px/1.3 var(--f-body)' : '300 15px/1.3 var(--f-body)', color: active ? 'var(--color-fg-inverse)' : 'var(--ink-warm-dim)', letterSpacing:'.02em'}}>{l}</span>
            </div>
          );
        })}
      </div>

      <div style={{borderTop:'1px solid var(--on-dark-line)', paddingTop:24, position:'relative'}}>
        <div style={{font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--ink-warm-mute)', marginBottom:10}}>Aktueller Zwischenstand</div>
        <div style={{font:'200 32px/1 var(--f-body)', color:'var(--color-fg-inverse)', letterSpacing:'-.01em', fontVariantNumeric:'tabular-nums'}}>
          {lo === 0 ? '—' : <>{eur(lo)} <span style={{color:'var(--ink-warm-mute)'}}>–</span> {eur(hi)}</>}
        </div>
        <div style={{marginTop:8, fontSize:12, color:'var(--ink-warm-mute)', lineHeight:1.5, maxWidth:'30ch'}}>
          Schätzung. Friedhofsgebühren je nach Ort zusätzlich.
        </div>
      </div>

      <div style={{marginTop:'auto', position:'relative'}}>
        <div style={{font:'600 9px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--ink-warm-mute)', marginBottom:10}}>Lieber persönlich besprechen?</div>
        <div style={{font:'300 26px/1 var(--f-body)', color:'var(--color-fg-inverse)', letterSpacing:'-.01em', fontVariantNumeric:'tabular-nums', marginBottom:6}}>05361 · 4 22 22</div>
        <div style={{fontSize:12, color:'var(--ink-warm-mute)'}}>Tag &amp; Nacht erreichbar</div>
      </div>
    </aside>
  );
}

/* ───────────── main: KostenplanerSection ───────────── */

function KostenplanerSection({ onAnfrage, onBack, embedded = false }) {
  const [step, setStep] = React.useState(0);
  const [state, setState] = React.useState({
    art:'feuer', feier:'klein', sarg:'std', urne:'std', extras:['aussegnung','druck'],
  });

  const update = (k, v) => setState(s => ({ ...s, [k]:v }));
  const toggleExtra = id => setState(s => ({ ...s, extras: s.extras.includes(id) ? s.extras.filter(x=>x!==id) : [...s.extras, id] }));
  const reset = () => { setState({ art:'feuer', feier:'klein', sarg:'std', urne:'std', extras:['aussegnung','druck'] }); setStep(0); };

  const totalSteps = 4;
  const onSummary = step >= totalSteps;

  return (
    <>
      {!embedded && (
        <>
          {/* Hero — gleiche Höhe wie alle Unterseiten (--hero-page-h) */}
          <HeroFoto page="kostenplaner" style={{padding:'72px var(--page-x) 64px'}}>
            <ModusEyebrow tone="vorsorge"/>
            <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', position:'relative',
            }}>
              Ihren Kostenrahmen <em style={{fontStyle:'normal', fontFamily:'var(--f-display)', fontWeight:400, color:'var(--accent-vorsorge-ink)', fontSize:42}}>selbst ermitteln.</em>
            </h1>
            <p style={{color:'var(--ink-700)', maxWidth:'54ch', fontSize:16, margin:'12px 0 0', lineHeight:1.7, position:'relative'}}>
              In vier Schritten wählen Sie Bestattungsform, Abschied und Zusatzleistungen. Sie erhalten eine erste Orientierung — unverbindlich, ohne Anmeldung.
            </p>
          </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)'}}>Kostenrechner</span>
            </div>
          </div>
        </>
      )}

      <section style={{background:'var(--surface-paper)', padding:'56px var(--page-x) 96px'}}>
      <div style={{maxWidth:1220, margin:'0 auto'}}>

        <div style={{display:'grid', gridTemplateColumns:'360px 1fr', gap:0, background:'var(--surface)', border:'1px solid var(--line)'}}>
          <Sidebar step={onSummary ? totalSteps - 1 : step} state={state} totalSteps={totalSteps}/>
          <div style={{padding:'56px 56px 40px', display:'flex', flexDirection:'column', minHeight:680}}>
            <div style={{flex:1}}>
              {!onSummary && step===0 && <StepArt   value={state.art}   onChange={v=>update('art', v)}/>}
              {!onSummary && step===1 && <StepFeier value={state.feier} onChange={v=>update('feier', v)}/>}
              {!onSummary && step===2 && <StepBehältnis state={state} onChange={update}/>}
              {!onSummary && step===3 && <StepExtras value={state.extras} onToggle={toggleExtra}/>}
              {onSummary && <Summary state={state} onAnfrage={onAnfrage} onRestart={reset}/>}
            </div>

            {!onSummary && (
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:48, paddingTop:24, borderTop:'1px solid var(--line)'}}>
                <button type="button" onClick={()=>setStep(s => Math.max(0, s-1))}
                  disabled={step===0}
                  style={{
                    all:'unset',
                    cursor: step===0 ? 'default' : 'pointer',
                    opacity: step===0 ? .35 : 1,
                    font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
                    color:'var(--ink-500)', padding:'14px 0',
                  }}>← Zurück</button>
                <button type="button" onClick={()=>setStep(s => s+1)} style={{
                    all:'unset', cursor:'pointer',
                    font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
                    padding:'14px 26px', background:'var(--accent-vorsorge)', color:'#fff',
                    border:'2px solid var(--accent-vorsorge)', transition:'background .18s, border-color .18s',
                  }}
                  onMouseEnter={e=>{e.currentTarget.style.background='var(--accent-vorsorge-ink)';e.currentTarget.style.borderColor='var(--accent-vorsorge-ink)'}}
                  onMouseLeave={e=>{e.currentTarget.style.background='var(--accent-vorsorge)';e.currentTarget.style.borderColor='var(--accent-vorsorge)'}}>
                  {step === totalSteps - 1 ? 'Zur Übersicht →' : 'Weiter →'}
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
    </>
  );
}

Object.assign(window, { KostenplanerSection });
