import { Link } from 'react-router-dom';
import {
  CHROME_STORE,
  REPO,
  REPO_CONDUCT,
  REPO_ISSUES,
  REPO_LICENSE,
  VSCODE_MARKETPLACE,
} from '../links';

export function CommunityPage() {
  return (
    <div className="wrap page">
      <article className="docs-content">
        <h1>Community</h1>
        <p className="intro">
          LexAI is maintained in the open. Use these links to install, report issues, and follow the
          project.
        </p>

        <section className="docs-block" id="source">
          <h2>Source &amp; discussion</h2>
          <div className="package-grid">
            <a className="package-card" href={REPO} target="_blank" rel="noreferrer">
              <strong>Repository</strong>
              <p>Source, issues, and pull requests on Gitea.</p>
              <span className="more">git.juankibin.space/kibin/LexAI</span>
            </a>
            <a className="package-card" href={REPO_ISSUES} target="_blank" rel="noreferrer">
              <strong>Bug report</strong>
              <p>Use the issue template. Redact API keys.</p>
              <span className="more">Open an issue</span>
            </a>
            <a className="package-card" href={REPO_CONDUCT} target="_blank" rel="noreferrer">
              <strong>Code of Conduct</strong>
              <p>Contributor Covenant. Be kind and stay on topic.</p>
              <span className="more">Read</span>
            </a>
          </div>
        </section>

        <section className="docs-block" id="install">
          <h2>Install channels</h2>
          <ul>
            <li>
              <a href={CHROME_STORE} target="_blank" rel="noreferrer">
                Chrome Web Store
              </a>
            </li>
            <li>
              <a href={VSCODE_MARKETPLACE} target="_blank" rel="noreferrer">
                VS Code Marketplace
              </a>{' '}
              — <code>JuanKibin.lexai-vscode</code>
            </li>
            <li>
              CLI — build from the repo (<Link to="/docs">docs</Link>)
            </li>
          </ul>
        </section>

        <section className="docs-block" id="audience">
          <h2>Who it’s for</h2>
          <p>
            People who already hold an LLM API key and want inline writing or prompt help without a
            SaaS subscription. Developers using Chrome, VS Code / Cursor, or a terminal agent loop.
          </p>
        </section>

        <section className="docs-block" id="license">
          <h2>License</h2>
          <p>
            LexAI is released under the{' '}
            <a href={REPO_LICENSE} target="_blank" rel="noreferrer">
              MIT License
            </a>
            .
          </p>
        </section>
      </article>
    </div>
  );
}