// BookCallModal.jsx — the contact-call modal

const bcStyles = {
  scrim: { position: 'fixed', inset: 0, background: 'rgba(11,11,10,0.6)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100, padding: 24 },
  modal: { background: 'var(--bg-elevated)', borderRadius: 'var(--r-md)', boxShadow: 'var(--shadow-lg)', maxWidth: 520, width: '100%', padding: '32px 36px' },
  head: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500 },
  close: { background: 'transparent', border: 'none', cursor: 'pointer', fontSize: 22, color: 'var(--fg-muted)', padding: 0, lineHeight: 1 },
  h: { fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 24, lineHeight: 1.2, letterSpacing: '-0.01em', margin: '6px 0 8px' },
  sub: { fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.5, marginBottom: 24 },
  fld: { display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 },
  label: { fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500 },
  input: { fontFamily: 'var(--font-sans)', fontSize: 14, padding: '11px 12px', background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 'var(--r-md)', color: 'var(--fg)', outline: 'none' },
  row: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 },
  submit: { fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 14, padding: '13px 18px', background: 'var(--powder-500)', color: 'var(--ink-0)', border: 'none', borderRadius: 'var(--r-md)', cursor: 'pointer', width: '100%', marginTop: 12, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8 },
  done: { padding: '32px 4px', textAlign: 'center', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 22, lineHeight: 1.3 },
  doneSub: { fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-muted)', marginTop: 10, lineHeight: 1.5 },
};

function BookCallModal({ open, onClose }) {
  const [submitted, setSubmitted] = React.useState(false);
  if (!open) return null;
  return (
    <div style={bcStyles.scrim} onClick={onClose}>
      <div style={bcStyles.modal} onClick={e => e.stopPropagation()} data-modal-card>
        {!submitted ? (
          <>
            <div style={bcStyles.head}>
              <span style={bcStyles.eyebrow}>Book a fit call</span>
              <button style={bcStyles.close} onClick={onClose} aria-label="Close">×</button>
            </div>
            <h3 style={bcStyles.h}>30 minutes. No deck. Just numbers.</h3>
            <p style={bcStyles.sub}>We'll review your ad accounts live and tell you, honestly, whether we can move your CPL.</p>
            <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
              <div style={bcStyles.row} data-modal-row>
                <div style={bcStyles.fld}>
                  <label style={bcStyles.label}>Your name</label>
                  <input style={bcStyles.input} required placeholder="Rohit Arora"/>
                </div>
                <div style={bcStyles.fld}>
                  <label style={bcStyles.label}>Business</label>
                  <input style={bcStyles.input} required placeholder="Arora Dental"/>
                </div>
              </div>
              <div style={bcStyles.fld}>
                <label style={bcStyles.label}>Work email</label>
                <input style={bcStyles.input} type="email" required placeholder="rohit@aroradental.in"/>
              </div>
              <div style={bcStyles.row} data-modal-row>
                <div style={bcStyles.fld}>
                  <label style={bcStyles.label}>Monthly ad spend</label>
                  <input style={bcStyles.input} required placeholder="₹1,50,000"/>
                </div>
                <div style={bcStyles.fld}>
                  <label style={bcStyles.label}>Phone</label>
                  <input style={bcStyles.input} type="tel" placeholder="+91 98765 43210"/>
                </div>
              </div>
              <button type="submit" style={bcStyles.submit}><Mark size={13} color="var(--ink-0)"/> Request a call</button>
            </form>
          </>
        ) : (
          <div style={bcStyles.done}>
            <Mark size={40}/>
            <div style={{marginTop: 14}}>We'll be in touch within one trading day.</div>
            <div style={bcStyles.doneSub}>If we can't help, we'll tell you that too — and refer you to someone who can.</div>
            <button onClick={onClose} style={{...bcStyles.submit, background:'var(--ink-1000)', maxWidth: 220, marginTop: 24}}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { BookCallModal });