import React, { useState } from 'react';
import { Heart, Stars } from 'lucide-react';

export default function App() {
  const [yesPressed, setYesPressed] = useState(false);
  const [noCount, setNoCount] = useState(0);

  // Teksty, które pojawiają się na przycisku "Nie" po kolejnych kliknięciach
  const phrases = [
    "Nie",
    "Jesteś pewien?",
    "Naprawdę?",
    "Proszę, pomyśl jeszcze raz!",
    "Zrobisz mi przykrość :(",
    "Będę płakać...",
    "Złamię mi serce...",
    "Bardzo proszę...",
    "Okej, przestaję pytać...",
    "Żartowałam, PROSZĘ TAK! ❤️"
  ];

  // Obliczanie tekstu dla przycisku "Nie"
  const getNoButtonText = () => {
    return phrases[Math.min(noCount, phrases.length - 1)];
  };

  // Obliczanie wielkości przycisku "Tak" - rośnie z każdym kliknięciem "Nie"
  const yesButtonSize = noCount * 20 + 16;

  // Główny widok po kliknięciu TAK
  if (yesPressed) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-pink-100 p-4 text-center selection:bg-rose-200">
        <div className="animate-bounce mb-8">
          <Heart fill="#e11d48" color="#e11d48" size={120} />
        </div>
        
        <h1 className="text-4xl md:text-6xl font-bold text-rose-600 mb-6 drop-shadow-sm">
          Jeeej! Wiedziałam! ❤️
        </h1>
        
        <p className="text-xl text-rose-800 mb-8 font-medium">
          Jesteś moją najlepszą Walentynką!
        </p>

        {/* Zdjęcie szczęśliwych zwierzaków */}
        <div className="relative group">
            <div className="absolute -inset-1 bg-gradient-to-r from-rose-400 to-pink-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
            <img 
              src="https://images.unsplash.com/photo-1529429612779-c8e40df2f5ce?q=80&w=800&auto=format&fit=crop" 
              alt="Szczęśliwe kotki i pieski" 
              className="relative rounded-lg shadow-2xl border-4 border-white w-full max-w-md object-cover h-64 md:h-80"
            />
        </div>

        <div className="mt-10 flex gap-4">
           <span className="animate-pulse text-4xl">🐱</span>
           <span className="animate-pulse delay-100 text-4xl">🐶</span>
           <span className="animate-pulse delay-200 text-4xl">💖</span>
        </div>
      </div>
    );
  }

  // Widok początkowy z pytaniem
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-rose-100 to-teal-50 p-4 overflow-hidden selection:bg-rose-200">
      
      {/* Ozdobne ikonki w tle */}
      <div className="fixed top-10 left-10 text-rose-200 animate-pulse">
        <Heart size={48} fill="currentColor" />
      </div>
      <div className="fixed bottom-10 right-10 text-rose-200 animate-pulse delay-700">
        <Heart size={64} fill="currentColor" />
      </div>

      <div className="bg-white/60 backdrop-blur-sm p-8 rounded-3xl shadow-xl max-w-lg w-full text-center border border-white/50">
        {/* Zdjęcie proszącego zwierzaka */}
        <div className="mb-6 flex justify-center">
            <img 
              src="https://images.unsplash.com/photo-1543466835-00a7907e9de1?q=80&w=600&auto=format&fit=crop" 
              alt="Cute dog" 
              className="rounded-2xl shadow-lg w-64 h-64 object-cover object-top border-4 border-white transform hover:scale-105 transition-transform duration-300"
            />
        </div>

        <h1 className="text-3xl md:text-5xl font-extrabold text-gray-800 mb-8 leading-tight">
          Czy zostaniesz moją <span className="text-rose-500">Walentynką</span>? 🌹
        </h1>

        <div className="flex flex-col md:flex-row items-center justify-center gap-4 min-h-[150px]">
          {/* Przycisk TAK */}
          <button
            className="bg-green-500 hover:bg-green-600 text-white font-bold rounded-xl shadow-lg transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-green-300 z-10"
            style={{ fontSize: yesButtonSize, padding: '16px 32px' }}
            onClick={() => setYesPressed(true)}
          >
            Tak!
          </button>

          {/* Przycisk NIE */}
          <button
            onClick={() => setNoCount(noCount + 1)}
            className="bg-rose-500 hover:bg-rose-600 text-white font-bold py-4 px-8 rounded-xl shadow-lg transition-all duration-200 shake-on-hover focus:outline-none focus:ring-4 focus:ring-rose-300"
          >
            {getNoButtonText()}
          </button>
        </div>

        <div className="mt-8 text-gray-400 text-sm flex justify-center items-center gap-2 opacity-60">
           <Stars size={16} /> 
           <span>Tylko jedna odpowiedź jest poprawna</span>
           <Stars size={16} />
        </div>
      </div>
      
      {/* Standardowy tag style kompatybilny z każdym Reactem */}
      <style>{`
        @keyframes shake {
          0%, 100% { transform: translateX(0); }
          25% { transform: translateX(-5px); }
          75% { transform: translateX(5px); }
        }
        .shake-on-hover:hover {
          animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }
      `}</style>
    </div>
  );
}