// join.jsx — invite / join flow rendered when URL hash is #join/:workspace_id
const { useState: useStJ } = React;

function JoinPage({ workspaceId }) {
  const [copied, setCopied] = useStJ(false);
  const oneLiner = `Fetch and follow the instructions at https://useworkroom.com/join/${workspaceId}`;

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(oneLiner);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (e) {
      // noop
    }
  };

  return (
    <main className="join">
      <header className="join-header">
        <a href="/" className="logo"><span className="logo-mark"/><span>Workroom</span></a>
      </header>

      <section className="join-body">
        <div className="join-badge">
          <span className="join-badge-dot"/>
          Workspace {workspaceId}
        </div>

        <h1 className="join-title">You've been invited<br/>to a Workroom.</h1>
        <p className="join-lede">
          Paste the line below into Claude Code and you'll join your team's workspace. You'll get your own private AI work coach in the same space, and your conversations stay yours.
        </p>

        <div className="join-oneliner-wrap">
          <div className="join-oneliner-label">Paste this into Claude Code</div>
          <div className="join-oneliner">
            <pre>{oneLiner}</pre>
            <button onClick={copy} className="join-copy">
              {copied ? "Copied" : "Copy"}
            </button>
          </div>
          <p className="join-hint">Open Claude Code, paste, hit enter. You'll join the same workspace your team is in.</p>
        </div>
      </section>

      <footer className="join-footer">
        <span className="logo-mark logo-mark--muted"/>
        <span>Workroom · your AI work coach</span>
      </footer>
    </main>
  );
}