// Page sections — WE HOST landing

// Resource map (populated by the standalone bundler; falls back to file paths live)
const R = (typeof window !== 'undefined' && window.__resources) || {};

// User-uploaded assets
const ASSETS = {
  heroVideo: R.heroVideo || 'assets/hero-bg.mp4',
  heroPoster: R.gregoVickySki || 'assets/grego-vicky-ski.jpeg',
  nosotros: R.gregoVicky || 'assets/grego-vicky.jpeg',
  nosotrosAlt: R.gregoVickySki || 'assets/grego-vicky-ski.jpeg',
};

// Destinos imagery
const IMG = {
  destValDIsere: R.destValdisere || 'assets/dest-valdisere.jpeg',
  destChamonix: R.destChamonix || 'assets/dest-chamonix.jpeg',
  destZermatt: R.destZermatt || 'assets/dest-zermatt.jpeg',
  destCourchevel: R.destCourchevel || 'assets/dest-courchevel.jpeg',
  destStMoritz: R.destStmoritz || 'assets/dest-stmoritz.jpeg',
};

// IntersectionObserver-driven reveal hook
function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight && r.bottom > 0) {
      requestAnimationFrame(() => el.classList.add('is-visible'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { el.classList.add('is-visible'); io.unobserve(el); } });
    }, { threshold: 0.08, rootMargin: '0px 0px -5% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function Reveal({ as: Tag = 'div', stagger = false, className = '', children, ...rest }) {
  const ref = useReveal();
  return (
    <Tag ref={ref} className={`${stagger ? 'reveal-stagger' : 'reveal'} ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

// ====================================================================
// HERO + DESTINOS OVERLAY — cards float over bottom of video
// ====================================================================
const DESTINOS = [
  { name: "Val d'Isère", country: 'Savoie · France', coords: '45.4480° N, 6.9800° E',
    img: IMG.destValDIsere,
    ratings: [
      { label: 'Dificultad de ski', value: 4 },
      { label: 'Après-ski', value: 4 },
      { label: 'Restaurantes', value: 4 },
      { label: 'Otras actividades', value: 3 },
    ],
    facts: [
      { label: 'Ambiente', value: 'Deportivo, chic, auténtico' },
      { label: 'Ideal para', value: 'Buenos esquiadores, grupos' },
      { label: 'No tan ideal para', value: 'Quienes no esquían' },
      { label: 'Tipo de experiencia', value: 'Ski-first, intensa' },
      { label: 'Accesibilidad', value: 'Buena' },
      { label: 'Nieve / montaña', value: 'Gran dominio esquiable' },
    ] },
  { name: 'Chamonix', country: 'Mont Blanc · France', coords: '45.9237° N, 6.8694° E',
    img: IMG.destChamonix,
    ratings: [
      { label: 'Dificultad de ski', value: 3 },
      { label: 'Après-ski', value: 3 },
      { label: 'Restaurantes', value: 3 },
      { label: 'Otras actividades', value: 4 },
    ],
    facts: [
      { label: 'Ambiente', value: 'Joven, outdoor' },
      { label: 'Ideal para', value: 'Quienes priorizan la cultura' },
      { label: 'No tan ideal para', value: 'Principiantes absolutos' },
      { label: 'Tipo de experiencia', value: 'Deportiva, exploradora, menos "luxury resort"' },
      { label: 'Accesibilidad', value: 'Muy buena (cerca de Ginebra)' },
      { label: 'Nieve / montaña', value: 'Excelente variedad y glaciares' },
    ] },
  { name: 'Zermatt', country: 'Matterhorn · Switzerland', coords: '46.0207° N, 7.7491° E',
    img: IMG.destZermatt,
    ratings: [
      { label: 'Dificultad de ski', value: 5 },
      { label: 'Après-ski', value: 3 },
      { label: 'Restaurantes', value: 3 },
      { label: 'Otras actividades', value: 3 },
    ],
    facts: [
      { label: 'Ambiente', value: 'Elegante, sofisticado' },
      { label: 'Ideal para', value: 'Ski + experiencia alpina premium' },
      { label: 'No tan ideal para', value: 'Quienes buscan fiesta intensa o precios bajos' },
      { label: 'Tipo de experiencia', value: 'Premium, postcard Alps' },
      { label: 'Accesibilidad', value: 'Compleja (llegada con trenes)' },
      { label: 'Nieve / montaña', value: 'Tiende a ser fría, ski glaciar' },
    ] },
  { name: 'Courchevel', country: 'Trois Vallées · France', coords: '45.4154° N, 6.6358° E',
    img: IMG.destCourchevel,
    ratings: [
      { label: 'Dificultad de ski', value: 2 },
      { label: 'Après-ski', value: 4 },
      { label: 'Restaurantes', value: 5 },
      { label: 'Otras actividades', value: 5 },
    ],
    facts: [
      { label: 'Ambiente', value: 'Luxury, sofisticado, social' },
      { label: 'Ideal para', value: 'Quienes quieren combo ski + lucir' },
      { label: 'No tan ideal para', value: 'Quienes buscan pueblo alpino o presupuesto moderado' },
      { label: 'Tipo de experiencia', value: 'Luxury full-service' },
      { label: 'Accesibilidad', value: 'Media dentro de Trois Vallées' },
      { label: 'Nieve / montaña', value: 'Enorme dominio esquiable' },
    ] },
  { name: 'St. Moritz', country: 'Engadin · Switzerland', coords: '46.4983° N, 9.8378° E',
    img: IMG.destStMoritz,
    ratings: [
      { label: 'Dificultad de ski', value: 4 },
      { label: 'Après-ski', value: 3 },
      { label: 'Restaurantes', value: 3 },
      { label: 'Otras actividades', value: 3 },
    ],
    facts: [
      { label: 'Ambiente', value: 'Elegante, exclusivo, old-money Europe' },
      { label: 'Ideal para', value: 'Lifestyle y ski hardcore' },
      { label: 'No tan ideal para', value: 'Quienes priorizan ski todo el día' },
      { label: 'Tipo de experiencia', value: 'Luxury cultural' },
      { label: 'Accesibilidad', value: 'Media' },
      { label: 'Nieve / montaña', value: 'Muy buena' },
    ] },
];

function Stars({ value }) {
  return (
    <span className="stars" aria-label={`${value} de 5`}>
      {[1, 2, 3, 4, 5].map((n) => (
        <span key={n} className={`star ${n <= value ? 'on' : ''}`}>★</span>
      ))}
    </span>
  );
}

function DestinoModal({ destino, onClose }) {
  React.useEffect(() => {
    if (!destino) return undefined;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [destino, onClose]);

  if (!destino) return null;
  return (
    <div className="dest-modal-overlay" onClick={onClose}>
      <div className="dest-modal" onClick={(e) => e.stopPropagation()}>
        <button className="dest-modal-close" onClick={onClose} aria-label="Cerrar">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
        <div className="dest-modal-photo" style={{ backgroundImage: `url(${destino.img})` }}>
          <div className="dest-modal-photo-info">
            <div className="country">{destino.country}</div>
            <h3>{destino.name}</h3>
            <div className="coords">{destino.coords}</div>
          </div>
        </div>
        <div className="dest-modal-body">
          <div className="dest-modal-ratings">
            {destino.ratings.map((r) => (
              <div key={r.label} className="rating-row">
                <span className="rating-label">{r.label}</span>
                <Stars value={r.value} />
              </div>
            ))}
          </div>
          <div className="dest-modal-facts">
            {destino.facts.map((f) => (
              <div key={f.label} className="fact-row">
                <span className="fact-label">{f.label}</span>
                <span className="fact-value">{f.value}</span>
              </div>
            ))}
          </div>
          <a href="#contacto" className="dest-modal-cta" onClick={onClose}>
            Quiero ir a {destino.name}
            {Icons.arrow}
          </a>
        </div>
      </div>
    </div>
  );
}

function DestinosOverlay() {
  const [index, setIndex] = React.useState(0);
  const [perPage, setPerPage] = React.useState(4);
  const [paused, setPaused] = React.useState(false);
  const [openDest, setOpenDest] = React.useState(null);

  React.useEffect(() => {
    const calc = () => {
      const w = window.innerWidth;
      if (w < 700) setPerPage(1);
      else if (w < 1100) setPerPage(2);
      else if (w < 1500) setPerPage(3);
      else setPerPage(4);
    };
    calc();
    window.addEventListener('resize', calc);
    return () => window.removeEventListener('resize', calc);
  }, []);

  const maxIndex = Math.max(0, DESTINOS.length - perPage);

  React.useEffect(() => {
    if (paused || openDest) return undefined;
    const id = setInterval(() => {
      setIndex((i) => (i >= maxIndex ? 0 : i + 1));
    }, 4500);
    return () => clearInterval(id);
  }, [paused, maxIndex, openDest]);

  const go = (dir) => {
    setIndex((i) => {
      const next = i + dir;
      if (next < 0) return maxIndex;
      if (next > maxIndex) return 0;
      return next;
    });
  };

  const slidePct = 100 / perPage;
  const translate = `translateX(calc(-${index * slidePct}% - ${index * 20 / perPage}px))`;

  return (
    <div className="dest-overlay" id="destinos"
         onMouseEnter={() => setPaused(true)}
         onMouseLeave={() => setPaused(false)}>
      <button className="dest-overlay-side-arrow prev" onClick={() => go(-1)} aria-label="Anterior">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
      </button>
      <button className="dest-overlay-side-arrow next" onClick={() => go(1)} aria-label="Siguiente">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
      </button>
      <div className="dest-overlay-track-wrap">
        <div className="dest-overlay-track" style={{ transform: translate }}>
          {DESTINOS.map((d, i) => (
            <article key={d.name}
                     className="dest-card"
                     onClick={() => setOpenDest(d)}
                     style={{
                       backgroundImage: `url(${d.img})`,
                       width: `calc((100% - ${(perPage - 1) * 20}px) / ${perPage})`,
                     }}>
              <span className="dest-card-label">0{i + 1}</span>
              <div className="arrow">{Icons.arrow}</div>
              <div className="dest-card-content">
                <h3>{d.name}</h3>
                <div className="coords">{d.coords}</div>
                <div className="perfil">Ver características &amp; estrellas →</div>
              </div>
            </article>
          ))}
        </div>
      </div>
      <DestinoModal destino={openDest} onClose={() => setOpenDest(null)} />
    </div>
  );
}

function Hero() {
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    if (v) {
      v.muted = true;
      v.defaultMuted = true;
      v.volume = 0;
    }
  }, []);
  return (
    <React.Fragment>
      <section className="hero" id="top" data-screen-label="01 Hero">
        <div className="hero-bg">
          <video ref={videoRef} autoPlay muted loop playsInline poster={ASSETS.heroPoster}>
            <source src={ASSETS.heroVideo} type="video/mp4" />
          </video>
        </div>
        <div className="hero-scroll">
          <span>Scroll</span>
          <div className="ln"></div>
        </div>
        <div className="hero-content">
          <Reveal>
            <h1>SKI TRIPS,<br/><span className="red">BETTER HOSTED.</span></h1>
          </Reveal>
          <Reveal>
            <p className="hero-sub">
              Hay una montaña que encaja mejor con tu forma de viajar. La elegimos
              con vos, diseñamos cada día de ski y te acompañamos en destino.
            </p>
          </Reveal>
          <Reveal>
            <a href="#contacto" className="hero-cta">Planear mi experiencia</a>
          </Reveal>
        </div>
        <DestinosOverlay />
      </section>
      <div className="hero-spacer"></div>
    </React.Fragment>
  );
}

// ====================================================================
// QUE HACEMOS — 1 · 2 · 3
// ====================================================================
const QUE_HACEMOS = [
  { n: '01', icon: 'pin', title: 'Elegimos con criterio',
    desc: 'Proponemos el destino según tu nivel de ski, las condiciones de la temporada y la forma en que querés viajar.' },
  { n: '02', icon: 'clipboard', title: 'Diseñamos el viaje',
    desc: 'Hotelería, transfers, clases, equipamiento y reservas. Armamos el cronograma día por día — lo logístico, resuelto.' },
  { n: '03', icon: 'hikers', title: 'Acompañamos en destino',
    desc: 'Te recibimos en los Alpes y estamos durante todo el viaje. Planning diario, recomendaciones, presencia real en montaña.' },
];

function QueHacemos() {
  return (
    <section className="section que-hacemos" id="que-hacemos" data-screen-label="02 Qué hacemos">
      <div className="section-header">
        <div>
          <div className="section-eyebrow">Qué hacemos</div>
          <h2 className="display-title">NUESTRA<br/><span className="red">PROPUESTA.</span></h2>
        </div>
      </div>
      <Reveal stagger className="qh-grid">
        {QUE_HACEMOS.map((q) => (
          <article key={q.n} className="qh-card">
            <div className="qh-icon">{Icons[q.icon]}</div>
            <div className="num">{q.n}</div>
            <h3>{q.title}</h3>
            <p>{q.desc}</p>
          </article>
        ))}
      </Reveal>
      <Reveal className="qh-footer">
        <p className="qh-tagline"><em>Tu referente latino</em> en los Alpes.</p>
        <a href="#contacto" className="dest-cta" style={{ background: 'var(--charcoal)' }}>
          Hablar con nosotros
          {Icons.arrow}
        </a>
      </Reveal>
    </section>
  );
}

// ====================================================================
// EXPERIENCIA — antes / durante timeline
// ====================================================================
const ANTES_ITEMS = [
  { icon: 'phone', label: 'Llamada inicial' },
  { icon: 'mountain2', label: 'Selección del destino ideal' },
  { icon: 'bed', label: 'Alojamiento curado' },
  { icon: 'logistics', label: 'Logística completa' },
  { icon: 'car', label: 'Rental y transfers' },
];
const DURANTE_ITEMS = [
  { icon: 'planning', label: 'Planning diario de ski' },
  { icon: 'ski', label: 'Clases de ski' },
  { icon: 'star', label: 'Recomendaciones locales' },
  { icon: 'reserve', label: 'Reservas a medida' },
  { icon: 'glass', label: 'Après-ski y acompañamiento real' },
];

function Experiencia() {
  return (
    <section className="section" id="experiencia" data-screen-label="04 Experiencia">
      <div className="section-header">
        <div>
          <div className="section-eyebrow">La experiencia</div>
          <h2 className="display-title">ANTES &amp;<br/><span className="red">DURANTE.</span></h2>
        </div>
      </div>
      <div className="exp-grid">
        <div className="exp-left">
          <Reveal>
            <p className="lead">
              Acompañamos cada viaje en dos etapas. Antes — diseñamos, curamos y resolvemos
              todo lo logístico. Durante — estamos en montaña, presentes, todos los días.
            </p>
          </Reveal>
          <Reveal>
            <div className="photo" style={{ backgroundImage: `url(${ASSETS.nosotrosAlt})` }}></div>
          </Reveal>
        </div>
        <Reveal className="timeline">
          <div className="tl-phase">
            <div className="dot">{Icons.bed}</div>
            <h3 className="head">Antes del viaje</h3>
            <div className="sub">Diseño · curaduría · logística</div>
            <div className="tl-items">
              {ANTES_ITEMS.map(it => (
                <div key={it.label} className="tl-item">{Icons[it.icon]}<span>{it.label}</span></div>
              ))}
            </div>
          </div>
          <div className="tl-phase durante">
            <div className="dot">{Icons.ski}</div>
            <h3 className="head">Durante el viaje</h3>
            <div className="sub">Acompañamiento real en montaña</div>
            <div className="tl-items">
              {DURANTE_ITEMS.map(it => (
                <div key={it.label} className="tl-item">{Icons[it.icon]}<span>{it.label}</span></div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ====================================================================
// NOSOTROS — Grego y Vicky
// ====================================================================
function Nosotros() {
  return (
    <section className="section nosotros" id="nosotros" data-screen-label="05 Nosotros">
      <div className="nos-grid">
        <Reveal>
          <div className="nos-photo" style={{ backgroundImage: `url(${ASSETS.nosotros})` }}>
            <div className="tag">Zermatt · Matterhorn</div>
          </div>
        </Reveal>
        <Reveal className="nos-text">
          <div className="section-eyebrow" style={{ marginBottom: 18 }}>Nosotros</div>
          <h2>Somos Grego<br/>&amp; <span className="red">Vicky.</span></h2>
          <p>
            Una dupla argentina que vive entre los Alpes y Bariloche. Combinamos
            experiencia real en ski, conocimiento profundo de destinos europeos,
            hospitalidad genuina y una forma de viajar que busca momentos memorables.
          </p>
          <p>
            Asesoramos y acompañamos viajes de ski en los Alpes de principio a fin —
            recomendando el destino correcto para cada cliente, y planificando cada
            día según su perfil, nivel y forma de viajar.
          </p>
          <div className="nos-signature">Grego &amp; Vicky · WE HOST</div>
        </Reveal>
      </div>
    </section>
  );
}

// ====================================================================
// MOMENTOS — gallery
// ====================================================================
// Local gallery photos
const GALLERY = Array.from({ length: 21 }, (_, i) => {
  const nn = String(i + 1).padStart(2, '0');
  return R['gal' + nn] || `assets/gallery/g${nn}.jpeg`;
});
const GALLERY_ROW_A = GALLERY.slice(0, 11);
const GALLERY_ROW_B = GALLERY.slice(11);

function Galeria() {
  const renderTrack = (tiles, klass) => (
    <div className={`gallery-track ${klass}`}>
      {[...tiles, ...tiles].map((src, i) => {
        const widthClass = i % 3 === 0 ? 'wide' : (i % 5 === 0 ? 'tall' : '');
        return (
          <div key={`${klass}-${i}`}
               className={`gallery-tile ${widthClass}`}
               style={{ backgroundImage: `url(${src})` }} />
        );
      })}
    </div>
  );

  return (
    <section className="section gallery" id="momentos" data-screen-label="06 Momentos">
      <div className="section-header">
        <div>
          <div className="section-eyebrow">Marca en acción</div>
          <h2 className="display-title">MOMEN<span className="red">TOS</span></h2>
        </div>
      </div>
      <Reveal as="p" className="gallery-intro">
        Así es como <b>WE HOST</b> cobra vida — momentos reales de cada temporada,
        cada destino y cada viajero. Good times, together.
      </Reveal>
      <div className="gallery-strip row-1">
        {renderTrack(GALLERY_ROW_A, 'scroll-left')}
      </div>
      <div className="gallery-strip row-2">
        {renderTrack(GALLERY_ROW_B, 'scroll-right')}
      </div>
    </section>
  );
}

// ====================================================================
// CONTACTO
// ====================================================================
function Contacto() {
  const [state, setState] = React.useState({
    name: '', email: '', destino: 'Aún no lo sé', viajeros: '2', fecha: '', msg: '',
  });
  const [submitted, setSubmitted] = React.useState(false);
  const update = (k) => (e) => setState(s => ({ ...s, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    // Pre-fill mailto fallback — in production this'd POST to backend
    const subject = encodeURIComponent(`Consulta WE HOST — ${state.name}`);
    const body = encodeURIComponent(
      `Nombre: ${state.name}\nEmail: ${state.email}\nDestino de interés: ${state.destino}\nViajeros: ${state.viajeros}\nFecha aproximada: ${state.fecha}\n\nMensaje:\n${state.msg}`
    );
    // Fire-and-forget mailto so users can also send manually
    window.location.href = `mailto:info@wehostalps.com?subject=${subject}&body=${body}`;
    setSubmitted(true);
  };

  return (
    <section className="section contact" id="contacto" data-screen-label="07 Contacto">
      <div className="section-header">
        <div>
          <div className="section-eyebrow">Escribinos y empezamos</div>
          <h2 className="display-title">MAKE IT<br/><span className="red">HAPPEN.</span></h2>
        </div>
      </div>
      <div className="contact-grid">
        <Reveal className="contact-left">
          <p>
            Contanos qué buscás cuando pensás en tu viaje.
          </p>
          <p style={{ opacity: 0.86 }}>
            Estamos esperando tu mensaje!
          </p>
          <div className="contact-meta">
            <a className="item" href="mailto:info@wehostalps.com">
              <div className="label">Email</div>
              <div className="val">info@wehostalps.com</div>
            </a>
            <a className="item" href="https://wa.me/5493364493348?text=Hola%20WE%20HOST!%20Quiero%20organizar%20un%20viaje%20de%20ski%20en%20los%20Alpes." target="_blank" rel="noopener">
              <div className="label">WhatsApp</div>
              <div className="val">+54 9 336 4493348</div>
            </a>
            <a className="item" href="https://instagram.com/wehostalps" target="_blank" rel="noopener">
              <div className="label">Instagram</div>
              <div className="val">@wehostalps</div>
            </a>
            <div className="item">
              <div className="label">Base</div>
              <div className="val">Alpes &amp; Bariloche</div>
            </div>
          </div>
        </Reveal>
        <Reveal>
          <form className="contact-form" onSubmit={submit}>
            {submitted ? (
              <div className="success-state">
                <div className="check">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <h4>Recibido.</h4>
                <p>Te contactamos dentro de las próximas 24 horas, {state.name || 'viajero'}.</p>
              </div>
            ) : (
              <React.Fragment>
                <h3>Hablemos de tu próximo viaje</h3>
                <div className="field">
                  <label>Nombre</label>
                  <input value={state.name} onChange={update('name')} placeholder="Tu nombre" required />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input type="email" value={state.email} onChange={update('email')} placeholder="vos@ejemplo.com" required />
                </div>
                <div className="field-row">
                  <div className="field">
                    <label>Destino de interés</label>
                    <select value={state.destino} onChange={update('destino')}>
                      <option>Aún no lo sé</option>
                      <option>Val d'Isère</option>
                      <option>Chamonix</option>
                      <option>Zermatt</option>
                      <option>Courchevel</option>
                      <option>St. Moritz</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Viajeros</label>
                    <select value={state.viajeros} onChange={update('viajeros')}>
                      <option>1</option><option>2</option><option>3-4</option><option>5+</option>
                    </select>
                  </div>
                </div>
                <div className="field">
                  <label>Fecha aproximada</label>
                  <input type="text" value={state.fecha} onChange={update('fecha')} placeholder="Ej: Enero 2027 — 7 días" />
                </div>
                <div className="field">
                  <label>Algo que quieras contarnos</label>
                  <textarea value={state.msg} onChange={update('msg')} placeholder="Estilo de viaje, nivel de ski, intereses…" rows="3"></textarea>
                </div>
                <button type="submit" className="submit-btn">
                  Empezar la conversación
                  {Icons.arrow}
                </button>
              </React.Fragment>
            )}
          </form>
        </Reveal>
      </div>
    </section>
  );
}

// ====================================================================
// FOOTER
// ====================================================================
function Footer() {
  return (
    <footer className="footer" data-screen-label="08 Footer">
      <div className="footer-top">
        <div className="brand-block">
          <div className="wordmark"><span className="br">[</span> WE HOST <span className="br">]</span></div>
          <p>Ski &amp; Adventure Experiences in the Alps. Make it a good time, together.</p>
          <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.6 }}>
            Alpes &amp; Bariloche
          </div>
        </div>
        <div>
          <h5>Navegación</h5>
          <ul>
            <li><a href="#destinos">Destinos</a></li>
            <li><a href="#que-hacemos">Qué hacemos</a></li>
            <li><a href="#experiencia">Experiencia</a></li>
            <li><a href="#nosotros">Nosotros</a></li>
          </ul>
        </div>
        <div>
          <h5>Destinos</h5>
          <ul>
            <li>Val d'Isère</li>
            <li>Chamonix</li>
            <li>Zermatt</li>
            <li>Courchevel</li>
            <li>St. Moritz</li>
          </ul>
        </div>
        <div>
          <h5>Contacto</h5>
          <ul>
            <li><a href="mailto:info@wehostalps.com">info@wehostalps.com</a></li>
            <li><a href="https://wa.me/5493364493348" target="_blank" rel="noopener">+54 9 336 4493348</a></li>
            <li><a href="https://instagram.com/wehostalps" target="_blank" rel="noopener">@wehostalps</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 WE HOST · Make it a good time, together.</span>
        <div className="socials">
          <a href="https://instagram.com/wehostalps" target="_blank" rel="noopener" aria-label="Instagram">{Icons.ig}</a>
          <a href="https://wa.me/5493364493348" target="_blank" rel="noopener" aria-label="WhatsApp">{Icons.wa}</a>
          <a href="mailto:info@wehostalps.com" aria-label="Email">{Icons.mail}</a>
        </div>
        <span>Alpes &amp; Bariloche</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, QueHacemos, Experiencia, Nosotros, Galeria, Contacto, Footer });