/* Contact / Feedback — posts to existing backend endpoint (no keys/logic on site side) */
const FEEDBACK_ENDPOINT = 'https://api.onbars.app/api/contact';
const FEEDBACK_EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const Feedback = ({ t }) => {
  const f = t.feedback;
  const { useState } = React;
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [status, setStatus] = useState('idle'); // idle|submitting|success|invalid|ratelimited|error

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'submitting') return;
    const n = name.trim(), em = email.trim(), msg = message.trim();
    if (!n || !em || !msg || !FEEDBACK_EMAIL_RE.test(em)) { setStatus('invalid'); return; }
    setStatus('submitting');
    try {
      const res = await fetch(FEEDBACK_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: n, email: em, message: msg }),
      });
      if (res.status === 200) {
        setStatus('success');
        setName(''); setEmail(''); setMessage('');
        return;
      }
      if (res.status === 422) { setStatus('invalid'); return; }
      if (res.status === 429) { setStatus('ratelimited'); return; }
      setStatus('error');
    } catch (_) {
      setStatus('error');
    }
  };

  const onField = (setter) => (e) => {
    setter(e.target.value);
    if (status !== 'submitting' && status !== 'success') setStatus('idle');
  };

  return (
    <section id="feedback" className="feedback">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow">{f.eyebrow}</div>
          <h2 className="display">{f.title}</h2>
          <p>{f.sub}</p>
        </div>
        <div className="feedback-card reveal" data-delay="1">
          {status === 'success' ? (
            <div className="waitlist-success" data-variant="success">
              <div className="ws-ic">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6 9 17l-5-5" /></svg>
              </div>
              <div>
                <div className="ws-title">{f.success}</div>
              </div>
            </div>
          ) : (
            <form className="feedback-form" onSubmit={submit} noValidate>
              <div className="feedback-field">
                <label htmlFor="fb-name">{f.name_label}</label>
                <input
                  id="fb-name" type="text" maxLength={80} required
                  className="feedback-input"
                  placeholder={f.name_ph}
                  value={name}
                  onChange={onField(setName)}
                />
              </div>
              <div className="feedback-field">
                <label htmlFor="fb-email">{f.email_label}</label>
                <input
                  id="fb-email" type="email" maxLength={254} required
                  className="feedback-input"
                  placeholder={f.email_ph}
                  value={email}
                  onChange={onField(setEmail)}
                  aria-describedby={status === 'invalid' ? 'fb-email-error' : undefined}
                  aria-invalid={status === 'invalid' ? 'true' : undefined}
                />
                {status === 'invalid' && <div id="fb-email-error" className="waitlist-error">{f.invalid}</div>}
              </div>
              <div className="feedback-field">
                <label htmlFor="fb-message">{f.message_label}</label>
                <textarea
                  id="fb-message" rows={5} maxLength={4000} required
                  className="feedback-input feedback-textarea"
                  placeholder={f.message_ph}
                  value={message}
                  onChange={onField(setMessage)}
                />
              </div>
              {status === 'ratelimited' && <div className="waitlist-error">{f.ratelimited}</div>}
              {status === 'error' && <div className="waitlist-error">{f.error}</div>}
              <button type="submit" className="cta-btn waitlist-hero-cta feedback-submit" disabled={status === 'submitting'}>
                {status === 'submitting' ? '…' : f.cta}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

window.Feedback = Feedback;