const { useState, useEffect } = React;

// --- ДАНИ ДЛЯ ДЕМО (УКРАЇНСЬКОЮ, БО ЦЕ Ж ЧЕРКАСИ) ---
const SERVICES = [
  { id: 1, name: 'Манікюр та Педикюр', price: 'від 400 грн', duration: '1-2 год', image: 'https://images.unsplash.com/photo-1522337660859-02fbefca4702?auto=format&fit=crop&w=600&q=80' },
  { id: 2, name: 'Стрижка та Фарбування', price: 'від 600 грн', duration: '1-3 год', image: 'https://images.unsplash.com/photo-1560869713-7d0a29430803?auto=format&fit=crop&w=600&q=80' },
  { id: 3, name: 'Естетична Косметологія', price: 'від 800 грн', duration: '1 год', image: '/assets/demo/cosmetology.png' },
  { id: 4, name: 'Масаж та SPA', price: 'від 700 грн', duration: '1.5 год', image: 'https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=600&q=80' },
];

const MASTERS = [
  { id: 1, name: 'Анна', role: 'Топ-стиліст по волоссю', image: 'https://images.unsplash.com/photo-1580618672591-eb180b1a973f?auto=format&fit=crop&w=400&q=80' },
  { id: 2, name: 'Олена', role: 'Nail-експерт', image: 'https://images.unsplash.com/photo-1595959183082-7b570b7e08e2?auto=format&fit=crop&w=400&q=80' },
  { id: 3, name: 'Вікторія', role: 'Лікар-косметолог', image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=400&q=80' },
];

const Icon = ({ name, className }) => {
  useEffect(() => {
    if (window.lucide) {
      window.lucide.createIcons();
    }
  });
  return <i data-lucide={name} className={className}></i>;
};

function App() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({ service: '', master: '', date: '', time: '', name: '', phone: '' });

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const styles = `
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fadeInUp 0.8s ease-out forwards;
    }
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    
    html { scroll-behavior: smooth; }
  `;

  const handleBookingSubmit = (e) => {
    e.preventDefault();
    setStep(4);
  };

  const resetForm = () => {
    setStep(1);
    setFormData({ service: '', master: '', date: '', time: '', name: '', phone: '' });
    setIsModalOpen(false);
  };

  return (
    <div className="min-h-screen bg-stone-50 text-stone-900 font-sans selection:bg-rose-200">
      <style>{styles}</style>

      {/* --- НАВІГАЦІЯ --- */}
      <nav className={`fixed w-full z-50 transition-all duration-500 ${isScrolled ? 'bg-white/90 backdrop-blur-md shadow-sm py-4' : 'bg-transparent py-6'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
          <div className="flex items-center gap-6">
            <a href="https://www.sordens.com" className={`flex items-center gap-2 text-sm font-medium transition-colors ${isScrolled ? 'text-stone-500 hover:text-stone-900 border border-stone-200 px-3 py-1.5 rounded-full' : 'text-stone-300 hover:text-white border border-stone-500/50 px-3 py-1.5 rounded-full'}`}>
              <Icon name="arrow-left" className="w-4 h-4" /> Назад до сайту
            </a>
            <div className={`text-2xl font-serif font-bold tracking-widest ${isScrolled ? 'text-stone-900' : 'text-white'}`}>
              ÉCLAT <span className="text-rose-400">.</span>
            </div>
          </div>
          <div className="hidden md:flex space-x-8 text-sm uppercase tracking-wider font-medium">
            <a href="#about" className={`hover:text-rose-400 transition-colors ${isScrolled ? 'text-stone-600' : 'text-stone-200'}`}>Про нас</a>
            <a href="#services" className={`hover:text-rose-400 transition-colors ${isScrolled ? 'text-stone-600' : 'text-stone-200'}`}>Послуги</a>
            <a href="#team" className={`hover:text-rose-400 transition-colors ${isScrolled ? 'text-stone-600' : 'text-stone-200'}`}>Майстри</a>
            <a href="#contacts" className={`hover:text-rose-400 transition-colors ${isScrolled ? 'text-stone-600' : 'text-stone-200'}`}>Контакти</a>
          </div>
          <button 
            onClick={() => setIsModalOpen(true)}
            className={`px-6 py-2 rounded-full text-sm font-semibold uppercase tracking-wider transition-all duration-300 ${
              isScrolled 
                ? 'bg-stone-900 text-white hover:bg-stone-800' 
                : 'bg-white text-stone-900 hover:bg-stone-100'
            }`}
          >
            Записатись
          </button>
        </div>
      </nav>

      {/* --- ГОЛОВНИЙ ЕКРАН (HERO) --- */}
      <section className="relative h-screen flex items-center justify-center">
        <div className="absolute inset-0">
          <img 
            src="https://images.unsplash.com/photo-1600948836101-f9ffda59d250?auto=format&fit=crop&w=1920&q=80" 
            alt="Beauty Salon Interior" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-stone-900/40"></div>
        </div>
        
        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto animate-fade-in">
          <span className="block text-rose-300 font-medium tracking-[0.2em] uppercase mb-4 text-sm md:text-base">
            Твій простір краси у Черкасах
          </span>
          <h1 className="text-5xl md:text-7xl font-serif text-white mb-6 leading-tight">
            Мистецтво бути <br className="hidden md:block"/> неперевершеною
          </h1>
          <p className="text-stone-200 text-lg md:text-xl mb-10 max-w-2xl mx-auto font-light">
            Підкреслюємо вашу природну красу за допомогою сучасних технологій та любові до кожної деталі.
          </p>
          <button 
            onClick={() => setIsModalOpen(true)}
            className="bg-rose-400 text-white px-10 py-4 rounded-full text-lg font-medium tracking-wide hover:bg-rose-500 transition-colors shadow-xl shadow-rose-900/20 flex items-center mx-auto"
          >
            Обрати час
            <Icon name="chevron-right" className="ml-2 w-5 h-5" />
          </button>
        </div>
      </section>

      {/* --- ПОСЛУГИ --- */}
      <section id="services" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16 animate-fade-in">
            <h2 className="text-3xl md:text-4xl font-serif text-stone-900 mb-4">Наші Послуги</h2>
            <div className="w-24 h-1 bg-rose-200 mx-auto"></div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {SERVICES.map((service, index) => (
              <div 
                key={service.id} 
                className={`group cursor-pointer animate-fade-in delay-${(index % 4) * 100}`}
                onClick={() => {
                  setFormData({ ...formData, service: service.name });
                  setIsModalOpen(true);
                }}
              >
                <div className="relative overflow-hidden rounded-2xl mb-4 aspect-[4/5]">
                  <img 
                    src={service.image} 
                    alt={service.name} 
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-stone-900/80 via-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
                    <span className="text-white font-medium uppercase tracking-wider text-sm border-b border-rose-400 pb-1">
                      Записатись онлайн
                    </span>
                  </div>
                </div>
                <h3 className="text-xl font-serif text-stone-800 mb-2">{service.name}</h3>
                <div className="flex justify-between items-center text-stone-500 text-sm">
                  <span className="flex items-center"><Icon name="clock" className="w-4 h-4 mr-1" /> {service.duration}</span>
                  <span className="font-semibold text-rose-500">{service.price}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- МАЙСТРИ --- */}
      <section id="team" className="py-24 bg-stone-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-end mb-16 animate-fade-in">
            <div>
              <h2 className="text-3xl md:text-4xl font-serif text-stone-900 mb-4">Команда Професіоналів</h2>
              <div className="w-24 h-1 bg-rose-200"></div>
            </div>
            <p className="text-stone-500 max-w-md mt-6 md:mt-0 font-light">
              Наші майстри — це справжні фанати своєї справи, які постійно вдосконалюють навички.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {MASTERS.map((master, index) => (
              <div key={master.id} className={`text-center animate-fade-in delay-${index * 100}`}>
                <div className="relative w-64 h-64 mx-auto mb-6 rounded-full overflow-hidden shadow-2xl shadow-stone-300/50">
                  <img 
                    src={master.image} 
                    alt={master.name} 
                    className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                  />
                </div>
                <h3 className="text-2xl font-serif text-stone-900 mb-1">{master.name}</h3>
                <p className="text-rose-500 font-medium tracking-wide text-sm uppercase">{master.role}</p>
                <div className="flex justify-center mt-3 text-stone-400">
                  <Icon name="star" className="w-4 h-4 fill-stone-300 text-transparent" />
                  <Icon name="star" className="w-4 h-4 fill-stone-300 text-transparent" />
                  <Icon name="star" className="w-4 h-4 fill-stone-300 text-transparent" />
                  <Icon name="star" className="w-4 h-4 fill-stone-300 text-transparent" />
                  <Icon name="star" className="w-4 h-4 fill-stone-300 text-transparent" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- ФУТЕР --- */}
      <footer id="contacts" className="bg-stone-900 text-stone-300 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-12">
          <div>
            <div className="text-2xl font-serif font-bold tracking-widest text-white mb-6">
              ÉCLAT <span className="text-rose-400">.</span>
            </div>
            <p className="text-stone-400 font-light leading-relaxed mb-6">
              Елітний салон краси в самому серці Черкас. Створено з любов'ю до деталей та вашої індивідуальності.
            </p>
            <div className="flex space-x-4">
              <a href="#" className="w-10 h-10 rounded-full bg-stone-800 flex items-center justify-center hover:bg-rose-500 hover:text-white transition-colors">
                <Icon name="instagram" className="w-5 h-5" />
              </a>
            </div>
          </div>
          
          <div>
            <h4 className="text-white font-serif text-xl mb-6">Контакти</h4>
            <ul className="space-y-4 font-light">
              <li className="flex items-start">
                <Icon name="map-pin" className="w-5 h-5 text-rose-400 mr-3 shrink-0 mt-0.5" />
                <span>бул. Шевченка, 150<br/>Черкаси, Україна</span>
              </li>
              <li className="flex items-center">
                <Icon name="phone" className="w-5 h-5 text-rose-400 mr-3 shrink-0" />
                <span>+380 (93) 123 45 67</span>
              </li>
            </ul>
          </div>

          <div>
            <h4 className="text-white font-serif text-xl mb-6">Графік Роботи</h4>
            <ul className="space-y-2 font-light">
              <li className="flex justify-between border-b border-stone-800 pb-2">
                <span>Пн - Пт</span>
                <span>09:00 - 20:00</span>
              </li>
              <li className="flex justify-between border-b border-stone-800 pb-2 pt-2">
                <span>Субота</span>
                <span>10:00 - 19:00</span>
              </li>
              <li className="flex justify-between pt-2">
                <span>Неділя</span>
                <span className="text-rose-400">Вихідний</span>
              </li>
            </ul>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16 pt-8 border-t border-stone-800 text-center text-sm text-stone-500">
          © 2026 ÉCLAT Beauty Salon Cherkasy. Всі права захищено. <br />
          <span className="text-xs opacity-50">Demo Website developed for presentation via BeautyAI</span>
        </div>
      </footer>

      {/* --- МАДАЛКА --- */}
      {isModalOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6">
          <div className="absolute inset-0 bg-stone-900/60 backdrop-blur-sm transition-opacity" onClick={resetForm}></div>
          <div className="relative bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden animate-fade-in" style={{ animationDuration: '0.3s' }}>
            
            <button 
              onClick={resetForm}
              className="absolute top-4 right-4 p-2 text-stone-400 hover:text-stone-900 hover:bg-stone-100 rounded-full transition-colors"
            >
              <Icon name="x" className="w-6 h-6" />
            </button>

            <div className="p-8">
              {step === 1 && (
                <>
                  <h3 className="text-2xl font-serif text-stone-900 mb-2">Онлайн Запис</h3>
                  <p className="text-stone-500 text-sm mb-6">Оберіть послугу, яка вас цікавить</p>
                  
                  <div className="space-y-3">
                    {SERVICES.map(srv => (
                      <button 
                        key={srv.id}
                        onClick={() => { setFormData({...formData, service: srv.name}); setStep(2); }}
                        className={`w-full text-left p-4 rounded-xl border transition-all ${
                          formData.service === srv.name 
                            ? 'border-rose-400 bg-rose-50' 
                            : 'border-stone-200 hover:border-stone-300'
                        }`}
                      >
                        <div className="font-medium text-stone-900">{srv.name}</div>
                        <div className="text-sm text-stone-500">{srv.duration} • {srv.price}</div>
                      </button>
                    ))}
                  </div>
                </>
              )}

              {step === 2 && (
                <>
                  <button onClick={() => setStep(1)} className="text-sm text-rose-500 font-medium mb-4 flex items-center">
                    &larr; Назад
                  </button>
                  <h3 className="text-2xl font-serif text-stone-900 mb-2">Оберіть Майстра</h3>
                  
                  <div className="space-y-3">
                    <button 
                      onClick={() => { setFormData({...formData, master: 'Будь-який'}); setStep(3); }}
                      className="w-full text-left p-4 rounded-xl border border-stone-200 hover:border-stone-300 font-medium"
                    >
                      Будь-який вільний майстер
                    </button>
                    {MASTERS.map(m => (
                      <button 
                        key={m.id}
                        onClick={() => { setFormData({...formData, master: m.name}); setStep(3); }}
                        className="w-full flex items-center p-3 rounded-xl border border-stone-200 hover:border-stone-300 transition-colors"
                      >
                        <img src={m.image} alt={m.name} className="w-12 h-12 rounded-full object-cover mr-4" />
                        <div>
                          <div className="font-medium text-stone-900">{m.name}</div>
                          <div className="text-xs text-stone-500">{m.role}</div>
                        </div>
                      </button>
                    ))}
                  </div>
                </>
              )}

              {step === 3 && (
                <>
                  <button onClick={() => setStep(2)} className="text-sm text-rose-500 font-medium mb-4 flex items-center">
                    &larr; Назад
                  </button>
                  <h3 className="text-2xl font-serif text-stone-900 mb-6">Контактні Дані</h3>
                  
                  <form onSubmit={handleBookingSubmit} className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-stone-700 mb-1">Ваше ім'я</label>
                      <input 
                        required
                        type="text" 
                        className="w-full px-4 py-3 rounded-xl border border-stone-200 focus:outline-none focus:ring-2 focus:ring-rose-200 focus:border-rose-400 transition-all"
                        placeholder="Наприклад: Марія"
                        onChange={e => setFormData({...formData, name: e.target.value})}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-stone-700 mb-1">Телефон</label>
                      <input 
                        required
                        type="tel" 
                        className="w-full px-4 py-3 rounded-xl border border-stone-200 focus:outline-none focus:ring-2 focus:ring-rose-200 focus:border-rose-400 transition-all"
                        placeholder="+380"
                        onChange={e => setFormData({...formData, phone: e.target.value})}
                      />
                    </div>
                    
                    <div className="bg-stone-50 p-4 rounded-xl mt-6">
                      <h4 className="text-sm font-semibold text-stone-900 mb-2">Деталі візиту:</h4>
                      <p className="text-sm text-stone-600">Послуга: <span className="font-medium text-stone-900">{formData.service}</span></p>
                      <p className="text-sm text-stone-600">Майстер: <span className="font-medium text-stone-900">{formData.master}</span></p>
                    </div>

                    <button 
                      type="submit"
                      className="w-full bg-stone-900 text-white py-4 rounded-xl font-medium tracking-wide hover:bg-rose-500 transition-colors mt-6"
                    >
                      Підтвердити запис
                    </button>
                  </form>
                </>
              )}

              {step === 4 && (
                <div className="text-center py-8">
                  <Icon name="check-circle" className="w-16 h-16 text-rose-400 mx-auto mb-4" />
                  <h3 className="text-2xl font-serif text-stone-900 mb-2">Дякуємо, {formData.name || 'красуне'}!</h3>
                  <p className="text-stone-500 mb-8">Ваша заявка успішно надіслана. Адміністратор зв'яжеться з вами протягом 5 хвилин для підтвердження часу.</p>
                  <button 
                    onClick={resetForm}
                    className="bg-stone-100 text-stone-900 px-8 py-3 rounded-xl font-medium hover:bg-stone-200 transition-colors"
                  >
                    Закрити
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

const rootElement = document.getElementById('root');
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<App />);
}