// Contact.jsx — Leandro Rafael Website
const Contact = () => {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ nome: '', email: '', empresa: '', assunto: '', mensagem: '' });
  const [errors, setErrors] = React.useState({});

  const inputStyle = {
    fontFamily: "'Inter', sans-serif", fontSize: 15, color: '#3A3A3A',
    background: '#F7F5F0', border: '1px solid #D6D1C6', borderRadius: 2,
    padding: '12px 16px', width: '100%', outline: 'none',
    transition: 'border-color 200ms',
  };

  const validate = () => {
    const e = {};
    if (!form.nome.trim()) e.nome = true;
    if (!form.email.trim() || !/\S+@\S+\.\S+/.test(form.email)) e.email = true;
    if (!form.assunto) e.assunto = true;
    if (!form.mensagem.trim()) e.mensagem = true;
    return e;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setErrors({});
    setSent(true);
  };

  const fieldStyle = (key) => ({
    ...inputStyle,
    borderColor: errors[key] ? '#C9A961' : '#D6D1C6',
  });

  const assuntos = [
    { value: '', label: 'Selecione um assunto' },
    { value: 'executivo', label: 'Oportunidade executiva' },
    { value: 'conselho', label: 'Conselho ou comitê' },
    { value: 'solvex', label: 'Projeto de consultoria SOLVEX' },
    { value: 'palestra', label: 'Palestra ou aula' },
    { value: 'outro', label: 'Outro' },
  ];

  return React.createElement('section', {
    id: 'contato',
    'data-screen-label': '07 Contato',
    style: { background: '#F7F5F0', padding: '88px 40px' }
  },
    React.createElement('div', { style: { maxWidth: 1280, margin: '0 auto' } },
      React.createElement('div', {
        style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' },
        className: 'contact-grid'
      },

        // Left
        React.createElement('div', null,
          React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#9A9A9A', marginBottom: 16 } }, 'Contato'),
          React.createElement('div', { style: { width: 48, height: 2, background: '#C9A961', marginBottom: 32 } }),
          React.createElement('h2', { style: { fontFamily: "'Playfair Display',serif", fontSize: 'clamp(28px,3vw,44px)', fontWeight: 600, lineHeight: 1.15, letterSpacing: '-0.02em', color: '#0B2447', marginBottom: 14 } },
            'Vamos conversar.'),
          React.createElement('p', { style: { fontFamily: "'Inter',sans-serif", fontSize: 16, lineHeight: 1.72, color: '#6B6B6B', marginBottom: 32 } },
            'Para conselhos, projetos, parcerias com a SOLVEX, convites de palestra ou aulas.'),

          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 36 } },
            ...[
              { label: 'E-mail', value: 'leandrorafael1584@gmail.com', href: 'mailto:leandrorafael1584@gmail.com' },
              { label: 'LinkedIn', value: 'linkedin.com/in/leandrocrafael', href: 'https://linkedin.com/in/leandrocrafael' },
              { label: 'Telefone', value: '(11) 94791-1522', href: 'tel:+5511947911522' },
              { label: 'Localização', value: 'São Paulo, SP', href: null },
            ].map(({ label, value, href }) =>
              React.createElement('div', {
                key: label,
                style: { borderLeft: '2px solid #C9A961', paddingLeft: 16 }
              },
                React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#9A9A9A', marginBottom: 4 } }, label),
                href
                  ? React.createElement('a', {
                      href,
                      target: label === 'LinkedIn' ? '_blank' : undefined,
                      rel: label === 'LinkedIn' ? 'noopener noreferrer' : undefined,
                      style: { fontFamily: "'Inter',sans-serif", fontSize: 15, color: '#0B2447', textDecoration: 'none' }
                    }, value)
                  : React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 15, color: '#3A3A3A' } }, value)
              )
            )
          ),

          // WhatsApp widget — sem frase abaixo
          React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 10, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#9A9A9A', marginBottom: 14 } }, 'Perguntas frequentes — ao vivo'),
          React.createElement(WhatsAppChat, null)
        ),

        // Right: form + quote below
        React.createElement('div', { style: { paddingTop: 66 } },
          sent
            ? React.createElement('div', {
                style: { background: '#EDEAE3', borderTop: '2px solid #C9A961', padding: '56px 40px', textAlign: 'center' }
              },
                React.createElement('div', { style: { fontFamily: "'Playfair Display',serif", fontSize: 24, fontWeight: 600, color: '#0B2447', marginBottom: 12 } }, 'Mensagem recebida.'),
                React.createElement('div', { style: { fontFamily: "'Inter',sans-serif", fontSize: 15, color: '#6B6B6B' } }, 'Responderei em até 48 horas.')
              )
            : React.createElement('form', {
                onSubmit: handleSubmit, noValidate: true,
                'aria-label': 'Formulário de contato',
                style: { background: '#EDEAE3', borderTop: '2px solid #C9A961', padding: '40px' }
              },
                // Nome + Email
                React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 } },
                  ...[
                    { key: 'nome', label: 'Nome *', type: 'text', required: true },
                    { key: 'email', label: 'E-mail *', type: 'email', required: true },
                  ].map(({ key, label, type }) =>
                    React.createElement('div', { key },
                      React.createElement('label', {
                        htmlFor: `field-${key}`,
                        style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: errors[key] ? '#C9A961' : '#9A9A9A', display: 'block', marginBottom: 6 }
                      }, label),
                      React.createElement('input', {
                        id: `field-${key}`, type, value: form[key],
                        onChange: e => setForm({ ...form, [key]: e.target.value }),
                        style: fieldStyle(key),
                        onFocus: e => e.target.style.borderColor = '#0B2447',
                        onBlur: e => e.target.style.borderColor = errors[key] ? '#C9A961' : '#D6D1C6',
                        'aria-required': 'true',
                      })
                    )
                  )
                ),

                // Empresa
                React.createElement('div', { style: { marginBottom: 16 } },
                  React.createElement('label', {
                    htmlFor: 'field-empresa',
                    style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#9A9A9A', display: 'block', marginBottom: 6 }
                  }, 'Empresa (opcional)'),
                  React.createElement('input', {
                    id: 'field-empresa', type: 'text', value: form.empresa,
                    onChange: e => setForm({ ...form, empresa: e.target.value }),
                    style: inputStyle,
                    onFocus: e => e.target.style.borderColor = '#0B2447',
                    onBlur: e => e.target.style.borderColor = '#D6D1C6',
                  })
                ),

                // Assunto
                React.createElement('div', { style: { marginBottom: 16 } },
                  React.createElement('label', {
                    htmlFor: 'field-assunto',
                    style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: errors.assunto ? '#C9A961' : '#9A9A9A', display: 'block', marginBottom: 6 }
                  }, 'Assunto *'),
                  React.createElement('select', {
                    id: 'field-assunto', value: form.assunto,
                    onChange: e => setForm({ ...form, assunto: e.target.value }),
                    style: { ...fieldStyle('assunto'), appearance: 'none', cursor: 'pointer' },
                    onFocus: e => e.target.style.borderColor = '#0B2447',
                    onBlur: e => e.target.style.borderColor = errors.assunto ? '#C9A961' : '#D6D1C6',
                    'aria-required': 'true',
                  },
                    ...assuntos.map(opt =>
                      React.createElement('option', { key: opt.value, value: opt.value, disabled: !opt.value }, opt.label)
                    )
                  )
                ),

                // Mensagem
                React.createElement('div', { style: { marginBottom: 28 } },
                  React.createElement('label', {
                    htmlFor: 'field-mensagem',
                    style: { fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: errors.mensagem ? '#C9A961' : '#9A9A9A', display: 'block', marginBottom: 6 }
                  }, 'Mensagem *'),
                  React.createElement('textarea', {
                    id: 'field-mensagem', rows: 5, value: form.mensagem,
                    onChange: e => setForm({ ...form, mensagem: e.target.value }),
                    style: { ...fieldStyle('mensagem'), resize: 'vertical' },
                    onFocus: e => e.target.style.borderColor = '#0B2447',
                    onBlur: e => e.target.style.borderColor = errors.mensagem ? '#C9A961' : '#D6D1C6',
                    'aria-required': 'true',
                  })
                ),

                React.createElement('button', {
                  type: 'submit',
                  style: {
                    fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: 500,
                    letterSpacing: '0.04em', background: '#0B2447', color: '#F7F5F0',
                    border: 'none', padding: '14px 32px', borderRadius: 2, cursor: 'pointer',
                    transition: 'background 200ms',
                  },
                  onMouseEnter: e => e.target.style.background = '#1A3A5C',
                  onMouseLeave: e => e.target.style.background = '#0B2447',
                }, 'Enviar')
              )
        ,

        // Quote inside right column, below form
        React.createElement('div', {
          style: { marginTop: 32, borderLeft: '2px solid #C9A961', paddingLeft: 20 }
        },
          React.createElement('blockquote', {
            style: { fontFamily: "'Playfair Display',serif", fontSize: 16, fontStyle: 'italic', color: '#0B2447', lineHeight: 1.72, marginBottom: 10 }
          }, 'A tecnologia acelera quem sabe aonde vai. Para quem não sabe, amplifica o ruído. Por isso finanças, para mim, é disciplina antes de ser software, e método antes de dashboard. O número só conta história quando cabe na operação real, e projeto só entrega valor quando o cliente continua rodando sem o consultor dentro. O resto é ferramenta bonita em cima de processo quebrado.'),
          React.createElement('div', {
            style: { fontFamily: "'Inter',sans-serif", fontSize: 12, color: '#9A9A9A', letterSpacing: '0.04em' }
          }, '— Leandro Rafael')
        )
        )  // close right column div
      )    // close grid div
    )
  );
};

Object.assign(window, { Contact });