const GAPCHECK = [
  ['Muster roll and wage register', 'Whether Forms 12, 13 and 14 exist for the last three months, and whether they reconcile to what was actually paid.'],
  ['Wage revision arrears', 'Dearness allowance changes on 1 January and 1 July and is notified late, with retrospective effect. We check whether the revision was applied and arrears paid.'],
  ['PF and ESIC', 'Last three challans against headcount on site. Workers who worked a single day still belong in the return.'],
  ['BOCW', 'Registration status, cess position and whether receipts are on file. This is the one that holds up an occupancy certificate.'],
  ['CLRA records', 'Form XII and XIII for your principal-employer file, and licences held by any contractor on site.'],
  ['Worker documents', 'ID, bank, UAN and ESIC IP coverage across the current headcount, and what proportion is missing or expired.'],
];

function ContactPage() {
  const [sent, setSent] = useState(false);
  const [mode, setMode] = useState('gap');
  const [role, setRole] = useState('Builder / developer');
  const [f, setF] = useState({ company: '', name: '', mobile: '', email: '', city: 'Pune city', sites: '', workers: 'Under 25', handler: 'Nobody in particular', week: 'This week', notes: '', consent: false });
  const [busy, setBusy] = useState(false);
  const set = k => e => setF(p => ({ ...p, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }));
  const gap = mode === 'gap';
  const send = async () => {
    setBusy(true);
    try {
      await LTData.submit('leads', {
        kind: gap ? 'gap' : 'enquiry',
        name: f.name, company: f.company, role_type: role, mobile: f.mobile, email: f.email,
        city: f.city, sites: gap ? f.sites : '', workers: gap ? f.workers : '',
        message: gap ? [f.notes, 'Handled today by: ' + f.handler, 'Preferred week: ' + f.week].filter(Boolean).join(' \u00b7 ') : f.notes,
        consent: !!f.consent, status: 'New',
      });
    } catch (e) { console.warn(e); }
    setBusy(false); setSent(true);
  };
  return (
    <Page page="contact.html">
      <PHero eyebrow="Contact" title="Start with one of your own sites." sub="A free 45-minute compliance gap check on a single site, and a two-page findings note within 48 hours. No software demo, no obligation." />
      <section className="band"><div className="wrap">
        <div className="split" style={{ alignItems: 'start' }}>
          <div className="form" style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)' }}>
            {sent ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
                <span className="badge ok">Received</span>
                <h3 className="h3">{gap ? 'We will confirm a slot within one working day.' : 'Thanks — we will come back within one working day.'}</h3>
                <p>{gap ? 'The visit takes 45 minutes at your site office. Bring the muster roll and the last three PF and ESIC challans if you have them — if you do not, that is itself a finding. Your note follows within 48 hours of the visit.' : 'If your city is not open yet we will tell you when it is scheduled, and you can register in the meantime.'}</p>
                <button className="btn btn-ghost" onClick={() => setSent(false)}>Send another</button>
              </div>
            ) : (
              <React.Fragment>
                <div className="toggle" style={{ marginBottom: 4 }}>
                  <button className={gap ? 'on' : ''} onClick={() => setMode('gap')}>Compliance gap check</button>
                  <button className={gap ? '' : 'on'} onClick={() => setMode('other')}>General enquiry</button>
                </div>
                <div>
                  <h3 className="h3">{gap ? 'Book a compliance gap check' : 'Send us an enquiry'}</h3>
                  <p className="small" style={{ marginTop: 6 }}>Fields marked <i style={{ color: 'var(--amber-ink)', fontStyle: 'normal' }}>*</i> are required.</p>
                </div>
                <div className="grid2f">
                  <div className="field"><label>Business name <i>*</i></label><input placeholder="Registered company name" value={f.company} onChange={set('company')} /></div>
                  <div className="field"><label>Contact person <i>*</i></label><input placeholder="Full name" value={f.name} onChange={set('name')} /></div>
                </div>
                <div className="grid2f">
                  <div className="field"><label>Mobile number <i>*</i></label><input placeholder="10-digit mobile" value={f.mobile} onChange={set('mobile')} /></div>
                  <div className="field"><label>Email address <i>*</i></label><input placeholder="Business or personal email" value={f.email} onChange={set('email')} /></div>
                </div>
                <div className="grid2f">
                  <div className="field"><label>Business type <i>*</i></label>
                    <select value={role} onChange={e => setRole(e.target.value)}>
                      <option>Builder / developer</option>
                      <option>EPC / general contractor</option>
                      <option>Labour Contractors</option>
                      <option>Other — press or partnership</option>
                    </select>
                  </div>
                  <div className="field"><label>Site location <i>*</i></label>
                    <select value={f.city} onChange={set('city')}><option>Pune city</option><option>Pimpri-Chinchwad (PCMC)</option><option>Hinjawadi / Wakad</option><option>Baner / Balewadi</option><option>Kharadi / Wagholi</option><option>Hadapsar / Magarpatta</option><option>Ravet / Punawale</option><option>Chakan / Talegaon</option><option>Undri / NIBM</option><option>Alandi / Lonikand</option><option>Mulshi / Pirangut</option><option>Other location in Pune Metropolitan Region</option></select>
                  </div>
                </div>
                {gap ? (
                  <React.Fragment>
                    <div className="grid2f">
                      <div className="field"><label>Site to review <i>*</i></label><input placeholder="e.g. Tower B, Hinjawadi" value={f.sites} onChange={set('sites')} /></div>
                      <div className="field"><label>Workers on that site <i>*</i></label>
                        <select value={f.workers} onChange={set('workers')}><option>Under 25</option><option>25 – 50</option><option>50 – 100</option><option>Over 100</option></select>
                      </div>
                    </div>
                    <div className="grid2f">
                      <div className="field"><label>Who handles labour compliance today?</label>
                        <select value={f.handler} onChange={set('handler')}><option>Nobody in particular</option><option>Site engineer or supervisor</option><option>In-house labour officer</option><option>External consultant or CA</option><option>The labour contractor does it</option></select>
                      </div>
                      <div className="field"><label>Preferred week</label>
                        <select value={f.week} onChange={set('week')}><option>This week</option><option>Next week</option><option>In two weeks</option><option>Flexible</option></select>
                      </div>
                    </div>
                    <div className="field"><label>Anything specific you want looked at?</label><textarea placeholder="e.g. we have a PF notice from March, and no BOCW registration for the new tower" value={f.notes} onChange={set('notes')}></textarea></div>
                  </React.Fragment>
                ) : (
                  <div className="field"><label>What can we help with?</label><textarea placeholder="e.g. we supply masons and helpers around Chakan and want pool access" value={f.notes} onChange={set('notes')}></textarea></div>
                )}
                <label className="consent"><input type="checkbox" checked={f.consent} onChange={set('consent')} /> <span>I agree to be contacted about Labour Tech and understand my details are held under the privacy policy.</span></label>
                <button className="btn btn-primary" onClick={send} disabled={busy}>{busy ? 'Sending…' : (gap ? 'Request a gap check' : 'Send enquiry')}</button>
                {gap && <p className="small">Free of charge. The findings note is yours to keep whether or not you engage us.</p>}
              </React.Fragment>
            )}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="panel tint">
              <span className="eyebrow">What we look at</span>
              <h3 className="h3" style={{ margin: '10px 0 14px' }}>Six things, 45 minutes, one site.</h3>
              <div className="list">
                {GAPCHECK.map(([t, b]) => <div key={t} style={{ padding: '12px 0', display: 'block' }}><b style={{ color: 'var(--ink)' }}>{t}</b><div className="small" style={{ marginTop: 4 }}>{b}</div></div>)}
              </div>
            </div>
            <div className="panel">
              <span className="eyebrow">Reach us</span>
              <div style={{ display: 'grid', gap: 16, marginTop: 16 }}>
                {[['map-pin', 'Office', '101, First Floor, Ganesha Building, Phase 1, Rajiv Gandhi Infotech Park, Hinjawadi, Maharashtra 411057'], ['phone', 'Phone', '+91 73979 13806'], ['mail', 'Email', 'support@labourtech.in'], ['clock', 'Hours', 'Monday to Saturday, 9:30am – 6:30pm IST']].map(([ic, t, v]) => (
                  <div key={t} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'start' }}>
                    <span style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--lav)', color: 'var(--blue)', display: 'grid', placeItems: 'center' }}><Icon n={ic} size={18} /></span>
                    <div><b style={{ display: 'block', fontSize: 14.5, color: 'var(--ink)' }}>{t}</b><span className="small">{v}</span></div>
                  </div>
                ))}
              </div>
              <p className="small" style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--line)' }}>Labour Tech · GSTIN 27GCDPS7749F1Z0</p>
            </div>
            <div className="panel tint">
              <span className="eyebrow">Already decided?</span>
              <p style={{ marginTop: 10 }}>Contractors can register and subscribe without talking to us. Retainers start with a gap check so the scope is priced against what your site actually needs.</p>
              <div className="hero-btns" style={{ justifyContent: 'flex-start', marginTop: 16 }}><a className="btn btn-primary btn-sm" href="get-started.html">Start registration</a><a className="btn btn-ghost btn-sm" href="how-it-works.html">How it works</a></div>
            </div>
          </div>
        </div>
      </div></section>
      <section className="band-sm"><div className="wrap">
        <SecTitle eyebrow="After the visit" title="What you get, and what happens next" center={false} />
        <div className="grid3">
          {[['Within 48 hours', 'A two-page findings note: what is in place, what is missing, and what the exposure is on that site. Written for your finance head, not for us.'], ['On page two', 'A retainer quote for that site if you want one — seats by trade, scope, and the monthly figure. No obligation to take it.'], ['If you do nothing', 'The note is still yours. Several things on it you can fix yourself in a week, and we will say which.']].map(([t, b]) => (
            <div className="svc" key={t}><h3>{t}</h3><p>{b}</p></div>
          ))}
        </div>
        <div className="note" style={{ marginTop: 24 }}>The gap check is an observation-based review, not a statutory audit or legal opinion. It does not create a compliance certification and does not transfer liability. Where something needs a lawyer or your CA, we will say so.</div>
      </div></section>
    </Page>
  );
}

LTMount('contact', <ContactPage />);