components/Documentation.jsx

import Link from 'next/link'
import { FiBook, FiCode, FiCpu, FiServer, FiDatabase, FiCloud, FiTerminal, FiGitBranch, FiZap } from 'react-icons/fi'
import { useState } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

export default function Documentation() {
  const [activeSection, setActiveSection] = useState('getting-started')
  const [searchTerm, setSearchTerm] = useState('')

  const docs = [
    {
      id: 'getting-started',
      title: 'Getting Started',
      icon: <FiBook />,
      content: `
# Getting Started with SMH-FULL-CODE

## Installation

To get started with our VSCode-like IDE, follow these simple steps:

1. **Clone the repository**:
   \`\`\`bash
   git clone https://github.com/your-repo/smh-full-code.git
   cd smh-full-code
   \`\`\`

2. **Install dependencies**:
   \`\`\`bash
   yarn install
   \`\`\`

3. **Run the development server**:
   \`\`\`bash
   yarn dev
   \`\`\`

## System Requirements

- Node.js 18+
- yarn or npm
- 4GB RAM minimum (8GB recommended for AI models)
- 10GB free disk space

## First Steps

1. Launch the IDE
2. Select your preferred programming language
3. Start coding with AI assistance
4. Run and test your code
5. Use the integrated terminal and debug tools
      `,
      link: '/docs/getting-started'
    },
    {
      id: 'ide-features',
      title: 'IDE Features',
      icon: <FiCode />,
      content: `
# SMH-FULL-CODE Features

## VSCode-like Interface

- **Monaco Editor Integration**: Full-featured code editor with syntax highlighting
- **Multiple Panels**: Editor, Terminal, Debug Console
- **Keyboard Shortcuts**: Familiar VSCode shortcuts (Ctrl+S, F5, etc.)
- **Theme Support**: Multiple color themes including VSCode Dark/Light

## Advanced Features

- **Integrated Terminal**: Run commands without leaving the IDE
- **Debug Console**: Set breakpoints and inspect variables
- **Snippet Management**: Save and load code snippets
- **Project Explorer**: File and folder management
- **AI Integration**: Code completion and suggestions

## Language Support

- JavaScript/TypeScript
- Python
- Java
- C#
- Go
- Rust
- HTML/CSS
- And more...
      `,
      link: '/docs/ide-features'
    },
    {
      id: 'model-integration',
      title: 'Model Integration',
      icon: <FiCpu />,
      content: `
# AI Model Integration

## Available Models

1. **CodeGen 2B**: Python/JavaScript code generation
2. **StableCode**: Multi-language code completion
3. **DeepSeek Coder**: Advanced code understanding
4. **Offline Models**: For local development without internet

## Integration Steps

1. **Download the model** from the Models page
2. **Initialize in your code**:
   \`\`\`javascript
   const model = require('@smh-full-code/codegen')
   const instance = new model({ temperature: 0.7 })
   \`\`\`

3. **Use the model**:
   \`\`\`javascript
   const result = await instance.generate('Write a React component')
   \`\`\`

## Best Practices

- Use lower temperatures (0.2-0.5) for more deterministic outputs
- Higher temperatures (0.7-1.0) for more creative outputs
- Limit max tokens to control response length
      `,
      link: '/docs/models'
    },
    {
      id: 'offline-development',
      title: 'Offline Development',
      icon: <FiDatabase />,
      content: `
# Offline Development Guide

## Setting Up Offline Mode

1. Download required models
2. Configure local storage paths
3. Enable offline mode in settings

## Benefits

- Work without internet connection
- Faster response times
- Data privacy and security
- Reduced API costs

## Limitations

- Model updates require manual download
- Limited to downloaded models
- No cloud sync in offline mode
      `,
      link: '/docs/offline'
    },
    {
      id: 'backend-integration',
      title: 'Backend Integration',
      icon: <FiServer />,
      content: `
# Backend Integration

## API Endpoints

| Endpoint | Method | Description |
|----------|--------|-------------|
| /api/execute | POST | Execute code |
| /api/models | GET | List available models |
| /api/models/download | POST | Download model |

## Example Integration

\`\`\`javascript
const axios = require('axios')

// Execute code
const response = await axios.post('/api/execute', {
  code: 'console.log("Hello")',
  language: 'javascript'
})

// Download model
const model = await axios.post('/api/models/download', {
  modelId: 1
})
\`\`\`

## Authentication

API keys are required for production use. Get your key from the account settings.
      `,
      link: '/docs/backend'
    },
    {
      id: 'deployment',
      title: 'Deployment Guide',
      icon: <FiCloud />,
      content: `
# Deployment Options

## Docker Deployment

1. Build the image:
   \`\`\`bash
   docker build -t smh-full-code .
   \`\`\`

2. Run the container:
   \`\`\`bash
   docker run -p 3000:3000 smh-full-code
   \`\`\`

## Cloud Platforms

### Vercel
1. Connect your GitHub repository
2. Configure environment variables
3. Deploy with one click

### AWS
1. Create an EC2 instance
2. Install Docker
3. Run the container

## Environment Variables

| Variable | Description | Required |
|----------|-------------|----------|
| NODE_ENV | production/development | Yes |
| PORT | Server port | No (default: 3000) |
| API_KEY | For external services | Optional |
      `,
      link: '/docs/deployment'
    }
  ]

  const filteredDocs = docs.filter(doc =>
    doc.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    doc.content.toLowerCase().includes(searchTerm.toLowerCase())
  )

  return (
    <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
      <div className="lg:col-span-1">
        <div className="bg-white rounded-lg shadow-md p-4 sticky top-24">
          <div className="relative mb-4">
            <FiSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
            <input
              type="text"
              placeholder="Search docs..."
              value={searchTerm