/* Interactive "Test the AI receptionist" modal — steps a live call from
   ringing → answered → qualified → routed, mirroring the product flow. */
function CallModal({ open, onClose }) {
  const [step, setStep] = useState(0);
  React.useEffect(() => { if (open) setStep(0); }, [open]);
  if (!open) return null;

  const steps = [
    { tag: 'Incoming Call', tagDot: true, advance: 'Answer the call', body: (
      <div style={{ textAlign: 'center', padding: '20px 0' }}>
        <div className="ringer"><Icon name="phoneVolume" size={30} color="#050505" /></div>
        <div className="dnum" style={{ marginTop: 18 }}>(604) 555-0148</div>
        <div className="dsub">Unknown caller · 02:14 AM</div>
      </div>
    )},
    { tag: 'AI Receptionist', advance: 'Caller responds', body: (
      <div className="dconvo" style={{ borderTop: 0, marginTop: 0, paddingTop: 0 }}>
        <div className="dmsg ai"><span className="ava"><Icon name="headset" size={15} /></span>
          <div><div className="who">AI Receptionist</div><div className="txt">“Thanks for calling. I can get someone out to you. What's going on?”</div></div></div>
      </div>
    )},
    { tag: 'Qualifying', advance: 'Score & route', body: (
      <div className="dconvo" style={{ borderTop: 0, marginTop: 0, paddingTop: 0 }}>
        <div className="dmsg"><span className="ava"><Icon name="phone" size={15} /></span>
          <div><div className="who">Caller</div><div className="txt">“My garage door is stuck halfway and my car is trapped. I need someone today.”</div></div></div>
        <div className="dmsg ai"><span className="ava"><Icon name="clipboardCheck" size={15} /></span>
          <div><div className="who">AI Receptionist</div><div className="txt">“Got it. Name, address, and is the door fully jammed? I'm flagging this as urgent.”</div></div></div>
      </div>
    )},
    { tag: 'Routed to Owner', tagOk: true, advance: 'Run another call', body: (
      <div style={{ padding: '6px 0' }}>
        <div className="drow" style={{ marginBottom: 14 }}>
          <span className="dsub" style={{ fontWeight: 700, color: '#fff' }}>Garage door repair · Emergency</span>
          <span className="pri-pill">Priority: High</span>
        </div>
        <div className="drouted" style={{ marginTop: 0 }}>
          <span className="l"><Icon name="circleCheck" /> Routed to Owner · Mike</span>
          <span className="r">Callback in 0:09</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
          <div className="mono" style={{ fontSize: 10, color: '#8a8a8a' }}>Lead captured</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--yellow)' }}>+$420 <span style={{ fontSize: 12 }} className="mono">est. value</span></div>
        </div>
      </div>
    )},
  ];
  const s = steps[step];
  const tagCls = s.tagOk ? 'dlabel' : 'dlabel';
  return (
    <div className="modal-ov" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="drow" style={{ marginBottom: 4 }}>
          <span className={tagCls} style={{ color: s.tagOk ? 'var(--green)' : s.tag === 'Incoming Call' ? '#fff' : 'var(--yellow)' }}>
            {s.tagDot && <span className="dot live" style={{ background: 'var(--green)' }}></span>}
            {s.tag}
          </span>
          <button className="modal-x" onClick={onClose}><Icon name="xmark" size={16} /></button>
        </div>
        <div className="modal-body">{s.body}</div>
        <div className="modal-steps">
          {steps.map((_, i) => <span key={i} className={'sdot' + (i <= step ? ' on' : '')}></span>)}
        </div>
        <Button variant="primary" className="block" icon={step === 3 ? 'phoneVolume' : 'arrowRight'}
          onClick={() => setStep(step >= 3 ? 0 : step + 1)}>{s.advance}</Button>
      </div>
    </div>
  );
}
window.CallModal = CallModal;