function CustomerPanel({ offer, onChange }) {
  const f = k => ({ value: offer[k], onChange: v => onChange({[k]: v}) });
  return (
    <section style={card}>
      <SectionHead eyebrow="Steg 1" title="Kund och projekt"/>
      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:14}}>
        <Field label="Företag" {...f('customer')} placeholder="ex. Textil AB Olle Winter"/>
        <Field label="Kontaktperson" {...f('contact')} placeholder="Anna Lindqvist"/>
      </div>
      <div style={{marginTop:14}}>
        <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>
  );
}

function Field({label, value, onChange, ...rest}) {
  return (
    <label style={{display:'flex', flexDirection:'column', gap:6}}>
      <span style={{fontSize:12, fontWeight:600, color:'var(--ulab-navy)', letterSpacing:'.04em'}}>{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;