page.tsx

'use client';

import { useState } from 'react';

export default function HomePage() {
  const [code, setCode] = useState('// Welcome to DeepSite\nconsole.log("Hello, world!");');

  return (
    <div style={{ 
      minHeight: '100vh', 
      padding: '20px',
      fontFamily: 'monospace',
      backgroundColor: '#1e1e1e',
      color: '#d4d4d4'
    }}>
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        marginBottom: '20px',
        paddingBottom: '20px',
        borderBottom: '1px solid #333'
      }}>
        <h1 style={{ margin: 0, color: '#569cd6' }}>DeepSite</h1>
        <span style={{ color: '#4ec9b0' }}>AI-Powered Coding Platform</span>
      </div>
      
      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: '1fr 1fr', 
        gap: '20px',
        height: 'calc(100vh - 120px)'
      }}>
        <div style={{ 
          border: '1px solid #333', 
          borderRadius: '4px',
          overflow: 'hidden'
        }}>
          <div style={{ 
            backgroundColor: '#252526', 
            padding: '8px 12px',
            borderBottom: '1px solid #333',
            fontSize: '12px',
            color: '#cccccc'
          }}>
            Code Editor (Monaco)
          </div>
          <textarea
            value={code}
            onChange={(e) => setCode(e.target.value)}
            style={{
              width: '100%',
              height: '100%',
              backgroundColor: '#1e1e1e',
              color: '#d4d4d4',
              border: 'none',
              padding: '12px',
              fontFamily: 'monospace',
              fontSize: '14px',
              outline: 'none',
              resize: 'none'
            }}
          />
        </div>
        
        <div style={{ 
          border: '1px solid #333', 
          borderRadius: '4px',
          padding: '12px',
          backgroundColor: '#252526'
        }}>
          <h3 style={{ color: '#569cd6', marginTop: 0 }}>Status</h3>
          <div style={{ fontSize: '12px', color: '#cccccc' }}>
            <p>✅ Next.js App Running</p>
            <p>✅ Basic UI Working</p>
            <p>🔄 Monaco Editor (Pending)</p>
            <p>🔄 AI Features (Pending)</p>
          </div>
          
          <div style={{ 
            marginTop: '20px', 
            padding: '12px', 
            backgroundColor: '#1e1e1e',
            borderRadius: '4px',
            fontSize: '12px'
          }}>
            <h4 style={{ color: '#4ec9b0', marginTop: 0 }}>Build Status</h4>
            <p style={{ margin: 0, color: '#89d185' }}>✅ All dependencies resolved</p>
            <p style={{ margin: 0, color: '#89d185' }}>✅ Build process simplified</p>
            <p style={{ margin: 0, color: '#f48771' }}>🔄 Adding AI features...</p>
          </div>
        </div>
      </div>
    </div>
  );
}