/* Encapsulado em IIFE: sem isso, shared.jsx e o script de cada pagina declaram
   os MESMOS identificadores (Button, StickerLabel, Tag, D) no escopo global. Hoje passa
   so porque o Babel do navegador rebaixa const->var; com qualquer build (esbuild target
   es2019) vira "SyntaxError: Identifier Button has already been declared" e a pagina
   fica em branco. Nao remover o wrapper. */
(function () {
/* IR Turismo — Dicas (guia de Buenos Aires) */
const { Button, StickerLabel } = window.IRTurismoDesignSystem_586946;
const D = window.IR_DATA;

const GUIA_MSG = 'Olá! Vim pela página de Dicas e gostaria de receber o guia completo de Buenos Aires da IR Turismo.';

const SECTIONS = [
  ['info', 'Informações básicas'],
  ['transporte', 'Transporte'],
  ['entretenimento', 'Entretenimento'],
  ['culinaria', 'Culinária'],
  ['compras', 'Compras'],
  ['roteiros', 'Roteiros prontos'],
  ['mapa', 'No mapa'],
];

const SEASONS = [
  { name: 'Primavera', months: 'Set – Nov', temp: '15°–25°', what: 'Roupas leves, uma jaqueta para o fim de tarde, sapatos confortáveis e um guarda-chuva pequeno.' },
  { name: 'Verão', months: 'Dez – Mar', temp: 'até 35°', what: 'Roupas bem leves, protetor solar, boné ou chapéu, óculos de sol e garrafinha de água.' },
  { name: 'Outono', months: 'Mar – Jun', temp: '10°–20°', what: 'Roupas de meia-estação, jaqueta ou casaco leve e sapatos fechados. Ideal para caminhar.' },
  { name: 'Inverno', months: 'Jun – Set', temp: '5°–15°', what: 'Casacos mais pesados, cachecol, gorro, luvas e sapatos fechados e confortáveis.' },
];

const DICIONARIO = [
  { t: 'Saudações & gentilezas', items: [['Hola', 'Oi / Olá'], ['Chau', 'Tchau'], ['Gracias', 'Obrigado(a)'], ['¿Cómo estás?', 'Como você está?']] },
  { t: 'No bar & restaurante', items: [['La cuenta, por favor', 'A conta, por favor'], ['Agua con / sin gas', 'Água com / sem gás'], ['Parrilla', 'Casa de carnes'], ['Asado', 'Churrasco argentino']] },
  { t: 'No dia a dia', items: [['Subte', 'Metrô'], ['Bondi', 'Ônibus'], ['Plata', 'Dinheiro (informal)'], ['Pibe / Piba', 'Menino / menina']] },
  { t: 'Expressões portenhas', items: [['Che', '“Ei!” / “Cara!”'], ['Bárbaro', 'Incrível, muito bom'], ['Mirá vos', '“Olha só!” / “Sério?”'], ['Re', 'Muito (ex.: “re lindo”)']] },
];

const ROTEIROS = [
  {
    title: 'Centro Histórico & Puerto Madero',
    sub: 'Para quem tem um dia e quer ver o essencial da cidade.',
    photo: 'assets/fotos/citytour-clientes-plaza-mayo.jpg',
    alt: 'Viajantes da IR Turismo na Plaza de Mayo',
    steps: [
      'Comece no Obelisco, o símbolo icônico da cidade.',
      'Caminhe até o Teatro Colón — vale muito a visita guiada.',
      'Siga para a Plaza de Mayo: Casa Rosada e Catedral Metropolitana.',
      'Atravesse a pé para Puerto Madero: o dique e a Puente de la Mujer.',
      'Termine com almoço ou jantar num restaurante charmoso do porto.',
    ],
  },
  {
    title: 'Arte, Natureza & Cultura',
    sub: 'Para quem gosta de história, arte e passeios ao ar livre.',
    photo: 'assets/fotos/citytour-cliente-facultad.jpg',
    alt: 'Viajante na Faculdade de Direito, em Recoleta',
    steps: [
      'Comece na Floralis Genérica e na Faculdade de Direito.',
      'Caminhe até o Museu de Belas Artes ou o de Arte Decorativo.',
      'Almoce na Recoleta e visite o Cemitério da Recoleta (túmulo de Evita).',
      'Finalize com um café especial pelo bairro.',
    ],
  },
  {
    title: 'San Telmo & La Boca',
    sub: 'Para conhecer o lado mais portenho da cidade.',
    photo: 'assets/fotos/caminito-trio.jpg',
    alt: 'Amigas no Caminito, em La Boca',
    steps: [
      'Comece em San Telmo, explorando a feira de antiguidades (aos domingos).',
      'Vá até La Boca conhecer o Caminito e tirar fotos coloridas.',
      'Fã de futebol? Visite La Bombonera, estádio do Boca Juniors.',
      'Termine com almoço ou jantar em San Telmo, com música ao vivo.',
    ],
  },
];

/* ---------- Mapa de Buenos Aires (MVP — ~22 pins) ----------
   Coordenadas CONGELADAS via Nominatim/OpenStreetMap (geocode.js, 1 req/s).
   Forma dos dados: { n, d, cat, lat, lon } · cat ∈ classicos|culinaria|entretenimento|compras
   Descrições (d) reaproveitadas dos cards/roteiros acima (fatos, não reescritos). */
const MAP_CATS = {
  classicos:      { color: 'var(--purple-900)', label: 'Clássicos & roteiros' },
  culinaria:      { color: 'var(--orange-500)', label: 'Culinária' },
  entretenimento: { color: 'var(--purple-700)', label: 'Entretenimento' },
  compras:        { color: 'var(--magenta-500)', label: 'Compras' },
};

const MAP_PLACES = [
  // Clássicos / roteiros — pin de destaque (roxo-escuro, maior, anel branco)
  { n: 'Obelisco',                 cat: 'classicos',      lat: -34.603709, lon: -58.381630, d: 'O símbolo icônico da cidade, no coração da Avenida 9 de Julio.' },
  { n: 'Teatro Colón',             cat: 'classicos',      lat: -34.601086, lon: -58.383187, d: 'Um dos maiores teatros líricos do mundo — vale a visita guiada.' },
  { n: 'Casa Rosada',              cat: 'classicos',      lat: -34.608069, lon: -58.370276, d: 'A sede do governo argentino, na histórica Plaza de Mayo.' },
  { n: 'Catedral Metropolitana',   cat: 'classicos',      lat: -34.607474, lon: -58.373277, d: 'A catedral principal da cidade, ali na Plaza de Mayo.' },
  { n: 'Puente de la Mujer',       cat: 'classicos',      lat: -34.608016, lon: -58.365129, d: 'A passarela giratória que virou símbolo de Puerto Madero.' },
  { n: 'Floralis Genérica',        cat: 'classicos',      lat: -34.581689, lon: -58.394002, d: 'A flor de metal gigante que abre e fecha, em Recoleta.' },
  { n: 'Facultad de Derecho',      cat: 'classicos',      lat: -34.582483, lon: -58.391851, d: 'A imponente Faculdade de Direito e suas colunas — cartão-postal.' },
  { n: 'Cemitério da Recoleta',    cat: 'classicos',      lat: -34.587657, lon: -58.393595, d: 'Túmulos monumentais — e o mausoléu de Evita.' },
  { n: 'Caminito',                 cat: 'classicos',      lat: -34.639359, lon: -58.362569, d: 'A ruela mais colorida de La Boca, feita para fotos.' },
  { n: 'La Bombonera',             cat: 'classicos',      lat: -34.635517, lon: -58.364916, d: 'O estádio do Boca Juniors, templo do futebol portenho.' },
  // Culinária (laranja)
  { n: 'La Cabrera',               cat: 'culinaria',      lat: -34.589115, lon: -58.433247, d: 'Excelente — muitas vezes melhor e mais em conta que o Don Julio.' },
  { n: 'Don Julio',                cat: 'culinaria',      lat: -34.586292, lon: -58.424277, d: 'Famoso no mundo todo; prepare-se para a fila.' },
  { n: 'Güerrín',                  cat: 'culinaria',      lat: -34.604105, lon: -58.385995, d: 'Parada obrigatória para a pizza argentina clássica.' },
  { n: 'El Cuartito',              cat: 'culinaria',      lat: -34.597824, lon: -58.385465, d: 'Tradicionalíssima — uma das melhores fugazzetas da cidade.' },
  // Entretenimento (roxo)
  { n: 'Florería Atlántico',       cat: 'entretenimento', lat: -34.591822, lon: -58.379343, d: 'Um dos bares mais premiados da América Latina, escondido numa floricultura.' },
  { n: "Frank's Bar",              cat: 'entretenimento', lat: -34.583239, lon: -58.442703, d: 'Clássico speakeasy — é preciso saber a senha do dia para entrar.' },
  { n: 'MALBA',                    cat: 'entretenimento', lat: -34.576882, lon: -58.403392, d: 'Arte latino-americana — Frida Kahlo, Tarsila do Amaral e mais.' },
  { n: 'El Ateneo Grand Splendid', cat: 'entretenimento', lat: -34.595983, lon: -58.394262, d: 'Uma das livrarias mais bonitas do mundo, num antigo teatro.' },
  { n: 'Señor Tango',              cat: 'entretenimento', lat: -34.652702, lon: -58.376176, d: 'Um dos shows mais impactantes, com grandes produções de luz e som.' },
  { n: 'Madero Tango',             cat: 'entretenimento', lat: -34.623701, lon: -58.363800, d: 'Show moderno com jantar e vista para Puerto Madero — bem romântico.' },
  // Compras (magenta)
  { n: 'Galerías Pacífico',        cat: 'compras',        lat: -34.599244, lon: -58.374763, d: 'Lindíssimo, com afrescos no teto. Rende ótimas fotos.' },
  { n: 'Patio Bullrich',           cat: 'compras',        lat: -34.588577, lon: -58.383791, d: 'Mais luxuoso, com grifes internacionais.' },
];

// Leaflet 1.9.4 via unpkg — SRI (sha384) verificados por hash do arquivo real
const LEAFLET_CSS = { url: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css', sri: 'sha384-sHL9NAb7lN7rfvG5lfHpm643Xkcjzp4jFvuavGOndn6pjVqS6ny56CAt3nsEVT4H' };
const LEAFLET_JS  = { url: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js',  sri: 'sha384-cxOPjt7s7Iz04uaHJceBmS+qpjv2JkIHNVcuOrM+YHwZOmJGBXI00mdUXEq65HTH' };

let _leafletPromise = null;
function loadLeaflet() {
  if (window.L) return Promise.resolve(window.L);
  if (_leafletPromise) return _leafletPromise;
  _leafletPromise = new Promise((resolve, reject) => {
    if (!document.querySelector('link[data-leaflet]')) {
      const link = document.createElement('link');
      link.rel = 'stylesheet'; link.href = LEAFLET_CSS.url;
      link.integrity = LEAFLET_CSS.sri; link.crossOrigin = 'anonymous';
      link.setAttribute('data-leaflet', '');
      document.head.appendChild(link);
    }
    const s = document.createElement('script');
    s.src = LEAFLET_JS.url; s.integrity = LEAFLET_JS.sri; s.crossOrigin = 'anonymous'; s.async = true;
    s.onload = () => window.L ? resolve(window.L) : reject(new Error('Leaflet não inicializou'));
    s.onerror = () => reject(new Error('Falha ao carregar o Leaflet'));
    document.head.appendChild(s);
  });
  return _leafletPromise;
}

// teardrop SVG com miolo branco; colorível por CSS var (--pin); hero = maior + anel branco
function pinMarkup(hero) {
  return (
    '<svg viewBox="0 0 26 34" width="' + (hero ? 34 : 26) + '" height="' + (hero ? 44 : 34) + '" aria-hidden="true" focusable="false">' +
      '<path class="ir-pin__drop" d="M13 .8C6.2.8.9 6 .9 12.6c0 8.2 10.5 19.6 11 20.1a1.6 1.6 0 0 0 2.3 0c.5-.5 11-11.9 11-20.1C25.1 6 19.8.8 13 .8Z" ' +
        'stroke="#fff" stroke-width="' + (hero ? 2.4 : 1.4) + '"/>' +
      '<circle class="ir-pin__core" cx="13" cy="12.4" r="' + (hero ? 5 : 4.3) + '" fill="#fff"/>' +
    '</svg>'
  );
}

function escHTML(s) {
  return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
}

function initBAMap(container, L) {
  const map = L.map(container, {
    center: [-34.606, -58.396], zoom: 12,
    scrollWheelZoom: false, zoomControl: true, attributionControl: true,
  });
  const tiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    subdomains: 'abcd', maxZoom: 19, minZoom: 10,
    attribution: '&copy; OpenStreetMap &copy; CARTO',
  });
  // degradação graciosa: se os tiles falharem, os pins seguem posicionados
  tiles.on('tileerror', () => { const w = container.closest('.ir-map'); if (w) w.classList.add('is-tilefail'); });
  tiles.addTo(map);

  const pts = [];
  MAP_PLACES.forEach((p) => {
    const meta = MAP_CATS[p.cat];
    const hero = p.cat === 'classicos';
    const icon = L.divIcon({
      className: 'ir-pin-wrap',
      html: '<span class="ir-pin ' + (hero ? 'ir-pin--hero' : '') + '" style="--pin:' + meta.color + '">' + pinMarkup(hero) + '</span>',
      iconSize: hero ? [34, 44] : [26, 34],
      iconAnchor: hero ? [17, 43] : [13, 33],
      popupAnchor: [0, hero ? -40 : -30],
      tooltipAnchor: [0, hero ? -38 : -28],
    });
    const m = L.marker([p.lat, p.lon], { icon, keyboard: true, riseOnHover: true }).addTo(map);
    const body = '<div class="ir-map__card"><strong>' + escHTML(p.n) + '</strong>' + (p.d ? '<span>' + escHTML(p.d) + '</span>' : '') + '</div>';
    m.bindTooltip(body, { direction: 'top', className: 'ir-map__tip', opacity: 1 });   // desktop: hover
    m.bindPopup(body, { className: 'ir-map__pop', closeButton: true });                 // mobile: tap
    const el = m.getElement();
    if (el) {
      el.setAttribute('role', 'button');
      el.setAttribute('tabindex', '0');
      el.setAttribute('aria-label', p.n + ' — ' + meta.label);
      el.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); m.openPopup(); }
      });
    }
    pts.push([p.lat, p.lon]);
  });
  map.fitBounds(pts, { padding: [42, 42] });
  return map;
}

function MapaCanvas() {
  const wrapRef = React.useRef(null);
  const canvasRef = React.useRef(null);
  const startedRef = React.useRef(false);
  const [state, setState] = React.useState('idle'); // idle | loading | ready | fail

  React.useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    const io = new IntersectionObserver((ents) => {
      ents.forEach((en) => {
        if (en.isIntersecting && !startedRef.current) {
          startedRef.current = true;
          io.disconnect();
          setState('loading');
          loadLeaflet()
            .then((L) => { if (canvasRef.current) { initBAMap(canvasRef.current, L); setState('ready'); } })
            .catch(() => setState('fail'));
        }
      });
    }, { rootMargin: '250px 0px' });
    io.observe(wrap);
    return () => io.disconnect();
  }, []);

  return (
    <div className="ir-map-block">
      <div className={`ir-map ${state === 'ready' ? 'is-ready' : ''} ${state === 'fail' ? 'is-fail' : ''}`} ref={wrapRef}>
        <div className="ir-map__canvas" ref={canvasRef} role="application" aria-label="Mapa de Buenos Aires com os lugares que a IR Turismo indica"></div>
        <p className="ir-map__status" role="status">
          {state === 'fail'
            ? 'Não foi possível carregar o mapa agora — mas todas as dicas acima seguem valendo.'
            : 'Carregando o mapa de Buenos Aires…'}
        </p>
      </div>
      <ul className="ir-map__legend" aria-label="Legenda das categorias no mapa">
        {Object.keys(MAP_CATS).map((k) => (
          <li className="ir-map__legitem" key={k}>
            <span className={`ir-map__swatch ${k === 'classicos' ? 'ir-map__swatch--hero' : ''}`} style={{ '--pin': MAP_CATS[k].color }} aria-hidden="true"></span>
            {MAP_CATS[k].label}
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ---------- helpers ---------- */
function Tip({ children, cta, gold }) {
  return (
    <div className={`ir-tip ${gold ? 'ir-tip--gold' : ''}`}>
      <span className="ir-tip__badge">
        <StickerLabel color={gold ? 'yellow' : 'purple'} tilt="b">{gold ? 'A dica de ouro' : 'Dica IR Turismo'}</StickerLabel>
      </span>
      <div className="ir-tip__content">
        <p className="ir-tip__text">{children}</p>
        {cta && <Button as="a" variant="accent" size="md" href={D.waLink(cta.msg)} target="_blank">{cta.label}</Button>}
      </div>
    </div>
  );
}

function GCard({ title, children, span }) {
  return (
    <div className={`ir-gcard ${span ? 'ir-gcard--wide' : ''}`}>
      {title && <h3 className="ir-gcard__title">{title}</h3>}
      {children}
    </div>
  );
}

function Places({ items }) {
  return (
    <ul className="ir-places">
      {items.map((it, i) => (
        <li key={i}><strong>{it.n}</strong>{it.d ? <span>{it.d}</span> : null}</li>
      ))}
    </ul>
  );
}

function Bullets({ items, label }) {
  return (
    <div className="ir-blist">
      {label && <h4 className="ir-blist__label">{label}</h4>}
      <ul>{items.map((t, i) => <li key={i}>{t}</li>)}</ul>
    </div>
  );
}

function Section({ id, num, eyebrow, title, sub, alt, children }) {
  return (
    <section id={id} className="ir-section ir-guide__sec" data-screen-label={`Dicas — ${eyebrow}`} style={alt ? { background: 'var(--paper)' } : undefined}>
      <div className="ir-wrap">
        <div className="ir-guide__head">
          <span className="ir-guide__num" aria-hidden="true">{num}</span>
          <window.SectionHead eyebrow={eyebrow} title={title} sub={sub} />
        </div>
        {children}
      </div>
    </section>
  );
}

/* ---------- Hero ---------- */
function DicasHero() {
  return (
    <section className="ir-hero-split" data-screen-label="Dicas — hero">
      <div className="ir-wrap ir-hero-split__grid">
        <div className="ir-hero-split__text">
          <div className="ir-hero__crumb">
            <a href="index.html">Início</a><span>›</span>
            <span style={{ color: 'var(--ink)' }}>Dicas</span>
          </div>
          <span className="ir-hero__kicker">Guia da cidade</span>
          <h1 className="ir-hero-split__title">Buenos Aires <span className="ir-grad">na prática</span></h1>
          <p className="ir-hero-split__lead">Câmbio, transporte, onde comer, o que evitar e roteiros prontos — o que respondemos no WhatsApp todos os dias, agora organizado em um só lugar.</p>
          <div className="ir-hero__actions">
            <Button as="a" variant="accent" size="lg" href="#sumario">Ver as dicas</Button>
            <Button as="a" variant="outline" size="lg" href={D.waLink(GUIA_MSG)} target="_blank">Receber o guia (grátis)</Button>
          </div>
          <p className="ir-hero-split__micro">Esta página é uma amostra. O <strong>guia completo em PDF</strong>, feito pela Bia e pela Ingrid, é enviado pelo WhatsApp — grátis e sem compromisso.</p>
          <div className="ir-trust-row ir-trust-row--ink">
            <span className="ir-trust">Feito pela Bia &amp; Ingrid</span>
            <span className="ir-trust">Atualizado 2026</span>
          </div>
        </div>
        <div className="ir-hero-split__collage">
          <figure className="ir-polaroid ir-polaroid--a">
            <span className="ir-polaroid__frame"><img className="ir-polaroid__img" src="assets/fotos/citytour-casa-rosada.jpg" alt="Casa Rosada, Buenos Aires" /></span>
            <figcaption className="ir-polaroid__cap">Casa Rosada</figcaption>
          </figure>
          <figure className="ir-polaroid ir-polaroid--b">
            <span className="ir-polaroid__frame"><img className="ir-polaroid__img" src="assets/fotos/caminito-escada.jpg" alt="Caminito, La Boca" /></span>
            <figcaption className="ir-polaroid__cap">Caminito · La Boca</figcaption>
          </figure>
          <figure className="ir-polaroid ir-polaroid--c">
            <span className="ir-polaroid__frame"><img className="ir-polaroid__img" src="assets/fotos/floralis-generica-casal.jpg" alt="Casal em frente à Floralis Genérica, Buenos Aires" /></span>
            <figcaption className="ir-polaroid__cap">Floralis Genérica</figcaption>
          </figure>
        </div>
      </div>
    </section>
  );
}

/* ---------- Sumário + trilha ---------- */
function Sumario() {
  return (
    <section className="ir-section ir-section--tight" id="sumario" data-screen-label="Dicas — sumário">
      <div className="ir-wrap">
        <window.SectionHead center eyebrow="O que tem no guia" title="Seis temas e um mapa da cidade" sub="Toque em um tema para ir direto à seção — ou leia na ordem, como um guia." />
        <nav className="ir-zsum" aria-label="Índice do guia">
          {SECTIONS.map(([id, name], i) => (
            <a key={id} className="ir-zsum__link" href={`#${id}`}>
              <span className="ir-zsum__num">{String(i + 1).padStart(2, '0')}</span>{name}
            </a>
          ))}
        </nav>
      </div>
    </section>
  );
}

function StickyRail({ active, visible }) {
  const innerRef = React.useRef(null);
  React.useEffect(() => {
    const rail = innerRef.current;
    if (!rail) return;
    const el = rail.querySelector('.is-active');
    if (el) rail.scrollTo({ left: Math.max(0, el.offsetLeft - 28), behavior: 'smooth' });
  }, [active]);
  return (
    <nav className={`ir-rail ${visible ? 'is-on' : ''}`} aria-label="Navegação rápida pelo guia">
      <div className="ir-rail__inner" ref={innerRef}>
        {SECTIONS.map(([id, name], i) => (
          <a key={id} className={`ir-rail__link ${active === id ? 'is-active' : ''}`} href={`#${id}`}>
            <span className="ir-rail__num">{String(i + 1).padStart(2, '0')}</span>{name}
          </a>
        ))}
      </div>
    </nav>
  );
}

/* ---------- App ---------- */
function DicasApp() {
  const [active, setActive] = React.useState(null);
  const [railOn, setRailOn] = React.useState(false);
  const topSentinel = React.useRef(null);
  const endSentinel = React.useRef(null);
  window.useReveal();

  React.useEffect(() => {
    const secs = Array.from(document.querySelectorAll('.ir-guide__sec[id]'));
    const spy = new IntersectionObserver((ents) => {
      ents.forEach((en) => { if (en.isIntersecting) setActive(en.target.id); });
    }, { rootMargin: '-30% 0px -55% 0px' });
    secs.forEach((s) => spy.observe(s));
    const state = { top: false, end: false };
    const update = () => setRailOn(state.top && !state.end);
    const mk = (key) => new IntersectionObserver(([en]) => { state[key] = !en.isIntersecting && en.boundingClientRect.top < 90; update(); });
    const o1 = mk('top'); const o2 = mk('end');
    if (topSentinel.current) o1.observe(topSentinel.current);
    if (endSentinel.current) o2.observe(endSentinel.current);
    return () => { spy.disconnect(); o1.disconnect(); o2.disconnect(); };
  }, []);

  return (
    <React.Fragment>
      <window.SiteHeader active="dicas" overlay={false} />
      <main>
        <DicasHero />
        <Sumario />
        <div ref={topSentinel} aria-hidden="true"></div>
        <StickyRail active={active} visible={railOn} />

        {/* 1 — INFORMAÇÕES BÁSICAS */}
        <Section id="info" num="01" eyebrow="Informações básicas" title="O essencial antes de embarcar" sub="Câmbio, documentos, costumes e clima — o que você precisa saber antes mesmo de arrumar a mala.">
          <p className="ir-guide__aside">O básico de câmbio, documentos e clima em poucos minutos de leitura — para você embarcar <span className="ir-emph">com tudo em ordem</span>.</p>
          <div className="ir-gcols">
            <GCard title="Câmbio: como pagar">
              <p className="ir-gcard__lead">A moeda é o <strong>Peso Argentino (ARS$)</strong>. Muitos lugares não aceitam moeda estrangeira — tenha pesos em mãos.</p>
              <Bullets label="Melhores formas de pagar" items={['Cartões internacionais como Nomad e Wise (boa cotação e segurança)', 'Tenha sempre notas pequenas', 'Cartão é aceito na maioria dos lugares']} />
            </GCard>
            <GCard title="Câmbio: cuidados">
              <Bullets label="Onde NÃO trocar" items={['Nos aeroportos', 'Com cambistas de rua', 'No Brasil (câmbio desfavorável)']} />
              <Bullets label="Atenção" items={['Troque só com pessoas ou locais confiáveis', 'Confira bem as notas (há falsas circulando)']} />
              <a className="ir-walink" href={D.waLink('Olá! Vim pela página de Dicas e queria consultar a cotação de hoje com a IR Turismo.')} target="_blank" rel="noopener">Consultar a cotação de hoje no WhatsApp →</a>
            </GCard>
            <GCard title="Documentos">
              <p className="ir-gcard__lead">Brasileiros entram <strong>só com o RG</strong> — sem passaporte nem visto. Ele precisa estar em bom estado e com foto de menos de 10 anos.</p>
              <div className="ir-alert">A <strong>CNH não é aceita</strong> como documento de entrada no país!</div>
              <Bullets label="Leve também (recomendado)" items={['Seguro viagem (obrigatório em alguns tours)', 'Comprovantes de reserva (hotel, passeios, transfers)', 'Cartões internacionais já ativados', 'Cartão de vacinação, por segurança']} />
            </GCard>
            <GCard title="Costumes & gorjetas">
              <Bullets label="Costumes locais" items={['Cumprimento com beijo no rosto — até entre homens', 'O jantar é tarde: restaurantes enchem depois das 21h', 'Água da torneira é potável, mas muitos preferem mineral', 'Pontualidade é flexível, mas nos tours esteja no horário']} />
              <Bullets label="Gorjetas (propina)" items={['Restaurantes: cerca de 10% da conta', 'Táxis: arredondar o valor para cima', 'Guias e motoristas: uma gratificação se gostar do serviço']} />
            </GCard>
          </div>

          <div className="ir-subhead"><h3>Clima — o que levar em cada estação</h3></div>
          <div className="ir-seasons">
            {SEASONS.map((s) => (
              <div className="ir-season" key={s.name}>
                <span className="ir-season__temp">{s.temp}</span>
                <h4 className="ir-season__name" aria-label={`${s.name}, ${s.months}`}>{s.name}<span aria-hidden="true">{s.months}</span></h4>
                <p className="ir-season__what">{s.what}</p>
              </div>
            ))}
          </div>
          <Tip>Cheque a previsão antes de sair — o clima muda rápido. E leve sempre uma blusa leve na mochila: o ar-condicionado por aqui costuma ser forte.</Tip>

          <div className="ir-subhead"><h3>Mini-dicionário portenho</h3><p>Arrisque um “che” ou um “gracias” — os argentinos apreciam o esforço.</p></div>
          <div className="ir-gloss">
            {DICIONARIO.map((g) => (
              <div className="ir-gloss__group" key={g.t}>
                <h4>{g.t}</h4>
                <dl>
                  {g.items.map(([term, def]) => (
                    <div className="ir-gloss__row" key={term}><dt>{term}</dt><dd>{def}</dd></div>
                  ))}
                </dl>
              </div>
            ))}
          </div>
        </Section>

        {/* 2 — TRANSPORTE */}
        <Section id="transporte" num="02" eyebrow="Transporte" title="Como se locomover na cidade" sub="Buenos Aires é fácil de percorrer. Escolha o que combina com o seu roteiro." alt>
          <p className="ir-guide__aside">O subte é a forma mais rápida e barata de atravessar a cidade. Para o resto do dia, os aplicativos funcionam bem e custam pouco.</p>
          <div className="ir-gcols">
            <GCard title="Apps de transporte">
              <p className="ir-gcard__lead"><strong>Uber, Didi e Cabify</strong> funcionam muito bem — seguros, confortáveis e, em geral, mais baratos que os táxis tradicionais.</p>
            </GCard>
            <GCard title="Cartão SUBE">
              <p className="ir-gcard__lead">Um único cartão para <strong>ônibus, metrô (subte) e trem</strong>. O transporte público é eficiente e barato — vale adquirir o SUBE logo no início da viagem.</p>
            </GCard>
            <GCard title="Apps que ajudam">
              <p className="ir-gcard__lead"><strong>Google Maps</strong> e <strong>Moovit</strong> mostram rotas e horários em tempo real. Bons aliados para se orientar por conta própria.</p>
            </GCard>
          </div>
          <Tip cta={{ label: 'Tirar dúvidas de transporte no WhatsApp', msg: 'Olá! Vim pela página de Dicas e queria ajuda para me locomover em Buenos Aires (cartão SUBE, apps, etc.).' }}>O transporte público é seguro, barato e cobre a cidade inteira. Se preferir, explicamos o passo a passo do SUBE pelo WhatsApp.</Tip>
        </Section>

        {/* 3 — ENTRETENIMENTO */}
        <Section id="entretenimento" num="03" eyebrow="Entretenimento" title="Noites, arte e muito tango" sub="Do bar escondido ao Teatro Colón — programas para o dia e para a noite.">
          <p className="ir-guide__aside">É a parte que mais gostamos de recomendar: bares atrás de portas discretas, museus gratuitos e um show de tango que <span className="ir-emph">vale a noite inteira</span>.</p>
          <div className="ir-gcols">
            <GCard title="Baladas & vida noturna">
              <Places items={[
                { n: 'Victoria Brown Bar', d: 'Elegante e animado, inspirado na era vitoriana.' },
                { n: 'Temple (Av. Corrientes)', d: 'Bar descontraído que vira balada, com cerveja artesanal e rock ao vivo.' },
                { n: 'Nômade', d: 'Eletrônica e público jovem.' },
              ]} />
            </GCard>
            <GCard title="Bares escondidos (speakeasies)">
              <Places items={[
                { n: 'Florería Atlántico', d: 'Um dos bares mais premiados da América Latina, escondido numa floricultura.' },
                { n: "Frank's Bar", d: 'Clássico speakeasy — é preciso saber a senha do dia para entrar.' },
                { n: 'The Hole · Uptown · El Purgatorio', d: 'Ambientes secretos e temáticos, cada um com sua surpresa.' },
              ]} />
            </GCard>
            <GCard title="Sky bars & rooftops">
              <Places items={[
                { n: 'Trade Sky Bar', d: 'Vista incrível e ótimos drinks — perfeito para o pôr do sol.' },
                { n: 'Crystal Bar · Piso 9', d: 'Rooftops modernos com vista do centro.' },
                { n: 'Ninina Rooftop', d: 'Clima descontraído para brunch e drinks.' },
              ]} />
            </GCard>
            <GCard title="Museus & espaços culturais">
              <Places items={[
                { n: 'MALBA', d: 'Arte latino-americana — Frida Kahlo, Tarsila do Amaral e mais.' },
                { n: 'Belas Artes (Recoleta)', d: 'Entrada gratuita e acervo riquíssimo.' },
                { n: 'El Ateneo Grand Splendid', d: 'Uma das livrarias mais bonitas do mundo, num antigo teatro.' },
                { n: 'Museu Evita · CCK · Usina del Arte', d: 'História, arquitetura e eventos (muitos gratuitos).' },
              ]} />
            </GCard>
            <GCard title="Tango & shows" span>
              <div className="ir-gcard__media">
                <img src="assets/fotos/senor-tango-palco.jpg" alt="Show de tango no palco do Señor Tango, Buenos Aires" loading="lazy" />
                <span className="ir-gcard__media-sticker"><StickerLabel color="orange" tilt="c">favorito das sócias</StickerLabel></span>
              </div>
              <p className="ir-gcard__lead">Assistir a um show de tango é <span className="ir-emph">sentir a alma da cidade</span>. Os clássicos:</p>
              <Places items={[
                { n: 'Señor Tango', d: 'Um dos shows mais impactantes, com grandes produções de luz e som.' },
                { n: 'Madero Tango', d: 'Show moderno com jantar e vista para Puerto Madero — bem romântico.' },
                { n: 'Tango Porteño', d: 'Recria a atmosfera dos anos dourados do tango.' },
              ]} />
              <p className="ir-gcard__note">Quer aprender a dançar? As milongas <strong>La Viruta</strong> e <strong>Parakultural</strong> são o clima real portenho.</p>
              <div style={{ marginTop: 16 }}>
                <Button as="a" variant="accent" href="passeios.html#tangos">Ver os shows que reservamos</Button>
              </div>
            </GCard>
          </div>
          <Tip gold>Muitos bares escondem surpresas atrás de portas comuns. E vários museus têm entrada gratuita — vale incluir um ou dois no roteiro.</Tip>
        </Section>

        {/* 4 — CULINÁRIA */}
        <Section id="culinaria" num="04" eyebrow="Culinária" title="Onde comer (muito) bem" sub="Da parrilla lendária ao sorvete artesanal — os lugares que indicamos de olhos fechados." alt>
          <p className="ir-guide__aside">Comer bem em Buenos Aires é parte do roteiro. A lista abaixo é a mesma que usamos <span className="ir-emph">quando saímos para jantar</span>.</p>
          <div className="ir-gcols">
            <GCard title="Parrillas & carnes">
              <Places items={[
                { n: 'La Cabrera (Palermo)', d: 'Excelente — muitas vezes melhor e mais em conta que o Don Julio.' },
                { n: 'Don Julio (Palermo)', d: 'Famoso no mundo todo; prepare-se para a fila.' },
                { n: 'Doña Bocas de Fuego · La Azulada', d: 'Menos turísticas e de ótima qualidade.' },
              ]} />
            </GCard>
            <GCard title="Buffet livre">
              <Places items={[
                { n: 'Gourmet Porteño (Puerto Madero)', d: 'Buffet completo — carnes, massas e acompanhamentos.' },
                { n: 'Estilo Campo · Brasas Argentinas', d: 'Churrasco argentino à vontade.' },
              ]} />
            </GCard>
            <GCard title="Massas & frutos do mar">
              <Places items={[
                { n: 'La Parolaccia', d: 'Italiano clássico, massas excelentes.' },
                { n: 'Vaffanculo (Palermo)', d: 'Um dos italianos mais autênticos.' },
                { n: 'Cauce (Puerto Madero)', d: 'Contemporâneo e premiado — indicado pelo Guia Michelin.' },
              ]} />
            </GCard>
            <GCard title="Cafés & sorvetes">
              <Places items={[
                { n: 'Palacio Duhau (Recoleta)', d: 'Café elegante e charmoso.' },
                { n: 'Ninina Bakery · Padre (Palermo)', d: 'Brunch e café artesanal descolado.' },
                { n: 'Rapanui · Cadore · Freddo', d: 'Sorvete argentino — uma paixão nacional.' },
              ]} />
            </GCard>
            <GCard title="Pizzarias tradicionais" span>
              <Places items={[
                { n: 'Güerrín (Av. Corrientes)', d: 'Parada obrigatória para a pizza argentina clássica.' },
                { n: 'El Cuartito', d: 'Tradicionalíssima — uma das melhores fugazzetas da cidade.' },
                { n: 'La Mezzetta · El Banchero · Las Cuartetas', d: 'Fatias generosas e muita história.' },
              ]} />
            </GCard>
          </div>
          <Tip gold>O ponto da carne aqui tem outro nome. Na hora de pedir: <strong>jugosa</strong> = mal passada · <strong>a punto</strong> = ao ponto · <strong>mariposa</strong> = bem passada.</Tip>
        </Section>

        {/* 5 — COMPRAS */}
        <Section id="compras" num="05" eyebrow="Compras" title="O que levar para casa" sub="De shopping com afresco no teto a feira de rua — e os produtos típicos que valem a mala.">
          <p className="ir-guide__aside">Reserve um espaço na mala: alfajores, vinhos e artigos de couro costumam voltar com quase todo viajante.</p>
          <div className="ir-gcols">
            <GCard title="Shoppings">
              <Places items={[
                { n: 'Galerías Pacífico (Centro)', d: 'Lindíssimo, com afrescos no teto. Rende ótimas fotos.' },
                { n: 'Alto Palermo', d: 'Moderno, boa variedade de lojas.' },
                { n: 'Patio Bullrich (Recoleta)', d: 'Mais luxuoso, com grifes internacionais.' },
              ]} />
            </GCard>
            <GCard title="Outlets">
              <Places items={[
                { n: 'Villa Crespo', d: 'Outlets de Nike, Adidas, Levi’s, Lacoste e mais.' },
                { n: 'Distrito Arcos (Palermo)', d: 'Outlet a céu aberto, bonito e organizado.' },
              ]} />
            </GCard>
            <GCard title="Feiras & artesanato">
              <Places items={[
                { n: 'Feira de San Telmo (domingos)', d: 'Antiguidades, arte local e muita animação.' },
                { n: 'Feira da Recoleta (fins de semana)', d: 'Cultura, compras e produtos típicos.' },
              ]} />
            </GCard>
            <GCard title="Produtos típicos para levar">
              <Places items={[
                { n: 'Alfajores', d: 'O presente perfeito — Cachafaz, Havanna, Jorgito.' },
                { n: 'Doce de leite & vinhos', d: 'Havanna e um bom Malbec ou espumante.' },
                { n: 'Couro argentino', d: 'Jaquetas, bolsas e cintos de ótima qualidade.' },
              ]} />
            </GCard>
          </div>
          <Tip>Algumas lojas aceitam dólar ou real, mas o câmbio raramente compensa — prefira pagar em pesos argentinos.</Tip>
        </Section>

        {/* 6 — ROTEIROS */}
        <Section id="roteiros" num="06" eyebrow="Roteiros prontos" title="Três dias, três Buenos Aires" sub="Roteiros de um dia para fazer por conta própria — ou para combinar conosco e ir de tour." alt>
          <p className="ir-guide__aside">São os trajetos que fazemos quando recebemos visitas. Siga no seu ritmo — e, se preferir companhia, é só escrever para nós.</p>
          <div className="ir-rots">
            {ROTEIROS.map((r, i) => (
              <article className="ir-rot ir-rot--photo" key={r.title}>
                <div className="ir-rot__media">
                  <img className="ir-rot__mediaimg" src={r.photo} alt={r.alt} loading="lazy" />
                </div>
                <div className="ir-rot__inner">
                  <div className="ir-rot__head">
                    <span className="ir-rot__badge">Roteiro {i + 1}</span>
                    <h3 className="ir-rot__title">{r.title}</h3>
                    <p className="ir-rot__sub">{r.sub}</p>
                  </div>
                  <ol className="ir-rot__steps">
                    {r.steps.map((s, j) => (
                      <li key={j}><span className="ir-rot__n">{j + 1}</span><span className="ir-rot__step">{s}</span></li>
                    ))}
                  </ol>
                </div>
              </article>
            ))}
          </div>
          <Tip cta={{ label: 'Montar meu roteiro no WhatsApp', msg: 'Olá! Vim pela página de Dicas e gostaria de montar um roteiro em Buenos Aires com vocês.' }}>Para fazer esses trajetos com carro, guia e reservas, montamos o passeio conforme o seu grupo — com preço fechado antes de confirmar.</Tip>
        </Section>

        {/* 7 — NO MAPA (enriquecimento progressivo; os cards acima seguem sendo a fonte acessível) */}
        <section id="mapa" className="ir-section ir-guide__sec" data-screen-label="Dicas — No mapa">
          <div className="ir-wrap">
            <div className="ir-guide__head">
              <span className="ir-guide__num" aria-hidden="true">07</span>
              <window.SectionHead eyebrow="No mapa" title="Todas as indicações, num só mapa" sub="Restaurantes, bares, museus e pontos clássicos espalhados por Buenos Aires. Passe o mouse (ou toque, no celular) em um pin para ver por que ele entrou na lista." />
            </div>
            <MapaCanvas />
          </div>
        </section>

        <div ref={endSentinel} aria-hidden="true"></div>

        {/* Depoimento removido — texto sem procedência verificada.
            Só voltar com depoimento real e autorizado. Ver readme.md do design system. */}

        {/* Nota assinada — fecho humano */}
        <section className="ir-section ir-section--tight" data-screen-label="Dicas — recado das anfitriãs">
          <div className="ir-wrap">
            <div className="ir-note">
              <span className="ir-note__faces">
                <span className="ir-note__face"><img src="assets/fotos/retrato-bia.png" alt="Bia, cofundadora da IR Turismo" loading="lazy" /></span>
                <span className="ir-note__face"><img src="assets/fotos/retrato-ingrid.png" alt="Ingrid, cofundadora da IR Turismo" loading="lazy" /></span>
              </span>
              <StickerLabel color="yellow" tilt="b">Um recado nosso</StickerLabel>
              <p className="ir-note__body">Amamos esta cidade — e gostamos de apresentá-la. Cada dica desta página é a que daríamos a uma amiga recém-chegada a Buenos Aires: testada, direta e atualizada. Ficou com dúvida? Escreva para nós. <span className="ir-emph">Nós mesmas respondemos.</span></p>
              <span className="ir-note__sign">Bia &amp; Ingrid</span>
              <span className="ir-note__role">suas anfitriãs em Buenos Aires</span>
              <div style={{ marginTop: 6 }}>
                <Button as="a" variant="accent" size="md" href={D.waLink('Olá, Bia e Ingrid! Vim pela página de Dicas e queria falar com vocês.')} target="_blank">Falar com a Bia &amp; Ingrid</Button>
              </div>
            </div>
          </div>
        </section>

        {/* CTA final */}
        <section className="ir-section" data-screen-label="Dicas — CTA">
          <div className="ir-wrap">
            <div className="ir-cta">
              <h2 className="ir-cta__title">Esta página é uma amostra</h2>
              <p className="ir-cta__sub">Quem viaja com a IR Turismo recebe o guia completo em PDF, preparado pela Bia e pela Ingrid — e o acompanhamento das duas pelo WhatsApp, da chegada ao voo de volta.</p>
              <div className="ir-cta__actions">
                <Button as="a" variant="accent" size="lg" href={D.waLink(GUIA_MSG)} target="_blank">Receber o guia completo</Button>
                <Button as="a" variant="outline" size="lg" href="passeios.html">Ver passeios</Button>
              </div>
              <p className="ir-cta__micro">Grátis, no WhatsApp · resposta rápida · sem compromisso · 100% em português</p>
            </div>
          </div>
        </section>
      </main>
      <window.SiteFooter />
      <window.WhatsFab message="Olá! Vim pela página de Dicas da IR Turismo e gostaria de mais informações." />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<DicasApp />);

})();