function AISearch() {
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const [thinking, setThinking] = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (open && inputRef.current) inputRef.current.focus();
  }, [open]);

  const submit = (e) => {
    e.preventDefault();
    if (!query.trim()) return;
    setThinking(true);
    setTimeout(() => setThinking(false), 900);
  };

  return (
    <React.Fragment>
      <button
        data-cursor="link"
        onClick={() => setOpen(true)}
        aria-label="AI search"
        style={{
          background: "none", border: "1px solid rgba(255,255,255,0.0)", cursor: "pointer",
          color: "inherit", padding: 6, display: "flex", alignItems: "center", gap: 8,
        }}
      >
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <circle cx="8.5" cy="8.5" r="6" stroke="currentColor" strokeWidth="1.8" />
          <path d="M13 13L17 17" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
        </svg>
      </button>

      <div
        style={{
          position: "fixed", inset: 0, zIndex: 700,
          background: "rgba(17,17,17,0.92)",
          backdropFilter: "blur(6px)",
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          padding: "0 24px",
          opacity: open ? 1 : 0,
          pointerEvents: open ? "auto" : "none",
          transition: "opacity 260ms var(--ease-confident)",
        }}
        onClick={() => setOpen(false)}
      >
        <div style={{ width: "min(720px, 90vw)" }} onClick={(e) => e.stopPropagation()}>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--color-primary)", fontWeight: 600, marginBottom: 16, textAlign: "center" }}>
            AI Search
          </div>
          <form onSubmit={submit} style={{ display: "flex", alignItems: "flex-end", gap: 16, borderBottom: "2px solid var(--white)", paddingBottom: 12 }}>
            <input
              ref={inputRef}
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Ask JMK anything — our work, our story, our approach&hellip;"
              style={{
                flex: 1, background: "none", border: "none", outline: "none",
                fontFamily: "var(--font-editorial)", fontSize: "clamp(22px,3.4vw,36px)", color: "var(--white)",
              }}
            />
            <button type="submit" data-cursor="link" style={{ background: "none", border: "none", cursor: "pointer", color: "var(--color-primary)" }}>
              <svg width="26" height="26" viewBox="0 0 20 20" fill="none">
                <path d="M4 10H16M16 10L11 5M16 10L11 15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          </form>
          <div style={{ minHeight: 32, marginTop: 20, fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", color: "rgba(255,255,255,0.6)", textAlign: "center" }}>
            {thinking ? "Thinking outside the box\u2026" : "Try \u201cshow me your paid media work\u201d or \u201cwho founded JMK Studios\u201d"}
          </div>
        </div>
        <button
          onClick={() => setOpen(false)}
          data-cursor="link"
          aria-label="Close search"
          style={{ position: "absolute", top: 28, right: 28, background: "none", border: "none", color: "var(--white)", cursor: "pointer" }}
        >
          <svg width="24" height="24" viewBox="0 0 20 20" fill="none">
            <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
          </svg>
        </button>
      </div>
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.AISearch = AISearch;