/* 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 — página Passeios (portfólio completo, layout em z-pattern) */
const { Button, StickerLabel } = window.IRTurismoDesignSystem_586946;
const P = window.IR_DATA;

/* Ordem do sumário do portfólio (PDF) */
const PASSEIOS_ORDER = [
  'aeroportos',
  'city-tour',
  'gamboa',
  'tigre',
  'campanopolis',
  'temaiken',
  'colonia',
  'por-do-sol',
  'estadios',
];
const TANGOS = ['madero-tango', 'tango-porteno', 'senor-tango'];

const num2 = (i) => String(i + 1).padStart(2, '0');

/* ---------- Hero ---------- */
function PasseiosHero() {
  return (
    <section className="ir-hero-split" data-screen-label="Passeios — 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)' }}>Passeios</span>
          </div>
          <span className="ir-hero__kicker">9 passeios · Buenos Aires, Tigre e Colônia</span>
          <h1 className="ir-hero-split__title">Passeios que já fizemos <span className="ir-grad">e faríamos de novo</span></h1>
          <p className="ir-hero-split__lead">Aeroporto, city tour, vinícola, Tigre, Colônia, estádios e tango. Cada um com preço, duração e o que está incluso — na tela, sem precisar perguntar.</p>
          <div className="ir-hero__actions">
            <Button as="a" variant="accent" size="lg" href="#sumario">Navegar pelos passeios</Button>
            <Button as="a" variant="outline" size="lg" href={P.waLink('Olá! Gostaria de receber o portfólio completo de passeios da IR Turismo.')} target="_blank">Falar no WhatsApp</Button>
          </div>
          <div className="ir-trust-row ir-trust-row--ink">
            <a className="ir-trust ir-trust--doc" href="assets/certificado-cadastur.pdf" target="_blank" rel="noopener" title="Baixar certificado Cadastur">Cadastur · Ministério do Turismo</a>
            <span className="ir-trust">Motoristas brasileiros</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="City Tour — Casa Rosada" /></span>
            <figcaption className="ir-polaroid__cap">City Tour · Casa Rosada</figcaption>
          </figure>
          <figure className="ir-polaroid ir-polaroid--b">
            <span className="ir-polaroid__frame"><img className="ir-polaroid__img" src="assets/fotos/gamboa-taca.jpg" alt="Vinícola Gamboa" /></span>
            <figcaption className="ir-polaroid__cap">Vinícola Gamboa</figcaption>
          </figure>
          <figure className="ir-polaroid ir-polaroid--c">
            <span className="ir-polaroid__frame"><img className="ir-polaroid__img" src="assets/fotos/tigre-pier.jpg" alt="Tigre — delta do Paraná" /></span>
            <figcaption className="ir-polaroid__cap">Delta do Tigre</figcaption>
          </figure>
        </div>
      </div>
    </section>
  );
}

/* ---------- Sumário ---------- */
function Sumario({ services }) {
  return (
    <section className="ir-section ir-section--tight" id="sumario" data-screen-label="Passeios — sumário">
      <div className="ir-wrap">
        <window.SectionHead center eyebrow="Sumário" title="Navegue pelos nossos pacotes" sub="E encontre o seu. Toque em um passeio para ir direto à seção." />
        <nav className="ir-zsum" aria-label="Sumário de passeios">
          {services.map((s, i) => (
            <a key={s.id} className="ir-zsum__link" href={`#p-${s.id}`}>
              <span className="ir-zsum__num">{num2(i)}</span>{s.name}
            </a>
          ))}
        </nav>
      </div>
    </section>
  );
}

/* ---------- Rail sticky (sumário compacto durante o scroll) ---------- */
function StickyRail({ services, 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 pelos passeios">
      <div className="ir-rail__inner" ref={innerRef}>
        {services.map((s, i) => (
          <a key={s.id} className={`ir-rail__link ${active === `p-${s.id}` ? 'is-active' : ''}`} href={`#p-${s.id}`}>
            <span className="ir-rail__num">{num2(i)}</span>{s.name}
          </a>
        ))}
      </div>
    </nav>
  );
}

/* ---------- preço resumido por pacote ---------- */
function PkgPrice({ price }) {
  if (!price) return null;
  if (price.custom) return <span className="ir-zrow__pkgprice">{price.custom}</span>;
  if (price.ida || price.idaVolta) {
    return (
      <span className="ir-zrow__pkgprice">R$ {price.ida} ida
        {price.idaVolta && <small>R$ {price.idaVolta} ida e volta</small>}
      </span>
    );
  }
  if (price.pix) {
    return (
      <span className="ir-zrow__pkgprice">R$ {price.pix} no PIX
        <small>{price.unit ? price.unit : `ou R$ ${price.parcelado} em até ${price.parcelas}`}</small>
      </span>
    );
  }
  if (price.from) {
    return <span className="ir-zrow__pkgprice">R$ {price.from}{price.unit && <small>{price.unit}</small>}</span>;
  }
  return <span className="ir-zrow__pkgprice">R$ {price.value}{price.unit && <small>{price.unit}</small>}</span>;
}

/* ---------- Linha em z-pattern ---------- */
function ZRow({ service, index }) {
  const s = service;
  const flip = index % 2 === 1;
  const sticker = (s.packages.find(p => p.sticker) || {}).sticker;
  const msg = `Olá! Tenho interesse no passeio "${s.name}". Pode me passar mais informações?`;
  return (
    <article id={`p-${s.id}`} className={`ir-zrow ${flip ? 'ir-zrow--flip' : ''}`} data-screen-label={`Passeios — ${s.name}`}>
      <div className="ir-zrow__media">
        <img className="ir-zrow__img" src={s.image} alt={s.name} loading="lazy" />
        <span className="ir-zrow__num" aria-hidden="true">{num2(index)}</span>
        {sticker && (
          <span className="ir-zrow__sticker"><StickerLabel color="yellow" tilt={flip ? 'a' : 'b'}>{sticker}</StickerLabel></span>
        )}
      </div>
      <div className="ir-zrow__body">
        <span className={`ir-card__cat ir-card__cat--${s.color}`}>{window.rotuloCategoria(s.category)}</span>
        <h2 className="ir-zrow__title">{s.name}</h2>
        <p className="ir-zrow__intro">{s.intro}</p>
        <ul className="ir-zrow__pkgs">
          {s.packages.map((p) => (
            <li key={p.name} className="ir-zrow__pkg">
              <span className="ir-zrow__pkgname">{p.name}
                {p.subtitle && <span className="ir-zrow__pkgsub">{p.subtitle}</span>}
              </span>
              <PkgPrice price={p.price} />
            </li>
          ))}
        </ul>
        <div className="ir-zrow__actions">
          <Button as="a" variant="accent" href={P.waLink(msg)} target="_blank">Quero esse passeio</Button>
          <Button as="a" variant="outline" href={`servico.html?id=${s.id}`}>Ver pacotes completos</Button>
        </div>
      </div>
    </article>
  );
}

/* ---------- Tangos (cruzado) ---------- */
function TangosTeaser() {
  const shows = TANGOS.map(id => P.getService(id)).filter(Boolean);
  if (shows.length === 0) return null;
  return (
    <section className="ir-section" id="tangos" data-screen-label="Passeios — tangos">
      <div className="ir-wrap">
        {/* Este sub trazia uma frase copiada da concorrente ("A capital argentina reúne
            as melhores casas de tango do País…"). Ela veio do próprio readme do design
            system, que a citava como "exemplo de copy". Reescrita com fato do produto. */}
        <window.SectionHead center eyebrow="E quando o sol se põe" title="Noites de tango" sub="Três casas, três noites diferentes. Reservamos a mesa, o jantar e o transfer — você escolhe o show." />
        <div className="ir-grid">
          {shows.map(s => <window.ServiceCard key={s.id} service={s} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- Pagamento + dúvidas ---------- */
function PagamentoSection() {
  return (
    <section className="ir-section ir-section--tight" id="pagamento" data-screen-label="Passeios — pagamento">
      <div className="ir-wrap">
        <div className="ir-zpay">
          <div className="ir-pay">
            <h3 className="ir-pay__title">Formas de pagamento</h3>
            <ul className="ir-pay__list">
              <li>Pagamento por meio de <strong>transferência bancária ou Pix</strong>.</li>
              <li>Aceitamos pagamentos por <strong>cartão de crédito e débito</strong>.</li>
              <li>A reserva é confirmada com <strong>pagamento antecipado</strong>.</li>
              <li>Vários pacotes parcelam em <strong>até 3x ou 6x sem juros</strong> — confira em cada passeio.</li>
            </ul>
          </div>
          <div className="ir-contact__cta">
            <h3 className="ir-zpay__title">Ficou com dúvidas ou quer saber mais?</h3>
            <p className="ir-zpay__sub">Conte o que você quer fazer. Respondemos com roteiro, preços e disponibilidade — sem compromisso.</p>
            <div className="ir-zpay__actions">
              <Button as="a" variant="accent" href={P.waLink('Olá! Vim pela página de passeios e gostaria de montar meu roteiro.')} target="_blank">Chamar no WhatsApp</Button>
              <Button as="a" variant="outline" href="contato.html">Solicitar orçamento</Button>
            </div>
            <p className="ir-zpay__handle">@{P.contact.instagram} · {P.contact.whatsappDisplay}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- App ---------- */
function PasseiosApp() {
  const services = PASSEIOS_ORDER.map(id => P.getService(id)).filter(Boolean);
  const [activeRow, setActiveRow] = React.useState(null);
  const [railOn, setRailOn] = React.useState(false);
  const topSentinel = React.useRef(null);
  const endSentinel = React.useRef(null);
  window.useReveal();
  React.useEffect(() => {
    /* scrollspy: destaca no rail a seção visível */
    const rows = Array.from(document.querySelectorAll('.ir-zrow[id]'));
    const spy = new IntersectionObserver((ents) => {
      ents.forEach((en) => { if (en.isIntersecting) setActiveRow(en.target.id); });
    }, { rootMargin: '-30% 0px -55% 0px' });
    rows.forEach((r) => spy.observe(r));
    /* o rail só aparece entre o sumário e o fim das seções */
    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="passeios" overlay={false} />
      <main>
        <PasseiosHero />
        <Sumario services={services} />
        <div ref={topSentinel} aria-hidden="true"></div>
        <StickyRail services={services} active={activeRow} visible={railOn} />
        <section className="ir-section" style={{ position: 'relative', overflow: 'hidden' }}>
          <div className="ir-wrap">
            <div className="ir-zrows">
              {services.map((s, i) => <ZRow key={s.id} service={s} index={i} />)}
            </div>
          </div>
        </section>
        <div ref={endSentinel} aria-hidden="true"></div>
        <TangosTeaser />
        <PagamentoSection />
      </main>
      <window.SiteFooter />
      <window.WhatsFab message="Olá! Vim pela página de passeios da IR Turismo e gostaria de mais informações." />
    </React.Fragment>
  );
}

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

})();