import { html, cssManager } from '@design.estate/dees-element';

export const demoFunc = () => html`
  <style>
    .demoWrapper {
      box-sizing: border-box;
      position: relative;
      width: 100%;
      min-height: 100vh;
      padding: 48px;
      background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    
    .section {
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: ${cssManager.bdTheme('#09090b', '#fafafa')};
    }
    
    .section-description {
      font-size: 14px;
      color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      margin-bottom: 16px;
    }
  </style>
  <div class="demoWrapper">
    <div class="section">
      <div class="section-title">TypeScript Code Example</div>
      <div class="section-description">A comprehensive TypeScript code example with various syntax highlighting.</div>
      <dees-dataview-codebox proglang="typescript">
interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

class UserService {
  private users: User[] = [];
  
  constructor(private apiUrl: string) {
    console.log('UserService initialized');
  }
  
  async getUsers(): Promise<User[]> {
    try {
      const response = await fetch(this.apiUrl);
      const data = await response.json();
      return data.users;
    } catch (error) {
      console.error('Failed to fetch users:', error);
      return [];
    }
  }
  
  addUser(user: User): void {
    this.users.push(user);
  }
}

// Usage example
const service = new UserService('https://api.example.com/users');
const users = await service.getUsers();
console.log('Found users:', users.length);
      </dees-dataview-codebox>
    </div>
    
    <div class="section">
      <div class="section-title">JavaScript Example</div>
      <div class="section-description">Modern JavaScript with ES6+ features.</div>
      <dees-dataview-codebox proglang="javascript">
// Array manipulation examples
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const filtered = numbers.filter(n => n > 3);

// Object destructuring
const user = { name: 'John', age: 30, city: 'New York' };
const { name, age } = user;

// Promise handling
const fetchData = async (url) => {
  const response = await fetch(url);
  return response.json();
};

// Modern syntax
const greet = (name = 'World') => \`Hello, \${name}!\`;
console.log(greet('ShadCN'));
      </dees-dataview-codebox>
    </div>
    
    <div class="section">
      <div class="section-title">Python Example</div>
      <div class="section-description">Python code with classes and type hints.</div>
      <dees-dataview-codebox proglang="python">
from typing import List, Optional
import asyncio

class DataProcessor:
    """A simple data processor class"""
    
    def __init__(self, name: str):
        self.name = name
        self.data: List[dict] = []
    
    async def process_data(self, items: List[dict]) -> List[dict]:
        """Process data items asynchronously"""
        results = []
        for item in items:
            # Simulate async processing
            await asyncio.sleep(0.1)
            results.append({
                'id': item.get('id'),
                'processed': True,
                'processor': self.name
            })
        return results
    
    def get_summary(self) -> dict:
        return {
            'processor': self.name,
            'items_processed': len(self.data)
        }

# Usage
processor = DataProcessor("Main")
data = await processor.process_data([{'id': 1}, {'id': 2}])
      </dees-dataview-codebox>
    </div>
    
    <div class="section">
      <div class="section-title">CSS Example</div>
      <div class="section-description">Modern CSS with custom properties and animations. Note the shorter language label.</div>
      <dees-dataview-codebox proglang="css">
/* Modern CSS with custom properties */
:root {
  --primary-color: #3b82f6;
  --secondary-color: #10b981;
  --background: #ffffff;
  --text-color: #09090b;
  --border-radius: 6px;
}

.card {
  background: var(--background);
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius);
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
      </dees-dataview-codebox>
    </div>
    
    <div class="section">
      <div class="section-title">JSON Example</div>
      <div class="section-description">JSON configuration with proper formatting.</div>
      <dees-dataview-codebox proglang="json">
{
  "name": "@design.estate/dees-catalog",
  "version": "1.10.7",
  "description": "A comprehensive catalog of web components",
  "main": "dist_ts_web/index.js",
  "type": "module",
  "scripts": {
    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
    "watch": "tswatch element",
    "test": "tstest test/ --web --verbose"
  },
  "dependencies": {
    "@design.estate/dees-element": "^2.0.45",
    "highlight.js": "^11.9.0"
  }
}
      </dees-dataview-codebox>
    </div>
  </div>
`