function AddClient({ onClose, onAdd }) {
  const [form, setForm] = React.useState({
    name: "", city: "", phone: "", category: "", rating: "", notes: ""
  });
  const [error, setError] = React.useState("");

  function set(k, v) { setForm(prev => ({ ...prev, [k]: v })); }

  function submit(e) {
    e.preventDefault();
    if (!form.name.trim()) { setError("Business name is required."); return; }
    if (!form.city.trim()) { setError("City is required."); return; }
    const id = "GMA-" + String(Math.floor(Math.random() * 9000) + 1000);
    const client = {
      id,
      name:    form.name.trim(),
      city:    form.city.trim(),
      phone:   form.phone.trim() || "—",
      category: form.category.trim() || "General",
      rating:  parseFloat(form.rating) || 0,
      reviews: 0,
      mrr:     0,
      stage:   "targeted",
      built:   null, deployed: null, lastContact: null, nextCall: null,
      notes:   form.notes.trim(),
      live:    false,
    };
    onAdd(client);
    onClose();
  }

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons({ attrs: { "stroke-width": "1.5" } });
  });

  return (
    <>
      <div className="cm-drawerScrim" onClick={onClose} />
      <aside className="cm-drawer" role="dialog" aria-label="Add client" style={{ width: 480 }}>
        <div className="cm-drawer__bar">
          <span className="cm-drawer__crumb">New client</span>
          <div className="cm-drawer__bar-r">
            <button className="cm-iconbtn" onClick={onClose}><i data-lucide="x" className="cm-icon-sm"></i></button>
          </div>
        </div>

        <form className="cm-drawer__body" onSubmit={submit} style={{ gap: 16 }}>
          <div className="cm-section" style={{ marginBottom: 0 }}>
            <label className="cm-sectionHead" htmlFor="ac-name">Business name *</label>
            <input id="ac-name" className="cm-input" placeholder="e.g. Peak Pressure Washing"
              value={form.name} onChange={e => set("name", e.target.value)} autoFocus />
          </div>

          <div className="cm-section" style={{ marginBottom: 0 }}>
            <label className="cm-sectionHead" htmlFor="ac-city">City *</label>
            <input id="ac-city" className="cm-input" placeholder="e.g. Kokomo, IN"
              value={form.city} onChange={e => set("city", e.target.value)} />
          </div>

          <div style={{ display: "flex", gap: 10 }}>
            <div className="cm-section" style={{ flex: 1, marginBottom: 0 }}>
              <label className="cm-sectionHead" htmlFor="ac-phone">Phone</label>
              <input id="ac-phone" className="cm-input" placeholder="(317) 555-0100"
                value={form.phone} onChange={e => set("phone", e.target.value)} />
            </div>
            <div className="cm-section" style={{ flex: 1, marginBottom: 0 }}>
              <label className="cm-sectionHead" htmlFor="ac-cat">Category</label>
              <input id="ac-cat" className="cm-input" placeholder="Lawn care"
                value={form.category} onChange={e => set("category", e.target.value)} />
            </div>
          </div>

          <div className="cm-section" style={{ marginBottom: 0 }}>
            <label className="cm-sectionHead" htmlFor="ac-rating">Google rating</label>
            <input id="ac-rating" className="cm-input" placeholder="4.8" type="number" min="1" max="5" step="0.1"
              value={form.rating} onChange={e => set("rating", e.target.value)} />
          </div>

          <div className="cm-section" style={{ marginBottom: 0 }}>
            <label className="cm-sectionHead" htmlFor="ac-notes">Notes</label>
            <textarea id="ac-notes" className="cm-textarea" placeholder="Any initial notes..."
              value={form.notes} onChange={e => set("notes", e.target.value)} style={{ minHeight: 80 }} />
          </div>

          {error && (
            <div style={{ fontSize: 12, color: "var(--color-ink-subtle)", padding: "6px 10px",
              background: "rgba(229,83,75,0.1)", border: "1px solid rgba(229,83,75,0.25)",
              borderRadius: 6 }}>{error}</div>
          )}

          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", paddingTop: 4 }}>
            <button type="button" className="cm-btn cm-btn--ghost" onClick={onClose}>Cancel</button>
            <button type="submit" className="cm-btn cm-btn--primary">
              <i data-lucide="plus" className="cm-icon-xs"></i>Add client
            </button>
          </div>
        </form>
      </aside>
    </>
  );
}
window.AddClient = AddClient;