/* ════════════════════════════════════════════════════════════
   Licitato — Landing Page v4 · Sections
   Copy CONGELADA (handoff). Behaviours/animation = design.
   ════════════════════════════════════════════════════════════ */

const CAL_HREF = '#agendar';   // placeholder destination for "Agendar uma conversa"

/* ── CONTACT / LEAD CAPTURE ─────────────────────────────
   Base da API: override manual via window.LICITATO_API_BASE;
   senão, localhost em dev e api.licitato.ia.br em produção. */
const API_BASE = (() => {
  if (typeof window !== 'undefined' && window.LICITATO_API_BASE) {
    return String(window.LICITATO_API_BASE).replace(/\/+$/, '');
  }
  const host = (typeof window !== 'undefined' && window.location && window.location.hostname) || '';
  const isLocal = host === 'localhost' || host === '127.0.0.1' || host === '' || host === '0.0.0.0';
  return isLocal ? 'http://localhost:8000' : 'https://api.licitato.ia.br';
})();
const PROSPECTS_ENDPOINT = `${API_BASE}/v1/prospects`;

/* Abre o modal de contato (usado por todos os CTAs). */
const openContact = (e) => {
  if (e && e.preventDefault) e.preventDefault();
  if (typeof window !== 'undefined') {
    window.dispatchEvent(new CustomEvent('licitato:open-contact'));
  }
};

/* ── Brand chevron (the signature motif) ───────────────── */
const Chev = ({ className }) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M5 4 L13 12 L5 20" stroke="currentColor" strokeWidth="3"
          strokeLinecap="round" strokeLinejoin="round" />
    <path d="M13 4 L21 12 L13 20" stroke="currentColor" strokeWidth="3"
          strokeLinecap="round" strokeLinejoin="round" opacity=".55" />
  </svg>
);
const Check = () => (
  <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
    <path d="M2.5 6.2 5 8.6 9.5 3.6" stroke="#fff" strokeWidth="1.8"
          strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const Lens = () => (
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <circle cx="10" cy="10" r="7" stroke="currentColor" strokeWidth="2" />
    <line x1="14.9" y1="14.9" x2="21" y2="21" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
    <path d="M8.2 8.1a1.9 1.9 0 0 1 3.6.7c0 1.3-1.8 1.5-1.8 2.6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    <circle cx="10" cy="14" r=".8" fill="currentColor" />
  </svg>
);
/* aligned vs broken chevron — the chain that does / doesn't close */
const BrokenChev = () => (
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M5 3 L11 9 L5 15" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
    <path d="M13 9 L19 15 L13 21" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" opacity=".5" />
  </svg>
);
/* step glyphs (Section 5) */
const UploadGlyph = () => (
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M12 15V4M8 8l4-4 4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    <path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>
);
const FormGlyph = () => (
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <rect x="4" y="3" width="16" height="18" rx="2" stroke="currentColor" strokeWidth="2" />
    <path d="M8 8h8M8 12h8M8 16h5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>
);
const DocCheckGlyph = () => (
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M6 3h8l5 5v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
    <path d="M9 13l2.2 2.2L16 11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

/* ── REVEAL SYSTEM (capture-safe) ──────────────────────── */
const RevealInit = () => {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll('.r'));
    const timers = [];
    const reveal = (el) => {
      if (el.classList.contains('in')) return;
      el.classList.add('in', 'anim');
      timers.push(setTimeout(() => el.classList.remove('anim'), 950));
    };
    const vh = window.innerHeight || document.documentElement.clientHeight;
    els.forEach((el) => { if (el.getBoundingClientRect().top < vh * 0.92) reveal(el); });

    let io = null;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver(
        (entries) => entries.forEach((e) => { if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); } }),
        { threshold: 0.04, rootMargin: '0px 0px -36px 0px' }
      );
      els.forEach((el) => { if (!el.classList.contains('in')) io.observe(el); });
    } else { els.forEach(reveal); }

    const safety = setTimeout(() => els.forEach(reveal), 1600);
    return () => { if (io) io.disconnect(); clearTimeout(safety); timers.forEach(clearTimeout); };
  }, []);
  return null;
};

/* ── NAV ───────────────────────────────────────────────── */
const Nav = () => {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const h = () => setSolid(window.scrollY > 56);
    h(); window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <nav className={`v4-nav${solid ? ' solid' : ''}`}>
      <a href="#top" className="v4-nav-logo" aria-label="licitato — início">
        <img src={window.LICITATO_LOGO_WHITE_NOIA} alt="licitato" />
      </a>
      <div className="v4-nav-right">
        <a href={CAL_HREF} onClick={openContact} className="v4-btn sm v4-nav-cta">
          Agendar uma conversa <Chev className="arr" />
        </a>
      </div>
    </nav>
  );
};

/* ── HERO PRODUCT MOCK (responde → monta → documento) ──── */
/* clock helpers (ms-driven typewriter / sequencing) */
const hmSeg = (c, s, d) => Math.max(0, Math.min(1, (c - s) / d));
const hmCut = (str, c, s, d) => str.slice(0, Math.round(str.length * hmSeg(c, s, d)));
const hmTyping = (c, s, d) => { const p = hmSeg(c, s, d); return p > 0 && p < 1; };

const HM_ETP = {
  head: 'Sua necessidade',
  rows: [
    { q: 'Qual problema você precisa resolver?', a: 'Salas de aula muito quentes durante as aulas', s: 360, d: 640 },
    { q: 'Quem será atendido?',          a: 'Alunos das escolas municipais de ensino fundamental', s: 1120, d: 700 },
    { q: 'Tem alguma exigência específica do espaço?', a: 'Salas de até 50 m², com turmas de cerca de 35 alunos', s: 1920, d: 700 },
  ],
  sols: [
    { t: 'Ventiladores de teto — Baratos e fáceis de instalar, mas só movem o ar; não baixam a temperatura.', s: 2820 },
    { t: 'Climatizadores evaporativos — Custo médio; ajudam, mas perdem eficiência nos dias mais úmidos.', s: 3060 },
    { t: 'Ar-condicionado tipo split — Climatiza de verdade e dá conta de salas cheias, o dia inteiro.', s: 3300, chosen: true, cs: 3760 },
  ],
  pulse: [2700, 3380],
  end: 4400,
};
const HM_TR = { head: 'Sua contratação', obj: 'Aparelhos de ar-condicionado tipo split', criterio: 'Menor preço, por item', pulse: [1760, 2520], end: 6600 };

const HmEtpForm = ({ c }) => (
  <div className="hm-rows">
    {HM_ETP.rows.map((r, i) => {
      const done = hmSeg(c, r.s, r.d) >= 1;
      return (
        <div className="hm-row" key={i} style={{ opacity: c >= r.s - 130 ? 1 : 0 }}>
          <div className="hm-q">{r.q}</div>
          <div className="hm-a">
            <span>{hmCut(r.a, c, r.s, r.d)}</span>
            {hmTyping(c, r.s, r.d) && <i className="hm-caret" />}
            {done && <span className="hm-ck"><Check /></span>}
          </div>
        </div>
      );
    })}
  </div>
);

const HmEtpOut = ({ c }) => {
  const anyChosen = HM_ETP.sols.some((x) => x.chosen && c >= x.cs);
  return (
    <div className="hm-pane">
      <div className="hm-out-top">
        <span className="hm-kicker">Levantamento de soluções</span>
        <span className="hm-seal">3 opções</span>
      </div>
      <div className="hm-out-title">Soluções possíveis</div>
      <div className="hm-sols">
        {HM_ETP.sols.map((sol, i) => {
          const inn = c >= sol.s;
          const chosen = sol.chosen && c >= sol.cs;
          return (
            <div className={`hm-sol${inn ? ' in' : ''}${chosen ? ' chosen' : ''}${anyChosen && !chosen ? ' dim' : ''}`} key={i}>
              <span className="hm-sol-ic">{chosen ? <Check /> : <span className="hm-sol-dot" />}</span>
              <span className="hm-sol-body">
                <span className="hm-sol-t">{sol.t}</span>
                {chosen && <span className="hm-sol-tag">Solução escolhida</span>}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const HmTrForm = ({ c }) => (
  <div className="hm-rows">
    <div className="hm-frow" style={{ opacity: c >= 230 ? 1 : 0 }}>
      <div className="hm-flabel">Objeto da contratação</div>
      <div className="hm-fval"><span>{hmCut(HM_TR.obj, c, 360, 700)}</span>{hmTyping(c, 360, 700) && <i className="hm-caret" />}</div>
    </div>
    <div className="hm-frow" style={{ opacity: c >= 1140 ? 1 : 0 }}>
      <div className="hm-flabel">Escolha do fornecedor{c >= 1620 && <span className="hm-badge">Sugerido</span>}</div>
      <div className="hm-fval"><span>{hmCut(HM_TR.criterio, c, 1160, 460)}</span>{hmTyping(c, 1160, 460) && <i className="hm-caret" />}</div>
    </div>
  </div>
);

/* document objeto — same literal string as the form (coherence) */
const HmObjeto = ({ c }) => {
  const pre = 'Aquisição de ';
  const mk = 'Aparelhos de ar-condicionado tipo split';
  const post = ' para as escolas municipais de ensino fundamental.';
  const full = pre + mk + post;
  const s = full.slice(0, Math.round(full.length * hmSeg(c, 2520, 1480)));
  const a = s.slice(0, pre.length);
  const b = s.slice(pre.length, pre.length + mk.length);
  const d = s.slice(pre.length + mk.length);
  return <span>{a}{b && <mark className="hm-hl">{b}</mark>}{d}{hmTyping(c, 2520, 1480) && <i className="hm-caret" />}</span>;
};

const HmTrOut = ({ c }) => (
  <div className="hm-doc">
    <div className="hm-doc-bar">
      <span className="hm-doc-title">Termo de Referência</span>
      <span className="hm-doc-seal">14.133/2021</span>
    </div>
    <div className="hm-doc-body">
      <div className="hm-doc-h" style={{ opacity: c >= 2120 ? 1 : 0 }}>{hmCut('1. Condições gerais da contratação', c, 2120, 420)}{hmTyping(c, 2120, 420) && <i className="hm-caret" />}</div>
      <p className="hm-doc-p" style={{ opacity: c >= 2520 ? 1 : 0 }}><b>1.1 Objeto</b> — <HmObjeto c={c} /></p>
      <p className="hm-doc-p" style={{ opacity: c >= 4140 ? 1 : 0 }}><b>1.2 Natureza do objeto</b> — {hmCut('Bens comuns; não se enquadra como bem de luxo (Dec. 10.818/2021).', c, 4140, 520)}{hmTyping(c, 4140, 520) && <i className="hm-caret" />}</p>
      <div className="hm-doc-h" style={{ opacity: c >= 4760 ? 1 : 0, marginTop: '14px' }}>{hmCut('2. Critérios de seleção do fornecedor', c, 4760, 460)}{hmTyping(c, 4760, 460) && <i className="hm-caret" />}</div>
      <p className="hm-doc-p" style={{ opacity: c >= 5260 ? 1 : 0 }}><b>2.1</b> {hmCut('Julgamento por menor preço, com adjudicação por item, para ampliar a participação de fornecedores (Súmula 247 do TCU).', c, 5260, 1000)}{hmTyping(c, 5260, 1000) && <i className="hm-caret" />}</p>
    </div>
  </div>
);

const useReducedMotion = () => {
  const [r, setR] = React.useState(false);
  React.useEffect(() => {
    const m = window.matchMedia('(prefers-reduced-motion: reduce)');
    const h = () => setR(!!m.matches); h();
    m.addEventListener ? m.addEventListener('change', h) : m.addListener(h);
    return () => { m.removeEventListener ? m.removeEventListener('change', h) : m.removeListener(h); };
  }, []);
  return r;
};

const HeroMock = () => {
  const reduce = useReducedMotion();
  const [view, setView] = React.useState('etp');
  const [c, setC] = React.useState(0);
  const auto = React.useRef(true);
  const raf = React.useRef(0);
  const swt = React.useRef(0);
  const cfg = view === 'etp' ? HM_ETP : HM_TR;

  React.useEffect(() => {
    clearTimeout(swt.current);
    cancelAnimationFrame(raf.current);
    if (reduce) { setC(cfg.end + 1500); return; }
    setC(0);
    let t0 = null;
    const tick = (ts) => {
      if (t0 === null) t0 = ts;
      const e = ts - t0;
      setC(e);
      if (e < cfg.end) raf.current = requestAnimationFrame(tick);
      else if (auto.current) swt.current = setTimeout(() => setView((v) => (v === 'etp' ? 'tr' : 'etp')), 2600);
    };
    raf.current = requestAnimationFrame(tick);
    const fb = setTimeout(() => setC((v) => (v < cfg.end ? cfg.end : v)), cfg.end + 600);
    return () => { cancelAnimationFrame(raf.current); clearTimeout(swt.current); clearTimeout(fb); };
  }, [view, reduce]);

  const go = (v) => { auto.current = false; clearTimeout(swt.current); if (v !== view) setView(v); else setC(0); };
  const onKey = (e) => {
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') { e.preventDefault(); go(view === 'etp' ? 'tr' : 'etp'); }
  };
  const bridgeShown = c >= cfg.pulse[0];

  return (
    <div className="hm" aria-label="Demonstração: você responde e o Licitato monta o documento">
      <div className="hm-toggle" role="tablist" aria-label="Exemplo de documento">
        <button type="button" role="tab" aria-selected={view === 'etp'} className={`hm-tab${view === 'etp' ? ' on' : ''}`} onClick={() => go('etp')} onKeyDown={onKey}>ETP</button>
        <button type="button" role="tab" aria-selected={view === 'tr'} className={`hm-tab${view === 'tr' ? ' on' : ''}`} onClick={() => go('tr')} onKeyDown={onKey}>TR</button>
        <span className="hm-thumb" data-v={view} aria-hidden="true" />
      </div>

      <div className="hm-stage">
        <div className="hm-card hm-out">
          {view === 'etp' ? <HmEtpOut c={c} /> : <HmTrOut c={c} />}
        </div>

        <div className={`hm-bridge${bridgeShown ? ' show' : ''}`} aria-hidden="true"><Chev /></div>

        <div className="hm-card hm-form">
          <div className="hm-card-head">{cfg.head}</div>
          {view === 'etp' ? <HmEtpForm c={c} /> : <HmTrForm c={c} />}
        </div>
      </div>
    </div>
  );
};

/* ── SECTION 1 · HERO ──────────────────────────────────── */
const Hero = () => (
  <header className="v4-hero" id="top" data-screen-label="Hero">
    <div className="v4-hero-inner">
      <div className="v4-hero-copy">
        <div className="v4-ix r">Modelos oficiais da AGU · Lei 14.133/2021</div>
        <h1 className="r d1">
          Pra quem faz licitação <span className="soft">sem ter um especialista do lado.</span>
        </h1>
        <p className="v4-hero-sub r d2">
          Você responde o que importa; o Licitato monta a sequência de documentos, do ETP ao
          contrato, <strong>coerentes entre si e prontos pra auditoria</strong>. Sem você dominar a lei.
        </p>
        <div className="v4-hero-cta r d3">
          <a href={CAL_HREF} onClick={openContact} className="v4-btn lg">
            Agendar uma conversa <Chev className="arr" />
          </a>
        </div>
      </div>
      <div className="v4-hero-visual r d2">
        <HeroMock />
      </div>
    </div>
  </header>
);

/* ── SECTION 2 · O PROBLEMA ────────────────────────────── */
const Problem = () => (
  <section className="v4-sec v4-blueprint" id="problema" data-screen-label="O problema">
    <div className="v4-sec-inner">
      <div className="v4-prob-head">
        <div className="v4-ix r">02 · O problema</div>
        <h2 className="v4-h2 r d1">
          A cada documento, a mesma dúvida: o que vai em cada lugar?
        </h2>
        <p className="v4-lead r d2">
          Você parte do modelo, mas será que está atualizado? Aquela justificativa vai naquele
          lugar? E pra essa nova situação, o que vai ali? Sempre sobra alguma ponta que não fecha.
        </p>
      </div>

      <div className="v4-axes">
        <div className="v4-axis r d1">
          <h3 className="v4-axis-h"><span className="n">1</span> De um lado, o volume.</h3>
          <p>
            Muitos documentos, todos diferentes, a cada contratação. ETP, TR, pesquisa de preços,
            edital, contrato. E quase nunca há equipe dedicada: é você,{' '}
            <mark className="v4-mark">acumulando função</mark>, com o prazo em cima.
          </p>
        </div>

        <div className="v4-axis r d2">
          <h3 className="v4-axis-h"><span className="n">2</span> Do outro, a responsabilidade.</h3>
          <p>
            Na hora de mandar pro jurídico ou pro controle, a dúvida sempre vem:{' '}
            <mark className="v4-mark">será que é isso?</mark> Edital genérico, escolha mal
            justificada — vira apontamento, devolução, retrabalho. Ou pior, vira impugnação ou falha.
          </p>
        </div>
      </div>

      <figure className="v4-pull r">
        <q>Não sei o que colocar aqui.</q>
      </figure>

      <div className="v4-close r">
        <span className="v4-close-lead">Você dá um jeito — sempre dá.</span>
        <span className="v4-close-turn">A questão é: fica seguro e confiante, ou só entrega?</span>
      </div>
    </div>
  </section>
);

/* ── SECTION 3 · O JEITO DE HOJE NÃO FECHA ────────────── */
const PATHS = [
  {
    n: '01', name: 'Copiar o de antes.',
    good: 'é rápido, você já tem em mãos, não parte do zero.',
    bad: 'você herda o que já vinha errado, o modelo não se molda ao caso novo, e a ponta que você não sabia preencher continua sem resposta. Copiar não te diz o que colocar.',
  },
  {
    n: '02', name: 'A IA genérica.',
    good: 'instantânea, de graça, já aberta na tela.',
    bad: 'responde um pedaço, não a peça inteira — e os pedaços não conversam entre si. Às vezes inventa artigo e jurisprudência que não existem. E você não tem como saber se acertou.',
  },
  {
    n: '03', name: 'O modelo oficial, na mão.',
    good: 'é o modelo certo, oficial, de graça — o da AGU.',
    bad: 'a folha não diz o que vai em cada campo, nem por quê. Um documento não encadeia no outro — você redigita, e as peças acabam se contradizendo. E ninguém confere antes de sair.',
  },
  {
    n: '04', name: 'A assessoria.',
    good: 'é gente que entende de verdade, e tira o peso de cima de você.',
    bad: 'você espera — pela agenda, pela resposta, pela vez. Pede de novo a mesma coisa. E o que ela sabe vai embora com ela: não fica no seu órgão.',
  },
];

const Ways = () => (
  <section className="v4-sec dark v4-dots" id="jeito" data-screen-label="O jeito de hoje não fecha">
    <div className="v4-sec-inner">
      <div className="v4-s3-head">
        <div className="v4-ix on-dark r">03 · O jeito de hoje não fecha</div>
        <h2 className="v4-h2 r d1">
          Cada jeito de hoje resolve uma parte.{' '}
          <span className="v4-s3-chi">O rápido não é seguro; o seguro não é rápido.</span>
        </h2>
      </div>

      <div className="v4-paths">
        {PATHS.map((p, i) => (
          <article className={`v4-path r d${i + 1}`} key={p.n}>
            <div className="v4-path-h">
              <span className="v4-path-n">{p.n}</span>
              <h3>{p.name}</h3>
            </div>
            <div className="v4-pl good">
              <span className="v4-pl-ico"><Chev /></span>
              <p><span className="lbl">O bom:</span> {p.good}</p>
            </div>
            <div className="v4-pl bad">
              <span className="v4-pl-ico"><BrokenChev /></span>
              <p><span className="lbl">Onde trava:</span> {p.bad}</p>
            </div>
          </article>
        ))}
      </div>

      <p className="v4-s3-close r">
        No fim, é sempre uma de duas: ou você fica sozinho com a dúvida, ou na dependência de alguém.{' '}
        <span className="turn">Nos dois casos, o risco continua sendo seu.</span>
      </p>
    </div>
  </section>
);

/* ── SECTION 4 · IMAGINE ASSIM ─────────────────────────── */
const Imagine = () => (
  <section className="v4-sec v4-imagine" id="imagine" data-screen-label="Imagine assim">
    <div className="v4-sec-inner">
      <div className="v4-ix r">04 · Imagine assim</div>
      <h2 className="v4-imagine-h r d1">
        E se você não precisasse saber licitar pra entregar a licitação certa?
      </h2>
      <div className="v4-imagine-flow r d2" aria-hidden="true">
        <span><Chev /></span><span><Chev /></span><span><Chev /></span>
      </div>
      <div className="v4-imagine-body">
        <p className="r d2">
          Você responde só o que importa. O documento toma forma — e se sustenta.
          Sem dominar a lei, sem esperar ninguém.
        </p>
        <p className="r d3">
          E quando é a cadeia toda, um documento já encaminha o próximo. Você revisa e
          segue: sem recomeçar, sem um contradizer o outro.
        </p>
      </div>
    </div>
  </section>
);

/* ── SECTION 5 · O QUE É O LICITATO ───────────────────── */
const Product = () => (
  <section className="v4-sec" id="produto" data-screen-label="O que é o Licitato">
    <div className="v4-sec-inner">
      <div className="v4-ix r">05 · O que é o Licitato</div>
      <div className="v4-prod-cat r d1">
        <span className="v4-prod-mark" aria-hidden="true"><img src={window.LICITATO_MARK} alt="" /></span>
        <p>
          O <span className="name">Licitato</span> é a plataforma que monta os documentos da sua
          licitação — pra quem faz isso sem ter um especialista do lado.
        </p>
      </div>

      <div className="v4-steps">
        <div className="v4-step r d1">
          <div className="v4-step-n">1</div>
          <h3>Comece de onde você está.</h3>
          <p>
            Tem um DFD, uma requisição ou uma contratação parecida? Suba: o Licitato lê e já
            preenche o que dá. Não tem? Responde só o que importa.
          </p>
        </div>

        <div className="v4-step r d2">
          <div className="v4-step-n">2</div>
          <h3>O Licitato monta a cadeia.</h3>
          <p>
            Um documento já encaminha o próximo — ETP, TR, edital, contrato — coerentes entre si,
            sem você redigitar nem recomeçar.
          </p>
        </div>

        <div className="v4-step r d3">
          <div className="v4-step-n">3</div>
          <h3>Sobre modelo oficial, conferido.</h3>
          <p>
            Tudo sai sobre os modelos validados da AGU, na Lei 14.133. Você revisa e exporta.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ── SECTION 6 · A CONTRATAÇÃO DÁ CERTO ─────────────────── */
const FLOW_INPUTS = [
  { t: 'Um DFD ou requisição' },
  { t: 'Uma contratação anterior' },
  { t: 'Um objeto parecido' },
];
const FLOW_NODES = [
  { a: 'ETP', nm: 'Estudo Técnico Preliminar' },
  { a: 'TR', nm: 'Termo de Referência' },
  { a: 'MR', nm: 'Mapa de Riscos' },
  { pub: true, nm: 'Publicação', line: 'Edital, dispensa ou inexigibilidade' },
  { a: 'TC', nm: 'Termo de Contrato' },
];
const ChainDiagram = () => (
  <div className="v4-chainwrap r">
    <div className="cf-stage">
      <div className="cf-stage-min">
        <div className="cf-inputs">
          {FLOW_INPUTS.map((inp, i) => (
            <div className="cf-input" key={i}>
              <div className="t">{inp.t}</div>
            </div>
          ))}
        </div>
        <div className="cf-converge" aria-hidden="true">
          <svg viewBox="0 0 70 200">
            <path d="M0,29 C38,29 28,100 70,100" />
            <path d="M0,100 L70,100" />
            <path d="M0,171 C38,171 28,100 70,100" />
          </svg>
        </div>
        <div className="cf-chain">
          {FLOW_NODES.map((n, i) => (
            <React.Fragment key={i}>
              <div className={`cf-node${n.pub ? ' pub' : ''}`}>
                {n.pub ? (
                  <React.Fragment>
                    <div className="abbr">{n.nm}</div>
                    <div className="nm">{n.line}</div>
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <div className="abbr">{n.a}</div>
                    <div className="nm">{n.nm}</div>
                  </React.Fragment>
                )}
              </div>
              {i < FLOW_NODES.length - 1 && (
                <div className="cf-conn"><span className="cf-dot" style={{ animationDelay: `${i * 0.45}s` }} /></div>
              )}
            </React.Fragment>
          ))}
        </div>
        {/* bypass: convergence point → TR direct, skipping ETP (e.g. dispensa) */}
        <svg className="cf-bypass" viewBox="0 0 260 200" aria-hidden="true">
          <circle className="cf-bypass-dot" cx="0" cy="100" r="2.6" />
          <path className="cf-bypass-line" d="M0,100 C7,48 22,22 64,22 L156,22 C186,22 200,33 200,50" />
          <path className="cf-bypass-head" d="M200,60 L194.5,50 L205.5,50 Z" />
        </svg>
      </div>
    </div>
    <p className="cf-caption">
      <strong>Cada documento nasce do anterior</strong> — sem redigitar, sem um contradizer o outro.
    </p>
  </div>
);

const THEMES = [
  {
    n: '01', title: 'Você dá conta sozinho.',
    value: 'Responde só o que importa pra aquela contratação. O Licitato preenche o usual; você confere, em vez de adivinhar.',
    points: [
      'Pergunta só o que aquele caso exige.',
      'Sobe um DFD, requisição ou contratação parecida e ele puxa a maior parte.',
      'O que ficava esperando na fila de alguém acontece na hora.',
    ],
  },
  {
    n: '02', title: 'Sai certo, mesmo sem dominar a lei.',
    value: 'Você não precisa saber tudo pra entregar uma peça que atende a necessidade, e não é genérica.',
    points: [
      'Texto oficial da AGU, na Lei 14.133 — sem inventar artigo nem cláusula.',
      'Aponta a incompatibilidade e mostra a consequência antes de você decidir.',
      'Levanta a justificativa que costuma faltar — a que o controle cobra depois.',
    ],
  },
  {
    n: '03', title: 'Um documento puxa o próximo.', wide: true,
    value: 'Você não recomeça a cada peça. Um documento encaminha o outro, coerentes entre si — contratação toda conversa entre si.',
    points: [
      'ETP, TR, publicação, contrato: o dado e a decisão fluem de um pro outro.',
    ],
  },
];

const Value = () => {
  const refs = React.useRef([]);
  const focus = (idx) => refs.current.forEach((el, i) => { if (el) el.classList.toggle('active', i === idx); });
  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const mid = (window.innerHeight || 0) / 2;
        let best = 0, bestD = Infinity;
        refs.current.forEach((el, i) => {
          if (!el) return;
          const r = el.getBoundingClientRect();
          const d = Math.abs((r.top + r.height / 2) - mid);
          if (d < bestD) { bestD = d; best = i; }
        });
        focus(best);
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); };
  }, []);
  const Body = (t) => (
    <React.Fragment>
      <span className="v4-theme-n">{t.n}</span>
      <div className="v4-theme-lead">
        <h3>{t.title}</h3>
        <p className="v4-theme-val">{t.value}</p>
      </div>
      <ul className="v4-theme-pts">
        {t.points.map((p, j) => <li key={j}><span className="ic"><Chev /></span>{p}</li>)}
      </ul>
    </React.Fragment>
  );
  return (
    <section className="v4-sec v4-value" id="valor" data-screen-label="A contratação dá certo">
      <div className="v4-sec-inner">
        <div className="v4-val-head">
          <div className="v4-ix r">06 · A contratação dá certo</div>
          <h2 className="v4-h2 r d1">No fim, importa uma coisa: <span className="v4-accent-ink">a contratação dá certo</span>.</h2>
          <p className="v4-val-bridge r d2">
            Atende a necessidade, sai no prazo e não volta — sem você dominar a lei nem depender de ninguém.
          </p>
        </div>
        <div className="v4-themes">
          {THEMES.map((t, i) => (
            <article
              key={t.n}
              ref={(el) => { refs.current[i] = el; }}
              className={`v4-theme r d${i + 1}${t.wide ? ' wide' : ''}${i === 0 ? ' active' : ''}`}
              onClick={() => focus(i)}
              tabIndex={0}
              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); focus(i); } }}
            >
              {t.wide ? (
                <React.Fragment>
                  <div className="v4-theme-top">{Body(t)}</div>
                  <ChainDiagram />
                </React.Fragment>
              ) : (
                Body(t)
              )}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ── SECTION 7 · FAQ ────────────────────────────────────── */
const FAQS = [
  {
    q: 'Já tenho assessoria. Pra que o Licitato?',
    a: 'A assessoria continua sendo sua quando você quiser. O Licitato é pra você não depender dela no dia a dia: o que ficava na fila — esperando agenda, resposta, disponibilidade — você resolve na hora, e o conhecimento fica no seu órgão, não vai embora com ninguém.',
  },
  {
    q: 'E se eu uso meus próprios modelos?',
    a: 'Sim. Você pode partir dos modelos oficiais da AGU ou trazer os do seu órgão, e adaptar requisitos, regulamentos e legislação municipal ao seu contexto — mantendo a coerência entre os documentos e a rastreabilidade de cada campo.',
  },
  {
    q: 'Quanto tempo leva pra aprender a usar?',
    a: 'Você não precisa aprender a lei nem a ferramenta. Responde em linguagem simples o que a contratação pede, e o sistema guia o resto. Quem nunca usou monta o primeiro documento no primeiro dia.',
  },
  {
    q: 'E se o documento sair errado? Quem garante?',
    a: 'Você continua sendo quem revisa e assina — o Licitato não decide no seu lugar. O que ele faz é estreitar a margem de erro: texto oficial da AGU em vez de modelo aleatório, aviso de incompatibilidade antes de você decidir, e a justificativa que o controle costuma cobrar já levantada. Você entrega com mais base, não no escuro.',
  },
  {
    q: 'Como confio num documento que uma IA ajudou a escrever?',
    a: 'Porque a parte que tem peso jurídico não é escrita livremente: o texto oficial vem dos modelos da AGU, verbatim, e o sistema não inventa artigo nem cláusula. Você continua sendo o autor — responde, revisa e assina. A tecnologia organiza e preenche; ela não decide pela lei.',
  },
];
const FAQ = () => (
  <section className="v4-sec v4-blueprint" id="faq" data-screen-label="Perguntas frequentes">
    <div className="v4-sec-inner">
      <div className="v4-faq-head">
        <div className="v4-ix r">07 · Perguntas frequentes</div>
      </div>
      <div className="v4-faq-list">
        {FAQS.map((f, i) => (
          <details className="v4-faq-item r" key={i}>
            <summary>
              <span className="v4-faq-q">{f.q}</span>
              <span className="v4-faq-ic" aria-hidden="true"><Chev /></span>
            </summary>
            <div className="v4-faq-a"><p>{f.a}</p></div>
          </details>
        ))}
      </div>
    </div>
  </section>
);

/* ── SECTION 8 · QUEM ESTÁ ATRÁS ─────────────────────────── */
const Behind = () => (
  <section className="v4-sec dark v4-dots v4-behind" id="quem" data-screen-label="Quem está atrás">
    <div className="v4-sec-inner">
      <div className="v4-ix on-dark r">08 · Quem está atrás</div>
      <div className="v4-behind-grid">
        <h2 className="r d1">A gente sabe como é o dia a dia de quem licita.</h2>
        <p className="r d2">
          Feita por advogados com <b>mais de 20 anos</b> assessorando órgãos, estruturando áreas de
          compras e redigindo documentos. Toda essa experiência, dentro de uma plataforma.
        </p>
      </div>
    </div>
  </section>
);

/* ── SECTION 9 · CTA FINAL ──────────────────────────────── */
const FinalCTA = () => (
  <section className="v4-sec dark v4-cta" id="agendar" data-screen-label="CTA final">
    <div className="v4-sec-inner">
      <img className="v4-cta-mark r" src={window.LICITATO_MARK} alt="" aria-hidden="true" />
      <h2 className="r d1">Veja o Licitato montar a sua próxima contratação.</h2>
      <p className="v4-cta-sub r d2">
        Sem compromisso: a gente mostra como funciona com um caso seu, do ETP ao contrato.
      </p>
      <div className="v4-cta-actions r d3">
        <a href={CAL_HREF} onClick={openContact} className="v4-btn lg">Agendar uma conversa <Chev className="arr" /></a>
      </div>
    </div>
  </section>
);

/* ── FOOTER ─────────────────────────────────────────────── */
const Footer = () => (
  <footer className="v4-footer">
    <div className="v4-footer-inner">
      <div className="v4-footer-top">
        <a href="#top" className="v4-footer-logo" aria-label="licitato.ia">
          <img src={window.LICITATO_LOGO_WHITE_NT} alt="licitato.ia" />
        </a>
        <div className="v4-footer-actions">
          <a href={CAL_HREF} onClick={openContact} className="v4-btn sm">Agendar uma conversa <Chev className="arr" /></a>
          <a href="mailto:contato@licitato.ia.br" className="v4-footer-email">contato@licitato.ia.br</a>
        </div>
      </div>
      <div className="v4-footer-bottom">
        <span>Modelos oficiais da AGU · Lei nº 14.133/2021</span>
        <span>© {new Date().getFullYear()} Licitato</span>
      </div>
    </div>
  </footer>
);

/* ── STICKY MOBILE CTA ─────────────────────────────────── */
const StickyCTA = () => {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const h = () => setShow(window.scrollY > window.innerHeight * 0.7);
    h(); window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <div className={`v4-sticky${show ? ' show' : ''}`}>
      <a href={CAL_HREF} onClick={openContact} className="v4-btn">Agendar uma conversa <Chev className="arr" /></a>
    </div>
  );
};

/* ── CONTACT MODAL (lead capture → POST /v1/prospects) ──── */
const maskTelBR = (v) => {
  const d = v.replace(/\D/g, '').slice(0, 11);
  if (d.length <= 2) return d.replace(/^(\d{0,2})/, '($1');
  if (d.length <= 6) return d.replace(/^(\d{2})(\d{0,4})/, '($1) $2');
  if (d.length <= 10) return d.replace(/^(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3');
  return d.replace(/^(\d{2})(\d{5})(\d{0,4})/, '($1) $2-$3');
};
const isEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((v || '').trim());

const ContactModal = () => {
  const [open, setOpen] = React.useState(false);
  const [status, setStatus] = React.useState('idle'); // idle | sending | done | error
  const [errMsg, setErrMsg] = React.useState('');
  const [touched, setTouched] = React.useState({});
  const [form, setForm] = React.useState({ nome: '', nome_orgao: '', email: '', telefone: '', anotacoes: '' });
  const firstRef = React.useRef(null);

  const close = React.useCallback(() => setOpen(false), []);
  const reset = () => {
    setStatus('idle'); setErrMsg(''); setTouched({});
    setForm({ nome: '', nome_orgao: '', email: '', telefone: '', anotacoes: '' });
  };

  React.useEffect(() => {
    const onOpen = () => { reset(); setOpen(true); };
    window.addEventListener('licitato:open-contact', onOpen);
    return () => window.removeEventListener('licitato:open-contact', onOpen);
  }, []);

  React.useEffect(() => {
    if (!open) return undefined;
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const t = setTimeout(() => { if (firstRef.current) firstRef.current.focus(); }, 60);
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prevOverflow; clearTimeout(t); };
  }, [open, close]);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: k === 'telefone' ? maskTelBR(e.target.value) : e.target.value }));
  const touch = (k) => setTouched((t) => ({ ...t, [k]: true }));

  const nomeOk = form.nome.trim().length >= 2;
  const emailOk = isEmail(form.email);
  const formOk = nomeOk && emailOk;

  const submit = async (e) => {
    e.preventDefault();
    setTouched({ nome: true, email: true });
    if (!formOk || status === 'sending') return;
    setStatus('sending'); setErrMsg('');
    try {
      const res = await fetch(PROSPECTS_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          nome: form.nome.trim(),
          nome_orgao: form.nome_orgao.trim(),
          email: form.email.trim(),
          telefone: form.telefone.trim(),
          anotacoes: form.anotacoes.trim(),
          origem: 'website',
        }),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setStatus('done');
    } catch (err) {
      setStatus('error');
      setErrMsg('Não foi possível enviar agora. Tente novamente ou escreva para contato@licitato.ia.br.');
    }
  };

  if (!open) return null;

  return (
    <div className="cm-overlay" role="dialog" aria-modal="true" aria-labelledby="cm-title" onMouseDown={(e) => { if (e.target === e.currentTarget) close(); }}>
      <div className="cm-card">
        <button type="button" className="cm-close" aria-label="Fechar" onClick={close}>
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" /></svg>
        </button>

        {status === 'done' ? (
          <div className="cm-done">
            <span className="cm-done-ic"><Check /></span>
            <h3 id="cm-title">Contato enviado!</h3>
            <p>Recebemos seus dados e o time do Licitato vai entrar em contato em breve.</p>
            <button type="button" className="v4-btn" onClick={close}>Fechar</button>
          </div>
        ) : (
          <React.Fragment>
            <div className="cm-head">
              <div className="v4-ix">Fale com a gente</div>
              <h3 id="cm-title">Veja o Licitato na sua próxima contratação.</h3>
              <p className="cm-sub">Preencha seus dados e a gente entra em contato para mostrar como funciona, do ETP ao contrato.</p>
            </div>

            <form className="cm-form" onSubmit={submit} noValidate>
              <div className="cm-field">
                <label htmlFor="cm-nome">Nome <span className="cm-req">*</span></label>
                <input id="cm-nome" ref={firstRef} className={`cm-input${touched.nome && !nomeOk ? ' err' : ''}`} type="text" autoComplete="name"
                  value={form.nome} onChange={set('nome')} onBlur={() => touch('nome')} placeholder="Seu nome completo" />
                {touched.nome && !nomeOk && <span className="cm-err">Informe seu nome.</span>}
              </div>

              <div className="cm-field">
                <label htmlFor="cm-orgao">Órgão / Empresa</label>
                <input id="cm-orgao" className="cm-input" type="text" autoComplete="organization"
                  value={form.nome_orgao} onChange={set('nome_orgao')} placeholder="Onde você trabalha" />
              </div>

              <div className="cm-row">
                <div className="cm-field">
                  <label htmlFor="cm-email">E-mail <span className="cm-req">*</span></label>
                  <input id="cm-email" className={`cm-input${touched.email && !emailOk ? ' err' : ''}`} type="email" inputMode="email" autoComplete="email"
                    value={form.email} onChange={set('email')} onBlur={() => touch('email')} placeholder="voce@orgao.gov.br" />
                  {touched.email && !emailOk && <span className="cm-err">Informe um e-mail válido.</span>}
                </div>
                <div className="cm-field">
                  <label htmlFor="cm-tel">Telefone</label>
                  <input id="cm-tel" className="cm-input" type="tel" inputMode="tel" autoComplete="tel"
                    value={form.telefone} onChange={set('telefone')} maxLength={16} placeholder="(00) 00000-0000" />
                </div>
              </div>

              <div className="cm-field">
                <label htmlFor="cm-msg">Como podemos ajudar?</label>
                <textarea id="cm-msg" className="cm-input cm-textarea" rows={3}
                  value={form.anotacoes} onChange={set('anotacoes')} placeholder="Conte um pouco sobre a contratação que você precisa fazer (opcional)." />
              </div>

              {status === 'error' && <div className="cm-alert">{errMsg}</div>}

              <button type="submit" className="v4-btn lg cm-submit" disabled={status === 'sending'}>
                {status === 'sending' ? 'Enviando…' : <React.Fragment>Enviar contato <Chev className="arr" /></React.Fragment>}
              </button>
              <p className="cm-fine">Seus dados são usados só para este contato. Sem spam.</p>
            </form>
          </React.Fragment>
        )}
      </div>
    </div>
  );
};

/* ── APP (Part 1 — Hero only; sections added incrementally) ── */
const LPApp = () => (
  <React.Fragment>
    <div className="v4-grain" />
    <RevealInit />
    <Nav />
    <main>
      <Hero />
      <Problem />
      <Ways />
      <Imagine />
      <Product />
      <Value />
      <FAQ />
      <Behind />
      <FinalCTA />
    </main>
    <Footer />
    <StickyCTA />
    <ContactModal />
  </React.Fragment>
);

window.LPApp = LPApp;
window.LP = { Chev, Check, CAL_HREF, openContact };