frontend/src/App.tsx

import { BackendHealthCheck } from "./components/BackendHealthCheck";
import OAuthButton from "./components/OAuthButton";
import Counter from "./components/Counter";
import huggingfaceLogo from "./assets/huggingface.svg";

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white flex flex-col">
      {!import.meta.env.PROD && <BackendHealthCheck />}

      <div className="text-center pt-8 pb-6">
        <div className="flex items-center justify-center space-x-3 mb-4">
          <img src={huggingfaceLogo} alt="Hugging Face" className="h-8 w-8" />
          <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
            FastAPI + React Template
          </h1>
        </div>
        <p className="text-gray-300 text-lg max-w-2xl mx-auto">
          A complete full-stack template to start vide-coding your own Hugging
          Face Space.
        </p>
      </div>

      <div className="flex-1 max-w-6xl mx-auto px-8">
        <div className="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-10 mb-8 border border-gray-700/50 shadow-2xl">
          <div className="text-center mb-6">
            <h2 className="text-2xl font-semibold mb-2">Try the demo</h2>
            <p className="text-gray-300">
              Sign in with Hugging Face to interact with the counter
            </p>
          </div>
          <div className="space-y-6 max-w-md mx-auto">
            <OAuthButton />
            <Counter />
          </div>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
          <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700/30">
            <div className="text-blue-400 text-2xl mb-3">🚀</div>
            <h3 className="text-lg font-semibold mb-2">Built for HF Spaces</h3>
            <p className="text-gray-300 text-sm">
              Pre-configured for instant deployment on Hugging Face Spaces
            </p>
          </div>

          <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700/30">
            <div className="text-pink-400 text-2xl mb-3">✨</div>
            <h3 className="text-lg font-semibold mb-2">Vibe-coding ready</h3>
            <p className="text-gray-300 text-sm">
              Optimized for AI-assisted development
            </p>
          </div>

          <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700/30">
            <div className="text-yellow-400 text-2xl mb-3">🤗</div>
            <h3 className="text-lg font-semibold mb-2">
              Sign in with Hugging Face
            </h3>
            <p className="text-gray-300 text-sm">
              OAuth integration, no setup required
            </p>
          </div>

          <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700/30">
            <div className="text-green-400 text-2xl mb-3">⚡</div>
            <h3 className="text-lg font-semibold mb-2">FastAPI Backend</h3>
            <p className="text-gray-300 text-sm">Modern Python backend</p>
          </div>

          <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700/30">
            <div className="text-purple-400 text-2xl mb-3">🎨</div>
            <h3 className="text-lg font-semibold mb-2">React + Tailwind</h3>
            <p className="text-gray-300 text-sm">
              Beautiful and responsive frontend
            </p>
          </div>

          <div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700/30">
            <div className="text-cyan-400 text-2xl mb-3">💾</div>
            <h3 className="text-lg font-semibold mb-2">
              SQLite + Parquet backups
            </h3>
            <p className="text-gray-300 text-sm">
              Work with SQLite locally, but persist data in a HF dataset as parquet
            </p>
          </div>
        </div>

        <div className="bg-gray-800/20 backdrop-blur-sm rounded-xl p-6 border border-gray-700/20 mb-8">
          <h3 className="text-xl font-semibold mb-4 text-center">
            Duplicate this Space to start building!
          </h3>
        </div>
      </div>
    </div>
  );
}

export default App;