/* ============================================================
   Bootcamp ESUP — Formulário de aplicação, FAQ, CTA final, Footer
   ============================================================ */

function ApplyForm() {
  const [data, setData] = React.useState({ nome: "", email: "", whats: "", idade: "", perfil: "Futuro aluno", ideia: "Ainda não — quero descobrir", motivo: "" });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const set = (k, v) => { setData(d => ({ ...d, [k]: v })); setErrors(e => ({ ...e, [k]: undefined })); };

  const perfis = ["Futuro aluno", "Estudante", "Pai / Responsável", "Profissional em transição"];
  const ideias = ["Sim, tenho uma ideia", "Tenho mais de uma", "Ainda não — quero descobrir"];

  const validate = () => {
    const e = {};
    if (!data.nome.trim()) e.nome = "Conta pra gente seu nome.";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(data.email)) e.email = "E-mail inválido.";
    if (data.whats.replace(/\D/g, "").length < 10) e.whats = "WhatsApp com DDD, por favor.";
    if (data.motivo.trim().length < 20) e.motivo = "Escreva um pouco mais (mín. 20 caracteres).";
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) {
      setSent(true);
      try { window.scrollTo({ top: document.getElementById("inscricao").offsetTop - 60, behavior: "smooth" }); } catch (_) {}
    } else {
      const first = document.querySelector(".field .invalid");
      if (first) first.focus();
    }
  };

  return (
    <section className="section apply" id="inscricao" data-screen-label="Inscrição">
      <div className="apply__deco" aria-hidden="true">
        <svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
          <defs>
            <radialGradient id="ag1" cx="85%" cy="15%" r="55%"><stop offset="0%" stopColor="rgba(22,169,201,.22)" /><stop offset="100%" stopColor="rgba(22,169,201,0)" /></radialGradient>
            <radialGradient id="ag2" cx="10%" cy="95%" r="55%"><stop offset="0%" stopColor="rgba(242,183,5,.16)" /><stop offset="100%" stopColor="rgba(242,183,5,0)" /></radialGradient>
          </defs>
          <rect width="100%" height="100%" fill="url(#ag1)" /><rect width="100%" height="100%" fill="url(#ag2)" />
        </svg>
      </div>
      <div className="wrap apply__grid">
        <div className="apply__intro reveal">
          <span className="eyebrow" style={{ color: "var(--cyan)" }}><span style={{ background: "var(--cyan)" }}></span>Processo seletivo — 20 vagas</span>
          <h2 style={{ marginTop: 14 }}>Candidate-se à sua vaga subsidiada.</h2>
          <p className="lede">
            Esta não é uma inscrição comum: é uma aplicação. Como são apenas <b style={{ color: "#fff" }}>20 vagas</b>,
            queremos conhecer você e entender sua motivação. O que conta é a vontade de agir.
          </p>
          <ul className="apply__why">
            <li><span className="chk"><Icon name="check" size={15} /></span><span>Curso 100% subsidiado pela Faculdade ESUP — sem mensalidade.</span></li>
            <li><span className="chk"><Icon name="check" size={15} /></span><span>Diploma de extensão de 24h para frequência ≥ 75%.</span></li>
            <li><span className="chk"><Icon name="check" size={15} /></span><span>Presencial na {BOOTCAMP.place}, de {BOOTCAMP.dates}.</span></li>
          </ul>
          <div className="apply__seatbar">
            <div className="row"><span>Vagas preenchidas</span><b>{BOOTCAMP.seatsTotal - BOOTCAMP.seatsLeft} / {BOOTCAMP.seatsTotal}</b></div>
            <div className="apply__track"><div className="apply__fill" style={{ width: ((BOOTCAMP.seatsTotal - BOOTCAMP.seatsLeft) / BOOTCAMP.seatsTotal * 100) + "%" }}></div></div>
          </div>
        </div>

        <div className="reveal">
          {sent ? (
            <div className="form form--done">
              <div className="badge"><Icon name="check" size={38} /></div>
              <h3>Aplicação enviada! 🎉</h3>
              <p>Obrigado, {data.nome.split(" ")[0]}. Recebemos sua candidatura. Vamos analisar as inscrições e chamar os selecionados pelo WhatsApp e e-mail informados. Fica de olho!</p>
              <button className="btn btn--ghost" style={{ marginTop: 22 }} onClick={() => { setSent(false); setData({ nome: "", email: "", whats: "", idade: "", perfil: "Futuro aluno", ideia: "Ainda não — quero descobrir", motivo: "" }); }}>Enviar outra candidatura</button>
            </div>
          ) : (
            <form className="form" onSubmit={submit} noValidate>
              <div className="form__head">
                <h3>Formulário de candidatura</h3>
                <p>Leva 2 minutos. Capriche no "por quê" — é o que mais pesa na seleção.</p>
              </div>
              <div className="fgrid">
                <div className="field full">
                  <label>Nome completo <span className="req">*</span></label>
                  <input className={errors.nome ? "invalid" : ""} value={data.nome} onChange={e => set("nome", e.target.value)} placeholder="Seu nome" />
                  {errors.nome && <span className="err">{errors.nome}</span>}
                </div>
                <div className="field">
                  <label>E-mail <span className="req">*</span></label>
                  <input type="email" className={errors.email ? "invalid" : ""} value={data.email} onChange={e => set("email", e.target.value)} placeholder="voce@email.com" />
                  {errors.email && <span className="err">{errors.email}</span>}
                </div>
                <div className="field">
                  <label>WhatsApp <span className="req">*</span></label>
                  <input className={errors.whats ? "invalid" : ""} value={data.whats} onChange={e => set("whats", e.target.value)} placeholder="(00) 00000-0000" />
                  {errors.whats && <span className="err">{errors.whats}</span>}
                </div>
              </div>

              <div className="field">
                <label>Você é...</label>
                <div className="chips">
                  {perfis.map(p => (
                    <button type="button" key={p} className={"chip" + (data.perfil === p ? " on" : "")} onClick={() => set("perfil", p)}>{p}</button>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>Você já tem uma ideia de negócio?</label>
                <div className="chips">
                  {ideias.map(p => (
                    <button type="button" key={p} className={"chip" + (data.ideia === p ? " on" : "")} onClick={() => set("ideia", p)}>{p}</button>
                  ))}
                </div>
                <span className="hint">Sem problema se ainda não tiver — é pra isso que o bootcamp existe.</span>
              </div>

              <div className="field">
                <label>Por que você quer participar? <span className="req">*</span></label>
                <textarea className={errors.motivo ? "invalid" : ""} value={data.motivo} onChange={e => set("motivo", e.target.value)} placeholder="Conta o que te move, o que você espera descobrir ou construir nesses 4 dias..." />
                {errors.motivo ? <span className="err">{errors.motivo}</span> : <span className="hint">É a pergunta que mais pesa na seleção. Seja você mesmo.</span>}
              </div>

              <div className="form__submit">
                <button className="btn btn--primary btn--lg" type="submit">Enviar minha candidatura <Icon name="arrow" size={20} className="arw" /></button>
              </div>
              <p className="form__fine">Ao enviar, você concorda em ser contatado pela equipe da ESUP sobre o processo seletivo.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Faq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq" data-screen-label="FAQ">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">Dúvidas frequentes</span>
          <h2>Tudo que você precisa saber.</h2>
        </div>
        <div className="faq">
          {FAQS.map((f, i) => (
            <div className={"faq__item reveal" + (open === i ? " open" : "")} key={i}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                {f.q}<span className="tog"><Icon name="plus" size={18} /></span>
              </button>
              <div className="faq__a" style={{ maxHeight: open === i ? "260px" : "0" }}>
                <div className="faq__a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCta({ onApply }) {
  return (
    <section className="section section--tight finalcta" data-screen-label="CTA final">
      <div className="wrap reveal">
        <span className="eyebrow center" style={{ display: "inline-flex", marginBottom: 18 }}>O próximo passo é seu</span>
        <h2>A ideia já está em você.<br />Falta entrar em ação.</h2>
        <p className="lede">São 4 dias que podem mudar a forma como você enxerga sua carreira. E só 20 pessoas vão viver isso.</p>
        <button className="btn btn--primary btn--lg" onClick={onApply}>Garantir minha candidatura <Icon name="arrow" size={20} className="arw" /></button>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__grid">
          <div>
            <span className="footer__logo"><img src="assets/logo-inovaesup.png" alt="InovaESUP" /></span>
            <p>Escola de Negócios ESUP — Educação que transforma, inovação que lidera. Formando executores ágeis, não apenas planejadores.</p>
          </div>
          <div>
            <h5>Bootcamp</h5>
            <ul>
              <li><a href="#problema">Por que agir</a></li>
              <li><a href="#metodo">Metodologia</a></li>
              <li><a href="#modulos">Os 6 módulos</a></li>
              <li><a href="#faq">Dúvidas</a></li>
            </ul>
          </div>
          <div>
            <h5>Realização</h5>
            <ul>
              <li><span style={{ display: "flex", gap: 8 }}><Icon name="calendar" size={16} /> {BOOTCAMP.dates}</span></li>
              <li><span style={{ display: "flex", gap: 8 }}><Icon name="pin" size={16} /> {BOOTCAMP.place}</span></li>
              <li><span style={{ display: "flex", gap: 8 }}><Icon name="badge" size={16} /> Diploma de 24h</span></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2025 Escola de Negócios ESUP · InovaESUP. Todos os direitos reservados.</span>
          <span>Vagas limitadas · Transforme sua ideia em realidade.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ApplyForm, Faq, FinalCta, Footer });