/* mtz. website — contact: a giant email as the hero, plus an inquiry form that
   hands off to WhatsApp with the message pre-formatted from the fields.
   Copy + WhatsApp number live in content.json (window.mtzContent.contact). */
function Contact() {
  const c = mtzContent.contact;
  const f = c.form;
  const [sent, setSent] = useState(false);
  const [waUrl, setWaUrl] = useState('');

  /* Build a wa.me link with the form turned into a tidy message. Any field may
     be empty — the person can just type it in WhatsApp. */
  const buildWhats = (data) => {
    const nome = (data.get('nome') || '').toString().trim();
    const email = (data.get('email') || '').toString().trim();
    const mensagem = (data.get('mensagem') || '').toString().trim();
    const wa = c.whatsapp || {};
    const lines = [];
    lines.push(nome ? ('Olá, mtz.! Sou ' + nome + '.') : (wa.greeting || 'Olá, mtz.!'));
    if (email) lines.push('E-mail: ' + email);
    if (mensagem) { lines.push(''); lines.push(mensagem); }
    const num = (wa.number || '').toString().replace(/\D/g, '');
    const text = encodeURIComponent(lines.join('\n'));
    return 'https://wa.me/' + num + (text ? ('?text=' + text) : '');
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const url = buildWhats(new FormData(e.currentTarget));
    setWaUrl(url);
    window.open(url, '_blank', 'noopener');
    setSent(true);
  };

  // Big email with the brand dot (first "." after the @) set in serif italic.
  const renderEmail = () => {
    const em = c.email || '';
    const at = em.indexOf('@');
    const dot = em.indexOf('.', at >= 0 ? at : 0);
    if (dot < 0) return em;
    return <>{em.slice(0, dot)}<em>.</em>{em.slice(dot + 1)}</>;
  };

  return (
    <section className="mtz-contact" id="contato">
      <div className="mtz-sec-head">
        <span className="mtz-eyebrow-row">{eb(c.eyebrow)}</span>
      </div>
      <a href={'mailto:' + c.email} className="mtz-contact__big">{renderEmail()}</a>
      <div className="mtz-contact__grid">
        <div>
          <p className="mtz-hero__lead" style={{ maxWidth: '34ch' }}>{rt(c.lead)}</p>
          <div className="mtz-contact__social" style={{ marginTop: '2rem' }}>
            {mtzContent.socials.map((s) => (
              <a key={s.label} href={s.url} target="_blank" rel="noopener noreferrer">{s.label}</a>
            ))}
          </div>
        </div>
        <div>
          {sent ? (
            <div className="mtz-contact__done">
              <Badge tone="positive">WhatsApp</Badge>
              <h3>Te levamos pro WhatsApp.</h3>
              <p>Se a conversa não abriu sozinha, <a href={waUrl} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--brand-700)', borderBottom: '1px solid var(--border-strong)' }}>toque aqui para abrir</a>.</p>
              <Button variant="secondary" onClick={() => setSent(false)}>Voltar ao formulário</Button>
            </div>
          ) : (
            <form className="mtz-form" onSubmit={onSubmit}>
              <div className="mtz-form__row">
                <Input label={f.nameLabel} name="nome" placeholder={f.namePlaceholder} variant="underline" required />
                <Input label={f.emailLabel} name="email" type="email" placeholder={f.emailPlaceholder} variant="underline" required />
              </div>
              <Input label={f.messageLabel} name="mensagem" multiline variant="underline" placeholder={f.messagePlaceholder} />
              <Button variant="primary" size="lg" arrow type="submit" style={{ marginTop: '0.5rem', alignSelf: 'flex-start' }}>{f.submit}</Button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;