/* global React */
const { useState: useStateCP } = React;

function ContactPage() {
  const [subject, setSubject] = useStateCP('');
  const [message, setMessage] = useStateCP('');

  const mailto = () => {
    const url =
      'mailto:team@conspand.com' +
      '?subject=' + encodeURIComponent(subject || 'hello') +
      '&body=' + encodeURIComponent(message || '');
    window.location.href = url;
  };

  return (
    <section className="container contact-page" data-screen-label="08 Contact">
      <div className="info">
        <p className="eyebrow">contact</p>
        <h1 className="section-title">Say the thing.</h1>
        <p>We read every message. We answer the ones we have something to say back to.</p>
        <dl>
          <dt>write</dt><dd><a href="mailto:team@conspand.com">team@conspand.com</a></dd>
          <dt>place</dt><dd>Conspand LLC<br />1021 E Lincolnway, Suite 9961<br />Cheyenne, WY 82001, United States</dd>
        </dl>
      </div>
      <div>
        <form
          onSubmit={(e) => { e.preventDefault(); mailto(); }}
          style={{ border: '1px solid var(--c-ink)', padding: 32, background: '#fff' }}
        >
          <p className="eyebrow" style={{ marginBottom: 8 }}>open a draft</p>
          <p style={{ fontSize: 13, color: 'var(--fg-2)', margin: '0 0 24px', lineHeight: 1.5 }}>
            Compose below — sending opens your email client with this draft pre-filled. We never store anything you type here.
          </p>
          <div className="form-field" style={{ marginBottom: 16 }}>
            <label>subject</label>
            <input
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              placeholder="what it is about"
            />
          </div>
          <div className="form-field" style={{ marginBottom: 20 }}>
            <label>message</label>
            <textarea
              rows={6}
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="say the thing."
            ></textarea>
          </div>
          <button type="submit" className="btn">open in mail →</button>
        </form>
      </div>
    </section>
  );
}

window.ContactPage = ContactPage;