/* Support / Contact page — form posts to Formspree.
   SETUP: Create a free account at formspree.io, create a form, and paste
   the endpoint URL below (looks like https://formspree.io/f/XXXXXXXX). */

const FORMSPREE_ENDPOINT = 'https://formspree.io/f/mjgnbowo';

function SupportApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = t.accent || '#b91c2c';
  const theme = t.theme || 'light';
  const isMobile = useIsMobile();
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');
  const [form, setForm] = React.useState({ name: '', email: '', topic: 'Question', message: '' });

  React.useEffect(() => {
    document.body.setAttribute('data-theme', theme);
    return () => { document.body.removeAttribute('data-theme'); };
  }, [theme]);

  const inputStyle = {
    width: '100%',
    padding: '12px 14px',
    fontSize: 14.5, fontFamily: 'inherit',
    color: 'var(--text)',
    background: 'var(--surface)',
    border: '1px solid var(--border-strong)',
    borderRadius: 9,
    outline: 'none',
    transition: 'border-color 0.12s ease, box-shadow 0.12s ease'
  };
  const labelStyle = {
    display: 'block',
    fontSize: 12.5, fontWeight: 600,
    color: 'var(--text)',
    letterSpacing: -0.1, marginBottom: 7
  };

  function update(k, v) { setForm((f) => ({ ...f, [k]: v })); }

  async function submit(e) {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim() || !form.message.trim()) return;
    setSubmitting(true);
    setSubmitError('');
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          name:    form.name,
          email:   form.email,
          topic:   form.topic,
          message: form.message,
        }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        const data = await res.json().catch(() => ({}));
        setSubmitError(data?.error || 'Something went wrong. Please email us directly.');
      }
    } catch (err) {
      setSubmitError('Could not send — please email hello@orthovaultos.com directly.');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div data-theme={theme} style={{
      fontFamily: '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      color: 'var(--text)',
      background: 'var(--bg)',
      minHeight: '100vh',
    }}>
      <Nav accent={accent} />

      <section style={{
        padding: isMobile ? '40px 20px 24px' : '72px 28px 32px',
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `radial-gradient(40% 70% at 80% 0%, ${accent}1a, transparent 60%)`,
        }}></div>
        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
          <div style={{
            fontSize: 11.5, fontWeight: 600, color: accent, letterSpacing: 1.4,
            textTransform: 'uppercase', marginBottom: 14
          }}>Support</div>
          <h1 style={{
            fontSize: isMobile ? 30 : 64, lineHeight: 1.05, letterSpacing: isMobile ? -1 : -1.8, fontWeight: 600,
            margin: '0 0 18px', color: 'var(--text)', textWrap: 'balance'
          }}>
            Email us with any{' '}
            <span style={{
              color: accent, fontWeight: 600,
              textTransform: 'uppercase', letterSpacing: -0.5
            }}>QUESTIONS,</span>{' '}
            concerns, or comments.
          </h1>
          <p style={{
            fontSize: isMobile ? 15.5 : 18, lineHeight: 1.55, color: 'var(--muted)',
            margin: 0, maxWidth: 620, textWrap: 'pretty'
          }}>
            We&rsquo;ll get back to you within 48 hours.
          </p>
        </div>
      </section>

      {/* Form + sidebar */}
      <section style={{ padding: isMobile ? '20px 20px 56px' : '24px 28px 96px', borderTop: '1px solid var(--border)' }}>
        <div style={{
          maxWidth: 1200, margin: '0 auto',
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.5fr 1fr', gap: isMobile ? 20 : 48, alignItems: 'start'
        }}>
          {/* Form */}
          <div style={{
            padding: isMobile ? '24px 20px' : '32px 36px',
            background: 'var(--surface)',
            border: '1px solid var(--border)',
            borderRadius: 16,
            boxShadow: 'var(--shadow-card)'
          }}>
            {sent ? (
              <div style={{ padding: '32px 0', textAlign: 'center' }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 24,
                  background: `${accent}1f`, color: accent,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 18
                }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </div>
                <h2 style={{ fontSize: 24, fontWeight: 600, letterSpacing: -0.6, margin: '0 0 10px', color: 'var(--text)' }}>
                  Thanks, {form.name.split(' ')[0] || 'we got it'}.
                </h2>
                <p style={{ fontSize: 15, color: 'var(--muted)', margin: '0 0 22px', lineHeight: 1.55, maxWidth: 420, marginLeft: 'auto', marginRight: 'auto' }}>
                  Your message is in. A human on the team will reply to <strong style={{ color: 'var(--text)', fontWeight: 600 }}>{form.email || 'your inbox'}</strong> within 48 hours.
                </p>
                <button
                  onClick={() => { setSent(false); setForm({ name: '', email: '', topic: 'Question', message: '' }); }}
                  style={{
                    padding: '10px 18px', fontSize: 13.5, fontWeight: 500, fontFamily: 'inherit',
                    background: 'var(--btn-ghost-bg)', color: 'var(--btn-ghost-fg)',
                    border: '1px solid var(--btn-ghost-border)', borderRadius: 9, cursor: 'pointer'
                  }}>Send another</button>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 16 }}>
                  <div>
                    <label style={labelStyle} htmlFor="name">Name</label>
                    <input id="name" type="text" required value={form.name} onChange={(e) => update('name', e.target.value)}
                      placeholder="Dr. Avery Lin" style={inputStyle} />
                  </div>
                  <div>
                    <label style={labelStyle} htmlFor="email">Email</label>
                    <input id="email" type="email" required value={form.email} onChange={(e) => update('email', e.target.value)}
                      placeholder="you@hospital.org" style={inputStyle} />
                  </div>
                </div>

                <div>
                  <label style={labelStyle} htmlFor="topic">Topic</label>
                  <select id="topic" value={form.topic} onChange={(e) => update('topic', e.target.value)} style={inputStyle}>
                    <option>Question</option>
                    <option>Concern</option>
                    <option>Comment / feedback</option>
                    <option>Bug report</option>
                    <option>Billing</option>
                  </select>
                </div>

                <div>
                  <label style={labelStyle} htmlFor="message">Message</label>
                  <textarea id="message" required rows={7} value={form.message} onChange={(e) => update('message', e.target.value)}
                    placeholder="Tell us what's going on — case context, app version, what you expected vs. what happened. The more detail, the faster we can help."
                    style={{ ...inputStyle, resize: 'vertical', lineHeight: 1.55, fontFamily: 'inherit' }} />
                </div>

                {submitError && (
                  <div style={{ padding: '10px 14px', borderRadius: 8, background: `${accent}14`, border: `1px solid ${accent}55`, color: accent, fontSize: 13 }}>
                    {submitError}
                  </div>
                )}
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, marginTop: 4, flexWrap: 'wrap' }}>
                  <div style={{ fontSize: 12, color: 'var(--subtle)', lineHeight: 1.5, maxWidth: 360 }}>
                    Please don&rsquo;t include patient identifiers — OrthoVaultOS is not a HIPAA-protected app.
                  </div>
                  <button type="submit" disabled={submitting} style={{
                    padding: '12px 22px', fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
                    background: 'var(--btn-solid-bg)', color: 'var(--btn-solid-fg)',
                    border: 'none', borderRadius: 10, cursor: submitting ? 'progress' : 'pointer',
                    letterSpacing: -0.1, opacity: submitting ? 0.7 : 1,
                    display: 'inline-flex', alignItems: 'center', gap: 8
                  }}>
                    {submitting ? 'Sending…' : 'Send message'}
                    {!submitting && <span style={{ fontSize: 12, opacity: 0.7, fontFamily: '"Geist Mono", ui-monospace, monospace' }}>→</span>}
                  </button>
                </div>
              </form>
            )}
          </div>

          {/* Sidebar */}
          <aside style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{
              padding: '22px 24px',
              background: 'var(--surface)',
              border: '1px solid var(--border)',
              borderRadius: 14
            }}>
              <div style={{
                fontFamily: '"Geist Mono", ui-monospace, monospace',
                fontSize: 11, fontWeight: 600, color: accent, letterSpacing: 0.8,
                textTransform: 'uppercase', marginBottom: 10
              }}>Direct email</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text)', letterSpacing: -0.2 }}>
                <a href="mailto:hello@orthovaultos.com" style={{ color: 'var(--text)', textDecoration: 'none' }}>hello@orthovaultos.com</a>
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--subtle)', marginTop: 8, lineHeight: 1.5 }}>
                Prefer to write us directly? Same inbox, same humans.
              </div>
            </div>

            <div style={{
              padding: '22px 24px',
              background: 'var(--surface)',
              border: '1px solid var(--border)',
              borderRadius: 14
            }}>
              <div style={{
                fontFamily: '"Geist Mono", ui-monospace, monospace',
                fontSize: 11, fontWeight: 600, color: accent, letterSpacing: 0.8,
                textTransform: 'uppercase', marginBottom: 12
              }}>Response time</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{
                  fontSize: 36, fontWeight: 600, letterSpacing: -1.2, color: 'var(--text)',
                  fontFamily: '"Geist Mono", ui-monospace, monospace'
                }}>48</span>
                <span style={{ fontSize: 14, color: 'var(--muted)' }}>hours, max</span>
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--subtle)', marginTop: 10, lineHeight: 1.5 }}>
                Bug reports during active rotation get bumped to the top of the queue.
              </div>
            </div>

            <div style={{
              padding: '22px 24px',
              background: 'var(--surface)',
              border: '1px solid var(--border)',
              borderRadius: 14
            }}>
              <div style={{
                fontFamily: '"Geist Mono", ui-monospace, monospace',
                fontSize: 11, fontWeight: 600, color: accent, letterSpacing: 0.8,
                textTransform: 'uppercase', marginBottom: 10
              }}>Before you write</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <li style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.55 }}>
                  → <a href="resident-guide.html" style={{ color: 'var(--text)', textDecoration: 'none', fontWeight: 600 }}>Resident guide</a> covers most "how do I…" questions.
                </li>
                <li style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.55 }}>
                  → <a href="procedure-library.html" style={{ color: 'var(--text)', textDecoration: 'none', fontWeight: 600 }}>Procedure library</a> has the templates we ship.
                </li>
              </ul>
            </div>
          </aside>
        </div>
      </section>

      <Footer accent={accent} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<SupportApp />);