// REALIZE.CONTENT — Contact section (Web3Forms)
const Contact = () => {
  const [form, setForm] = React.useState({
    nome: '', email: '', projeto: '', mensagem: ''
  });
  const [status, setStatus] = React.useState('idle'); // idle | sending | success | error
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handle = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          access_key: '9574963d-4a85-4f85-a70a-997480c7ec7b',
          subject: `Novo contato pelo site${form.projeto ? ' — ' + form.projeto : ''}`,
          from_name: 'Site REALIZE.CONTENT',
          name: form.nome,
          email: form.email,
          'Tipo de projeto': form.projeto,
          message: form.mensagem,
        }),
      });
      const data = await res.json();
      if (data.success) {
        setStatus('success');
        setForm({ nome: '', email: '', projeto: '', mensagem: '' });
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };

  const sending = status === 'sending';

  return (
    <section className="contact" id="contato">
      <div className="contact-inner">
        <div>
          <div style={{ fontWeight: 700, fontSize: 14, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 16 }}>
            04. Contato
          </div>
          <h2>Vamos<br />realizar?</h2>
          <p className="sub">Conta o que você quer fazer. Documentário, ficção, série, uma peça de teatro, um evento? A gente quer saber!


          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 24, flexDirection: 'column' }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--realize-carvao)' }}>SEDE

              </div>
              <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>
                Brasília–DF · Asa Norte
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--realize-carvao)' }}>
                Contato direto
              </div>
              <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>
                <a href="mailto:gestao@realizecontent.com.br" style={{ color: 'inherit', textDecoration: 'none' }}>gestao@realizecontent.com.br</a>
              </div>
            </div>
          </div>
        </div>

        <form className="contact-card" onSubmit={handle}>
          <div className="field">
            <label>Seu nome</label>
            <input value={form.nome} onChange={set('nome')} required placeholder="Maria Joana" />
          </div>
          <div className="field">
            <label>E-mail</label>
            <input type="email" value={form.email} onChange={set('email')} required placeholder="voce@dominio.br" />
          </div>
          <div className="field">
            <label>Tipo de projeto</label>
            <input value={form.projeto} onChange={set('projeto')} placeholder="Documentário, ficção, campanha…" />
          </div>
          <div className="field">
            <label>Mensagem</label>
            <textarea value={form.mensagem} onChange={set('mensagem')} required placeholder="Conta um pouco. A gente lê tudo." />
          </div>
          <div className="actions">
            <button type="submit" disabled={sending} className="btn" style={{
              background: 'var(--realize-amarelo)',
              boxShadow: '4px 4px 0 0 var(--realize-rosa)',
              border: '2px solid var(--realize-amarelo)',
              opacity: sending ? 0.7 : 1,
              cursor: sending ? 'wait' : 'pointer'
            }}>
              {sending ? 'Enviando…' : 'Enviar mensagem'}
              {!sending && <img src="assets/graphics/Asset 8.png" alt="" style={{ height: 14 }} />}
            </button>
            {status === 'success' &&
              <div className="form-msg form-msg--ok" role="status">Mensagem enviada. A gente te chama em breve.</div>}
            {status === 'error' &&
              <div className="form-msg form-msg--err" role="alert">Algo deu errado. Tente de novo ou escreva para gestao@realizecontent.com.br.</div>}
          </div>
        </form>
      </div>
    </section>);

};

window.Contact = Contact;