// Hero.jsx — Dark Hero block (Startseite Auftakt)

function Hero() {
  return (
    <section style={{
      background:'var(--surface-ink)', color:'var(--color-fg-inverse)',
      padding:'120px 8% 110px',
      position:'relative', overflow:'hidden'
    }}>
      <img src={window._r(window._r("assets/ornament-branch-tall.png"))} alt=""
           style={{position:'absolute', right:'4%', top:'50%', transform:'translateY(-50%)', height:520, width:'auto', opacity:.16, pointerEvents:'none'}}/>

      <div style={{maxWidth:980, position:'relative', zIndex:1}}>
        <span style={{
          display:'inline-flex', alignItems:'center', gap:10,
          font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)',
          textTransform:'uppercase', color:'var(--brand-accent)',
        }}>
          <span style={{width:24, height:1, background:'var(--brand-accent)', display:'inline-block'}}/>
          Tschense Bestattungen · Wolfsburg
        </span>

        <h1 style={{
          fontFamily:'var(--f-body)', fontWeight:300,
          fontSize:60, lineHeight:1.2, letterSpacing:'-.015em',
          color:'var(--color-fg-inverse)', margin:'24px 0 12px', maxWidth:'20ch',
        }}>
          Wir begleiten Sie auf Ihrem{' '}
          <em style={{
            fontStyle:'normal', fontFamily:'var(--f-display)', fontWeight:200,
            color:'var(--brand-accent)', fontSize:68, lineHeight:1.2, letterSpacing:'-.02em',
          }}>Weg der Trauer.</em>
        </h1>

        <p style={{color:'var(--ink-warm-dim)', maxWidth:'54ch', fontSize:17, margin:'18px 0 0', lineHeight:1.7}}>
          Trauer braucht Raum und Zeit. Unser Ziel ist es, Ihnen Raum und Zeit zu geben und Sie durch unsere langjährige Erfahrung zu begleiten — persönlich, in Ruhe, ohne Druck.
        </p>

        <div style={{display:'flex', gap:14, marginTop:42, flexWrap:'wrap', alignItems:'center'}}>
          <PhoneCTA dark={false}/>
          <a href="#" style={{
            display:'inline-flex', alignItems:'center',
            font:'500 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            padding:'15px 26px', background:'transparent', color:'#e8e2dc',
            border:'1px solid rgba(255,255,255,.3)', textDecoration:'none',
            transition:'border-color .18s, color .18s',
          }}
             onMouseEnter={e=>{e.currentTarget.style.borderColor='#fff';e.currentTarget.style.color='#fff'}}
             onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,.3)';e.currentTarget.style.color='#e8e2dc'}}>
            Zum Kontaktformular
          </a>
        </div>

        <div style={{display:'flex', gap:8, marginTop:48, flexWrap:'wrap'}}>
          {['Vertrauen','Respekt','Erinnerung'].map(t => (
            <span key={t} style={{
              border:'1px solid rgba(255,255,255,.18)', color:'#d9d2cc',
              fontSize:11, letterSpacing:'.18em', textTransform:'uppercase',
              padding:'8px 14px', borderRadius:99,
            }}>{t}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });