/* 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 — Contato + Orçamento (formulário funcional) */
const { Button, Input, StickerLabel } = window.IRTurismoDesignSystem_586946;
const CT = window.IR_DATA;

function PageHero() {
  return (
    <section className="ir-hero ir-hero--page ir-hero--brand ir-hero--contact" data-screen-label="Contato — hero">
      <img className="ir-hero__emblem" src="assets/emblem-ir-turismo.png" alt="" aria-hidden="true" />
      <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)' }}>Contato</span>
        </div>
        <span className="ir-hero__kicker">Fale conosco</span>
        <h1 className="ir-hero__title">Conte o que você quer fazer</h1>
        <p className="ir-hero__lead">Datas, quantas pessoas e o que você quer conhecer. Respondemos com roteiro, preços e disponibilidade.</p>
        <span className="ir-hero__stamp"><StickerLabel color="yellow" tilt="a">Resposta rápida</StickerLabel></span>
      </div>
    </section>
  );
}

/* máscara de telefone brasileiro: (11) 98765-4321 */
function maskTel(v) {
  const d = v.replace(/\D/g, '').slice(0, 11);
  if (d.length <= 2) return d;
  if (d.length <= 6) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
  if (d.length <= 10) return `(${d.slice(0, 2)}) ${d.slice(2, 6)}-${d.slice(6)}`;
  return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
}

/* passeio pré-selecionado via ?passeio=<id> (links vindos das páginas de passeio) */
function passeioFromUrl() {
  const p = new URLSearchParams(window.location.search).get('passeio');
  if (!p) return '';
  const s = CT.getService(p) || CT.services.find((x) => x.name === p);
  return s ? s.name : '';
}

/* Bloco humano — mostra quem responde (Bia & Ingrid) + reforços de confiança */
function AtendimentoIntro() {
  return (
    <div className="ir-atende">
      <span className="ir-atende__eyebrow">Quem atende você</span>
      <span className="ir-atende__faces">
        <img className="ir-atende__face" src="assets/fotos/retrato-bia.png" alt="Bia, sócia-fundadora" />
        <img className="ir-atende__face" src="assets/fotos/retrato-ingrid.png" alt="Ingrid, sócia-fundadora" />
      </span>
      <p className="ir-atende__who">Bia &amp; Ingrid<span>brasileiras que moram em Buenos Aires</span></p>
      <p className="ir-atende__msg">Cada mensagem é lida e respondida por nós duas — sem central de atendimento. Preencha o formulário ao lado e voltamos com uma proposta.</p>
      <div className="ir-founders">
        <span className="ir-founder">Sem compromisso</span>
        <span className="ir-founder">100% em português</span>
        <span className="ir-founder">Sem spam</span>
      </div>
    </div>
  );
}

function BudgetForm() {
  const [f, setF] = React.useState({ nome: '', email: '', tel: '', passeio: passeioFromUrl(), data: '', pessoas: '', msg: '' });
  const [sent, setSent] = React.useState(false);
  const [errs, setErrs] = React.useState({});
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });

  const validate = () => {
    const e = {};
    if (!f.nome.trim()) e.nome = 'Informe seu nome.';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email)) e.email = 'Informe um e-mail válido.';
    if (f.tel.replace(/\D/g, '').length < 8) e.tel = 'Informe um WhatsApp válido.';
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const submit = (e) => {
    e.preventDefault();
    if (validate()) setSent(true);
  };

  const waMessage = () => {
    let m = `Olá! Vim pelo site e gostaria de um orçamento.\n\nNome: ${f.nome}\nE-mail: ${f.email}\nWhatsApp: ${f.tel}`;
    if (f.passeio) m += `\nPasseio de interesse: ${f.passeio}`;
    if (f.data) m += `\nData de chegada: ${f.data}`;
    if (f.pessoas) m += `\nPessoas: ${f.pessoas}`;
    if (f.msg) m += `\nMensagem: ${f.msg}`;
    return CT.waLink(m);
  };

  if (sent) {
    return (
      <div className="ir-budget__card">
        <div className="ir-budget__done">
          <StickerLabel color="purple" tilt="b">Quase lá!</StickerLabel>
          <p><strong>{f.nome.split(' ')[0] || 'Viajante'}</strong>, falta só <strong>um passo</strong>: envie pelo WhatsApp no botão abaixo para o pedido chegar até nós — respondemos por lá.</p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button as="a" variant="primary" size="lg" href={waMessage()} target="_blank">Enviar pelo WhatsApp</Button>
            <Button variant="ghost" onClick={() => { setSent(false); }}>Editar dados</Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="ir-budget__card">
      <span className="ir-budget__cardsticker"><StickerLabel color="orange" tilt="b">Leva 2 minutos</StickerLabel></span>
      <h3 className="ir-budget__cardtitle">Seu orçamento</h3>
      <form className="ir-budget__form" onSubmit={submit} noValidate>
        <Input className="ir-fullrow" label="Nome" placeholder="Nome completo" value={f.nome} onChange={set('nome')} invalid={!!errs.nome} hint={errs.nome} />
        <Input label="E-mail" type="email" placeholder="Seu melhor e-mail" value={f.email} onChange={set('email')} invalid={!!errs.email} hint={errs.email} />
        <Input label="WhatsApp" placeholder="(11) 98765-4321" value={f.tel} onChange={(e) => setF({ ...f, tel: maskTel(e.target.value) })} invalid={!!errs.tel} hint={errs.tel} />
        <label className="ir-fullrow ir-field">
          <span className="ir-field__label">Passeio de interesse</span>
          <select className="ir-select" value={f.passeio} onChange={set('passeio')}>
            <option value="">Selecione (opcional)</option>
            {CT.services.map(s => <option key={s.id} value={s.name}>{s.name}</option>)}
            <option value="Roteiro completo / vários passeios">Roteiro completo / vários passeios</option>
          </select>
        </label>
        <Input label="Data de chegada" type="date" value={f.data} onChange={set('data')} />
        <Input label="Nº de pessoas" type="number" min="1" placeholder="Ex.: 2" value={f.pessoas} onChange={set('pessoas')} />
        <Input className="ir-fullrow" label="Mensagem" multiline placeholder="Conte o que você gostaria de fazer, datas, dúvidas…" value={f.msg} onChange={set('msg')} />
        <div className="ir-budget__submit"><Button variant="primary" size="lg" type="submit">Solicitar orçamento</Button></div>
      </form>
    </div>
  );
}

function ContactInfo() {
  return (
    <div className="ir-contact">
      <window.SectionHead eyebrow="Prefere falar agora?" title="Canais diretos" />
      <div className="ir-contact__channels">
        <a className="ir-channel" href={CT.waLink('Olá! Vim pelo site da IR Turismo.')} target="_blank" rel="noopener">
          <span className="ir-channel__icon" style={{ background: '#25D366' }}><window.WhatsIcon /></span>
          <div className="ir-channel__body"><strong>WhatsApp</strong><span>{CT.contact.whatsappDisplay}</span></div>
          <span className="ir-channel__go" aria-hidden="true">→</span>
        </a>
        <a className="ir-channel" href={CT.contact.instagramUrl} target="_blank" rel="noopener">
          <span className="ir-channel__icon" style={{ background: 'var(--magenta-500)' }}><window.InstaIcon /></span>
          <div className="ir-channel__body"><strong>Instagram</strong><span>@{CT.contact.instagram}</span></div>
          <span className="ir-channel__go" aria-hidden="true">→</span>
        </a>
      </div>

      <div className="ir-pay">
        <h3 className="ir-pay__title">Formas de pagamento</h3>
        <ul className="ir-pay__list">
          <li>Aceitamos pagamentos por <strong>cartão de crédito e débito</strong>.</li>
          <li>Por meio de <strong>transferência bancária</strong> ou <strong>Pix</strong>.</li>
          <li>A reserva é confirmada com <strong>pagamento antecipado</strong>.</li>
        </ul>
      </div>
    </div>
  );
}

function ContactApp() {
  window.useReveal();
  return (
    <React.Fragment>
      <window.SiteHeader active="contato" />
      <main>
        <PageHero />
        <section className="ir-section ir-budget" data-screen-label="Contato — orçamento">
          <div className="ir-wrap">
            <window.SectionHead center eyebrow="Orçamento sob medida" title="Vamos montar seu roteiro" sub="Preencha os dados e respondemos com uma proposta — Aeroportos, City Tour, Gamboa, Tigre, Campanópolis e mais." />
            <div className="ir-budget__panel">
              <AtendimentoIntro />
              <BudgetForm />
            </div>
          </div>
        </section>
        <section className="ir-section ir-section--tight" data-screen-label="Contato — canais">
          <div className="ir-wrap">
            <div className="ir-contact__grid">
              <ContactInfo />
              <div className="ir-contact__cta">
                <window.SectionHead eyebrow="Atendimento direto" title="Quem responde são as sócias" sub="Prefere conversar antes de preencher? Chame no WhatsApp e fale com a Bia ou com a Ingrid." />
                <Button as="a" variant="accent" size="lg" href={CT.waLink('Olá! Vim pelo site da IR Turismo e gostaria de falar com vocês.')} target="_blank">Falar no WhatsApp agora</Button>
                <p className="ir-contact__hours">Atendimento de segunda a segunda · {CT.contact.whatsappDisplay}</p>
              </div>
            </div>
          </div>
        </section>
      </main>
      <window.SiteFooter />
      <window.WhatsFab message="Olá! Vim pela página de contato da IR Turismo e gostaria de um orçamento." />
    </React.Fragment>
  );
}

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

})();