/* 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 — Sobre nós */
const { Button, StickerLabel } = window.IRTurismoDesignSystem_586946;
const AB = window.IR_DATA;

const DIFERENCIAIS = [
  ['Reserva feita por nós', 'Você não precisa falar com casa de tango, motorista nem bilheteria. Nós reservamos, confirmamos e enviamos o voucher.', 'purple'],
  ['Câmbio e traslado resolvidos', 'Orientamos quanto trocar e onde trocar — e o motorista chega no horário do seu voo.', 'magenta'],
  ['Roteiro a quatro mãos', 'Você conta quantos dias tem e o que gosta de fazer. Devolvemos um roteiro que cabe no tempo e no orçamento.', 'orange'],
  ['WhatsApp direto, sem fila', 'Nada de central de atendimento. É o número da Bia ou da Ingrid, antes, durante e depois da viagem.', 'purple'],
];

function PageHero() {
  return (
    <section className="ir-hero-split" data-screen-label="Sobre — 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>Sobre nós</span>
          </div>
          <span className="ir-hero__kicker">Quem somos</span>
          <h1 className="ir-hero-split__title">Quem planeja <span className="ir-grad">a sua viagem</span></h1>
          <p className="ir-hero-split__lead">Bia e Ingrid. Moramos em Buenos Aires, testamos cada passeio e atendemos pessoalmente.</p>
          <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>
          </div>
        </div>
        <div className="ir-hero-split__collage">
          <figure className="ir-polaroid ir-polaroid--a">
            <img src="assets/fotos/caminito-escada.jpg" alt="Cliente da IR Turismo no Caminito" />
            <figcaption>Caminito · La Boca</figcaption>
          </figure>
          <figure className="ir-polaroid ir-polaroid--b">
            <img src="assets/fotos/gamboa-amigas.jpg" alt="Clientes na vinícola Gamboa" />
            <figcaption>Vinícola Gamboa</figcaption>
          </figure>
          <figure className="ir-polaroid ir-polaroid--c">
            <img src="assets/fotos/brc-campanario.jpg" alt="Cliente no Cerro Campanario, Bariloche" />
            <figcaption>Bariloche</figcaption>
          </figure>
        </div>
      </div>
    </section>
  );
}

function Story() {
  return (
    <section className="ir-section ir-about">
      <div className="ir-wrap">
        <div className="ir-about__grid">
          <div className="ir-about__media ir-about__media--duo">
            <div className="ir-about__duo-cell">
              <img className="ir-about__duo-img" src="assets/fotos/retrato-bia.png" alt="Bia, sócia-fundadora da IR Turismo" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <span className="ir-about__cell-sticker"><StickerLabel color="yellow" tilt="b">Bia</StickerLabel></span>
            </div>
            <div className="ir-about__duo-cell">
              <img className="ir-about__duo-img" src="assets/fotos/retrato-ingrid.png" alt="Ingrid, sócia-fundadora da IR Turismo" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <span className="ir-about__cell-sticker"><StickerLabel color="purple" tilt="a">Ingrid</StickerLabel></span>
            </div>
          </div>
          <div className="ir-about__body">
            <p>Somos duas brasileiras que se conheceram em Buenos Aires — e ficaram. Hoje andamos de subte, sabemos <span className="ir-emph">qual casa de câmbio tem cotação justa</span> e qual restaurante de Palermo vale a fila.</p>
            <p>A IR Turismo nasceu de uma constatação simples: o brasileiro chega à Argentina sem saber quanto custa o táxi do aeroporto, quanto trocar, o que dá para fazer a pé. Resolvemos isso antes de você embarcar.</p>
            <p>Trabalhamos com uma lista curta: os passeios que nós mesmas já fizemos, com parceiros que conhecemos pelo nome. Se algo falhar, é conosco que você fala — e somos nós que resolvemos.</p>
            {/* ênfase é palavra-chave, não o parágrafo inteiro — readme, "Ênfase em texto" */}
            <p className="ir-about__cta-line" style={{ marginTop: 6 }}>Mande uma mensagem. <span className="ir-emph">Nós respondemos.</span></p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Fundadoras() {
  return (
    <section className="ir-section ir-section--tight" data-screen-label="Sobre — fundadoras">
      <div className="ir-wrap">
        <window.SectionHead center eyebrow="As fundadoras" title="Bia & Ingrid" sub="Duas brasileiras à frente de tudo — do orçamento ao acompanhamento durante a viagem." />
        <div className="ir-duo">
          <div className="ir-duo__card">
            <div className="ir-duo__photo">
              <img src="assets/fotos/retrato-bia.png" alt="Bia, sócia-fundadora" loading="lazy" />
              <span className="ir-duo__sticker"><StickerLabel color="yellow" tilt="b">Bia</StickerLabel></span>
            </div>
            <h3 className="ir-duo__name">Bia</h3>
            <p className="ir-duo__role">Sócia-fundadora</p>
          </div>
          <div className="ir-duo__card">
            <div className="ir-duo__photo">
              <img src="assets/fotos/retrato-ingrid.png" alt="Ingrid, sócia-fundadora" loading="lazy" />
              <span className="ir-duo__sticker"><StickerLabel color="purple" tilt="a">Ingrid</StickerLabel></span>
            </div>
            <h3 className="ir-duo__name">Ingrid</h3>
            <p className="ir-duo__role">Sócia-fundadora</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Diferenciais() {
  return (
    <section className="ir-section ir-section--tight" style={{ background: 'var(--paper)' }}>
      <div className="ir-wrap">
        <window.SectionHead center eyebrow="Nossos diferenciais" title="O que vem junto quando você viaja conosco" />
        <div className="ir-features">
          {DIFERENCIAIS.map(([title, desc, color]) => (
            <div key={title} className="ir-feature">
              <span className={`ir-feature__bar ir-feature__bar--${color}`}></span>
              <h3 className="ir-feature__title">{title}</h3>
              <p className="ir-feature__desc">{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Seals() {
  return (
    <section className="ir-section">
      <div className="ir-wrap">
        <div className="ir-seals">
          <div className="ir-seals__text">
            <window.SectionHead eyebrow="Confiança" title="Cadastur — e por que isso importa" sub="A IR Turismo tem registro no Cadastur, do Ministério do Turismo. Na prática significa três coisas: existe CNPJ, existe responsável legal e existe onde reclamar se algo der errado. O certificado está aqui ao lado — baixe e confira." />
          </div>
          <div className="ir-seals__badges">
            <a className="ir-seal ir-seal--doc" href="assets/certificado-cadastur.pdf" target="_blank" rel="noopener"><span className="ir-seal__mark">✓</span><div><strong>Cadastur</strong><span>Ministério do Turismo</span></div><span className="ir-seal__doc"><span>Baixar certificado</span> <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></span></a>
            <div className="ir-seal"><span className="ir-seal__mark">10+</span><div><strong>Anos de vivência</strong><span>em Buenos Aires</span></div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CtaBand() {
  return (
    <section className="ir-section">
      <div className="ir-wrap">
        <div className="ir-cta">
          <h2 className="ir-cta__title">Vamos planejar a sua viagem?</h2>
          <p className="ir-cta__sub">Fale com a Bia e a Ingrid no WhatsApp e receba roteiro, preços e disponibilidade — Buenos Aires, Colônia ou Bariloche.</p>
          <div className="ir-cta__actions">
            <Button as="a" variant="accent" size="lg" href={AB.waLink('Olá, Bia e Ingrid! Vim pelo site e gostaria de planejar minha viagem a Buenos Aires.')} target="_blank">Falar no WhatsApp</Button>
            <Button as="a" variant="outline" size="lg" href="index.html#passeios">Ver passeios</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutApp() {
  window.useReveal();
  return (
    <React.Fragment>
      <window.SiteHeader active="sobre" overlay={false} />
      <main>
        <PageHero />
        <Story />
        <Fundadoras />
        <Diferenciais />
        <Seals />
        <CtaBand />
      </main>
      <window.SiteFooter />
      <window.WhatsFab message="Olá! Vim pela página Sobre da IR Turismo e gostaria de mais informações." />
    </React.Fragment>
  );
}

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

})();