/* Pomona Berries — Contacto page (with pallets form). Exports window.PageContact. */
(function () {
  const { useState } = React;
  const C = window.POMONA.color;

  const SUPABASE_URL = 'https://kgzfejklnhqdlekifhmu.supabase.co';
  const SUPABASE_KEY = 'sb_publishable_yX3Fee7XZQ99c5q8I3U-_A_FlpK-OmS';

  window.PageContact = function PageContact({ t, lang, go }) {
    const c = window.PSITE.pages[lang].contact;
    const [sent, setSent] = useState(false);
    const [sending, setSending] = useState(false);
    const [error, setError] = useState(false);

    const mapSrc = 'https://www.google.com/maps?q=Paseo+de+los+Tamarindos+90+Bosques+de+las+Lomas+Cuajimalpa+Ciudad+de+Mexico&output=embed';

    async function handleSubmit(e) {
      e.preventDefault();
      setSending(true);
      setError(false);
      const form = e.target;
      const formData = new FormData(form);
      try {
        const res = await fetch(SUPABASE_URL + '/rest/v1/leads', {
          method: 'POST',
          headers: {
            apikey: SUPABASE_KEY,
            Authorization: 'Bearer ' + SUPABASE_KEY,
            'Content-Type': 'application/json',
            Prefer: 'return=minimal',
          },
          body: JSON.stringify({
            nombre: formData.get('name') || null,
            email: formData.get('email') || null,
            tarimas: formData.get('tarimas') || null,
            asunto: formData.get('asunto') || null,
            mensaje: formData.get('message') || null,
            idioma: lang,
          }),
        });
        if (res.ok) {
          setSent(true);
          form.reset();
        } else {
          setError(true);
        }
      } catch (err) {
        setError(true);
      }
      setSending(false);
    }

    return (
      <div>
        <header className="p-phero" style={{ position: 'relative', overflow: 'hidden', background: 'none' }}>
          <img src={(window.__resources&&window.__resources.contactBg)||'assets/contact-bg.jpg'} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%', zIndex: 0 }} />
          <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.52)', zIndex: 1 }}></div>
          <div style={{ position: 'relative', zIndex: 2 }}>
            <div className="p-kick">{t.nav.contact}</div>
            <h1 className="p-disp">{c.title}</h1>
            <p>{c.sub}</p>
          </div>
        </header>

        <section className="p-contact">
          <div className="p-cinfo">
            <div className="item">
              <div className="ic">📍</div>
              <div><h4>{t.contact.office}</h4><p>{t.contact.address}</p></div>
            </div>
            <div className="item">
              <div className="ic">📞</div>
              <div><h4>{lang === 'es' ? 'Teléfono' : 'Phone'}</h4><p>{t.contact.phone}</p></div>
            </div>
            <div className="item">
              <div className="ic">✉️</div>
              <div><h4>{lang === 'es' ? 'Correo' : 'Email'}</h4><p>{t.contact.mail}</p></div>
            </div>
            <div className="p-mapwrap">
              <iframe src={mapSrc} title="Mapa Pomona" loading="lazy"></iframe>
            </div>
          </div>

          <div className="p-form">
            {sent ? (
              <div style={{ textAlign: 'center', padding: '50px 10px' }}>
                <div style={{ fontSize: 48, marginBottom: 16 }}>🍓</div>
                <h3 className="p-disp" style={{ fontSize: 28, margin: '0 0 10px' }}>{lang === 'es' ? '¡Gracias!' : 'Thank you!'}</h3>
                <p style={{ color: C.inkSoft, fontSize: 16, margin: '0 0 24px' }}>
                  {lang === 'es' ? 'Hemos recibido tu mensaje. Te contactaremos muy pronto.' : 'We received your message. We’ll be in touch very soon.'}
                </p>
                <a className="p-btn line" onClick={() => setSent(false)}>{lang === 'es' ? 'Enviar otro' : 'Send another'}</a>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <h3 className="p-disp" style={{ fontSize: 24, margin: '0 0 22px' }}>{c.formTitle}</h3>
                <div className="frow">
                  <label>{c.f.name}</label>
                  <input type="text" name="name" required placeholder={c.f.name} />
                </div>
                <div className="two">
                  <div className="frow">
                    <label>{c.f.email}</label>
                    <input type="email" name="email" required placeholder="nombre@empresa.com" />
                  </div>
                  <div className="frow">
                    <label>{c.f.pallets}</label>
                    <select name="tarimas" defaultValue="">
                      <option value="" disabled>{c.f.choose}</option>
                      {c.palletOpts.map((o, i) => <option key={i} value={o}>{o}</option>)}
                    </select>
                  </div>
                </div>
                <div className="frow">
                  <label>{c.f.subject}</label>
                  <input type="text" name="asunto" placeholder={c.f.subject} />
                </div>
                <div className="frow">
                  <label>{c.f.msg}</label>
                  <textarea name="message" placeholder={c.f.msg}></textarea>
                </div>
                {error ? (
                  <p style={{ color: C.red, fontSize: 14, margin: '0 0 14px' }}>
                    {lang === 'es' ? 'Hubo un problema al enviar. Intenta de nuevo o escríbenos directo por correo.' : 'Something went wrong. Please try again or email us directly.'}
                  </p>
                ) : null}
                <button type="submit" className="p-btn" disabled={sending}>
                  {sending ? (lang === 'es' ? 'Enviando…' : 'Sending…') : (c.f.send + ' →')}
                </button>
              </form>
            )}
          </div>
        </section>
      </div>
    );
  };
})();