import React, { useState } from 'react';
import FileUpload from './components/FileUpload';
import ChatBox from './components/ChatBox';

export default function App() {
  const [step, setStep] = useState('upload'); // 'upload' or 'chat'

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-100">
      <nav className="border-b border-slate-200 bg-white/80 backdrop-blur-md sticky top-0 z-10">
        <div className="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">D</div>
            <span className="font-bold text-xl tracking-tight">DocuIntel AI</span>
          </div>
          {step === 'chat' && (
            <button 
              onClick={() => setStep('upload')}
              className="text-sm font-medium text-slate-500 hover:text-blue-600 transition-colors"
            >
              Upload New Document
            </button>
          )}
        </div>
      </nav>

      <main className="max-w-5xl mx-auto px-4 py-12 md:py-20">
        <header className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-black text-slate-900 mb-4">
            Chat with any <span className="text-blue-600">PDF Document</span>
          </h1>
          <p className="text-lg text-slate-500 max-w-2xl mx-auto">
            Upload any report, research paper, or manual. Our AI will analyze the content and answer your questions with pinpoint accuracy.
          </p>
        </header>

        {step === 'upload' ? (
          <FileUpload onUploadSuccess={() => setStep('chat')} />
        ) : (
          <ChatBox />
        )}
      </main>
    </div>
  );
}