// Report a Bug — modal popup (matches product design).
function BugModal({ onClose }) {
  const [sev, setSev] = useState('med');
  const [title, setTitle] = useState('');
  const [sent, setSent] = useState(false);
  const submit = () => { setSent(true); setTimeout(onClose, 1100); };
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal zd-scroll" onClick={e => e.stopPropagation()}>
        <button className="modal-x" onClick={onClose} aria-label="Close"><Icon name="x" size={18} /></button>
        {sent ? (
          <div style={{ padding:'54px 28px', textAlign:'center' }}>
            <span style={{ width:62, height:62, borderRadius:'50%', background:'var(--green-50)', display:'grid', placeItems:'center', margin:'0 auto 16px' }}>
              <Icon name="check" size={30} color="var(--green-600)" />
            </span>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:21 }}>Report sent — thank you</div>
            <div style={{ fontSize:14, color:'var(--fg-2)', marginTop:6 }}>Our team will take a look. We’ll follow up by email if we need more.</div>
          </div>
        ) : (
          <React.Fragment>
            <div className="modal-body">
              <span className="modal-badge"><Icon name="bug" size={13} color="var(--red-600)" /> Bug report</span>
              <h3>Report a Bug</h3>
              <div className="msub">Help us improve by describing what went wrong.</div>

              <div className="fl">
                <label className="fl-k">Title</label>
                <input placeholder="Short description of the issue" value={title} onChange={e => setTitle(e.target.value)} autoFocus />
              </div>
              <div className="fl">
                <label className="fl-k">What happened?</label>
                <textarea placeholder="Describe the bug in detail…" />
              </div>
              <div className="fl">
                <label className="fl-k">Steps to reproduce <span className="opt">(optional)</span></label>
                <textarea placeholder={"1. Go to…\n2. Click…\n3. See error"} />
              </div>
              <div className="fl">
                <label className="fl-k">Severity</label>
                <div className="sev-seg">
                  <button className={sev==='low' ? 'on-low' : ''} onClick={() => setSev('low')}>Low</button>
                  <button className={sev==='med' ? 'on-med' : ''} onClick={() => setSev('med')}>Medium</button>
                  <button className={sev==='high' ? 'on-high' : ''} onClick={() => setSev('high')}>High</button>
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
              <button className="btn btn-danger" onClick={submit}><Icon name="send" size={15} /> Submit Report</button>
            </div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}
window.BugModal = BugModal;