function RDStationForm() {
  const FORM_ID = 'form-contato-ai-agents-lab-f802618a62c3a274a9dc';
  const UA = 'UA-148000340-1';
  const SCRIPT_SRC = 'https://d335luupugsy2.cloudfront.net/js/rdstation-forms/stable/rdstation-forms.min.js';

  React.useEffect(() => {
    function mount() {
      if (window.RDStationForms) {
        new window.RDStationForms(FORM_ID, UA).createForm();
      }
    }
    let s = document.querySelector('script[src="' + SCRIPT_SRC + '"]');
    if (s && window.RDStationForms) {
      mount();
    } else if (s) {
      s.addEventListener('load', mount);
    } else {
      s = document.createElement('script');
      s.src = SCRIPT_SRC;
      s.async = true;
      s.onload = mount;
      document.body.appendChild(s);
    }
  }, []);

  return <div role="main" id={FORM_ID}></div>;
}

function Signup() {
  return (
    <section id="inscricao" className="signup-section">
      <div className="padding-global">
        <div className="container mid">
          <div className="signup-grid">
            <div>
              <div className="section-eyebrow" style={{ marginBottom: '1.25rem' }}>Inscrição</div>
              <h2 className="h2-bold" style={{ margin: '0 0 1.5rem' }}>Conte sobre seu desafio. A gente avalia o encaixe.</h2>
              <p className="text-regular opacity-80" style={{ margin: '0 0 1.5rem' }}>
                Preencha o formulário ao lado para entrar na seleção. Em até 5 dias úteis, nosso time retorna com a confirmação da edição mais adequada.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '.85rem', marginTop: '2rem' }}>
                {[
                  ['18', 'Junho · Edição 1', 'Quinta · 9h–13h'],
                  ['25', 'Junho · Edição 2', 'Quinta · 9h–13h'],
                ].map(([d, m, t]) => (
                  <div key={d} style={{
                    display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '1.25rem', alignItems: 'center',
                    padding: '1rem 1.25rem', background: 'var(--mt-card-2)', borderRadius: '.75rem',
                    border: '1px solid rgba(255,255,255,.06)'
                  }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: '2.75rem', color: 'var(--mt-orange)', lineHeight: 1, minWidth: '50px' }}>{d}</div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-ui)', fontWeight: 500 }}>{m}</div>
                      <div className="text-small opacity-60">{t}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <RDStationForm />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Signup });