/* 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 — Bariloche (Patagônia) */
const { Button, StickerLabel } = window.IRTurismoDesignSystem_586946;
const B = window.IR_BRC;

function ChevDown() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <polyline points="6 9 12 15 18 9"></polyline>
    </svg>
  );
}

function BrcHero() {
  return (
    <section className="ir-hero ir-hero--page ir-hero--brc" data-screen-label="Bariloche — hero">
      <img className="ir-hero__bg" src="assets/fotos/brc-teleferico.jpg" alt="" />
      <div className="ir-hero__inner">
        <div className="ir-hero__crumb">
          <a href="index.html">Início</a><span>›</span>
          <span style={{ color: 'var(--text-inverse)' }}>Bariloche</span>
        </div>
        <span className="ir-hero__kicker">Novo destino · Patagônia argentina</span>
        <h1 className="ir-hero__title">Bariloche</h1>
        <p className="ir-hero__lead">Passeios terrestres, dia na neve e transfer. Planejamos o roteiro, orientamos o câmbio e ficamos no WhatsApp durante toda a estadia.</p>
        <div className="ir-hero__actions">
          <Button as="a" variant="accent" size="lg" href="#terrestres">Passeios terrestres</Button>
          <Button as="a" variant="brand" size="lg" href="#neve">Passeios na neve</Button>
        </div>
        <div className="ir-trust-row">
          <span className="ir-trust">@{B.contact.instagram}</span>
          <span className="ir-trust">{B.contact.whatsappDisplay}</span>
          <span className="ir-trust">Atendimento até o seu retorno ao Brasil</span>
        </div>
      </div>
    </section>
  );
}

function TransferPanel() {
  return (
    <section className="ir-section" id="transfer" data-screen-label="Bariloche — transfer">
      <div className="ir-wrap">
        <div className="ir-transfer">
          <div>
            <window.SectionHead eyebrow="Receptivo" title="Transfer em carro particular" sub="Preços de ida e volta, por carro — do aeroporto ao hotel, no horário do seu voo." />
            <ul className="ir-trow__notes">
              <li>Cerro Catedral, Piedras Blancas e Cerro Bayo possuem estação de ski.</li>
              <li>Valores sujeitos a alterações.</li>
            </ul>
            <div style={{ marginTop: 26 }}>
              <Button as="a" variant="primary" href={B.waLink('Olá! Gostaria de reservar um transfer em Bariloche.')} target="_blank">Reservar transfer</Button>
            </div>
          </div>
          <div className="ir-transfer__rows">
            {B.transfers.map(t => (
              <div key={t.route} className="ir-transfer__row"><span>{t.route}</span><strong>R$ {t.price}</strong></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function TourRow({ tour, num, open, onToggle }) {
  const msg = `Olá! Tenho interesse no passeio "${tour.name}" em Bariloche. Pode me passar mais informações?`;
  return (
    <div className={`ir-trow ${open ? 'is-open' : ''}`}>
      <button type="button" className="ir-trow__head" onClick={onToggle} aria-expanded={open}>
        <span className="ir-trow__num">{String(num).padStart(2, '0')}</span>
        <span>
          <span className="ir-trow__name">{tour.name}</span>
          {tour.sub && <span className="ir-trow__sub">{tour.sub}</span>}
        </span>
        <span className="ir-trow__price">
          R$ {tour.price}
          <small>{tour.unit}{tour.pix ? ' · no PIX' : ''}</small>
        </span>
        <span className="ir-trow__chev" aria-hidden="true"><ChevDown /></span>
      </button>
      {open && (
        <div className="ir-trow__panel">
          <div>
            <p className="ir-trow__desc">{tour.desc}</p>
            {tour.schedule && tour.schedule.length > 0 && (
              <div className="ir-sched">
                {tour.schedule.map((s, i) => <span key={i}>{s}</span>)}
              </div>
            )}
            {tour.notes && tour.notes.length > 0 && (
              <ul className="ir-trow__notes">
                {tour.notes.map((n, i) => <li key={i}>{n}</li>)}
              </ul>
            )}
            <div className="ir-trow__cta">
              <Button as="a" variant="primary" href={B.waLink(msg)} target="_blank">Quero esse passeio</Button>
            </div>
          </div>
          <div>
            {tour.includes && tour.includes.length > 0 && (
              <React.Fragment>
                <h4 className="ir-trow__h4">O que está incluído</h4>
                <ul className="ir-incl ir-incl--single">
                  {tour.includes.map((it, i) => <li key={i}>{it}</li>)}
                </ul>
              </React.Fragment>
            )}
            {tour.notInclude && tour.notInclude.length > 0 && (
              <ul className="ir-excl">
                <li className="ir-excl__label">Não inclui</li>
                {tour.notInclude.map((it, i) => <li key={i}>{it}</li>)}
              </ul>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

function TourSection({ id, eyebrow, title, sub, tours, paper }) {
  const [open, setOpen] = React.useState(-1);
  return (
    <section className="ir-section" id={id} style={paper ? { background: 'var(--paper)' } : undefined} data-screen-label={`Bariloche — ${title}`}>
      <div className="ir-wrap">
        <window.SectionHead eyebrow={eyebrow} title={title} sub={sub} />
        <div className="ir-trows">
          {tours.map((t, i) => (
            <TourRow key={t.id} tour={t} num={i + 1} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
        <p className="ir-clima">Passeios sujeitos a alterações climáticas. Horários sujeitos a alteração sem aviso prévio.</p>
      </div>
    </section>
  );
}

function BrcGaleria() {
  const fotos = [
    ['brc-campanario.jpg', 'ir-gal__cell--big'],
    ['brc-familia-ski.jpg', ''],
    ['brc-amigas-neve.jpg', 'ir-gal__cell--tall'],
    ['brc-lago-selfie.jpg', ''],
    ['brc-ski-vermelho.jpg', ''],
    ['brc-bola-neve.jpg', ''],
    ['brc-cafe-vista.jpg', ''],
    ['brc-familia-sol.jpg', ''],
  ];
  return (
    <section className="ir-section" id="galeria" data-screen-label="Bariloche — galeria de viajantes">
      <div className="ir-wrap">
        <window.SectionHead center eyebrow="Portfólio de clientes" title="Nossos viajantes em Bariloche" sub="Fotos de clientes que já viajaram conosco pela Patagônia." />
        <div className="ir-gal">
          {fotos.map(([f, cls]) => (
            <div key={f} className={cls || undefined}>
              <img src={`assets/fotos/${f}`} alt="Cliente IR Turismo em Bariloche" loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BrcCta() {
  return (
    <section className="ir-section">
      <div className="ir-wrap">
        <div className="ir-cta">
          <h2 className="ir-cta__title">Vamos conhecer a Patagônia?</h2>
          <p className="ir-cta__sub">Ficou com alguma dúvida? Escreva no WhatsApp — respondemos com valores, datas e disponibilidade para Bariloche.</p>
          <div className="ir-cta__actions">
            <Button as="a" variant="accent" size="lg" href={B.waLink('Olá! Vim pelo site e gostaria de saber mais sobre os passeios em Bariloche.')} target="_blank">Falar no WhatsApp</Button>
            <Button as="a" variant="outline" size="lg" href={B.contact.instagramUrl} target="_blank">@{B.contact.instagram}</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function BarilocheApp() {
  window.useReveal();
  return (
    <React.Fragment>
      <window.SiteHeader active="bariloche" overlay={false} logoSrc="assets/logo-ir-turismo-bariloche.png?v=20260720-2" logoAlt="IR Turismo — Chile, Peru e Bariloche" logoVariant="ir-brand__logo--bariloche" />
      <main>
        <BrcHero />
        <TransferPanel />
        <TourSection
          id="terrestres"
          eyebrow="Bariloche"
          title="Passeios terrestres"
          sub="Do clássico Circuito Chico à Rota dos Sete Lagos — paisagens, navegações, cavalgadas e cervejarias artesanais."
          tours={B.terrestres}
        />
        <TourSection
          id="neve"
          eyebrow="Inverno na Patagônia"
          title="Passeios na neve"
          sub="Motos de neve, raquetas, fondue em refúgios de montanha e passeios noturnos entre bosques nevados."
          tours={B.neve}
          paper
        />
        <BrcGaleria />
        <BrcCta />
      </main>
      <window.SiteFooter />
      <window.WhatsFab href={B.waLink('Olá! Vim pelo site da IR Turismo e gostaria de mais informações sobre Bariloche.')} />
    </React.Fragment>
  );
}

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

})();