// Full-screen search overlay with live filtering
function SearchOverlay({ open, onClose, onOpen, onAdd }) {
  const [q, setQ] = useState("");
  const inputRef = useRef(null);

  useEffect(() => {
    if (!open) return;
    setQ("");
    const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 120);
    return () => clearTimeout(t);
  }, [open]);

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape" && open) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  const query = q.trim().toLowerCase();
  const results = query
    ? PRODUCTS.filter((p) =>
        [p.name, p.category, p.character, ...(p.notes || [])].join(" ").toLowerCase().includes(query))
    : [];
  const suggestions = ["Spritz", "Apéritif", "Bitterorange", "Gurke", "Geschenk"];

  const openProduct = (p) => { onClose(); onOpen(p); };

  return (
    <div className={`search${open ? " open" : ""}`} aria-hidden={!open}>
      <div className="search__bar">
        <div className="search__inner search__row">
          <Icon name="search" size={26} color="var(--brand)" />
          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)} placeholder="Wonach ist dir heute?" />
          <button className="iconbtn" onClick={onClose} aria-label="Schliessen"><Icon name="x" size={22} /></button>
        </div>
      </div>
      <div className="search__body">
        <div className="search__inner">
          {!query && (
            <div className="search__suggest">
              <span className="search__count" style={{ margin: 0 }}>Beliebte Suchen</span>
              {suggestions.map((s) => (
                <button key={s} className="chip" onClick={() => setQ(s)}>{s}</button>
              ))}
            </div>
          )}
          {query && results.length > 0 && (
            <React.Fragment>
              <div className="search__count">{results.length} {results.length === 1 ? "Treffer" : "Treffer"}</div>
              <div className="grid grid--4">
                {results.map((p) => <ProductCard key={p.id} p={p} onOpen={openProduct} onAdd={onAdd} />)}
              </div>
            </React.Fragment>
          )}
          {query && results.length === 0 && (
            <div className="search__empty">
              <p>Nichts gefunden für „{q}".<br />Probier mal „Spritz" oder „Bitterorange".</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { SearchOverlay });