import { Breadcrumbs } from '../components/Breadcrumbs';
import { REPO, REPO_CONDUCT, REPO_CONTRIBUTING } from '../links';

export function ContributePage() {
  return (
    <div className="wrap page">
      <article className="docs-content">
        <Breadcrumbs items={[{ label: 'Home', to: '/' }, { label: 'Contribute' }]} />
        <h1>Contribute</h1>
        <p className="intro">
          LexAI is a monorepo: Chrome, VS Code, CLI, website, and a shared library. Please follow
          the{' '}
          <a href={REPO_CONDUCT} target="_blank" rel="noreferrer">
            Code of Conduct
          </a>
          .
        </p>

        <section className="docs-block" id="ways">
          <h2>Ways to help</h2>
          <ul>
            <li>Bug reports with reproduction steps</li>
            <li>Documentation fixes</li>
            <li>Small, focused pull requests (one concern per PR)</li>
            <li>Design discussion when a change is large or security-sensitive</li>
          </ul>
        </section>

        <section className="docs-block" id="setup">
          <h2>Development setup</h2>
          <p>Node.js 22+ and npm 11+.</p>
          <pre className="mono">{`git clone https://git.juankibin.space/kibin/LexAI.git
cd LexAI
npm run install:all`}</pre>
          <ul>
            <li>
              <code>npm run chrome:dev</code> / <code>chrome:test</code> /{' '}
              <code>chrome:typecheck</code>
            </li>
            <li>
              <code>npm run vscode:build</code> / <code>vscode:typecheck</code>
            </li>
            <li>
              <code>npm run cli:build</code> / <code>cli:typecheck</code>
            </li>
            <li>
              <code>npm run website:dev</code>
            </li>
          </ul>
          <p>
            Shared code lives in <code>src/lib/</code>. Do not import <code>@lib/crypto</code> or{' '}
            <code>@lib/messaging</code> from VS Code or CLI.
          </p>
        </section>

        <section className="docs-block" id="prs">
          <h2>Pull requests</h2>
          <ol>
            <li>
              Branch from <code>main</code> or <code>develop</code>.
            </li>
            <li>Keep the change scoped. Update docs when behavior changes.</li>
            <li>Run the checks for the package you touched.</li>
            <li>
              Use the PR template in <code>.gitea/PULL_REQUEST_TEMPLATE.md</code>.
            </li>
            <li>Never commit API keys, tokens, or personal data.</li>
          </ol>
        </section>

        <section className="docs-block" id="security">
          <h2>Security</h2>
          <p>
            If you find a vulnerability around API-key handling or data exfiltration, do not open a
            public issue with exploit details. Contact the maintainer privately (repository owner /
            Chrome Web Store listing).
          </p>
          <div className="docs-meta">
            <a className="btn btn-primary" href={REPO} target="_blank" rel="noreferrer">
              Open the repository
            </a>
            <a className="btn btn-ghost" href={REPO_CONTRIBUTING} target="_blank" rel="noreferrer">
              CONTRIBUTING.md
            </a>
          </div>
        </section>
      </article>
    </div>
  );
}