function TemplatePicker({ open, onClose, onPick }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(0,54,95,.32)', zIndex:60,
      display:'flex', alignItems:'center', justifyContent:'center', padding:32,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width:'min(960px, 100%)', maxHeight:'85vh', background:'#fff',
        borderRadius:8, boxShadow:'0 16px 48px rgba(0,54,95,.18)',
        display:'flex', flexDirection:'column', overflow:'hidden',
      }}>
        <div style={{padding:'22px 28px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div>
            <div style={{fontSize:11, fontWeight:600, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--fg-muted)'}}>Ny offert</div>
            <h2 style={{margin:'4px 0 0', fontFamily:'var(--font-serif)', fontWeight:500, fontSize:28, color:'var(--ulab-navy)'}}>Vad ska offerten handla om?</h2>
            <p style={{margin:'6px 0 0', fontSize:14, color:'var(--fg-muted)'}}>Välj en mall för att starta — du kan ändra allt efteråt.</p>
          </div>
          <button onClick={onClose} style={{background:'transparent', border:'none', cursor:'pointer', color:'var(--ulab-navy)'}}><Icon name="close" size={22}/></button>
        </div>
        <div style={{padding:24, overflow:'auto', display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:14}}>
          {TEMPLATES.map(t => (
            <button key={t.id} onClick={() => onPick(t)} style={{
              textAlign:'left', background:'#fff', border:'1px solid var(--border)',
              borderRadius:6, padding:18, cursor:'pointer', display:'flex', gap:14,
              alignItems:'flex-start', transition:'all 200ms var(--ease)',
              fontFamily:'var(--font-sans)',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor='var(--ulab-navy)'; e.currentTarget.style.background='var(--ulab-cream)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor='var(--border)'; e.currentTarget.style.background='#fff'; }}
            >
              <div style={{
                width:44, height:44, borderRadius:'50%', background:'var(--ulab-cream)',
                display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
              }}>
                <Icon name={t.icon} size={22} stroke="var(--ulab-navy)"/>
              </div>
              <div style={{flex:1}}>
                <div style={{fontSize:15, fontWeight:600, color:'var(--ulab-navy)', marginBottom:4}}>{t.name}</div>
                <div style={{fontSize:13, color:'var(--fg-muted)', lineHeight:1.5}}>{t.blurb}</div>
                {t.lines.length > 0 && (
                  <div style={{marginTop:8, fontSize:11, color:'var(--ulab-blue)', fontWeight:600, letterSpacing:'.04em'}}>{t.lines.length} rader förberedda →</div>
                )}
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}
window.TemplatePicker = TemplatePicker;