import React, { useState, useEffect } from 'react';
import { MapPin, Star, Wifi, UtensilsCrossed, Waves, Home, Phone, Mail, MapPinIcon, Users, Maximize2, Coffee } from 'lucide-react';

export default function TrastevereLanding() {
  const [scrolled, setScrolled] = useState(false);
  const [selectedPhoto, setSelectedPhoto] = useState(0);
  const [showContactForm, setShowContactForm] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });

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

  const amenities = [
    { icon: Wifi, label: 'WiFi veloce' },
    { icon: UtensilsCrossed, label: 'Cucina attrezzata' },
    { icon: Waves, label: 'Bagno moderno' },
    { icon: Home, label: 'Zona soggiorno' },
  ];

  const photos = [
    { title: 'Living Room', desc: 'Spazioso e luminoso con arredamento elegante', img: '🏠' },
    { title: 'Terrazza Privata', desc: 'Splendida vista su Trastevere', img: '🌿' },
    { title: 'Cucina Attrezzata', desc: 'Moderna e completamente funzionante', img: '🍳' },
    { title: 'Camera da Letto', desc: 'Comoda e accogliente', img: '🛏️' },
    { title: 'Bagno Esclusivo', desc: 'Design moderno con mattonelle artistiche', img: '🚿' },
    { title: 'Ingresso Elegante', desc: 'Dettagli raffinati e specchi decorativi', img: '✨' },
  ];

  const contactInfo = {
    phone: '+39 3920578349',
    email: 'trastevere50due@proton.me',
    address: 'Via Federico Rosazza n.52, 00153 Roma',
    whatsapp: '+39 3920578349'
  };

  return (
    <div style={{ background: 'linear-gradient(135deg, #f8fafb 0%, #ecf4f8 100%)', minHeight: '100vh' }}>
      <style>{`
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        
        .hero {
          background: linear-gradient(135deg, #1b5e6b 0%, #2c7a7f 50%, #1b5e6b 100%);
          color: white;
          padding: 120px 24px;
          text-align: center;
          position: relative;
          overflow: hidden;
        }
        
        .hero::before {
          content: '';
          position: absolute;
          top: -50%;
          right: -20%;
          width: 500px;
          height: 500px;
          background: rgba(255,255,255,0.05);
          border-radius: 50%;
        }
        
        .hero-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
        
        .hero h1 {
          font-size: 56px;
          font-weight: 700;
          margin-bottom: 16px;
          letter-spacing: -1px;
          animation: fadeInDown 0.8s ease;
        }
        
        .hero-subtitle {
          font-size: 20px;
          color: rgba(255,255,255,0.9);
          margin-bottom: 32px;
          animation: fadeInUp 0.8s ease 0.2s both;
        }
        
        .location-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(255,255,255,0.2);
          backdrop-filter: blur(10px);
          padding: 12px 24px;
          border-radius: 50px;
          font-size: 16px;
          margin-bottom: 24px;
          animation: fadeInUp 0.8s ease 0.4s both;
        }
        
        .cta-button {
          background: #a8d8d8;
          color: #1b5e6b;
          border: none;
          padding: 16px 48px;
          font-size: 16px;
          font-weight: 600;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-top: 24px;
          animation: fadeInUp 0.8s ease 0.6s both;
        }
        
        .cta-button:hover {
          background: #fff;
          transform: translateY(-2px);
          box-shadow: 0 12px 24px rgba(27, 94, 107, 0.2);
        }
        
        .section {
          max-width: 1200px;
          margin: 0 auto;
          padding: 80px 24px;
        }
        
        .section-title {
          font-size: 42px;
          color: #1b5e6b;
          margin-bottom: 16px;
          text-align: center;
        }
        
        .section-subtitle {
          font-size: 18px;
          color: #666;
          text-align: center;
          margin-bottom: 60px;
        }
        
        .amenities-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 32px;
          margin-bottom: 80px;
        }
        
        .amenity-card {
          background: white;
          padding: 32px;
          border-radius: 12px;
          text-align: center;
          box-shadow: 0 4px 12px rgba(27, 94, 107, 0.08);
          transition: all 0.3s ease;
        }
        
        .amenity-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 24px rgba(27, 94, 107, 0.15);
        }
        
        .amenity-icon {
          width: 64px;
          height: 64px;
          margin: 0 auto 16px;
          background: linear-gradient(135deg, #a8d8d8 0%, #7eccc9 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
        }
        
        .amenity-label {
          font-size: 16px;
          color: #1b5e6b;
          font-weight: 600;
        }
        
        .gallery {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 24px;
        }
        
        .gallery-card {
          aspect-ratio: 1;
          background: linear-gradient(135deg, #2c7a7f 0%, #a8d8d8 100%);
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: flex-end;
          padding: 24px;
          color: white;
        }
        
        .gallery-card:hover {
          transform: scale(1.05);
        }
        
        .gallery-card.active {
          box-shadow: 0 0 0 4px #1b5e6b;
        }
        
        .gallery-text h3 {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 8px;
        }
        
        .gallery-text p {
          font-size: 14px;
          opacity: 0.95;
        }
        
        .details {
          background: white;
          border-radius: 12px;
          padding: 48px;
          margin-top: 60px;
          box-shadow: 0 4px 12px rgba(27, 94, 107, 0.08);
        }
        
        .detail-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 32px;
          margin-bottom: 32px;
        }
        
        .detail-item h4 {
          color: #1b5e6b;
          font-size: 14px;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 8px;
          font-weight: 600;
        }
        
        .detail-item p {
          font-size: 16px;
          color: #333;
          line-height: 1.6;
        }
        
        .footer {
          background: #1b5e6b;
          color: white;
          padding: 40px 24px;
          text-align: center;
          margin-top: 80px;
        }
        
        .footer-content {
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .footer p {
          opacity: 0.9;
          margin-bottom: 12px;
        }
        
        @keyframes fadeInDown {
          from { opacity: 0; transform: translateY(-30px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes fadeInUp {
          from { opacity: 0; transform: translateY(30px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        @media (max-width: 768px) {
          .hero h1 { font-size: 36px; }
          .section-title { font-size: 28px; }
          .section { padding: 60px 20px; }
        }
      `}</style>

      <div className="hero">
        <div className="hero-content">
          <div className="location-badge">
            <MapPin size={18} />
            <span>Trastevere, Roma</span>
          </div>
          <h1>Trastevere 50Due</h1>
          <p className="hero-subtitle">Un'esperienza esclusiva nel cuore autentico di Roma</p>
          <button className="cta-button">Prenota ora</button>
        </div>
      </div>

      <div className="section">
        <h2 className="section-title">Servizi & Comfort</h2>
        <p className="section-subtitle">Tutto quello che ti serve per un soggiorno indimenticabile</p>
        
        <div className="amenities-grid">
          {amenities.map((item, idx) => {
            const Icon = item.icon;
            return (
              <div key={idx} className="amenity-card">
                <div className="amenity-icon">
                  <Icon size={32} />
                </div>
                <p className="amenity-label">{item.label}</p>
              </div>
            );
          })}
        </div>
      </div>

      <div className="section">
        <h2 className="section-title">Scopri gli spazi</h2>
        <p className="section-subtitle">Design moderno e dettagli curati</p>
        
        <div className="gallery">
          {photos.map((photo, idx) => (
            <div
              key={idx}
              className={`gallery-card ${selectedPhoto === idx ? 'active' : ''}`}
              onClick={() => setSelectedPhoto(idx)}
              style={{ fontSize: '48px' }}
            >
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {photo.img}
              </div>
              <div className="gallery-text" style={{ position: 'relative', zIndex: 1 }}>
                <h3>{photo.title}</h3>
                <p>{photo.desc}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="details">
          <div className="detail-grid">
            <div className="detail-item">
              <h4>📍 Camere da letto</h4>
              <p>1 camera matrimoniale con letti premium</p>
            </div>
            <div className="detail-item">
              <h4>🚿 Bagni</h4>
              <p>1 bagno completamente ristrutturato con design moderno</p>
            </div>
            <div className="detail-item">
              <h4>📐 Superficie</h4>
              <p>Circa 50 mq di spazio confortevole</p>
            </div>
            <div className="detail-item">
              <h4>🗺️ Posizione</h4>
              <p>Nel cuore di Trastevere, Roma</p>
            </div>
            <div className="detail-item">
              <h4>👥 Ospiti</h4>
              <p>Perfetto per 2-4 persone</p>
            </div>
            <div className="detail-item">
              <h4>☕ Servizi</h4>
              <p>WiFi, cucina, riscaldamento, A/C</p>
            </div>
          </div>
          
          <div style={{ borderTop: '1px solid #e0e0e0', paddingTop: '32px' }}>
            <h3 style={{ color: '#1b5e6b', marginBottom: '16px' }}>Ideale per</h3>
            <p style={{ color: '#666', lineHeight: '1.8', fontSize: '16px' }}>
              Coppie in viaggio di piacere • Famiglie piccole • Professionisti • Chiunque desideri 
              vivere Roma come un vero romano nel cuore autentico del rione più suggestivo della capitale
            </p>
          </div>
        </div>
      </div>

      <div className="section" style={{ background: 'white', borderRadius: '12px', padding: '60px' }}>
        <h2 className="section-title">Contattaci</h2>
        <p className="section-subtitle">Siamo sempre disponibili per aiutarti</p>
        
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '40px', marginBottom: '60px' }}>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '32px', marginBottom: '16px' }}>📞</div>
            <h3 style={{ color: '#1b5e6b', marginBottom: '8px', fontSize: '18px', fontWeight: 600 }}>Telefono</h3>
            <p style={{ color: '#666', fontSize: '16px' }}>
              <a href={`tel:${contactInfo.phone}`} style={{ color: '#2c7a7f', textDecoration: 'none', fontWeight: 500 }}>
                {contactInfo.phone}
              </a>
            </p>
          </div>
          
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '32px', marginBottom: '16px' }}>✉️</div>
            <h3 style={{ color: '#1b5e6b', marginBottom: '8px', fontSize: '18px', fontWeight: 600 }}>Email</h3>
            <p style={{ color: '#666', fontSize: '16px' }}>
              <a href={`mailto:${contactInfo.email}`} style={{ color: '#2c7a7f', textDecoration: 'none', fontWeight: 500 }}>
                {contactInfo.email}
              </a>
            </p>
          </div>
          
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '32px', marginBottom: '16px' }}>💬</div>
            <h3 style={{ color: '#1b5e6b', marginBottom: '8px', fontSize: '18px', fontWeight: 600 }}>WhatsApp</h3>
            <p style={{ color: '#666', fontSize: '16px' }}>
              <a href={`https://wa.me/${contactInfo.whatsapp.replace(/[^0-9]/g, '')}`} target="_blank" rel="noopener noreferrer" style={{ color: '#2c7a7f', textDecoration: 'none', fontWeight: 500 }}>
                {contactInfo.whatsapp}
              </a>
            </p>
          </div>
        </div>

        <div style={{ background: '#f8fafb', padding: '40px', borderRadius: '12px', marginBottom: '40px' }}>
          <h3 style={{ color: '#1b5e6b', marginBottom: '16px', fontSize: '20px', fontWeight: 600 }}>📍 Indirizzo</h3>
          <p style={{ color: '#333', fontSize: '16px', lineHeight: '1.8' }}>
            {contactInfo.address}
          </p>
          <p style={{ color: '#666', fontSize: '14px', marginTop: '16px' }}>
            Nel cuore di Trastevere, a pochi passi dalla Basilica di Santa Maria in Trastevere e dalle migliori osterie romane
          </p>
        </div>

        <div style={{ background: 'linear-gradient(135deg, #a8d8d8 0%, #7eccc9 100%)', padding: '40px', borderRadius: '12px', color: '#1b5e6b' }}>
          <h3 style={{ marginBottom: '16px', fontSize: '20px', fontWeight: 600 }}>ℹ️ Informazioni Importanti</h3>
          <ul style={{ listStyle: 'none', fontSize: '15px', lineHeight: '2' }}>
            <li>✓ Check-in: 14:00 | Check-out: 11:00</li>
            <li>✓ Cancellazione gratuita fino a 14 giorni prima</li>
            <li>✓ Accesso 24/24 - Smart Lock</li>
            <li>✓ Pulizia settimanale inclusa</li>
            <li>✓ Cambio biancheria ogni 3 giorni</li>
            <li>✓ Assistenza guest 24/7</li>
          </ul>
        </div>
      </div>

      <div className="section">
        <div style={{ background: 'linear-gradient(135deg, #2c7a7f 0%, #1b5e6b 100%)', borderRadius: '12px', padding: '60px 40px', color: 'white', textAlign: 'center' }}>
          <h2 style={{ fontSize: '36px', marginBottom: '16px' }}>Pronto a vivere Trastevere?</h2>
          <p style={{ fontSize: '18px', marginBottom: '32px', opacity: 0.95 }}>Scopri le disponibilità e contattaci per prenotare</p>
          <button 
            className="cta-button" 
            style={{ background: '#a8d8d8', color: '#1b5e6b' }}
            onClick={() => setShowContactForm(!showContactForm)}
          >
            Inviami un messaggio
          </button>
        </div>
      </div>

      {showContactForm && (
        <div className="section" style={{ background: 'white', borderRadius: '12px', padding: '40px', maxWidth: '600px', margin: '0 auto' }}>
          <h3 style={{ color: '#1b5e6b', marginBottom: '24px', fontSize: '22px', fontWeight: 600 }}>Contattaci direttamente</h3>
          <form onSubmit={(e) => { e.preventDefault(); alert('Messaggio inviato! Ti contatteremo presto.'); setFormData({ name: '', email: '', message: '' }); setShowContactForm(false); }}>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'block', color: '#1b5e6b', fontWeight: 600, marginBottom: '8px' }}>Nome</label>
              <input 
                type="text" 
                required 
                value={formData.name}
                onChange={(e) => setFormData({...formData, name: e.target.value})}
                style={{ width: '100%', padding: '12px', border: '1px solid #ddd', borderRadius: '8px', fontFamily: 'inherit', fontSize: '14px' }} 
                placeholder="Il tuo nome"
              />
            </div>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'block', color: '#1b5e6b', fontWeight: 600, marginBottom: '8px' }}>Email</label>
              <input 
                type="email" 
                required 
                value={formData.email}
                onChange={(e) => setFormData({...formData, email: e.target.value})}
                style={{ width: '100%', padding: '12px', border: '1px solid #ddd', borderRadius: '8px', fontFamily: 'inherit', fontSize: '14px' }} 
                placeholder="La tua email"
              />
            </div>
            <div style={{ marginBottom: '24px' }}>
              <label style={{ display: 'block', color: '#1b5e6b', fontWeight: 600, marginBottom: '8px' }}>Messaggio</label>
              <textarea 
                required 
                value={formData.message}
                onChange={(e) => setFormData({...formData, message: e.target.value})}
                style={{ width: '100%', padding: '12px', border: '1px solid #ddd', borderRadius: '8px', fontFamily: 'inherit', fontSize: '14px', minHeight: '120px', resize: 'vertical' }} 
                placeholder="Quando vorresti soggiornare? Hai domande?"
              />
            </div>
            <button 
              type="submit" 
              style={{ 
                width: '100%', 
                padding: '14px', 
                background: 'linear-gradient(135deg, #2c7a7f 0%, #1b5e6b 100%)', 
                color: 'white', 
                border: 'none', 
                borderRadius: '8px', 
                fontSize: '16px', 
                fontWeight: 600, 
                cursor: 'pointer',
                transition: 'all 0.3s ease'
              }}
              onMouseEnter={(e) => e.target.style.transform = 'translateY(-2px)'}
              onMouseLeave={(e) => e.target.style.transform = 'translateY(0)'}
            >
              Invia messaggio
            </button>
          </form>
        </div>
      )}

      <div className="footer">
        <div className="footer-content">
          <h3 style={{ fontSize: '24px', marginBottom: '24px' }}>Trastevere 50Due</h3>
          
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '32px', marginBottom: '32px', textAlign: 'left' }}>
            <div>
              <p style={{ fontWeight: 600, marginBottom: '8px' }}>📞 Telefono</p>
              <p><a href={`tel:${contactInfo.phone}`} style={{ color: '#a8d8d8', textDecoration: 'none' }}>{contactInfo.phone}</a></p>
            </div>
            <div>
              <p style={{ fontWeight: 600, marginBottom: '8px' }}>✉️ Email</p>
              <p><a href={`mailto:${contactInfo.email}`} style={{ color: '#a8d8d8', textDecoration: 'none' }}>{contactInfo.email}</a></p>
            </div>
            <div>
              <p style={{ fontWeight: 600, marginBottom: '8px' }}>💬 WhatsApp</p>
              <p><a href={`https://wa.me/${contactInfo.whatsapp.replace(/[^0-9]/g, '')}`} target="_blank" rel="noopener noreferrer" style={{ color: '#a8d8d8', textDecoration: 'none' }}>{contactInfo.whatsapp}</a></p>
            </div>
          </div>
          
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: '24px', marginBottom: '24px' }}>
            <p style={{ fontWeight: 600, marginBottom: '8px' }}>📍 Indirizzo</p>
            <p style={{ opacity: 0.9 }}>{contactInfo.address}</p>
          </div>
          
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: '24px' }}>
            <p style={{ fontSize: '14px', opacity: 0.8, marginBottom: '8px' }}>© 2026 Trastevere 50Due. Tutti i diritti riservati.</p>
            <p style={{ fontSize: '12px', opacity: 0.7 }}>Fatto con ❤️ per chi ama Roma</p>
          </div>
        </div>
      </div>
    </div>
  );
}