// CtaBanner — the blue strip "Ready to Compare Electricity Plans?" with ZIP modal.
function ZipModal({ onClose }) {
  const [zip, setZip] = React.useState('');
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  return (
    <div className="zm-overlay" onClick={onClose}>
      <div className="zm" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="zm-title">
        <button className="zm-close" onClick={onClose} aria-label="Close">
          <I.X />
        </button>
        <h3 id="zm-title" className="zm-title" style={{ color: "rgb(29, 42, 85)" }}>Find Your Energy Rate</h3>
        <form className="zm-form" onSubmit={(e) => e.preventDefault()}>
          <label className="zm-label" htmlFor="zm-zip">
            Enter your ZIP code <span className="zm-req">*</span>
          </label>
          <input
            id="zm-zip"
            className="zm-input"
            type="text"
            inputMode="numeric"
            maxLength="5"
            placeholder="Enter ZIP code"
            value={zip}
            onChange={(e) => setZip(e.target.value.replace(/\D/g, ''))}
            autoFocus />
          <button type="submit" className="zm-cta">Find Rates</button>
        </form>
      </div>
    </div>
  );
}

function CtaBanner(props) {
  const {
    title = <React.Fragment>Ready to <b>Compare Electricity Plans?</b></React.Fragment>,
    cta = 'Show Plans'
  } = props || {};
  const [open, setOpen] = React.useState(false);
  return (
    <section className="compare-band">
      <div className="container compare-inner">
        <h3>{title}</h3>
        <button className="btn-compare" style={{ padding: "12px 28px" }} onClick={() => setOpen(true)}>{cta}</button>
      </div>
      {open && <ZipModal onClose={() => setOpen(false)} />}
    </section>
  );
}

window.CtaBanner = CtaBanner;
window.ZipModal = ZipModal;