// ModusPortals.jsx — Zwei-Portale-Pattern für die Startseite
// Trauerfall (Tiefrot, dunkel) + Vorsorge (Salbei, cremig-grün), 1 : 1 gleichberechtigt.

function ModusPortals({ onTrauerfall, onKostenplaner, onVorsorge }) {
  return (
    <section style={{
      display:'grid', gridTemplateColumns:'1fr 1fr', gap:0,
      borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)',
      background:'var(--surface)',
    }}>
      {/* Trauerfall-Portal */}
      <article style={{
        background:'var(--mode-traue-portal-bg)',
        color:'var(--mode-traue-island-fg)', padding:'56px 48px',
        display:'flex', flexDirection:'column', gap:18,
        position:'relative', overflow:'hidden',
      }}>
        <style>{`
          .mp-traue-cta { transition: transform .18s ease; }
          .mp-traue-cta:hover { transform: translateY(-2px); }
          .mp-traue-more { transition: color .18s; }
          .mp-traue-more:hover { color: #fbe3df; }
        `}</style>
        <ModusEyebrow tone="trauerfall" onDark/>
        <h2 style={{margin:0, fontFamily:'var(--f-body)', fontWeight:300, fontSize:38, lineHeight:1.15, letterSpacing:'-.01em', color:'var(--mode-traue-island-fg)', maxWidth:'18ch'}}>
          Es ist <em style={{fontStyle:'normal', fontFamily:'var(--f-display)', fontWeight:300, color:'var(--mode-traue-island-eyebrow)', fontSize:42}}>passiert.</em><br/>
          Wir sind jetzt für Sie da.
        </h2>
        <p style={{margin:0, color:'var(--mode-traue-island-muted)', maxWidth:'36ch', fontSize:15, lineHeight:1.7}}>
          Rufen Sie an, zu jeder Zeit. Wir besprechen in Ruhe die Situation und nehmen Ihnen die ersten Sorgen ab.
        </p>
        <a href="tel:053614222" className="mp-traue-cta" style={{
          display:'inline-flex', alignItems:'center', gap:14,
          padding:'16px 28px 16px 20px',
          background:'var(--mode-traue-cta-bg)', color:'#fff',
          textDecoration:'none', alignSelf:'flex-start',
          boxShadow:'0 16px 36px -12px var(--mode-traue-cta-glow), inset 0 1px 0 rgba(255,255,255,.18)',
        }}>
          <span style={{width:36, height:36, borderRadius:'50%', background:'rgba(255,255,255,.18)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" 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>
          </span>
          <span>
            <span style={{display:'block', font:'500 22px/1 var(--f-body)'}}>05361 · 4 22 22</span>
            <span style={{display:'block', font:'600 9px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'rgba(255,255,255,.78)', marginTop:5}}>24h erreichbar</span>
          </span>
        </a>
        <ul style={{listStyle:'none', padding:0, margin:'8px 0 0', display:'flex', flexDirection:'column', gap:10}}>
          {['Überführung übernehmen wir sofort','Behördengänge und Formalitäten','Erster Termin — ruhig, ohne Druck'].map(t => (
            <li key={t} style={{display:'flex', alignItems:'center', gap:12, fontSize:14, color:'var(--mode-traue-island-muted)'}}>
              <span style={{width:20, height:20, borderRadius:'50%', background:'var(--mode-traue-island-check)', color:'var(--mode-traue-island-eyebrow)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                <svg width="11" height="11" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M5 10l3 3 7-7"/></svg>
              </span>
              {t}
            </li>
          ))}
        </ul>
        <a href="#" onClick={e=>{e.preventDefault();onTrauerfall && onTrauerfall()}} className="mp-traue-more" style={{
          marginTop:6, 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:'flex-start',
        }}>Was tun im Trauerfall →</a>
      </article>

      {/* Vorsorge-Portal */}
      <article style={{
        background:'var(--mode-vor-stage-bg)',
        padding:'56px 48px',
        display:'flex', flexDirection:'column', gap:18,
        position:'relative', overflow:'hidden',
      }}>
        <style>{`
          .mp-vor-cta { transition: transform .18s ease; }
          .mp-vor-cta:hover { transform: translateY(-2px); }
        `}</style>
        <ModusEyebrow tone="vorsorge"/>
        <h2 style={{margin:0, fontFamily:'var(--f-body)', fontWeight:300, fontSize:36, lineHeight:1.15, letterSpacing:'-.01em', color:'var(--ink-900)', maxWidth:'18ch'}}>
          Selbst entschieden, <em style={{fontStyle:'normal', fontFamily:'var(--f-display)', fontWeight:400, color:'var(--mode-vor-accent-ink)', fontSize:40}}>schriftlich festgehalten.</em>
        </h2>
        <p style={{margin:0, color:'var(--ink-500)', maxWidth:'36ch', fontSize:15, lineHeight:1.7}}>
          Sichern Sie die Kosten Ihrer Bestattung ab und entlasten Sie Ihre Angehörigen — in Ihrem Tempo, ohne Verpflichtung.
        </p>
        <a href="#" onClick={e=>{e.preventDefault();onKostenplaner && onKostenplaner()}} className="mp-vor-cta" style={{
          display:'inline-flex', alignItems:'center', gap:14,
          padding:'14px 26px 14px 18px',
          background:'var(--mode-vor-cta-bg)', color:'#fff',
          textDecoration:'none', alignSelf:'flex-start',
          boxShadow:'0 12px 24px -10px var(--mode-vor-cta-glow), inset 0 1px 0 rgba(255,255,255,.18)',
        }}>
          <span style={{width:32, height:32, borderRadius:'50%', background:'rgba(255,255,255,.18)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.8"><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M8 7h8M8 11h8M8 15h5"/></svg>
          </span>
          <span>
            <span style={{display:'block', font:'500 13px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase'}}>Kostenrechner öffnen</span>
            <span style={{display:'block', font:'600 9px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'rgba(255,255,255,.78)', marginTop:4}}>unverbindlich</span>
          </span>
        </a>
        <ul style={{listStyle:'none', padding:0, margin:'8px 0 0', display:'flex', flexDirection:'column', gap:10}}>
          {['Bestattungsform und Trauerfeier','Schriftliche Verfügung','Treuhänderische Finanzierung'].map(t => (
            <li key={t} style={{display:'flex', alignItems:'center', gap:12, fontSize:14, color:'var(--ink-500)'}}>
              <span style={{width:20, height:20, borderRadius:'50%', background:'var(--mode-vor-check)', color:'var(--mode-vor-accent-ink)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                <svg width="11" height="11" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M5 10l3 3 7-7"/></svg>
              </span>
              {t}
            </li>
          ))}
        </ul>
        <a href="#" onClick={e=>{e.preventDefault();onVorsorge && onVorsorge()}} style={{
          marginTop:6, font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
          color:'var(--mode-vor-accent-ink)', textDecoration:'none', paddingBottom:4, borderBottom:'1px solid var(--mode-vor-accent-ink)', alignSelf:'flex-start',
        }}>Mehr zur Vorsorge →</a>
      </article>
    </section>
  );
}

Object.assign(window, { ModusPortals });