/* IR Turismo — chrome e componentes compartilhados entre páginas.
   Exporta tudo em window.* para uso pelos scripts de cada página. */
const { Button, IconButton, Chip, Tag, StickerLabel, Badge } = window.IRTurismoDesignSystem_586946;
const D = window.IR_DATA;

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
const IR_REVEAL_SEL = [
  '.ir-shead', '.ir-card', '.ir-feature', '.ir-pkg', '.ir-dest__card', '.ir-gal > div',
  '.ir-testi__card', '.ir-testi__item', '.ir-cta', '.ir-zsum__link', '.ir-zrow__media', '.ir-zrow__body',
  '.ir-stack__row', '.ir-seal', '.ir-channel', '.ir-duo__card', '.ir-trow', '.ir-transfer',
  '.ir-pay', '.ir-contact__cta', '.ir-about__media', '.ir-about__body', '.ir-deco',
  '.ir-notes', '.ir-budget__panel', '.ir-footer__wordmark', '.ir-svc__gallery > *'
].join(',');

function irReveal() {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  if (!('IntersectionObserver' in window)) return;
  const obs = new IntersectionObserver((entries) => {
    entries.forEach((en) => {
      if (!en.isIntersecting) return;
      const el = en.target;
      obs.unobserve(el);
      el.classList.add('is-in');
      /* depois da entrada, remove as classes para não interferir nos hovers */
      const tidy = () => { el.classList.remove('ir-reveal', 'is-in'); el.style.transitionDelay = ''; };
      el.addEventListener('transitionend', tidy, { once: true });
      setTimeout(tidy, 1700);
    });
  }, { rootMargin: '0px 0px -7% 0px', threshold: 0.06 });
  document.querySelectorAll(IR_REVEAL_SEL).forEach((el) => {
    if (el.classList.contains('ir-reveal') || el.classList.contains('is-in')) return;
    const sibs = el.parentElement ? Array.from(el.parentElement.children) : [el];
    const idx = Math.max(0, sibs.indexOf(el));
    el.style.transitionDelay = Math.min(idx * 70, 420) + 'ms';
    el.classList.add('ir-reveal');
    obs.observe(el);
  });
}
function useReveal() {
  React.useEffect(() => {
    const t = setTimeout(irReveal, 40);
    return () => clearTimeout(t);
  }, []);
}

/* ---------- ícones inline (monoline) ---------- */
function WhatsIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M.06 24l1.69-6.17a11.9 11.9 0 01-1.6-5.95C.16 5.34 5.5 0 12.06 0a11.8 11.8 0 018.41 3.49 11.8 11.8 0 013.49 8.4c0 6.56-5.34 11.9-11.9 11.9a11.9 11.9 0 01-5.7-1.45L.06 24zM6.6 20.13c1.68.99 3.28 1.59 5.46 1.59 5.45 0 9.89-4.43 9.89-9.88 0-5.46-4.42-9.89-9.88-9.89C6.6 1.95 2.18 6.38 2.18 11.83c0 2.28.67 3.99 1.79 5.78l-1 3.66 3.63-1.14zm10.81-5.55c-.07-.12-.27-.2-.56-.34-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.21-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.48 0 1.46 1.06 2.87 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.69.25-1.28.17-1.41z"/>
    </svg>
  );
}
function InstaIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="16" height="16" aria-hidden="true">
      <rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/>
    </svg>
  );
}

/* ---------- Header ---------- */
function SiteHeader({ active, overlay = true }) {
  const [solid, setSolid] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const headerRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 90);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  /* fecha o menu mobile ao clicar fora ou apertar Esc */
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (headerRef.current && !headerRef.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('click', onDoc);
    document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('click', onDoc); document.removeEventListener('keydown', onKey); };
  }, [open]);
  const links = [
    ['Início', 'index.html', 'inicio'],
    ['Passeios', 'passeios.html', 'passeios'],
    ['Bariloche', 'bariloche.html', 'bariloche'],
    ['Sobre nós', 'sobre.html', 'sobre'],
    ['Contato', 'contato.html', 'contato'],
  ];
  return (
    <header ref={headerRef} className={`ir-header ${overlay ? 'ir-header--over' : ''} ${solid ? 'is-solid' : ''}`}>
      <div className="ir-header__inner">
        <a className="ir-brand" href="index.html" aria-label="IR Turismo — início">
          <img className="ir-brand__mark" src="assets/emblem-ir-turismo.png" alt="" />
          <span className="ir-brand__word">IR<span> TURISMO</span></span>
        </a>
        <button className={`ir-burger ${open ? 'is-open' : ''}`} onClick={() => setOpen(o => !o)} aria-expanded={open} aria-label={open ? 'Fechar menu' : 'Abrir menu'}>
          <span></span><span></span><span></span>
        </button>
        <nav className={`ir-nav ${open ? 'is-open' : ''}`}>
          {links.map(([label, href, id]) => (
            <a key={id} href={href} className={`ir-navlink ${active === id ? 'is-active' : ''}`} onClick={() => setOpen(false)}>{label}</a>
          ))}
          <span className="ir-nav__cta">
            <Button as="a" variant="accent" size="sm" href="contato.html">Orçamento</Button>
          </span>
        </nav>
      </div>
    </header>
  );
}

/* ---------- WhatsApp FAB ---------- */
function WhatsFab({ message, href }) {
  return (
    <a className="ir-fab" href={href || D.waLink(message)} target="_blank" rel="noopener" aria-label="Fale conosco no WhatsApp">
      <WhatsIcon />
      <span className="ir-fab__label">Fale conosco</span>
    </a>
  );
}

/* ---------- Trust row ---------- */
function TrustRow() {
  return (
    <div className="ir-trust-row">
      <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>
  );
}

/* ---------- Section heading (local) ---------- */
function SectionHead({ eyebrow, title, sub, center }) {
  return (
    <div className={`ir-shead ${center ? 'ir-shead--center' : ''}`}>
      {eyebrow && <span className="ir-shead__eyebrow">{eyebrow}</span>}
      <h2 className="ir-shead__title">{title}</h2>
      {sub && <p className="ir-shead__sub">{sub}</p>}
    </div>
  );
}

/* ---------- Service card (grid) ---------- */
function ServiceCard({ service }) {
  const s = service;
  return (
    <a className="ir-card" href={`servico.html?id=${s.id}`}>
      <img className="ir-card__img" src={s.image} alt={s.name} loading="lazy" />
      <div className="ir-card__top">
        <span className={`ir-card__cat ir-card__cat--${s.color}`}>{s.category}</span>
      </div>
      <div className="ir-card__body">
        <h3 className="ir-card__title">{s.name}</h3>
        <p className="ir-card__desc">{s.short}</p>
        <div className="ir-card__foot">
          <span className="ir-card__price">{s.fromLabel}</span>
          <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"/><polyline points="7 7 17 7 17 17"/></svg>
          </span>
        </div>
      </div>
    </a>
  );
}

/* ---------- Price block (service detail) ---------- */
function splitPrice(v) {
  // "499,99" -> { reais:"499", cents:"99" }
  const parts = String(v).split(',');
  return { reais: parts[0], cents: parts[1] || '00' };
}
function PriceBlock({ price }) {
  if (!price) return null;
  if (price.custom) {
    return <div className="ir-price"><span className="ir-price__custom">{price.custom}</span></div>;
  }
  // airport ida / ida+volta
  if (price.ida || price.idaVolta) {
    return (
      <div className="ir-price">
        <div className="ir-price__row">
          {price.ida && (
            <div>
              <div className="ir-price__tag">IDA</div>
              <BigPrice value={price.ida} />
            </div>
          )}
          {price.idaVolta && (
            <div>
              <div className="ir-price__tag">IDA E VOLTA</div>
              <BigPrice value={price.idaVolta} />
            </div>
          )}
        </div>
        {price.unit && <div className="ir-price__unit">{price.unit}</div>}
      </div>
    );
  }
  // pix + parcelado
  if (price.pix) {
    return (
      <div className="ir-price">
        <div className="ir-price__tag">no PIX</div>
        <BigPrice value={price.pix} />
        {price.unit && <div className="ir-price__unit">{price.unit}</div>}
        {price.parcelado && (
          <div className="ir-price__alt">ou <strong>R$ {price.parcelado}</strong> em até {price.parcelas}</div>
        )}
      </div>
    );
  }
  // simple "from" or fixed value
  const v = price.from || price.value;
  return (
    <div className="ir-price">
      {price.from && <div className="ir-price__tag">A partir de</div>}
      <BigPrice value={v} />
      {price.unit && <div className="ir-price__unit">{price.unit}</div>}
    </div>
  );
}
function BigPrice({ value }) {
  const { reais, cents } = splitPrice(value);
  return (
    <div className="ir-price__line">
      <span className="ir-price__cur">R$</span>
      <span className="ir-price__val">{reais}</span>
      <span className="ir-price__cents">,{cents}</span>
    </div>
  );
}

/* ---------- Footer ---------- */
function SiteFooter() {
  const svc = D.services;
  return (
    <footer className="ir-footer">
      <div className="ir-footer__top">
        <div className="ir-footer__brand">
          <div className="ir-footer__logo">
            <img src="assets/emblem-ir-turismo.png" alt="" />
            <span>IR TURISMO</span>
          </div>
          <p className="ir-footer__blurb">Passeios, dicas &amp; experiências únicas na Argentina. Feito por brasileiras, para brasileiros.</p>
          <div className="ir-footer__social">
            <a href={D.contact.instagramUrl} target="_blank" rel="noopener">Instagram</a>
            <a href={D.waLink()} target="_blank" rel="noopener">WhatsApp</a>
          </div>
          <p className="ir-footer__contact"><InstaIcon /> @{D.contact.instagram} · <WhatsMini /> {D.contact.whatsappDisplay}</p>
          <p className="ir-footer__contact"><InstaIcon /> @irturismoalemdasfronteiras · <WhatsMini /> +54 9 11 6411-3514</p>
        </div>
        <nav className="ir-footer__col">
          <h4>Agência</h4>
          <a href="index.html">Início</a>
          <a href="bariloche.html">Bariloche</a>
          <a href="sobre.html">Sobre nós</a>
          <a href="contato.html">Contato</a>
          <a href="contato.html">Orçamento</a>
        </nav>
        <nav className="ir-footer__col">
          <h4>Passeios</h4>
          <a href="passeios.html">Todos os passeios</a>
          {svc.slice(0, 5).map(s => (
            <a key={s.id} href={`servico.html?id=${s.id}`}>{s.name}</a>
          ))}
        </nav>
        <div className="ir-footer__news">
          <h4>Fale com a gente</h4>
          <p>Tire suas dúvidas e receba o catálogo completo com todos os passeios e valores, sem compromisso.</p>
          <Button as="a" variant="primary" href={D.waLink('Olá! Vim pelo site e gostaria de saber mais sobre os passeios da IR Turismo.')} target="_blank">Chamar no WhatsApp</Button>
        </div>
      </div>
      <div className="ir-footer__legal">
        <span>Termos, condições e política de cancelamento</span>
        <span>© IR Turismo {new Date().getFullYear()} · Todos os direitos reservados</span>
      </div>
      <div className="ir-footer__wordmark" aria-hidden="true">IR TURISMO</div>
    </footer>
  );
}
function WhatsMini() {
  return <span style={{ display: 'inline-flex', width: 16, height: 16, color: 'var(--text-inverse)' }}><WhatsIcon /></span>;
}

Object.assign(window, {
  SiteHeader, SiteFooter, WhatsFab, TrustRow, SectionHead,
  ServiceCard, PriceBlock, BigPrice, WhatsIcon, InstaIcon,
  irReveal, useReveal,
});