function CustomerPanel({ offer, onChange, customers = [], onBytKund }) {
  const f = k => ({ value: offer[k], onChange: v => onChange({[k]: v}) });
  // Kunden väljs i dialogen Ny offert och byts via samma dialog. Det finns
  // inget fritextfält för företaget längre — det var det som skapade
  // skräpkunder av halvskrivna namn. Kontaktuppgifterna är offertens egen
  // kopia: en skickad offert behåller dem även om kundkortet ändras senare.
  const kund = customers.find(c => c.id === offer.customerId) || null;
  const initialer = String(offer.customer || '?').split(/\s+/)
    .filter(o => o && !/^(ab|hb|kb|&|och|i)$/i.test(o)).slice(0, 2).map(o => o[0].toUpperCase()).join('');

  return (
    <section style={card}>
      <SectionHead eyebrow="Steg 1" title="Kund och projekt"/>
      <div style={cpaKundkort}>
        <span style={cpaAvatar}>{initialer || '?'}</span>
        <div style={{flex:1, minWidth:0}}>
          <div style={{fontSize:17, fontWeight:600, color:'var(--ulab-navy)', display:'flex', alignItems:'center', gap:10, flexWrap:'wrap'}}>
            {offer.customer || <span style={{color:'#8a3b30', fontWeight:500}}>Ingen kund vald</span>}
            {kund && kund.archived_at && <span style={cpaTagg}>Arkiverad</span>}
          </div>
          <div style={{fontSize:12.5, color:'var(--fg-muted)', marginTop:3}}>
            {offer.org ? 'Org.nr ' + offer.org : <span style={{color:'#8a5a12'}}>Org.nr saknas — fyll i under Fler uppgifter</span>}
            {kund && Number(kund.antal_offerter) > 1 && ` · ${kund.antal_offerter} offerter`}
            {kund && kund.senaste_offert && ` · senast ${kund.senaste_offert}`}
          </div>
        </div>
        <button type="button" onClick={onBytKund} style={cpaBytKnapp}>Byt kund</button>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:14}}>
        <Field label="Kontaktperson" {...f('contact')} placeholder="Vem offerten ställs till"/>
        <Field label="Offertens ämne" {...f('subject')} placeholder="ex. Servermiljö"/>
      </div>
      <details style={{marginTop:18}}>
        <summary style={{cursor:'pointer', fontSize:13, color:'var(--ulab-blue)', fontWeight:600, listStyle:'none'}}>+ Fler uppgifter (org.nr, e‑post, telefon, datum, säljare)</summary>
        <div style={{marginTop:14, paddingTop:14, borderTop:'1px solid var(--border)'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14}}>
            <Field label="Org.nr" {...f('org')} placeholder="556000-0000"/>
            <Field label="E‑post" {...f('email')} type="email"/>
            <Field label="Telefon" {...f('phone')}/>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:14}}>
            <Field label="Datum" {...f('date')} type="date"/>
            <Field label="Giltig t.o.m." {...f('valid')} type="date"/>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14, marginTop:14}}>
            <Field label="Säljare" {...f('salesperson')} placeholder="Adam Bjarneteg"/>
            <Field label="Säljarens telefon" {...f('salesphone')}/>
            <Field label="Säljarens e‑post" {...f('salesemail')}/>
          </div>
        </div>
      </details>
    </section>
  );
}

const cpaKundkort = { display:'flex', alignItems:'center', gap:14, padding:'14px 16px', background:'var(--ulab-cream)', border:'1px solid var(--border)', borderRadius:6 };
const cpaAvatar = { flex:'none', width:40, height:40, borderRadius:4, background:'#fff', color:'var(--ulab-navy)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13, fontWeight:700, border:'1px solid var(--border)' };
const cpaTagg = { fontSize:10.5, fontWeight:700, letterSpacing:'.06em', textTransform:'uppercase', padding:'1px 7px', borderRadius:999, border:'1px solid var(--border-strong)', background:'#fff', color:'var(--fg-muted)' };
const cpaBytKnapp = { fontFamily:'var(--font-sans)', fontSize:12.5, fontWeight:600, color:'var(--ulab-navy)', background:'#fff', border:'1px solid var(--border-strong)', borderRadius:4, padding:'8px 12px', cursor:'pointer', whiteSpace:'nowrap' };

const cpaEtikett = {fontSize:12, fontWeight:600, color:'var(--ulab-navy)', letterSpacing:'.04em'};

function Field({label, value, onChange, ...rest}) {
  return (
    <label style={{display:'flex', flexDirection:'column', gap:6}}>
      <span style={cpaEtikett}>{label}</span>
      <LocalInput value={value} onChange={onChange} style={inp} {...rest}/>
    </label>
  );
}

const inp = {
  fontFamily:'var(--font-sans)', fontSize:14, padding:'10px 12px',
  border:'1px solid var(--border-strong)', borderRadius:4, background:'#fff',
  color:'var(--ulab-navy)', width:'100%',
};
const card = {
  background:'#fff', border:'1px solid var(--border)', borderRadius:6,
  padding:24, marginBottom:20,
};
function SectionHead({eyebrow, title, right}) {
  return (
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:18}}>
      <div>
        <div style={{fontSize:11, fontWeight:600, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--fg-muted)', marginBottom:4}}>{eyebrow}</div>
        <h2 style={{fontFamily:'var(--font-serif)', fontWeight:500, color:'var(--ulab-navy)', fontSize:22, margin:0, lineHeight:1.2}}>{title}</h2>
      </div>
      {right}
    </div>
  );
}

window.CustomerPanel = CustomerPanel;
window.Field = Field;
window.inp = inp;
window.card = card;
window.SectionHead = SectionHead;