/* 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>If you are carrying something you cannot afford to get wrong — a critical system nobody fully understands anymore, a product that has to be built right, an initiative that has stalled, a decision too expensive to make alone — that is the kind of conversation we are here for.</p>
        <p>We read every message. We answer the ones we can help.</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(--border-1)', padding: 32, background: 'var(--bg-1)' }}
        >
          <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 }}>
            Tell us what has become difficult. What must not fail. Where confidence has been lost. What you no longer understand. What has become too important to improvise. 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;