// Inputs.jsx — labeled text field, select, info banner
const Field = ({ label, value, onChange, placeholder, icon, error, type = "text" }) => {
  const [focus, setFocus] = React.useState(false);
  return (
    <div className="bee-field">
      <div className="bee-field-label">{label}</div>
      <div className={`bee-input-shell ${icon ? "icon-left" : ""}`}>
        {icon && <span className="icon">{icon}</span>}
        <input
          type={type}
          className={`bee-input ${focus ? "active" : ""} ${error ? "error" : ""}`}
          value={value || ""}
          placeholder={placeholder}
          onChange={(e) => onChange && onChange(e.target.value)}
          onFocus={() => setFocus(true)}
          onBlur={() => setFocus(false)}
        />
      </div>
      {error && (
        <div style={{ fontSize: 12, color: "var(--bee-danger)", fontFamily: "var(--bee-font-body)" }}>{error}</div>
      )}
    </div>
  );
};

const Select = ({ label, value, onChange, options = [], placeholder = "Select…" }) => (
  <div className="bee-field">
    <div className="bee-field-label">{label}</div>
    <div className="bee-input-shell">
      <select
        className="bee-input"
        value={value || ""}
        onChange={(e) => onChange && onChange(e.target.value)}
        style={{ appearance: "none", paddingRight: 40, cursor: "pointer" }}
      >
        <option value="" disabled>{placeholder}</option>
        {options.map((o) => (
          <option key={o} value={o}>{o}</option>
        ))}
      </select>
      <span style={{ position: "absolute", right: 18, top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "#71717A" }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
      </span>
    </div>
  </div>
);

const InfoBanner = ({ children }) => <div className="bee-banner-info">{children}</div>;

// Lucide-ish stroke icons (subset, hand-inlined)
const Icons = {
  user: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="20" height="20"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
  ),
  calendar: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="20" height="20"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
  ),
  mail: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="20" height="20"><path d="M4 4h16v16H4z"/><polyline points="22,6 12,13 2,6"/></svg>
  ),
  pin: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="20" height="20"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
  ),
  search: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="20" height="20"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
  ),
  check: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="18" height="18"><polyline points="20 6 9 17 4 12"/></svg>
  ),
  chevron: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="18" height="18"><polyline points="9 18 15 12 9 6"/></svg>
  ),
};

window.Field = Field;
window.Select = Select;
window.InfoBanner = InfoBanner;
window.Icons = Icons;