const QR = {
  security: { base: 15000, ps: 12000 },
  cleaning: { base: 8000, pa: 2.5 },
  garden:   { base: 5000, pa: 1.2 },
  fleet:    { base: 10000, ps: 8000 },
  ifm:      { base: 30000, pa: 3, ps: 9000 },
};
const QL = { bkk: 1.25, central: 1.1, isan: 1.0, north: 1.05, south: 1.08 };
const QN = { security: 'รักษาความปลอดภัย', cleaning: 'ทำความสะอาด', garden: 'ดูแลสวน', fleet: 'รถประจำองค์กร', ifm: 'Facility ครบวงจร' };

function Quote() {
  const [co, setCo] = React.useState('');
  const [svcs, setSvcs] = React.useState([]);
  const [area, setArea] = React.useState(0);
  const [staff, setStaff] = React.useState(0);
  const [loc, setLoc] = React.useState('isan');

  const toggle = (s) => setSvcs(p => p.includes(s) ? p.filter(x => x !== s) : [...p, s]);
  const f = QL[loc];
  const rows = svcs.map(s => {
    const r = QR[s]; const c = (r.base + (r.ps||0)*staff + (r.pa||0)*area) * f;
    return [QN[s], c];
  });
  const sub = rows.reduce((a, [, c]) => a + c, 0);
  const total = sub * 1.07;
  const fmt = n => '฿' + n.toLocaleString('th', { maximumFractionDigits: 0 });

  return (
    <section id="quote" style={{ padding: '8rem 0', background: '#f4f1e9' }}>
      <Wrap>
        <div style={{ marginBottom: '4rem' }}>
          <Eyebrow>ใบเสนอราคา · Quote</Eyebrow>
          <H2>คำนวณ<em style={{ fontStyle: 'italic', color: '#2d6a7a' }}>เบื้องต้น</em></H2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5rem' }}>
          <div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
              <Field label="บริษัท / Company"><input style={inputStyle(false)} value={co} onChange={e => setCo(e.target.value)} placeholder="ABC Co., Ltd." /></Field>
              <Field label="ผู้ติดต่อ / Contact"><input style={inputStyle(false)} placeholder="ชื่อ-นามสกุล" /></Field>
            </div>
            <Field label="บริการ / Services">
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.7rem', marginTop: '0.5rem' }}>
                {Object.entries(QN).map(([k, v]) => (
                  <label key={k} style={{
                    display: 'flex', alignItems: 'center', gap: '0.8rem',
                    cursor: 'pointer', padding: '0.4rem 0',
                  }}>
                    <span style={{
                      width: 14, height: 14, borderRadius: 0,
                      border: '1px solid rgba(26,43,74,0.3)',
                      background: svcs.includes(k) ? '#1a2b4a' : 'transparent',
                      transition: 'background 0.2s', flexShrink: 0,
                    }}></span>
                    <input type="checkbox" checked={svcs.includes(k)} onChange={() => toggle(k)}
                      style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }} />
                    <span onClick={() => toggle(k)} style={{ fontFamily: "'Sarabun',sans-serif", fontSize: '0.9rem', color: '#1a2b4a' }}>{v}</span>
                  </label>
                ))}
              </div>
            </Field>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
              <Field label="พื้นที่ (ตร.ม.)"><input type="number" style={inputStyle(false)} onChange={e => setArea(+e.target.value || 0)} placeholder="5,000" /></Field>
              <Field label="พนักงาน"><input type="number" style={inputStyle(false)} onChange={e => setStaff(+e.target.value || 0)} placeholder="10" /></Field>
            </div>
            <Field label="สถานที่">
              <select style={inputStyle(false)} value={loc} onChange={e => setLoc(e.target.value)}>
                <option value="isan">ภาคอีสาน</option>
                <option value="bkk">กรุงเทพฯ และปริมณฑล</option>
                <option value="central">ภาคกลาง</option>
                <option value="north">ภาคเหนือ</option>
                <option value="south">ภาคใต้</option>
              </select>
            </Field>
            <div style={{ marginTop: '2rem' }}><Btn kind="ink">ส่งคำขอใบเสนอราคา</Btn></div>
          </div>
          <div style={{ position: 'sticky', top: '6rem', alignSelf: 'flex-start' }}>
            <div style={{ fontFamily: "'Jost',sans-serif", fontWeight: 300, fontSize: '0.55rem',
              letterSpacing: '0.4em', textTransform: 'uppercase', color: '#2d6a7a', marginBottom: '1.5rem' }}>ประมาณการ / Estimate</div>
            <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: '1.8rem', fontWeight: 300,
              color: '#1a2b4a', minHeight: '2.5rem', marginBottom: '2rem' }}>{co || 'องค์กรของคุณ'}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.9rem',
              borderTop: '1px solid rgba(26,43,74,0.1)', paddingTop: '1.5rem' }}>
              {rows.length === 0
                ? <div style={{ fontFamily: "'Sarabun',sans-serif", fontSize: '0.85rem', color: '#7a8290', fontStyle: 'italic' }}>กรุณาเลือกบริการ</div>
                : rows.map(([n, c], i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <span style={{ fontFamily: "'Sarabun',sans-serif", fontSize: '0.88rem', color: '#1a2b4a' }}>{n}</span>
                      <span style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: '1.05rem', color: '#1a2b4a' }}>{fmt(c)}</span>
                    </div>
                  ))}
              {rows.length > 0 && (
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontFamily: "'Jost',sans-serif", fontWeight: 300, fontSize: '0.6rem', letterSpacing: '0.3em', color: '#7a8290', textTransform: 'uppercase' }}>VAT 7%</span>
                  <span style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: '1.05rem', color: '#7a8290' }}>{fmt(sub * 0.07)}</span>
                </div>
              )}
            </div>
            {rows.length > 0 && (
              <div style={{ borderTop: '1px solid rgba(26,43,74,0.2)', marginTop: '2rem', paddingTop: '1.5rem',
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: "'Jost',sans-serif", fontWeight: 300, fontSize: '0.58rem', letterSpacing: '0.4em', textTransform: 'uppercase', color: '#1a2b4a' }}>รวม / เดือน</span>
                <span style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: '2.4rem', fontWeight: 300, color: '#1a2b4a' }}>{fmt(total)}</span>
              </div>
            )}
          </div>
        </div>
      </Wrap>
    </section>
  );
}
window.Quote = Quote;