/* sections-close.jsx — Process, FAQ, Vacancies, Final CTA + form, Footer */

function Process() {
  return (
    <section className="section section-paper2" id="processo">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Como começa</span>
          <h2 className="section-title">Quatro passos. Zero ansiedade.</h2>
          <p className="section-sub">Você sabe exatamente o que esperar antes de investir um real.</p>
        </div>
        <div className="proc">
          {PROCESS.map((s, i) => (
            <div className="proc-step reveal" key={i}>
              <div className="pnum">{i + 1}<div className="pbar"></div></div>
              <h4>{s.t}</h4>
              <p>{s.p}</p>
              <div className="pmeta"><Icon name={s.icon} style={{ width: 15, height: 15 }} /> {s.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head reveal" style={{ marginInline: "auto", textAlign: "center", maxWidth: 720 }}>
          <span className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>Perguntas frequentes</span>
          <h2 className="section-title">As perguntas que todo executivo faz.</h2>
        </div>
        <div className="faq">
          {FAQ.map((f, i) => (
            <div className={"faq-item reveal" + (open === i ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {f.q}
                <span className="ic"><Icon name="plus" /></span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 320 : 0 }}>
                <div className="faq-a-inner" dangerouslySetInnerHTML={{ __html: f.a }}></div>
              </div>
            </div>
          ))}
        </div>
        <div className="reveal" style={{ textAlign: "center", marginTop: 44 }}>
          <a className="btn-link" href={CTA_URL} target="_blank" rel="noopener" style={{ fontSize: 18 }}>
            Ainda tem dúvidas? Vamos conversar <Icon name="arrow" />
          </a>
        </div>
      </div>
    </section>
  );
}

function Vacancies() {
  return (
    <section style={{ paddingBottom: "var(--section-y)" }}>
      <div className="container vac reveal">
        <div className="vac-inner">
          <span><span className="vdot"></span> Máximo de <b>20 profissionais por semestre</b></span>
          <span><span className="hot">3 vagas de diagnóstico</span> por semana</span>
          <span>Sem vaga imediata? Agendamos para a janela seguinte.</span>
        </div>
      </div>
    </section>
  );
}

/* Embed inline oficial do Calendly (sem build — injeta o widget.js e inicializa) */
function CalendlyInline() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const init = () => {
      if (window.Calendly && ref.current) {
        ref.current.innerHTML = "";
        window.Calendly.initInlineWidget({ url: CALENDLY_URL, parentElement: ref.current });
      }
    };
    if (window.Calendly) { init(); return; }
    const SRC = "https://assets.calendly.com/assets/external/widget.js";
    let s = document.querySelector('script[src="' + SRC + '"]');
    if (s) { s.addEventListener("load", init); return () => s.removeEventListener("load", init); }
    s = document.createElement("script");
    s.src = SRC; s.async = true; s.onload = init;
    document.body.appendChild(s);
  }, []);
  return <div className="close-embed__widget" ref={ref} />;
}

function FinalCTA() {
  return (
    <section className="section close-final" id="agendar">
      <div className="container">
        <div className="close-card reveal">
          <p className="close-eyebrow"><em>Você já chegou até aqui.</em></p>
          <h2 className="close-title">
            <Icon name="star" />
            <span>Diagnóstico Executivo Gratuito</span>
            <Icon name="check" />
          </h2>

          <div className="close-free">
            <div className="close-free__main">30 minutos</div>
            <div className="close-free__add">+ mini-mapa de gaps por e-mail em 24h</div>
            <div className="close-free__sub">Sem cobrança, sem compromisso</div>
          </div>

          <div className="close-pill">
            <Icon name="spark" /> 3 vagas por semana
          </div>

          <ul className="close-feats">
            <li><Icon name="check" /> Conversa de 30min com o Ryan (sem pitch comercial)</li>
            <li><Icon name="check" /> Mapeamento do seu contexto profissional e nível atual</li>
            <li><Icon name="check" /> Mini-mapa de gaps enviado por e-mail em 24h</li>
            <li><Icon name="check" /> Recomendação de próximo passo (com ou sem o programa)</li>
          </ul>

          <div className="close-embed">
            <CalendlyInline />
          </div>

          <a className="btn btn-primary btn-lg close-cta" href={CALENDLY_URL} target="_blank" rel="noopener">
            AGENDAR MEU DIAGNÓSTICO <Icon name="arrow" />
          </a>

          <div className="close-trust">
            <span><Icon name="calendar" /> Resposta em até 2h</span>
            <span className="sep"></span>
            <span><Icon name="check" /> 100% gratuito</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <a className="brand" href="#top">
          <img src="assets/logo.png" alt="CEO Fluente" style={{ width: 34, height: 34 }} />
          <span className="brand-name">CEO <em style={{ color: "var(--amber-bright)" }}>Fluente</em></span>
        </a>
        <div className="footer-links">
          <a href="#para-quem">Para quem</a>
          <a href="#metodo">Método</a>
          <a href="#case">Case</a>
          <a href="#faq">FAQ</a>
          <a href="#agendar">Agendar meu diagnóstico</a>
        </div>
        <div className="footer-legal">© {new Date().getFullYear()} CEO Fluente · Inglês executivo 1:1 · 100% online</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Process, FaqSection, Vacancies, FinalCTA, Footer });