/* 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 de serviço (detalhe), dirigida por ?id= */
const { Button, StickerLabel, Tag } = window.IRTurismoDesignSystem_586946;
const SVC = window.IR_DATA;

function getParam(name) {
  return new URLSearchParams(window.location.search).get(name);
}

function PageHero({ service }) {
  return (
    <section className="ir-hero ir-hero--page">
      <img className="ir-hero__bg" src={service.image} alt="" />
      <div className="ir-hero__inner">
        <div className="ir-hero__crumb">
          <a href="index.html">Início</a><span>›</span>
          <a href="passeios.html">Passeios</a><span>›</span>
          <span style={{ color: 'var(--text-inverse)' }}>{service.name}</span>
        </div>
        <span className="ir-hero__kicker">{window.rotuloCategoria(service.category)}</span>
        {service.logo && <img className="ir-hero__logo" src={service.logo} alt="" />}
        <h1 className="ir-hero__title">{service.name}</h1>
        <p className="ir-hero__lead">{service.intro}</p>
      </div>
    </section>
  );
}

function Includes({ items, single }) {
  return (
    <ul className={`ir-incl ${single ? 'ir-incl--single' : ''}`}>
      {items.map((it, i) => <li key={i}>{it}</li>)}
    </ul>
  );
}

function PackageCard({ pkg }) {
  const single = (pkg.includes || []).length <= 3;
  const msg = `Olá! Tenho interesse no pacote "${pkg.name}" (${SVC.getService(getParam('id')).name}). Pode me passar mais informações?`;
  return (
    <article className="ir-pkg">
      {pkg.sticker && (
        <span className="ir-pkg__sticker"><StickerLabel color="yellow" tilt="b">{pkg.sticker}</StickerLabel></span>
      )}
      <div className="ir-pkg__side">
        <div className="ir-pkg__head">
          <h3 className="ir-pkg__name">{pkg.name}</h3>
          {pkg.subtitle && <p className="ir-pkg__sub">{pkg.subtitle}</p>}
        </div>
        <div className="ir-pkg__pricebox">
          <window.PriceBlock price={pkg.price} />
        </div>
        <div className="ir-pkg__cta">
          <Button as="a" variant="primary" href={SVC.waLink(msg)} target="_blank">Quero esse pacote</Button>
          <Button as="a" variant="ghost" size="sm" href={SVC.waLink('Olá! Gostaria de tirar uma dúvida sobre o passeio.')} target="_blank">Tirar dúvidas</Button>
        </div>
      </div>
      <div className="ir-pkg__body">
        <h4>O que está incluído</h4>
        <Includes items={pkg.includes || []} single={single} />
        {pkg.notInclude && pkg.notInclude.length > 0 && (
          <ul className="ir-excl">
            <li className="ir-excl__label">Não inclui</li>
            {pkg.notInclude.map((it, i) => <li key={i}>{it}</li>)}
          </ul>
        )}
      </div>
    </article>
  );
}

/* galeria de fotos do serviço (fotos com moldura própria — exibidas sem recorte) */
function ServiceGallery({ gallery }) {
  if (!gallery || gallery.length === 0) return null;
  return (
    <div className="ir-svc__gallery">
      {gallery.map(([src, alt, kind]) => (
        <img key={src} src={src} alt={alt} loading="lazy" className={kind === 'framed' ? 'is-framed' : kind === 'tall' ? 'is-tall' : ''} />
      ))}
    </div>
  );
}

function OtherServices({ currentId }) {
  const others = SVC.services.filter(s => s.id !== currentId).slice(0, 3);
  return (
    <section className="ir-section">
      <div className="ir-wrap">
        <window.SectionHead eyebrow="Continue explorando" title="Outros passeios" />
        <div className="ir-grid">
          {others.map(s => <window.ServiceCard key={s.id} service={s} />)}
        </div>
      </div>
    </section>
  );
}

function NotFound() {
  return (
    <section className="ir-section" style={{ paddingTop: 160, textAlign: 'center' }}>
      <div className="ir-wrap">
        <window.SectionHead center eyebrow="Ops" title="Passeio não encontrado" sub="O passeio que você procura não está disponível. Veja todos os nossos passeios na página inicial." />
        <Button as="a" variant="primary" href="passeios.html">Ver todos os passeios</Button>
      </div>
    </section>
  );
}

function ServiceApp() {
  window.useReveal();
  const id = getParam('id');
  const service = SVC.getService(id);

  React.useEffect(() => {
    if (service) document.title = `${service.name} — IR Turismo`;
  }, [service]);

  return (
    <React.Fragment>
      <window.SiteHeader active="passeios" />
      <main>
        {service ? (
          <React.Fragment>
            <PageHero service={service} />
            <section className="ir-section">
              <div className="ir-wrap">
                <ServiceGallery gallery={service.gallery} />
                {service.notes && service.notes.length > 0 && (
                  <div className="ir-notes">
                    {service.notes.map((n, i) => <div key={i} className="ir-notes__item">{n}</div>)}
                  </div>
                )}
                <div className="ir-pkgs">
                  {service.packages.map((p, i) => <PackageCard key={i} pkg={p} />)}
                </div>
                <p className="ir-svc__orc">Prefere receber por escrito? <a href={`contato.html?passeio=${service.id}`}>Solicite um orçamento</a> com este passeio já selecionado.</p>
              </div>
            </section>
            <OtherServices currentId={service.id} />
          </React.Fragment>
        ) : <NotFound />}
      </main>
      <window.SiteFooter />
      <window.WhatsFab message={service ? `Olá! Tenho interesse no passeio "${service.name}". Pode me ajudar?` : 'Olá! Vim pelo site da IR Turismo.'} />
    </React.Fragment>
  );
}

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

})();