// CONTACT PAGE

function ContactPage() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', topic: 'General question', message: '' });

  useEffect(() => {
    document.title = "Contact Unspoken | We Actually Read These";
    const meta = document.querySelector('meta[name="description"]');
    if (meta) meta.setAttribute('content', 'Real human responses, usually within 24 hours. Contact the Unspoken team with questions, feedback, or a prayer request.');
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    // in-memory only; log for demo
    console.log('contact form', form);
    setSubmitted(true);
  };

  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  return (
    <main id="main">
      <section className="page-hero">
        <FloatingHearts count={5} />
        <div className="container" style={{ position: 'relative' }}>
          <Reveal>
            <div className="eyebrow" style={{ display: 'inline-flex' }}>contact</div>
            <h1 style={{ marginTop: 16 }}>we actually <em>read these.</em></h1>
            <p>real human responses. usually within 24 hours. never bots. never forms-to-nowhere.</p>
          </Reveal>
        </div>
      </section>

      <section>
        <div className="contact-grid">
          <Reveal>
            {submitted ? (
              <div className="form-success">
                <h3>sent ♥</h3>
                <p>we\'ll write back within 24 hours. if you sent a prayer request, we\'re praying for you today.</p>
                <button
                  className="btn btn-ghost-dark"
                  style={{ marginTop: 20 }}
                  onClick={() => { setSubmitted(false); setForm({ name:'', email:'', topic:'General question', message:'' }); }}
                >
                  send another
                </button>
              </div>
            ) : (
              <form className="contact-form" onSubmit={handleSubmit} aria-label="Contact form">
                <div className="form-group">
                  <label htmlFor="name">your name</label>
                  <input id="name" type="text" required value={form.name} onChange={update('name')} placeholder="laura" />
                </div>
                <div className="form-group">
                  <label htmlFor="email">email</label>
                  <input id="email" type="email" required value={form.email} onChange={update('email')} placeholder="you@wherever.com" />
                </div>
                <div className="form-group">
                  <label htmlFor="topic">what\'s this about?</label>
                  <select id="topic" value={form.topic} onChange={update('topic')}>
                    <option>General question</option>
                    <option>Billing</option>
                    <option>Feature request</option>
                    <option>Prayer request for the team</option>
                    <option>Something else</option>
                  </select>
                </div>
                <div className="form-group">
                  <label htmlFor="message">message</label>
                  <textarea id="message" required rows="6" value={form.message} onChange={update('message')} placeholder="tell us what\'s going on. short or long is fine." />
                </div>
                <button type="submit" className="btn btn-primary" style={{ width: '100%', fontSize: 15 }}>
                  <PixelHeart /> Send It
                </button>
                <p style={{ fontSize: 12, color: 'var(--muted)', marginTop: 12 }}>
                  we don\'t share your email. we don\'t add you to anything. we just write back.
                </p>
              </form>
            )}
          </Reveal>

          <Reveal delay={120}>
            <div className="contact-side">
              <div className="contact-card">
                <h4>email</h4>
                <a href="mailto:hello@unspoken.app">hello@unspoken.app</a>
                <p style={{ marginTop: 8, fontSize: 14, color: 'var(--ink-soft)' }}>usually within 24 hours. sometimes faster. never bots.</p>
              </div>
              <div className="contact-card" style={{
                background: 'linear-gradient(165deg, #F472B6, #9d174d)',
                color: 'white',
                border: 'none',
              }}>
                <h4 style={{ color: '#FCD34D' }}>prayer request line</h4>
                <p style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontSize: 17, lineHeight: 1.5, color: 'rgba(255,255,255,0.95)', fontWeight: 500 }}>
                  if you just need someone to pray for you, send a one-line email. we will.
                </p>
              </div>
              <div className="contact-card">
                <h4>social</h4>
                <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
                  <a href="#" className="btn btn-ghost" style={{ fontSize: 12, padding: '10px 14px' }}>tiktok</a>
                  <a href="#" className="btn btn-ghost" style={{ fontSize: 12, padding: '10px 14px' }}>instagram</a>
                </div>
              </div>
              <div className="contact-card">
                <h4>hard seasons</h4>
                <p style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--ink-soft)' }}>
                  if the $5.99 is a stretch, email us. no paperwork. no proof. we\'ll take care of you.
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <CTABlock />
    </main>
  );
}

Object.assign(window, { ContactPage });