import React, { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-8">
      <div className="text-center">
        <h1 className="text-7xl font-bold text-gray-800 mb-12">
          Hello Sandpack! 🎉
        </h1>

        <div className="bg-white p-12 rounded-3xl shadow-2xl">
          <p className="text-4xl text-gray-600 mb-10">
            Counter: <span className="font-bold text-blue-600 text-5xl">{count}</span>
          </p>

          <div className="flex gap-6 justify-center">
            <button
              onClick={() => setCount(count - 1)}
              className="px-8 py-4 bg-red-500 text-white rounded-xl hover:bg-red-600 transition-colors text-xl font-semibold"
            >
              Decrease
            </button>

            <button
              onClick={() => setCount(0)}
              className="px-8 py-4 bg-gray-500 text-white rounded-xl hover:bg-gray-600 transition-colors text-xl font-semibold"
            >
              Reset
            </button>

            <button
              onClick={() => setCount(count + 1)}
              className="px-8 py-4 bg-green-500 text-white rounded-xl hover:bg-green-600 transition-colors text-xl font-semibold"
            >
              Increase
            </button>
          </div>

          <p className="text-lg text-gray-500 mt-8">
            Éditez ce code et voyez les changements en temps réel !
          </p>
        </div>
      </div>
    </div>
  );
}