import Link from 'next/link'

export default function Docs() {
  return (
    <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 20px' }}>
      <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 60 }}>
        <Link href="/" style={{ fontSize: 24, fontWeight: 700, color: '#fff', textDecoration: 'none' }}>Crawl API</Link>
        <Link href="/" style={{ color: '#888', textDecoration: 'none' }}>← Back</Link>
      </nav>

      <h1 style={{ fontSize: 42, marginBottom: 16 }}>API Documentation</h1>
      <p style={{ color: '#888', marginBottom: 48 }}>
        API reference for Crawl API — 9 endpoints for crawling, scraping, screenshots, PDFs, and more.
      </p>

      <section style={{ marginBottom: 48 }}>
        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Base URL</h2>
        <code style={{ background: '#111', padding: '12px 16px', borderRadius: 8, display: 'block' }}>
          https://crawlapi.dev
        </code>
      </section>

      <section style={{ marginBottom: 48 }}>
        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Authentication</h2>
        <p style={{ color: '#888', marginBottom: 12 }}>All requests require an API key sent via the x-api-key header.</p>
        <code style={{ background: '#111', padding: '12px 16px', borderRadius: 8, display: 'block' }}>
          x-api-key: YOUR_API_KEY
        </code>
      </section>

      <section style={{ marginBottom: 48 }}>
        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Request format</h2>
        <p style={{ color: '#888', marginBottom: 12 }}>Every endpoint accepts a POST request with a JSON body. The url field is always required.</p>
        <pre style={{ background: '#111', padding: 16, borderRadius: 8, overflow: 'auto' }}>
{`curl -X POST https://crawlapi.dev/api/screenshot \\
  -H "Content-Type: application/json" \\
  -H "x-api-key: YOUR_API_KEY" \\
  -d '{"url": "https://example.com"}'`}
        </pre>
      </section>

      <section style={{ marginBottom: 48 }}>
        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Endpoints</h2>
        {[
          { path: '/api/crawl', desc: 'Full JS-rendered page crawl' },
          { path: '/api/content', desc: 'Raw HTML content' },
          { path: '/api/screenshot', desc: 'PNG screenshot' },
          { path: '/api/pdf', desc: 'PDF export' },
          { path: '/api/markdown', desc: 'Markdown extraction' },
          { path: '/api/snapshot', desc: 'HTML + screenshot' },
          { path: '/api/scrape', desc: 'CSS selector extraction' },
          { path: '/api/json', desc: 'Structured JSON' },
          { path: '/api/links', desc: 'Extract all links' },
        ].map((ep) => (
          <div key={ep.path} style={{ background: '#111', borderRadius: 8, padding: 16, marginBottom: 12 }}>
            <span style={{ color: '#4ade80', fontWeight: 600 }}>POST</span>{' '}
            <code>{ep.path}</code>
            <div style={{ color: '#888', marginTop: 4 }}>{ep.desc}</div>
          </div>
        ))}
      </section>

      <section style={{ marginBottom: 48 }}>
        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Rate limits</h2>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <tbody>
            {[
              { label: 'Requests per minute', value: '60' },
              { label: 'Max concurrent', value: '10' },
              { label: 'Request timeout', value: '30s' },
            ].map((row) => (
              <tr key={row.label} style={{ borderBottom: '1px solid #222' }}>
                <td style={{ padding: '12px 0', color: '#888' }}>{row.label}</td>
                <td style={{ padding: '12px 0', textAlign: 'right' }}>{row.value}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      <section>
        <h2 style={{ fontSize: 24, marginBottom: 16 }}>Error handling</h2>
        <pre style={{ background: '#111', padding: 16, borderRadius: 8, overflow: 'auto' }}>
{`{ "success": false, "error": "Missing or invalid API key" }`}
        </pre>
        <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 16 }}>
          <tbody>
            {[
              { code: '400', meaning: 'Missing or invalid URL / bad options' },
              { code: '401', meaning: 'Missing or invalid API key' },
              { code: '403', meaning: 'Insufficient credits' },
              { code: '405', meaning: 'Wrong HTTP method (use POST)' },
              { code: '429', meaning: 'Rate limit exceeded' },
              { code: '500', meaning: 'Server error' },
            ].map((row) => (
              <tr key={row.code} style={{ borderBottom: '1px solid #222' }}>
                <td style={{ padding: '12px 0' }}>{row.code}</td>
                <td style={{ padding: '12px 0', color: '#888' }}>{row.meaning}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </main>
  )
}