// Sections.jsx — Service-3-up, Steps, Quote, Leistungen-cards, About

const HouseIcon = () => (<svg width={32} height={32} viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 26 L4 14 L16 6 L28 14 L28 26 Z"/><path d="M12 26 L12 18 L20 18 L20 26"/></svg>);
const ScreenIcon = () => (<svg width={32} height={32} viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="5" y="7" width="22" height="18" rx="1"/><path d="M5 12 L27 12 M10 17 L22 17 M10 21 L18 21"/></svg>);
const ClockSvc = () => (<svg width={32} height={32} viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="16" cy="16" r="11"/><path d="M16 8 L16 16 L21 19"/></svg>);
const CheckIcon = () => (<svg width={14} height={14} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 10l3 3 7-7"/></svg>);

function ServiceCard({ icon, title, body, onClick }) {
  return (
    <div style={{
      background:'var(--surface-cool)', border:'1px solid var(--line-soft)',
      padding:'40px 28px 30px', textAlign:'center',
      display:'flex', flexDirection:'column', alignItems:'center', gap:12,
    }}>
      <div style={{
        width:68, height:68, borderRadius:'50%', background:'var(--surface)',
        display:'flex', alignItems:'center', justifyContent:'center',
        color:'var(--brand-accent)',
      }}>{icon}</div>
      <h4 style={{margin:'8px 0 0', font:'400 22px/1.2 var(--f-display)', color:'var(--ink-900)'}}>{title}</h4>
      <p style={{margin:0, fontSize:14, color:'var(--ink-500)', lineHeight:1.6, maxWidth:'32ch'}}>{body}</p>
      <a href="#" onClick={e=>{e.preventDefault();onClick && onClick()}} style={{
        marginTop:10, font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
        color:'var(--brand-accent)', textDecoration:'none', padding:'8px 0',
        borderBottom:'1px solid var(--brand-accent)',
      }}>Mehr erfahren</a>
    </div>
  );
}

function ServicesSection({ onNav }) {
  return (
    <section style={{padding:'100px 0 0 10px', background:'var(--surface)'}}>
      <SectionHeader
        tone="trauerfall"
        eyebrow="Was tun im Trauerfall"
        title="Drei Schritte,"
        accent="nicht mehr."
        sub="Wir nehmen Ihnen die ersten Sorgen ab — Schritt für Schritt."
      />
    </section>
  );
}

function TrustBar() {
  return (
    <div style={{padding:0, background:'var(--surface-warm)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
      <div style={{
        display:'grid', gridTemplateColumns:'repeat(3, 1fr)', width:'100%',
      }}>
        {[
          'Persönlich & erreichbar',
          'Klare Preise',
          'Begleitung im Trauerfall'
        ].map((t, i) => (
          <div key={i} style={{
            padding:'26px 40px', borderRight: i < 2 ? '1px solid var(--line)' : '0',
            display:'flex', alignItems:'center', justifyContent:'center', gap:14,
            font:'500 13px/1.3 var(--f-body)', letterSpacing:'.18em', textTransform:'uppercase', color:'var(--ink-900)',
          }}>
            <span style={{width:28, height:28, borderRadius:'50%', flexShrink:0, background:'var(--brand-accent-soft)', color:'var(--brand-accent)', display:'flex', alignItems:'center', justifyContent:'center'}}><CheckIcon/></span>
            {t}
          </div>
        ))}
      </div>
    </div>
  );
}

function StepsSection({ compact = false }) {
  const steps = [
    { n:1, h:'Anrufen',         p:'Sie erreichen uns jederzeit. Wir besprechen in Ruhe die Situation und nehmen Ihnen die ersten Sorgen ab.', active:true },
    { n:2, h:'Wir kümmern uns', p:'Überführung, Formalitäten und Organisation übernehmen wir für Sie — Sie müssen nichts allein tragen.' },
    { n:3, h:'Abschied gestalten', p:'Gemeinsam planen wir einen würdevollen Abschied, der zum Menschen passt — in Ihrem Tempo.' },
  ];

  // Kompakte Variante für die Startseite: einzeilige Erklärung, kleinere Badges,
  // keine Karten — nur eine ruhige Übersicht. Die ausführliche Version lebt auf
  // der Trauerfall-Detailseite.
  if (compact) {
    return (
      <section style={{padding:'56px var(--page-x)', background:'var(--surface)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
        <div style={{maxWidth:1140, margin:'0 auto'}}>
          <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', gap:24, marginBottom:24, flexWrap:'wrap'}}>
            <div>
              <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-trauerfall)', display:'inline-flex', alignItems:'center', gap:10}}>
                <span style={{width:24, height:1, background:'var(--accent-trauerfall)', display:'inline-block'}}/>
                Im Trauerfall
              </span>
              <h2 style={{margin:'10px 0 0', font:'300 26px/1.2 var(--f-display)', color:'var(--ink-900)', letterSpacing:'-.005em'}}>
                In drei Schritten — <em style={{fontStyle:'normal', color:'var(--accent-trauerfall)', fontWeight:400}}>nicht mehr.</em>
              </h2>
            </div>
            <a href="#" onClick={e=>{e.preventDefault();window.__trauerfallNav && window.__trauerfallNav()}}
               style={{font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-trauerfall)', textDecoration:'none', paddingBottom:4, borderBottom:'1px solid var(--accent-trauerfall)'}}>Ausführlich →</a>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, borderTop:'1px solid var(--line)'}}>
            {steps.map((s, i) => (
              <div key={s.n} style={{
                display:'flex', gap:16, alignItems:'flex-start',
                padding:'20px 24px 20px 0',
                borderRight: i < steps.length - 1 ? '1px solid var(--line)' : 'none',
              }}>
                <span style={{
                  width:36, height:36, borderRadius:'50%',
                  border: s.active ? 'none' : '1px solid var(--accent-trauerfall)',
                  background: s.active ? 'var(--accent-trauerfall)' : 'transparent',
                  color: s.active ? '#fff' : 'var(--accent-trauerfall)',
                  display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                  font:'300 15px/1 var(--f-body)', fontVariantNumeric:'tabular-nums',
                }}>{s.n}</span>
                <div>
                  <div style={{font:'400 16px/1.2 var(--f-display)', color:'var(--ink-900)', marginBottom:4}}>{s.h}</div>
                  <div style={{color:'var(--ink-500)', fontSize:13, lineHeight:1.5, maxWidth:'28ch'}}>{s.p.split(' — ')[0]}.</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // Volle Variante (Trauerfall-Kontext → use --accent-trauerfall)
  return (
    <section style={{padding:'100px var(--page-x) 40px var(--page-x)', background:'var(--surface)'}}>
      <div style={{maxWidth:1140, margin:'0 auto'}}>
        <SectionHeader
          tone="trauerfall"
          eyebrow="Was tun im Trauerfall"
          title="Drei Schritte,"
          accent="nicht mehr."
          sub="Wir nehmen Ihnen die ersten Sorgen ab — Schritt für Schritt."
        />
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
          {steps.map((s) => (
            <div key={s.n} style={{
              background:'var(--surface-cool)', border:'1px solid var(--line-soft)',
              padding:'40px 32px 36px',
              display:'flex', flexDirection:'column', alignItems:'center', gap:14,
              textAlign:'center',
            }}>
              <span style={{
                width:56, height:56, borderRadius:'50%',
                background:'var(--accent-trauerfall)',
                color:'#fff',
                display:'flex', alignItems:'center', justifyContent:'center',
                font:'300 24px/1 var(--f-body)', fontVariantNumeric:'tabular-nums',
              }}>{s.n}</span>
              <h4 style={{margin:0, font:'400 22px/1.2 var(--f-display)', color:'var(--ink-900)'}}>{s.h}</h4>
              <p style={{margin:0, color:'var(--ink-500)', fontSize:14, lineHeight:1.65, maxWidth:'30ch'}}>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function QuoteSection() {
  return (
    <section style={{padding:'96px var(--page-x)', background:'var(--surface-warm)', position:'relative', overflow:'hidden'}}>
      <img src={window._r(window._r("assets/ornament-branch-large.png"))} alt=""
           style={{position:'absolute', left:'-2%', top:'10%', height:380, opacity:.10, pointerEvents:'none'}}/>
      <div style={{maxWidth:720, margin:'0 auto', textAlign:'center', position:'relative'}}>
        <img src={window._r(window._r("assets/quote-icon.png"))} alt="" style={{width:54, height:'auto', display:'block', margin:'0 auto 18px'}}/>
        <q style={{
          quotes:'none', font:'300 30px/1.5 var(--f-display)', color:'var(--ink-900)',
          letterSpacing:'-.005em', display:'block',
        }}>Das schönste Denkmal, das ein Mensch bekommen kann, steht in den Herzen seiner Mitmenschen.</q>
        <div style={{marginTop:22, font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--ink-300)'}}>Albert Schweitzer</div>
      </div>
    </section>
  );
}

function LeistCard({ img, title, body, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href="#" onClick={e=>{e.preventDefault();onClick && onClick()}}
       onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
       style={{
         background:'var(--surface)', border:'1px solid var(--line)', textDecoration:'none',
         overflow:'hidden', display:'flex', flexDirection:'column',
         transform: hover ? 'translateY(-2px)' : 'translateY(0)',
         boxShadow: hover ? 'var(--shadow-card)' : 'none',
         transition:'transform .25s ease, box-shadow .25s ease',
       }}>
      <div style={{aspectRatio:'5 / 2.4', background:`url('${img}') center/cover`, position:'relative'}}>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 55%, rgba(0,0,0,.28))'}}/>
      </div>
      <div style={{padding:'22px 24px 24px'}}>
        <h5 style={{margin:'0 0 6px', font:'400 22px/1.2 var(--f-display)', color:'var(--ink-900)'}}>{title}</h5>
        <p style={{margin:0, fontSize:13.5, color:'var(--ink-500)', lineHeight:1.55}}>{body}</p>
        <span style={{display:'inline-block', marginTop:14, font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--brand-accent)', borderBottom:'1px solid var(--brand-accent)', paddingBottom:6}}>Mehr erfahren</span>
      </div>
    </a>
  );
}

function MiniCard({ img, title, body, icon, href = '#' }) {
  return (
    <article style={{
      background:'var(--surface-cool)', border:'1px solid var(--line-soft)',
      position:'relative', paddingBottom:24,
      display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center',
      boxShadow:'0 14px 35px -22px rgba(0,0,0,.18)', overflow:'hidden',
    }}>
      <div style={{width:'100%', aspectRatio:'5 / 4', background:`url('${img}') center/cover`}}/>
      <div style={{
        width:46, height:46, borderRadius:'50%',
        background:'var(--accent-trauerfall)', color:'#fff',
        display:'flex', alignItems:'center', justifyContent:'center',
        marginTop:-23, position:'relative', zIndex:1,
        boxShadow:'0 6px 14px -6px rgba(168,48,45,.5), 0 0 0 4px var(--surface-cool)',
      }}>{icon}</div>
      <h4 style={{margin:'14px 0 0', font:'400 19px/1.2 var(--f-display)', color:'var(--ink-900)'}}>{title}</h4>
      <p style={{margin:'8px 18px 0', fontSize:13.5, color:'var(--ink-500)', lineHeight:1.6, maxWidth:'26ch'}}>{body}</p>
      <a href={href} style={{
        marginTop:12, alignSelf:'center',
        font:'500 9px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
        color:'var(--accent-trauerfall)', textDecoration:'none',
        paddingBottom:5, borderBottom:'1px solid var(--accent-trauerfall)',
      }}>Mehr erfahren →</a>
    </article>
  );
}

function LeistungenSection() {
  const items = [
    { img:window._r('assets/photos/lily-grave.jpg'),     title:'Persönliche Begleitung',
      body:'Ehrliche Beratung in Ihrem Tempo — auch nach dem Abschied.',
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M20.8 5.6c-1.8-1.9-4.8-1.9-6.6 0L12 7.8 9.8 5.6C8 3.7 5 3.7 3.2 5.6c-1.9 2-1.9 5.1 0 7.1L12 21l8.8-8.3c1.9-2 1.9-5.1 0-7.1z"/></svg> },
    { img:window._r('assets/photos/flowers-rosary.jpg'), title:'Überführungen',
      body:'Würdevolle Überführung im In- und Ausland — wir kümmern uns.',
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg> },
    { img:window._r('assets/photos/financial-planning.jpg'), title:'Botengänge',
      body:'Behördengänge, Formalitäten, Versicherungen — Sie müssen nichts allein tragen.',
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18"/><path d="M5 21V9l7-4 7 4v12"/><path d="M9 21v-5h6v5"/><path d="M9 12h.01M12 12h.01M15 12h.01"/></svg> },
    { img:window._r('assets/photos/mourners-coffin.jpg'), title:'Trauerfeiern',
      body:'Wir gestalten einen würdevollen Abschied — passend zum Menschen.',
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2c0 1.5-2 2.5-2 4a2 2 0 1 0 4 0c0-1.5-2-2.5-2-4z"/><path d="M9 10h6v10a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V10z"/></svg> },
  ];
  return (
    <section style={{padding:'40px var(--page-x)', background:'var(--surface)'}}>
      <div style={{maxWidth:1140, margin:'0 auto'}}>
        <SectionHeader
          tone="trauerfall"
          pattern="auftakt"
          eyebrow="Unsere Leistungen"
          accent="Ein Anruf genügt."
          title="Wir kümmern uns um alles Weitere."
        />
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14}}>
          {items.map(it => <MiniCard key={it.title} {...it}/>)}
        </div>
      </div>
    </section>
  );
}

function BestattungsformenMiniSection() {
  const items = [
    { img:window._r('assets/photos/coffin-flowers.jpg'), title:'Erdbestattung',  body:'Der klassische Abschied mit fester Grabstätte.',
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v18M7 8h10"/></svg> },
    { img:window._r('assets/photos/urn-candles.webp'),   title:'Feuerbestattung',body:'Die häufigste Bestattungsform — individuell gestaltbar.',
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22c-3.3-1.7-5-4.2-5-7.2 0-3.2 2-5.4 4.2-7.4.5 2.2 1.7 3.7 3.4 4.8.2-2 .9-3.8 2.1-5.2 2 2.2 3.3 4.7 3.3 7.7 0 3.1-1.7 5.6-5 7.3.8-1.4.9-3.1-.1-4.6-.6-.9-1.5-1.6-2.9-2.7-1.4 1.2-2.3 2-2.8 3-.8 1.5-.5 3 .8 4.3z"/></svg> },
    { img:window._r('assets/photos/tree-rose.webp'),     title:'Waldbestattung', body:'Naturnahe Ruhestätte im Wald.',
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21v-7M8 17h8M12 3l7 9h-4l3 5H6l3-5H5l7-9z"/></svg> },
    { img:window._r('assets/photos/sea-petals.webp'),    title:'Seebestattung',  body:'Abschied auf dem Wasser — ruhig und würdevoll.',
      icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v13"/><circle cx="12" cy="5" r="2"/><path d="M7 10h10"/><path d="M5 15c1.4 3.5 4 5 7 5s5.6-1.5 7-5"/></svg> },
  ];
  return (
    <section style={{padding:'40px var(--page-x) 96px', background:'var(--surface)'}}>
      <div style={{maxWidth:1140, margin:'0 auto'}}>
        <SectionHeader
          tone="trauerfall"
          eyebrow="Bestattungsformen"
          title="Eine Form,"
          accent="die zu Ihnen passt."
          sub="Vier Wege, Abschied zu nehmen — wir beraten Sie persönlich und finden gemeinsam die Form, die zu Ihrem Wunsch und zu Ihrer Familie passt."
          subMaxWidth="60%"
        />
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14}}>
          {items.map(it => <MiniCard key={it.title} {...it}/>)}
        </div>
      </div>
    </section>
  );
}

function AboutSection() {
  return (
    <section style={{padding:'96px var(--page-x)', background:'var(--surface-paper)'}}>
      <div style={{maxWidth:1140, margin:'0 auto', display:'grid', gridTemplateColumns:'1.2fr .8fr', gap:64, alignItems:'center'}}>
        <div>
          <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--brand-accent)'}}>Über uns</span>
          <h2 style={{margin:'14px 0 18px', font:'300 40px/1.15 var(--f-display)', letterSpacing:'-.01em', color:'var(--ink-900)'}}>
            Herzlich <em style={{fontStyle:'normal', color:'var(--brand-accent)', fontWeight:400}}>Willkommen.</em>
          </h2>
          <p style={{margin:'0 0 16px', color:'var(--ink-500)', fontSize:15.5, lineHeight:1.75}}>Trauer braucht Raum und Zeit. Unser Ziel ist es, Ihnen Raum und Zeit zu geben und Sie durch unsere langjährige Erfahrung auf Ihrem Weg der Trauer zu begleiten.</p>
          <p style={{margin:'0 0 16px', color:'var(--ink-500)', fontSize:15.5, lineHeight:1.75}}>Ein Trauerfall in der Familie stellt oftmals eine besondere Situation dar — Fragen treten auf. Genau in diesen schweren Stunden sind eine persönliche, kompetente Beratung und eine empathische Betreuung notwendig.</p>
          <div style={{marginTop:24, fontFamily:'var(--f-script)', fontWeight:400, fontSize:34, color:'var(--brand-script)', lineHeight:1}}>Herzlichst, Patriz Brünsch und Team</div>
        </div>
        <div style={{position:'relative', aspectRatio:'4 / 5', overflow:'hidden', background:`url(${window._r(window._r('assets/photos/candle-hands.jpg'))}) center/cover`}}>
          <div style={{position:'absolute', right:-16, bottom:-16, width:140, height:140, border:'1px solid var(--brand-accent)', zIndex:-1}}/>
        </div>
      </div>
    </section>
  );
}

/* ─────────────── Kostenplaner Banner / CTA on homepage ─────────────── */
function KostenplanerBanner({ onOpen }) {
  return (
    <section style={{padding:'48px var(--page-x) 96px', background:'var(--surface)'}}>
      <div style={{
        maxWidth:1140, margin:'0 auto',
        display:'grid', gridTemplateColumns:'1.05fr .95fr', gap:0,
        background:'var(--surface-ink)', color:'var(--color-fg-inverse)', position:'relative', overflow:'hidden'
      }}>
        <div style={{padding:'56px 56px 50px', display:'flex', flexDirection:'column', justifyContent:'center', gap:14, position:'relative', zIndex:1}}>
          <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--brand-accent)'}}>Kostenplaner</span>
          <h2 style={{margin:0, font:'300 38px/1.15 var(--f-display)', letterSpacing:'-.01em', color:'var(--color-fg-inverse)', maxWidth:'18ch'}}>
            Eine erste <em style={{fontStyle:'normal', color:'var(--brand-accent)', fontWeight:400}}>Orientierung</em> der Kosten.
          </h2>
          <p style={{margin:0, color:'var(--ink-warm-dim)', fontSize:15.5, lineHeight:1.7, maxWidth:'46ch'}}>
            In vier Schritten zu einem transparenten Kostenrahmen.
            Das verbindliche Angebot erstellen wir im persönlichen Gespräch — ohne Verpflichtung.
          </p>
          <div style={{display:'flex', gap:14, marginTop:18, alignItems:'center'}}>
            <button type="button" onClick={onOpen} style={{
              all:'unset', cursor:'pointer',
              display:'inline-flex', alignItems:'center',
              font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
              padding:'14px 26px', background:'var(--brand-accent)', color:'#fff',
              border:'2px solid var(--brand-accent)',
              transition:'background .18s, border-color .18s',
            }}
              onMouseEnter={e=>{e.currentTarget.style.background='var(--brand-accent-ink)';e.currentTarget.style.borderColor='var(--brand-accent-ink)'}}
              onMouseLeave={e=>{e.currentTarget.style.background='var(--brand-accent)';e.currentTarget.style.borderColor='var(--brand-accent)'}}>
              Kostenplaner öffnen
            </button>
            <span style={{font:'400 12px/1.5 var(--f-body)', color:'var(--ink-warm-mute)', maxWidth:'24ch'}}>
              Dauert ca. 2 Minuten · keine Anmeldung
            </span>
          </div>
        </div>
        <div style={{background:`url(${window._r(window._r('assets/photos/coins-time.jpg'))}) center/cover`, minHeight:340, position:'relative'}}>
          <div style={{position:'absolute', inset:0, background:'linear-gradient(90deg, rgba(31,29,28,.85), rgba(31,29,28,0) 40%)'}}/>
        </div>
        <img src={window._r(window._r("assets/ornament-branch-large.png"))} alt=""
             style={{position:'absolute', left:'30%', bottom:-40, height:280, opacity:.08, pointerEvents:'none'}}/>
      </div>
    </section>
  );
}

/* ─────────────── Vorsorge Section (Salbei) ─────────────── */
function VorsorgeSection({ onContact, onVorsorge }) {
  return (
    <section style={{padding:'96px var(--page-x)', background:'var(--surface)', position:'relative', overflow:'hidden'}}>
      <img src={window._r(window._r("assets/ornament-branch-large.png"))} alt=""
           style={{position:'absolute', right:'-3%', bottom:'-8%', height:380, opacity:.07, pointerEvents:'none'}}/>
      <div style={{maxWidth:1140, margin:'0 auto', display:'grid', gridTemplateColumns:'.95fr 1.05fr', gap:64, alignItems:'center', position:'relative'}}>
        <div style={{aspectRatio:'4 / 5', overflow:'hidden', background:`url(${window._r(window._r('assets/photos/sea-misty.jpg'))}) center/cover`, position:'relative'}}>
          <div style={{position:'absolute', left:-16, top:-16, width:140, height:140, border:'1px solid var(--accent-vorsorge)', zIndex:-1}}/>
        </div>
        <div>
          <span style={{font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--accent-vorsorge)', display:'inline-flex', alignItems:'center', gap:10}}>
            <span style={{width:24, height:1, background:'var(--accent-vorsorge)'}}/>
            Vorsorge
          </span>
          <h2 style={{margin:'14px 0 18px', font:'300 44px/1.1 var(--f-display)', letterSpacing:'-.01em', color:'var(--ink-900)', maxWidth:'16ch'}}>
            Selbst entscheiden, <em style={{fontStyle:'normal', color:'var(--accent-vorsorge)', fontWeight:400}}>schriftlich festgehalten.</em>
          </h2>
          <p style={{margin:'0 0 16px', color:'var(--ink-500)', fontSize:15.5, lineHeight:1.75, maxWidth:'48ch'}}>
            Mit der Bestattungsvorsorge sichern Sie die Kosten und legen Ihre Wünsche fest. So entlasten Sie Ihre Angehörigen — organisatorisch wie finanziell.
          </p>
          <div style={{display:'flex', gap:8, marginTop:18, flexWrap:'wrap'}}>
            {['Bestattungsverfügung','Bestattungsvorsorge-Treuhand','Baumbestattung','Seebestattung'].map(t => (
              <span key={t} style={{
                font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-sm)', textTransform:'uppercase',
                padding:'7px 12px', background:'var(--accent-vorsorge-soft)', color:'var(--accent-vorsorge)',
                border:'1px solid var(--accent-vorsorge)',
              }}>{t}</span>
            ))}
          </div>
          <div style={{display:'flex', gap:14, marginTop:30, alignItems:'center'}}>
            <button type="button" onClick={onContact} 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)'}}
              onClick={()=>onContact && onContact()}>
              Termin vereinbaren
            </button>
            <a href="#" onClick={e=>{e.preventDefault();onVorsorge && onVorsorge()}} style={{
              font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
              color:'var(--ink-900)', textDecoration:'none', borderBottom:'1px solid var(--ink-200)', paddingBottom:6,
            }}>Vorsorge-Leitfaden lesen</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────── Sonstiges · neutral · Bewertungen / Über uns / FAQ ───────────────
   Steht auf der Home zwischen AboutSection und ContactSection.
   Stille, niedrige Energie — Eyebrow in Warm-Mute (nicht Kupfer), Kupfer nur in
   den Sternen und Tile-CTAs. Bewusst kein Modus-Eyebrow, da inhaltlich neutral. */
function SonstigesSection({ onAbout, onFaq, onBewertungen }) {
  const tiles = [
    {
      lbl:'Bewertungen', stars:'★ ★ ★ ★ ★',
      h:'5,0 von 5',
      p:'Aus 8 Bewertungen bei Google — „100%ige Weiterempfehlung".',
      cta:'Alle Bewertungen →',
      onClick: onBewertungen,
    },
    {
      lbl:'Über uns',
      h:'Patriz Brünsch & Team',
      p:'Seit über 50 Jahren in Wolfsburg. Heute geführt von Patriz Brünsch — mit dem gleichen Team, am gewohnten Ort.',
      cta:'Unsere Geschichte →',
      onClick: onAbout,
    },
    {
      lbl:'Service & FAQ',
      h:'Häufige Fragen',
      p:'Antworten zu Bestattungsformen, Kosten, Trauerredner, Grabpflege und mehr.',
      cta:'Alle Antworten →',
      onClick: onFaq,
    },
  ];
  return (
    <section style={{padding:'64px var(--page-x)', background:'var(--surface)'}}>
      <div style={{maxWidth:1140, margin:'0 auto'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:24, marginBottom:32, flexWrap:'wrap'}}>
          <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)'}}/>
              Ansonsten
            </span>
            <h3 style={{margin:'10px 0 0', font:'300 28px/1.15 var(--f-display)', color:'var(--ink-900)', letterSpacing:'-.005em'}}>
              Wenn Sie sich <em style={{fontStyle:'normal', fontWeight:400, color:'var(--brand-accent)'}}>orientieren</em> möchten.
            </h3>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20}}>
          {tiles.map((t, i) => (
            <div key={i} style={{
              background:'var(--surface-paper)', border:'1px solid var(--line)', padding:'28px 26px',
              display:'flex', flexDirection:'column', gap:10, minHeight:240,
            }}>
              <span style={{font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--ink-warm-mute)'}}>{t.lbl}</span>
              {t.stars && <div style={{color:'var(--brand-accent)', fontSize:16, letterSpacing:'.1em'}}>{t.stars}</div>}
              <h4 style={{margin:0, font:'400 22px/1.2 var(--f-display)', color:'var(--ink-900)'}}>{t.h}</h4>
              <p style={{margin:0, fontSize:13.5, color:'var(--ink-500)', lineHeight:1.6}}>{t.p}</p>
              <a href="#" onClick={e=>{e.preventDefault(); t.onClick && t.onClick();}}
                 style={{marginTop:'auto', font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase', color:'var(--brand-accent-ink)', textDecoration:'none', paddingTop:6, alignSelf:'flex-start'}}>
                {t.cta}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────── Trauerfall-Strip (Tiefrot) — sits below the header ─────────────── */
function TrauerfallStrip() {
  return (
    <div style={{
      background:'var(--accent-trauerfall-soft)', borderBottom:'1px solid rgba(168,48,45,.15)',
      padding:'14px 28px', display:'flex', justifyContent:'center', alignItems:'center', gap:14,
      flexWrap:'wrap',
    }}>
      <span style={{
        font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
        color:'var(--accent-trauerfall)', display:'inline-flex', alignItems:'center', gap:8,
      }}>
        <span style={{width:6, height:6, borderRadius:'50%', background:'var(--accent-trauerfall)'}}/>
        Im Trauerfall
      </span>
      <span style={{color:'var(--ink-700)', fontSize:13.5, lineHeight:1.4}}>
        Wir sind <strong style={{color:'var(--accent-trauerfall)', fontWeight:600}}>Tag &amp; Nacht</strong> für Sie erreichbar.
      </span>
      <a href="tel:053614222" style={{
        color:'var(--accent-trauerfall)', fontVariantNumeric:'tabular-nums',
        font:'500 14px/1 var(--f-body)', textDecoration:'none', borderBottom:'1px solid var(--accent-trauerfall)', paddingBottom:2,
      }}>05361 · 4 22 22</a>
    </div>
  );
}

Object.assign(window, { ServiceCard, ServicesSection, TrustBar, StepsSection, QuoteSection, LeistCard, LeistungenSection, BestattungsformenMiniSection, AboutSection, KostenplanerBanner, VorsorgeSection, SonstigesSection, TrauerfallStrip });