/* global React */
const { useState: useState3 } = React;

function Cotizar() {
  const [submitted, setSubmitted] = useState3(false);
  const [form, setForm] = useState3({
    nombre: '', email: '', tel: '', destino: '', adultos: '2', ninos: '0',
    fecha: '', presupuesto: '', mensaje: '',
  });

  const set = (k, v) => setForm({...form, [k]: v});
  const submit = (e) => { e.preventDefault(); setSubmitted(true); };

  return (
    <section className="form-section" id="cotizar">
      <div className="container form-grid">
        <div className="form-aside">
          <span className="eyebrow">Cotización personalizada</span>
          <h2 style={{marginTop: 18}}>Contame tu viaje<br/><span className="italic">y te armo el plan.</span></h2>
          <p>
            Llenás el formulario, te llega tu cotización a medida. Sin costo, sin
            compromiso. Cada propuesta es única — la armamos juntas hasta que sea perfecta.
          </p>
          <div className="item">
            <div className="item-icon">⚡</div>
            <div>Respuesta dentro de 24 hs</div>
          </div>
          <div className="item">
            <div className="item-icon">✦</div>
            <div>Asesoramiento gratis al reservar</div>
          </div>
          <div className="item">
            <div className="item-icon">♡</div>
            <div>Plan de pago a tu medida</div>
          </div>
          <div className="item">
            <div className="item-icon">✉</div>
            <div>O escribime directo: <strong>+54 9 11 7038-0959</strong></div>
          </div>
        </div>

        <div className="form-card">
          {!submitted ? (
            <>
              <div className="form-card-head">
                <h3>Pedí tu cotización</h3>
                <p>Cuanto más detalle me des, mejor te armo el viaje ✨</p>
              </div>
              <form onSubmit={submit}>
                <div className="form-row">
                  <div className="form-field">
                    <label>Nombre</label>
                    <input required type="text" placeholder="Tu nombre" value={form.nombre} onChange={(e) => set('nombre', e.target.value)} />
                  </div>
                  <div className="form-field">
                    <label>Email</label>
                    <input required type="email" placeholder="tucorreo@email.com" value={form.email} onChange={(e) => set('email', e.target.value)} />
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-field">
                    <label>WhatsApp</label>
                    <input required type="tel" placeholder="+54 9 11 ..." value={form.tel} onChange={(e) => set('tel', e.target.value)} />
                  </div>
                  <div className="form-field">
                    <label>Destino de interés</label>
                    <select required value={form.destino} onChange={(e) => set('destino', e.target.value)}>
                      <option value="">Elegí un destino</option>
                      <option>Disney World</option>
                      <option>Universal Orlando</option>
                      <option>Xcaret / Riviera Maya</option>
                      <option>Cancún</option>
                      <option>Miami</option>
                      <option>New York</option>
                      <option>Los Angeles</option>
                      <option>Las Vegas</option>
                      <option>París</option>
                      <option>Roma</option>
                      <option>Londres</option>
                      <option>Amsterdam</option>
                      <option>Otro / Combinado</option>
                    </select>
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-field">
                    <label>Adultos</label>
                    <select value={form.adultos} onChange={(e) => set('adultos', e.target.value)}>
                      {['1','2','3','4','5','6+'].map(n => <option key={n}>{n}</option>)}
                    </select>
                  </div>
                  <div className="form-field">
                    <label>Niños</label>
                    <select value={form.ninos} onChange={(e) => set('ninos', e.target.value)}>
                      {['0','1','2','3','4','5+'].map(n => <option key={n}>{n}</option>)}
                    </select>
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-field">
                    <label>Fecha aproximada</label>
                    <input type="text" placeholder="Ej: julio 2026" value={form.fecha} onChange={(e) => set('fecha', e.target.value)} />
                  </div>
                  <div className="form-field">
                    <label>Presupuesto aprox. (USD)</label>
                    <select value={form.presupuesto} onChange={(e) => set('presupuesto', e.target.value)}>
                      <option value="">Seleccionar</option>
                      <option>Hasta 2.000</option>
                      <option>2.000 – 4.000</option>
                      <option>4.000 – 7.000</option>
                      <option>7.000 – 10.000</option>
                      <option>+10.000</option>
                      <option>No estoy segura/o</option>
                    </select>
                  </div>
                </div>
                <div className="form-field full" style={{marginTop: 4}}>
                  <label>Mensaje / comentarios</label>
                  <textarea placeholder="Contame qué tenés en mente: hoteles, parques, fechas flexibles, qué te interesa..." value={form.mensaje} onChange={(e) => set('mensaje', e.target.value)} />
                </div>
                <div className="form-submit-row">
                  <div className="note">
                    <span style={{color: 'var(--sun)'}}>✦</span>
                    Sin costo. Sin compromiso.
                  </div>
                  <button type="submit" className="btn btn-primary">
                    Enviar cotización <span>→</span>
                  </button>
                </div>
              </form>
            </>
          ) : (
            <div className="success-msg">
              <div className="icon">✦</div>
              <h3>¡Gracias, {form.nombre || 'viajero/a'}!</h3>
              <p>
                Recibí tu mensaje. Dentro de las próximas 24 hs te llega tu cotización
                personalizada al mail. Mientras tanto, ¡seguí soñando! ✨
              </p>
              <button onClick={() => { setSubmitted(false); setForm({nombre:'',email:'',tel:'',destino:'',adultos:'2',ninos:'0',fecha:'',presupuesto:'',mensaje:''}); }} className="btn btn-secondary" style={{marginTop: 20}}>
                Enviar otra
              </button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

const TESTS = [
  { n: 'Camila R.', m: 'Disney en familia · Marzo 2026', t: 'Martu nos armó el viaje a Disney perfecto. Cuidó cada detalle, hasta los desayunos en el hotel. Volvimos enamoradas. ¡100% recomendada!', i: 'CR' },
  { n: 'Federico L.', m: 'Universal · Luna de miel', t: 'Pensábamos que organizar Universal iba a ser un caos. Martu hizo que sea simple. Tickets, hotel, app, todo listo. Solo disfrutamos.', i: 'FL' },
  { n: 'Sofía & Mati', m: 'NY + Miami · 2 semanas', t: 'Querían un combinado y nos armó un itinerario buenísimo. Estuvo disponible todo el viaje para resolver dudas. Una genia.', i: 'SM' },
];

function Testimonios() {
  return (
    <section className="testimonials">
      <div className="container">
        <div className="test-head">
          <span className="eyebrow">Testimonios</span>
          <h2 style={{marginTop: 18}}>Viajes que dejan <span className="italic">huellitas mágicas.</span></h2>
        </div>
        <div className="test-grid">
          {TESTS.map((t, i) => (
            <div key={i} className="test-card">
              <div className="test-stars">★ ★ ★ ★ ★</div>
              <p className="test-text">"{t.t}"</p>
              <div className="test-author">
                <div className="test-avatar">{t.i}</div>
                <div>
                  <div className="name">{t.n}</div>
                  <div className="meta">{t.m}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: '¿Cuánto cuesta tu asesoramiento?', a: 'Cuando reservás conmigo el paquete, el asesoramiento es 100% gratis. Si solo querés asesoría sin reservar (ya tenés tu paquete), tengo una tarifa especial — ¡consultame!' },
  { q: '¿Cómo se pagan los viajes?', a: 'Podés reservar desde 200 USD y armamos un plan de cuotas a tu medida. Lo único es que el viaje tiene que estar 100% pago hasta 30 días antes del check-in.' },
  { q: '¿Solo trabajás con Disney y Universal?', a: '¡Para nada! Aunque mi especialidad son los parques, te armo viajes a USA (Miami, NY, LA, Vegas), Caribe, México y Europa. Si lo soñás, lo armamos.' },
  { q: '¿Y si surge algo durante el viaje?', a: 'Estoy disponible por WhatsApp todo el viaje. Cualquier duda, cambio o sorpresa, me escribís y resolvemos juntas.' },
  { q: '¿Trabajás con familias con niños chicos?', a: '¡Sí! De hecho es uno de mis especialidades. Te armo el plan teniendo en cuenta siestas, atracciones por edad, comidas con personajes, todo.' },
  { q: '¿Cuánto tarda la cotización?', a: 'Dentro de las 24 hs hábiles tenés tu primera propuesta. Después podemos ir ajustando todo lo que quieras hasta que sea perfecto.' },
];

function FAQ() {
  const [open, setOpen] = useState3(0);
  return (
    <section className="faq" id="faq">
      <div className="container faq-grid">
        <div className="faq-aside">
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2 style={{marginTop: 18}}>Las dudas <span className="italic">de siempre.</span></h2>
          <p>Si te quedan dudas después de leer esto, escribime por WhatsApp — te las contesto al toque.</p>
          <a className="btn btn-secondary" href="https://wa.me/5491170380959" target="_blank" rel="noopener">
            Hablemos por WhatsApp →
          </a>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {f.q}
                <span className="faq-q-icon">+</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function IGBanner() {
  return (
    <section className="ig-banner ig-banner-simple">
      <div className="container" style={{textAlign: 'center', position: 'relative', zIndex: 2}}>
        <span className="eyebrow" style={{color: 'var(--sun)'}}>Seguime en Instagram</span>
        <h2 style={{marginTop: 18, marginBottom: 18, color: 'white'}}>Tips, ideas <span className="italic">y un poquito de magia.</span></h2>
        <p style={{color: 'rgba(255,255,255,0.85)', fontSize: 16, maxWidth: 540, margin: '0 auto 24px'}}>
          Subo contenido todos los días: tips de Disney, novedades, lugares para ir, fotos de viajes. Si te gusta soñar con tu próximo viaje, este es tu lugar.
        </p>
        <div className="ig-handle" style={{justifyContent: 'center', marginBottom: 28}}>
          <span>✦</span> @magicplans.martu
        </div>
        <a className="btn btn-primary" href="https://instagram.com/magicplans.martu" target="_blank" rel="noopener">
          Seguir en Instagram <span>→</span>
        </a>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <img src="assets/logo-magic-plans.png" alt="Magic Plans with Martu" className="footer-logo" />
            <p className="footer-tag">Agente de viajes especializada en experiencias mágicas. Hago realidad la magia de tu próximo viaje.</p>
          </div>
          <div>
            <h4>Navegación</h4>
            <ul>
              <li><a href="#sobre" onClick={(e) => { e.preventDefault(); window.smoothScroll('sobre'); }}>Sobre Mí</a></li>
              <li><a href="#destinos" onClick={(e) => { e.preventDefault(); window.smoothScroll('destinos'); }}>Destinos</a></li>
              <li><a href="#pasos" onClick={(e) => { e.preventDefault(); window.smoothScroll('pasos'); }}>Cómo trabajo</a></li>
              <li><a href="#cotizar" onClick={(e) => { e.preventDefault(); window.smoothScroll('cotizar'); }}>Cotizar</a></li>
              <li><a href="#faq" onClick={(e) => { e.preventDefault(); window.smoothScroll('faq'); }}>FAQ</a></li>
            </ul>
          </div>
          <div>
            <h4>Destinos</h4>
            <ul>
              <li><a href="#destinos">Disney & Universal</a></li>
              <li><a href="#destinos">Estados Unidos</a></li>
              <li><a href="#destinos">Caribe & México</a></li>
              <li><a href="#destinos">Europa</a></li>
            </ul>
          </div>
          <div>
            <h4>Contacto</h4>
            <ul>
              <li><a href="https://wa.me/5491170380959">WhatsApp +54 9 11 7038-0959</a></li>
              <li><a href="https://instagram.com/magicplans.martu">@magicplans.martu</a></li>
              <li><a href="mailto:hola@magicplans.com">hola@magicplans.com</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Magic Plans with Martu. Todos los derechos reservados.</div>
          <div>Hecho con ✦ para viajeros soñadores.</div>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFloat() {
  return (
    <a className="wa-float" href="https://wa.me/5491170380959" target="_blank" rel="noopener" title="Escribime por WhatsApp">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
      </svg>
    </a>
  );
}

window.Cotizar = Cotizar;
window.Testimonios = Testimonios;
window.FAQ = FAQ;
window.IGBanner = IGBanner;
window.Footer = Footer;
window.WhatsAppFloat = WhatsAppFloat;