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

// Destinations data — URLs from Unsplash (verified) + gradient fallback colors
const DESTINOS = [
  { name: 'Disney World', cat: 'magic', sub: 'Orlando, FL', img: 'https://images.unsplash.com/photo-1597466599360-3b9775841aec?w=1400&q=80', bg: 'linear-gradient(135deg,#FF9A00,#FF5E62)', size: 'feature' },
  { name: 'Universal Orlando', cat: 'magic', sub: 'Orlando, FL', img: 'assets/dest-universal.jpg', bg: 'linear-gradient(135deg,#667eea,#764ba2)', size: 'tall' },
  { name: 'Xcaret', cat: 'caribe', sub: 'Riviera Maya, MX', img: 'assets/dest-xcaret.avif', bg: 'linear-gradient(135deg,#11998e,#38ef7d)', size: 'tall' },
  { name: 'Miami', cat: 'usa', sub: 'Florida, USA', img: 'https://images.unsplash.com/photo-1535498730771-e735b998cd64?w=1000&q=80', bg: 'linear-gradient(135deg,#f093fb,#f5576c)', size: 'small' },
  { name: 'New York', cat: 'usa', sub: 'NY, USA', img: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?w=1400&q=80', bg: 'linear-gradient(135deg,#4facfe,#00f2fe)', size: 'wide' },
  { name: 'Los Angeles', cat: 'usa', sub: 'California, USA', img: 'https://images.unsplash.com/photo-1444723121867-7a241cacace9?w=1000&q=80', bg: 'linear-gradient(135deg,#fa709a,#fee140)', size: 'third' },
  { name: 'Las Vegas', cat: 'usa', sub: 'Nevada, USA', img: 'https://images.unsplash.com/photo-1605833556294-ea5c7a74f57d?w=1000&q=80', bg: 'linear-gradient(135deg,#FF512F,#F09819)', size: 'third' },
  { name: 'Cancún', cat: 'caribe', sub: 'Quintana Roo, MX', img: 'https://images.unsplash.com/photo-1552074284-5e88ef1aef18?w=1000&q=80', bg: 'linear-gradient(135deg,#00c6ff,#0072ff)', size: 'third' },
  { name: 'París', cat: 'europa', sub: 'Francia', img: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=1400&q=80', bg: 'linear-gradient(135deg,#a18cd1,#fbc2eb)', size: 'feature' },
  { name: 'Roma', cat: 'europa', sub: 'Italia', img: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=1000&q=80', bg: 'linear-gradient(135deg,#f6d365,#fda085)', size: 'tall' },
  { name: 'Londres', cat: 'europa', sub: 'Reino Unido', img: 'https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?w=1000&q=80', bg: 'linear-gradient(135deg,#5ee7df,#b490ca)', size: 'small' },
  { name: 'Amsterdam', cat: 'europa', sub: 'Países Bajos', img: 'assets/dest-amsterdam.jpg', bg: 'linear-gradient(135deg,#43cea2,#185a9d)', size: 'wide' },
];

const DEST_TABS = [
  { id: 'all', label: 'Todos' },
  { id: 'magic', label: 'Disney & Universal' },
  { id: 'usa', label: 'Estados Unidos' },
  { id: 'caribe', label: 'Caribe & México' },
  { id: 'europa', label: 'Europa' },
];

function Sobre() {
  return (
    <section className="about" id="sobre">
      <div className="container about-grid">
        <div className="about-photo-wrap">
          <div className="about-photo">
            <img src="assets/martu.jpg" alt="Martu — Magic Plans" />
          </div>
          <div className="about-badge tl">Hola,<br/>soy Martu ✦</div>
          <div className="about-badge br">+100<br/>viajes armados</div>
        </div>

        <div className="about-text">
          <span className="eyebrow">Sobre mí</span>
          <div className="greeting" style={{marginTop: 18}}>Hola, soy Martu</div>
          <h2>Hago realidad la magia <span className="italic">de tu próximo viaje.</span></h2>
          <p>
            Siempre sentí que un viaje no es solo un destino. Es la ilusión de imaginarlo,
            los detalles, la emoción de que salga perfecto. Por eso empecé este proyecto:
            para acompañarte en cada paso y transformar esa idea de "algún día" en un viaje
            real, tranquilo y lleno de magia.
          </p>
          <p>
            Hoy acompaño a personas y familias a diseñar viajes a medida, cuidando cada
            detalle para que la experiencia sea inolvidable.
          </p>
          <ul className="about-list">
            <li>Hoteles que realmente valen la pena</li>
            <li>Tickets correctos según tu plan</li>
            <li>Promos y opciones reales</li>
            <li>Itinerario pensado para vos</li>
            <li>Acompañamiento antes y durante el viaje</li>
            <li>Atención cercana y personalizada</li>
          </ul>
          <div className="about-signature">— Porque viajar tranquilo… cambia todo.</div>
        </div>
      </div>
    </section>
  );
}

function Destinos() {
  const [active, setActive] = useState2('all');
  const filtered = active === 'all' ? DESTINOS : DESTINOS.filter(d => d.cat === active);

  return (
    <section className="destinos" id="destinos">
      <div className="container">
        <div className="destinos-head">
          <div>
            <span className="eyebrow">Destinos</span>
            <h2 style={{marginTop: 18}}>Para donde sea<br/><span className="italic">que estés soñando.</span></h2>
          </div>
          <p className="lead">
            No solo Disney y Universal — también te armo viajes a USA, el Caribe y Europa.
            Cada destino, pensado a tu medida.
          </p>
        </div>

        <div className="dest-tabs">
          {DEST_TABS.map(t => {
            const count = t.id === 'all' ? DESTINOS.length : DESTINOS.filter(d => d.cat === t.id).length;
            return (
              <button key={t.id} className={`dest-tab ${active === t.id ? 'active' : ''}`} onClick={() => setActive(t.id)}>
                {t.label}<span className="count">{count}</span>
              </button>
            );
          })}
        </div>

        <div className="dest-grid">
          {filtered.map((d, i) => (
            <div key={d.name} className={`dest-card ${d.size}`} style={{background: d.bg}}>
              <img className="dest-card-img" src={d.img} alt={d.name} loading="lazy" onError={(e) => { e.target.style.display = 'none'; }} />
              <div className="dest-card-overlay"></div>
              <div className="dest-card-content">
                <div>
                  <span className="dest-card-cat">{DEST_TABS.find(t => t.id === d.cat)?.label || d.cat}</span>
                  <div className="dest-card-name">{d.name}</div>
                  <div className="dest-card-sub">{d.sub}</div>
                </div>
                <div className="dest-card-arrow">→</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pasos() {
  const stars = Array.from({length: 30}, (_, i) => ({
    left: Math.random() * 100,
    top: Math.random() * 100,
    size: Math.random() * 2 + 1,
    delay: Math.random() * 4,
  }));
  const steps = [
    { n: '01', t: 'Contacto', d: 'Me escribís por WhatsApp o el formulario contándome qué tenés en mente: destino, fechas, cuánta gente.' },
    { n: '02', t: 'Cotización', d: 'Te armo una propuesta a medida con hoteles, tickets y opciones. Todo modificable y sin compromiso.' },
    { n: '03', t: 'Reserva', d: 'Cuando elegís, reservamos. Plan de pago a tu medida — desde 200 USD para arrancar el viaje.' },
    { n: '04', t: 'A disfrutar', d: 'Te acompaño antes y durante el viaje. Apps, tips, dudas — estoy a un mensaje de distancia.' },
  ];
  return (
    <section className="steps" id="pasos">
      <div className="steps-stars">
        {stars.map((s, i) => (
          <div key={i} className="s" style={{
            left: `${s.left}%`, top: `${s.top}%`,
            width: `${s.size}px`, height: `${s.size}px`,
            animationDelay: `${s.delay}s`,
          }} />
        ))}
      </div>
      <div className="container">
        <div className="steps-head">
          <span className="eyebrow">Cómo trabajo</span>
          <h2 style={{marginTop: 18}}>De la idea<br/><span className="italic">al check-in mágico.</span></h2>
          <p>Un proceso simple, transparente y a tu ritmo. Sin presión, sin sorpresas.</p>
        </div>
        <div className="steps-grid">
          {steps.map(s => (
            <div key={s.n} className="step-card">
              <div className="step-num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Sobre = Sobre;
window.Destinos = Destinos;
window.Pasos = Pasos;