/* global React, Section, Eyebrow, Button, Icon */
// Contact.jsx — 13 · conversion close + simple form

function Contact({ onWhatsApp }) {
  const [sent, setSent] = React.useState(false);
  const contact = window.MR_CONTACT || {
    email: 'eleammirefugoenelcampo@gmail.com',
    phoneDisplay: '+56 9 3220 9463',
    phoneHref: '+56932209463',
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    const message = [
      'Hola, quisiera recibir orientación sobre Mi Refugio en el Campo.',
      `Nombre: ${data.get('nombre') || ''}`,
      `Teléfono / WhatsApp: ${data.get('wa') || ''}`,
      `Mensaje: ${data.get('msg') || ''}`,
    ].join('\n');
    onWhatsApp(message);
    setSent(true);
  };

  return (
    <Section id="contacto" bg="white">
      <div className="mr-contact">
        <div className="mr-contact__copy">
          <Eyebrow>Conversemos tu caso</Eyebrow>
          <h2 className="mr-h2">Si estás evaluando un hogar, podemos orientarte con calma</h2>
          <p className="mr-body mr-muted" style={{ marginTop: 18, maxWidth: '46ch' }}>
            Cuéntanos qué está pasando, qué necesita tu familiar y qué dudas tiene la familia.
            Desde ahí podremos ayudarte a ver si Mi Refugio en el Campo es una buena opción.
          </p>
          <div className="mr-contact__wa">
            <Button variant="whatsapp" icon="whatsapp" onClick={() => onWhatsApp()}>Coordinar conversación por WhatsApp</Button>
          </div>
          <div className="mr-contact__direct" aria-label="Datos de contacto">
            <a href={`tel:${contact.phoneHref}`}><Icon name="phone" size={18} />{contact.phoneDisplay}</a>
            <a href={`mailto:${contact.email}`}><Icon name="mail" size={18} />{contact.email}</a>
          </div>
          <p className="mr-contact__micro">Sin presión. Sin apuro. Con claridad.</p>
        </div>

        <form className="mr-card mr-form" onSubmit={onSubmit}>
          {sent ? (
            <div className="mr-form__done">
              <div className="mr-card__ic ic-teal"><Icon name="check" size={26} /></div>
              <h3 className="mr-h3">Gracias por escribir</h3>
              <p className="mr-body mr-muted">Te responderemos con calma para conversar sobre tu familiar.</p>
            </div>
          ) : (
            <React.Fragment>
              <div className="mr-field">
                <label htmlFor="nombre">Tu nombre</label>
                <input id="nombre" name="nombre" placeholder="Cómo te llamas" required />
              </div>
              <div className="mr-field">
                <label htmlFor="wa">Teléfono / WhatsApp</label>
                <input id="wa" name="wa" inputMode="tel" placeholder="+56 9 ____ ____" required />
              </div>
              <div className="mr-field">
                <label htmlFor="msg">Cuéntanos qué está pasando</label>
                <textarea id="msg" name="msg" rows="4" placeholder="Qué necesita tu familiar y qué dudas tiene la familia"></textarea>
              </div>
              <Button variant="primary" type="submit" style={{ width: '100%' }}>Agendar visita</Button>
              <p className="mr-fine" style={{ marginTop: 12, textAlign: 'center' }}>
                Resolver tus dudas también es parte del cuidado.
              </p>
            </React.Fragment>
          )}
        </form>
      </div>
    </Section>
  );
}

window.Contact = Contact;