/* IR Turismo — Home */
const H = window.IR_DATA;
const HOME_TESTI = [
  { text: 'Gostaria de agradecer pelo excelente atendimento e pelo serviço prestado! Adoramos a experiência e ficamos muito satisfeitos com toda a organização e atenção. Muito obrigada! Com certeza iremos indicar vocês.', name: 'Paula', city: 'Porto Alegre' },
  { text: 'Viagem impecável do começo ao fim. O receptivo no aeroporto fez toda a diferença e o City Tour foi inesquecível. Atendimento todo em português, recomendo de olhos fechados!', name: 'Rafael', city: 'São Paulo' },
  { text: 'Dicas certeiras e roteiros que fugiram do óbvio. A Bia e a Ingrid cuidaram de cada detalhe. Voltamos apaixonados por Buenos Aires.', name: 'Camila', city: 'Belo Horizonte' },
];

/* baralho de fotos da hero — as 3 polaroids vão trocando de carta */
const HERO_DECK = [
  ['assets/fotos/caminito-trio.jpg', 'Caminito · La Boca'],
  ['assets/fotos/brc-amigas-neve.jpg', 'Bariloche'],
  ['assets/fotos/puente-mujer.jpg', 'Puerto Madero'],
  ['assets/fotos/gamboa-brinde-cadeiras.jpg', 'Vinícola Gamboa'],
  ['assets/fotos/campanopolis-hero.jpg', 'Campanópolis'],
  ['assets/fotos/tigre-pier.jpg', 'Tigre'],
  ['assets/fotos/citytour-casa-rosada.jpg', 'Casa Rosada'],
  ['assets/fotos/brc-verde.jpg', 'Patagônia'],
  ['assets/fotos/colonia-placa.jpg', 'Colônia del Sacramento'],
];

function HeroPolaroid({ pos, photo }) {
  const [src, cap] = photo;
  const [shown, setShown] = React.useState({ src, cap });
  const [leaving, setLeaving] = React.useState(null);
  React.useEffect(() => {
    if (src !== shown.src) {
      setLeaving(shown);
      setShown({ src, cap });
      const t = setTimeout(() => setLeaving(null), 700);
      return () => clearTimeout(t);
    }
  }, [src]);
  return (
    <figure className={`ir-polaroid ir-polaroid--${pos}`}>
      <span className="ir-polaroid__frame">
        <img key={shown.src} className="ir-polaroid__img ir-polaroid__img--in" src={shown.src} alt={shown.cap} />
        {leaving && <img key={leaving.src} className="ir-polaroid__img ir-polaroid__img--out" src={leaving.src} alt="" />}
      </span>
      <figcaption key={shown.src} className="ir-polaroid__cap">{shown.cap}</figcaption>
    </figure>
  );
}

function HomeHero() {
  const DS = window.IRTurismoDesignSystem_586946;
  const [tick, setTick] = React.useState(0);
  const paused = React.useRef(false);
  React.useEffect(() => {
    const id = setInterval(() => { if (!paused.current) setTick(t => t + 1); }, 4200);
    return () => clearInterval(id);
  }, []);
  /* pré-carrega apenas as fotos das próximas trocas (não as 9 de uma vez) */
  React.useEffect(() => {
    const next = new Set();
    for (let t = tick; t <= tick + 2; t++) {
      for (let i = 0; i < 3; i++) {
        next.add(HERO_DECK[(i + 3 * Math.max(0, Math.floor((t + 2 - i) / 3))) % HERO_DECK.length][0]);
      }
    }
    next.forEach((src) => { const im = new Image(); im.src = src; });
  }, [tick]);
  const photoAt = (i) => HERO_DECK[(i + 3 * Math.max(0, Math.floor((tick + 2 - i) / 3))) % HERO_DECK.length];
  return (
    <section className="ir-hero-split ir-hero-split--home" data-screen-label="Home — hero">
      <span className="ir-shape ir-shape--burst ir-deco" style={{ width: 86, height: 86, top: '10%', left: '45%', background: 'var(--coral-500)' }}></span>
      <span className="ir-shape ir-shape--star ir-deco" style={{ width: 58, height: 58, bottom: '14%', left: '3%', background: 'var(--yellow-500)' }}></span>
      <span className="ir-shape ir-shape--dot ir-deco" style={{ width: 30, height: 30, top: '22%', left: '2%', background: 'var(--sky-500)' }}></span>
      <div className="ir-wrap ir-hero-split__grid">
        <div className="ir-hero-split__text">
          <span className="ir-hero__kicker">Buenos Aires · Bariloche</span>
          <h1 className="ir-hero-split__title">Viva a sua <span className="ir-hero-split__markline">Buenos Aires</span></h1>
          <p className="ir-hero-split__lead">A agência brasileira referência em Buenos Aires. <span className="ir-mark ir-mark--sky">Passeios, dicas &amp; experiências únicas na Argentina</span> — com segurança e atenção personalizada.</p>
          <div className="ir-hero__actions">
            <DS.Button as="a" variant="accent" size="lg" href="#passeios">Ver passeios</DS.Button>
            <DS.Button as="a" variant="outline" size="lg" href="contato.html">Solicitar orçamento</DS.Button>
          </div>
          <div className="ir-trust-row ir-trust-row--ink">
            <span className="ir-trust">★ Travellers' Choice</span>
            <span className="ir-trust">Cadastur · Ministério do Turismo</span>
            <span className="ir-trust">Atendimento 100% em português</span>
          </div>
        </div>
        <div
          className="ir-hero-split__collage"
          onMouseEnter={() => { paused.current = true; }}
          onMouseLeave={() => { paused.current = false; }}
        >
          <HeroPolaroid pos="a" photo={photoAt(0)} />
          <HeroPolaroid pos="b" photo={photoAt(1)} />
          <HeroPolaroid pos="c" photo={photoAt(2)} />
        </div>
      </div>
    </section>
  );
}

function HighlightStack() {
  const rows = [
    ['Passeios', 'coral', 'a', 'passeios.html'],
    ['Tangos', 'purple', 'c', 'passeios.html#tangos'],
    ['Receptivo', 'sky', 'b', 'servico.html?id=aeroportos'],
    ['Gastronomia', 'pink', 'b', 'servico.html?id=gamboa'],
    ['Tours exclusivos', 'yellow', 'a', 'passeios.html#p-por-do-sol'],
    ['Bariloche', 'green', 'c', 'bariloche.html'],
  ];
  return (
    <section className="ir-stack" aria-label="Atalhos para experiências">
      {rows.map(([label, color, tilt, href]) => (
        <a key={label} href={href} className={`ir-stack__row ir-stack__row--${color} ir-stack__row--t${tilt}`}>{label}</a>
      ))}
    </section>
  );
}

function PasseiosGrid() {
  const [cat, setCat] = React.useState('Todos');
  const cats = ['Todos', 'Passeios', 'Tangos', 'Receptivo', 'Experiências Gastronômicas', 'Tours Exclusivos'];
  const list = cat === 'Todos' ? H.services : H.services.filter(s => s.category === cat);
  return (
    <section className="ir-section" id="passeios">
      <div className="ir-wrap">
        <window.SectionHead center eyebrow="Nossos passeios" title="Escolha o ideal pra você" sub="Do receptivo no aeroporto às experiências mais exclusivas de Buenos Aires e arredores. Toque em um passeio para ver os pacotes e valores." />
        <div className="ir-filter">
          {cats.map(c => (
            <window.IRTurismoDesignSystem_586946.Chip key={c} selected={cat === c} onClick={() => setCat(c)}>{c === 'Experiências Gastronômicas' ? 'Gastronomia' : c}</window.IRTurismoDesignSystem_586946.Chip>
          ))}
        </div>
        <div className="ir-grid">
          {list.map(s => <window.ServiceCard key={s.id} service={s} />)}
        </div>
      </div>
    </section>
  );
}

function AboutTeaser() {
  return (
    <section className="ir-section ir-about" style={{ background: 'var(--paper)' }}>
      <span className="ir-shape ir-shape--star ir-deco" style={{ width: 90, height: 90, top: '12%', left: '4%' }}></span>
      <span className="ir-shape ir-shape--dot ir-deco" style={{ width: 56, height: 56, bottom: '14%', right: '6%', background: 'var(--coral-500)' }}></span>
      <div className="ir-wrap">
        <div className="ir-about__grid">
          <div className="ir-about__media">
            <image-slot id="home-bia-ingrid" src="assets/placeholders/tango-wide.png" placeholder="Foto da Bia & Ingrid — arraste aqui" shape="rect" style={{ width: '100%', height: '100%', display: 'block' }}></image-slot>
            <span className="ir-about__sticker"><window.IRTurismoDesignSystem_586946.StickerLabel color="yellow" tilt="b">Bia &amp; Ingrid</window.IRTurismoDesignSystem_586946.StickerLabel></span>
          </div>
          <div>
            <window.SectionHead eyebrow="Quem somos" title="Feito por brasileiras, para brasileiros" />
            <div className="ir-about__body">
              <p>A <strong>Bia</strong>, a <strong>Ingrid</strong> e a IR Tour te dão as boas-vindas a Buenos Aires! Somos brasileiras apaixonadas pela cidade que transformaram essa paixão em propósito: ajudar você a viver experiências incríveis na Argentina <span className="ir-mark ir-mark--sky">com segurança, tranquilidade e muito carinho</span>.</p>
              <p>Escolhemos a dedo cada passeio, cada roteiro e cada parceiro. E o melhor: nosso atendimento é <span className="ir-mark">100% humanizado</span>, com todo o suporte que você precisa.</p>
            </div>
            <div className="ir-founders">
              <span className="ir-founder">Suporte completo</span>
              <span className="ir-founder">Traslado &amp; câmbio</span>
              <span className="ir-founder">Dicas valiosas</span>
            </div>
            <div style={{ marginTop: 28 }}>
              <window.IRTurismoDesignSystem_586946.Button as="a" variant="outline" href="sobre.html">Conheça a IR Turismo</window.IRTurismoDesignSystem_586946.Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="ir-section ir-section--tight" data-screen-label="Home — depoimentos">
      <div className="ir-wrap">
        <div className="ir-testi__card">
          <window.SectionHead center eyebrow="Depoimentos" title="Quem foi, recomenda" />
          <div className="ir-testi__grid">
            {HOME_TESTI.map((t) => (
              <figure className="ir-testi__item" key={t.name}>
                <span className="ir-testi__stars" aria-label="5 estrelas">★★★★★</span>
                <blockquote className="ir-testi__quote">{t.text}</blockquote>
                <figcaption className="ir-testi__who">{t.name}<span>{t.city}</span></figcaption>
              </figure>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CtaBand() {
  return (
    <section className="ir-section">
      <div className="ir-wrap">
        <div className="ir-cta">
          <h2 className="ir-cta__title">A sua Buenos Aires está esperando por você</h2>
          <p className="ir-cta__sub">Conte com a gente desde o primeiro passo na cidade. Fale com a nossa equipe e agende agora a sua próxima aventura!</p>
          <div className="ir-cta__actions">
            <window.IRTurismoDesignSystem_586946.Button as="a" variant="accent" size="lg" href={H.waLink('Olá! Vim pelo site e gostaria de saber mais sobre os passeios da IR Turismo.')} target="_blank">Falar no WhatsApp</window.IRTurismoDesignSystem_586946.Button>
            <window.IRTurismoDesignSystem_586946.Button as="a" variant="outline" size="lg" href="contato.html">Solicitar orçamento</window.IRTurismoDesignSystem_586946.Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function DestinosSection() {
  const { StickerLabel } = window.IRTurismoDesignSystem_586946;
  const arrow = (
    <span className="ir-card__arrow" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
    </span>
  );
  return (
    <section className="ir-section" id="destinos" data-screen-label="Home — destinos">
      <div className="ir-wrap">
        <window.SectionHead center eyebrow="Destinos" title="Para onde vamos juntos?" />
        <div className="ir-dest">
          <a className="ir-dest__card ir-dest__card--photo" href="passeios.html">
            <img className="ir-dest__img" src="assets/fotos/citytour-cliente-casa-rosada.jpg" alt="Cliente IR Turismo em frente à Casa Rosada, Buenos Aires" loading="lazy" />
            <span className="ir-dest__kicker">Argentina</span>
            <span className="ir-dest__title">Buenos Aires</span>
            <p className="ir-dest__sub">City tours, shows de tango, vinícola, Tigre, Colônia del Sacramento e receptivo desde o aeroporto.</p>
            <span className="ir-dest__foot"><span className="ir-dest__count">12 passeios</span>{arrow}</span>
          </a>
          <a className="ir-dest__card ir-dest__card--photo" href="bariloche.html">
            <img className="ir-dest__img" src="assets/fotos/brc-mirante.jpg" alt="Bariloche — mirante na Patagônia" loading="lazy" />
            <span className="ir-dest__sticker"><StickerLabel color="yellow" tilt="a">Novo destino</StickerLabel></span>
            <span className="ir-dest__kicker">Patagônia</span>
            <span className="ir-dest__title">Bariloche</span>
            <p className="ir-dest__sub">Passeios terrestres, aventuras na neve e transfer — a Patagônia argentina em português.</p>
            <span className="ir-dest__foot"><span className="ir-dest__count">24 passeios</span>{arrow}</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function ViajantesGallery() {
  const cells = [
    ['01', 'ir-gal__cell--big', 'assets/fotos/caminito-escada.jpg'],
    ['02', '', 'assets/fotos/gamboa-brinde-letreiro.jpg'],
    ['03', '', 'assets/fotos/colonia-carro.jpg'],
    ['04', 'ir-gal__cell--tall', 'assets/fotos/gamboa-casal-colo.jpg'],
    ['05', '', 'assets/fotos/brc-familia-ski.jpg'],
    ['06', '', 'assets/fotos/campanopolis-beijo.jpg'],
    ['07', '', 'assets/fotos/colonia-letreiro.jpg'],
    ['08', '', 'assets/fotos/brc-casal-neve.jpg'],
  ];
  return (
    <section className="ir-section" id="viajantes" data-screen-label="Home — nossos viajantes">
      <div className="ir-wrap">
        <window.SectionHead center eyebrow="Portfólio de clientes" title="Nossos viajantes" sub="Memórias reais de quem já viveu a Argentina com a gente." />
        <div className="ir-gal">
          {cells.map(([id, cls, src]) => (
            <div key={id} className={cls || undefined}>
              <image-slot id={`viajantes-${id}`} src={src} shape="rounded" radius="24" placeholder="Foto de viajante"></image-slot>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeApp() {
  window.useReveal();
  return (
    <React.Fragment>
      <window.SiteHeader active="inicio" overlay={false} />
      <main>
        <HomeHero />
        <HighlightStack />
        <DestinosSection />
        <PasseiosGrid />
        <AboutTeaser />
        <ViajantesGallery />
        <Testimonials />
        <CtaBand />
      </main>
      <window.SiteFooter />
      <window.WhatsFab message="Olá! Vim pelo site da IR Turismo e gostaria de mais informações." />
    </React.Fragment>
  );
}

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