> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ozura.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Contact

> Get in touch with the Ozura team — questions, integrations, or just saying hi.

export const ContactForm = () => {
  // 'idle' → 'sending' → 'success' | 'error'
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');

  // Local dev points at the dashboard backend on :9000; everything else
  // hits production. Only the prod URL is shipped to public visitors —
  // staging / development hosts are never referenced in this bundle.
  const apiBase =
    typeof window !== 'undefined' && window.location.hostname === 'localhost'
      ? 'http://localhost:9000'
      : 'https://v2.ozurapay.com';

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    setErrorMsg('');

    const data = new FormData(e.currentTarget);
    const payload = {
      name: String(data.get('name') || '').trim(),
      email: String(data.get('email') || '').trim(),
      message: String(data.get('message') || '').trim(),
      _honey: String(data.get('_honey') || ''),
    };

    try {
      const res = await fetch(`${apiBase}/contact`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!res.ok) {
        let serverMsg = '';
        try {
          const body = await res.json();
          serverMsg = body?.message || body?.error || '';
        } catch (_) { /* ignore */ }
        throw new Error(serverMsg || `Request failed (${res.status})`);
      }
      setStatus('success');
    } catch (err) {
      setStatus('error');
      setErrorMsg(err?.message || "We couldn't send your message. Please try again.");
    }
  };

  if (status === 'success') {
    return (
      <div style={{ background: '#09090B', border: '1px solid #292746', borderRadius: '28px', padding: '40px 28px', textAlign: 'center', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ width: '48px', height: '48px', borderRadius: '50%', background: 'rgba(150, 147, 254, 0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9693FE" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
        </div>
        <h2 style={{ fontSize: '1.25rem', fontWeight: 600, color: '#fafafa', margin: '0 0 8px' }}>Thanks, we got it.</h2>
        <p style={{ fontSize: '0.9375rem', color: '#a1a1aa', margin: 0, lineHeight: 1.6 }}>We&rsquo;ll get back to you as soon as possible.</p>
      </div>
    );
  }

  const isSending = status === 'sending';
  const fieldStyle = { display: 'flex', flexDirection: 'column', gap: '8px' };
  const labelStyle = { fontSize: '0.875rem', fontWeight: 500, color: '#a1a1aa' };
  const inputStyle = { background: '#0D0D12', border: '1px solid #292746', borderRadius: '12px', padding: '12px 14px', color: '#fafafa', fontSize: '0.9375rem', fontFamily: 'inherit', width: '100%', boxSizing: 'border-box', outline: 'none' };

  return (
    <div style={{ background: '#09090B', border: '1px solid #292746', borderRadius: '28px', padding: '28px', height: '100%' }}>
      <form onSubmit={handleSubmit} className="ozura-contact-form" style={{ display: 'flex', flexDirection: 'column', gap: '16px' }} noValidate>
        <input type="text" name="_honey" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />

        <div style={fieldStyle}>
          <label htmlFor="contact-name" style={labelStyle}>Name</label>
          <input id="contact-name" type="text" name="name" required autoComplete="name" disabled={isSending} style={inputStyle} />
        </div>

        <div style={fieldStyle}>
          <label htmlFor="contact-email" style={labelStyle}>Email</label>
          <input id="contact-email" type="email" name="email" required autoComplete="email" disabled={isSending} style={inputStyle} />
        </div>

        <div style={fieldStyle}>
          <label htmlFor="contact-message" style={labelStyle}>Message</label>
          <textarea id="contact-message" name="message" rows={6} required disabled={isSending} style={{ ...inputStyle, minHeight: '160px', resize: 'vertical', fontFamily: 'inherit' }} />
        </div>

        {status === 'error' && (
          <div role="alert" style={{ background: 'rgba(248, 113, 113, 0.08)', border: '1px solid rgba(248, 113, 113, 0.3)', borderRadius: '12px', padding: '10px 14px', fontSize: '0.875rem', color: '#fca5a5' }}>
            {errorMsg}
          </div>
        )}

        <button type="submit" disabled={isSending} style={{ background: '#9693FE', color: '#0D0D12', fontWeight: 600, border: 0, borderRadius: '12px', padding: '14px 20px', cursor: isSending ? 'wait' : 'pointer', marginTop: '8px', fontSize: '0.9375rem', fontFamily: 'inherit', opacity: isSending ? 0.7 : 1 }}>
          {isSending ? 'Sending…' : 'Send message'}
        </button>
      </form>
    </div>
  );
};

<div style={{ padding: '0 24px' }}>
  <div style={{ position: 'relative', overflow: 'hidden', borderRadius: '28px', marginBottom: '32px', minHeight: '200px' }}>
    <img src="https://mintcdn.com/ozura/nD9UsBLfn8k8H43p/images/header10.png?fit=max&auto=format&n=nD9UsBLfn8k8H43p&q=85&s=7100944327deb0c174262bea71d2ef1e" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', position: 'absolute', top: 0, left: 0 }} width="3884" height="1024" data-path="images/header10.png" />

    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '48px 20px', minHeight: '200px' }}>
      <h1 style={{ fontSize: '2.5rem', fontWeight: 500, color: '#fafafa', textAlign: 'center', margin: '0 0 12px', letterSpacing: '-0.02em' }}>
        Get in touch
      </h1>

      <p style={{ fontSize: '1.125rem', color: '#a1a1aa', textAlign: 'center', maxWidth: '560px', margin: 0, lineHeight: 1.6 }}>
        Questions about integrations, pricing, or anything else? Send us a message and we’ll get back to you.
      </p>
    </div>
  </div>

  <div className="contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: '20px', alignItems: 'stretch', paddingBottom: '60px' }}>
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', borderRadius: '28px', overflow: 'hidden', border: '1px solid #292746', background: '#09090B', minHeight: '320px' }}>
        <div style={{ flex: 1, minHeight: '180px', backgroundImage: 'url(https://mintcdn.com/ozura/TXfCJEkPLnwK34JS/images/quickstart1.png?fit=max&auto=format&n=TXfCJEkPLnwK34JS&q=85&s=b108d15716d21515948f924406de1d7c)', backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }} />

        <div style={{ padding: '20px 22px 22px' }}>
          <h3 style={{ margin: '0 0 6px', fontSize: '1.125rem', fontWeight: 600, color: '#fafafa' }}>We’d love to hear from you</h3>
          <p style={{ margin: 0, fontSize: '0.875rem', color: '#a1a1aa', lineHeight: 1.6 }}>Tell us about your integration, pricing questions, or anything else — we usually reply within one business day.</p>
        </div>
      </div>

      <a href="https://status.ozura.com" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', color: 'inherit' }}>
        <div className="contact-link-card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', background: '#09090B', border: '1px solid #292746', borderRadius: '20px', padding: '14px 18px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', minWidth: 0 }}>
            <span style={{ width: '9px', height: '9px', borderRadius: '50%', backgroundColor: '#34d399', boxShadow: '0 0 8px rgba(52, 211, 153, 0.6)', flexShrink: 0 }} />

            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: '0.9375rem', fontWeight: 600, color: '#fafafa' }}>System status</div>
              <div style={{ fontSize: '0.8125rem', color: '#a1a1aa' }}>Live availability of all services</div>
            </div>
          </div>

          <span style={{ fontSize: '0.875rem', color: '#34d399', flexShrink: 0 }}>↗</span>
        </div>
      </a>

      <a href="/guides/quickstart" style={{ textDecoration: 'none', color: 'inherit' }}>
        <div className="contact-link-card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', background: '#09090B', border: '1px solid #292746', borderRadius: '20px', padding: '14px 18px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', minWidth: 0 }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9693FE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />

              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
            </svg>

            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: '0.9375rem', fontWeight: 600, color: '#fafafa' }}>Browse the docs</div>
              <div style={{ fontSize: '0.8125rem', color: '#a1a1aa' }}>You might find your answer faster here</div>
            </div>
          </div>

          <span style={{ fontSize: '0.875rem', color: '#9693FE', flexShrink: 0 }}>→</span>
        </div>
      </a>
    </div>

    <ContactForm />
  </div>
</div>