/* eslint-disable */
// COMMS — contact lines + "transmit" form.
function Comms() {
  const [val, setVal] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);

  function submit(e) {
    e.preventDefault();
    if (!val || sending) return;
    setSending(true);
    setTimeout(() => {
      setSent(true);
      setSending(false);
    }, 700);
  }

  return (
    <section className="section comms" id="comms">
      <div className="container">
        <div className="section-label">
          <span className="num">§ 04</span>
          <span>// Comms</span>
          <span className="tag">CHANNEL OPEN</span>
        </div>

        <div className="comms__grid">
          <div className="reveal">
            <h2 className="comms__heading">Open <em>channel.</em></h2>
            <p className="comms__lede">
              WTI is an operating company, not a service provider. We don't
              accept pitches, samples, sponsorship requests, or unsolicited
              proposals. For everything else, the right address is below.
            </p>
            <form className="comms__form" onSubmit={submit}>
              <input className="comms__input" type="email" required placeholder="Operator email" value={val} onChange={e => setVal(e.target.value)} disabled={sent} />
              <button className="comms__submit" type="submit" disabled={sending || sent}>
                {sent ? "[ ACK · 200 ]" : sending ? "Transmitting…" : "Transmit \u2192"}
              </button>
            </form>
            <p className={"comms__ack" + (sent ? " is-visible" : "")}>
              ● Channel confirmed. Burst received. No reply expected unless one is owed.
            </p>
          </div>

          <div className="comms__lines reveal" data-delay="2">
            <Line label="General Inquiries" value="contact@wtic2.com" href="mailto:contact@wtic2.com" />
            <Line label="Press &amp; Partnerships" value="press@wtic2.com" href="mailto:press@wtic2.com" />
            <Line label="Mailing Address" value="State of Texas, USA" />
            <Line label="Frequency" value="CH 154.25 · AES-256" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Line({ label, value, href }) {
  return (
    <div className="comms__line">
      <span className="comms__line-label" dangerouslySetInnerHTML={{ __html: label }}></span>
      {href ? <a className="comms__line-value" href={href}>{value}</a> : <span className="comms__line-value">{value}</span>}
    </div>
  );
}

window.Comms = Comms;