import React, { useState } from 'react'; import { Moon, Sun, Play, Pause } from 'lucide-react'; import { motion } from 'framer-motion';

export default function SleepApp() { const [isDark, setIsDark] = useState(true); const [isPlaying, setIsPlaying] = useState(false);

const toggleTheme = () => setIsDark(!isDark); const togglePlay = () => setIsPlaying(!isPlaying);

return ( <div className={min-h-screen flex flex-col items-center justify-center transition-all duration-500 ${isDark ? 'bg-gray-900 text-white' : 'bg-blue-100 text-gray-900'}}> <motion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} className="text-4xl font-bold mb-8" > SleepWave 💤 </motion.h1>

  <motion.div
    initial={{ scale: 0.9, opacity: 0 }}
    animate={{ scale: 1, opacity: 1 }}
    className="bg-white/10 backdrop-blur-md p-8 rounded-2xl shadow-lg flex flex-col items-center"
  >
    <p className="text-lg mb-4">Som relaxante para ajudar você a dormir</p>

    <button
      onClick={togglePlay}
      className="p-4 bg-indigo-500 rounded-full shadow-md hover:bg-indigo-600 transition-all"
    >
      {isPlaying ? <Pause size={32} /> : <Play size={32} />}
    </button>

    <p className="mt-3 text-sm opacity-75">
      {isPlaying ? 'Reproduzindo som de chuva...' : 'Toque para começar a relaxar'}
    </p>
  </motion.div>

  <button
    onClick={toggleTheme}
    className="absolute top-6 right-6 p-3 rounded-full bg-white/10 hover:bg-white/20 transition-all"
  >
    {isDark ? <Sun size={24} /> : <Moon size={24} />}
  </button>

  <footer className="mt-10 opacity-60 text-sm">Feito por Maginata 🌙</footer>
</div>

); }