/* global React, Icon, Eyebrow, SCREENCONNECT_URL */
const { useState: useStateSupport } = React;

function SupportPage({ go }) {
  const scUrl = (typeof SCREENCONNECT_URL !== 'undefined')
    ? SCREENCONNECT_URL
    : 'https://planetiware.screenconnect.com';

  const [code, setCode] = useStateSupport('');
  const [err, setErr] = useStateSupport(false);

  const submit = (e) => {
    e.preventDefault();
    const c = code.trim();
    if (!c) { setErr(true); return; }
    setErr(false);
    window.location.href = `${scUrl}/?Code=${encodeURIComponent(c)}`;
  };

  return (
    <main data-screen-label="Remote support">
      <section className="hero rs" data-screen-label="Remote support hero">
        <div className="wrap hero-grid">
          <div>
            <Eyebrow>Remote support</Eyebrow>
            <h1>
              Give your<br/>
              technician <em>access.</em>
            </h1>
            <p className="hero-sub">
              Already on the phone with us? Enter the code your technician gave you. Nothing installs until you approve it, and you can end the session at any time.
            </p>

            <div className="rs-alt">
              <div className="rs-alt-head">Not after a remote session?</div>
              <p>If you would rather talk to someone, or your issue needs more than a screen share.</p>
              <div className="rs-contact">
                <a className="rs-contact-item" href="tel:+61291998520">
                  <span className="ic"><Icon.phone /></span>
                  <span className="txt"><span className="k">PHONE</span><span className="v">(02) 9199 8520</span></span>
                </a>
                <a className="rs-contact-item" href="mailto:info@planetiware.com">
                  <span className="ic"><Icon.mail /></span>
                  <span className="txt"><span className="k">EMAIL</span><span className="v">info@planetiware.com</span></span>
                </a>
              </div>
              <button className="btn btn-ghost btn-arrow" onClick={() => go('contact')}>
                Send a message
                <Icon.arrow />
              </button>
            </div>

            <div className="hero-meta">
              <div className="hero-meta-item">
                <span className="k">NO INSTALL</span>
                <span className="v">Until you approve</span>
              </div>
              <div className="hero-meta-item">
                <span className="k">CONTROL</span>
                <span className="v">End anytime</span>
              </div>
              <div className="hero-meta-item">
                <span className="k">SECURE</span>
                <span className="v">Encrypted session</span>
              </div>
            </div>
          </div>

          <div className="rs-visual">
            <div className="rs-card">
              <div className="rs-card-head">
                <span className="dot" aria-hidden="true"></span>
                <div>
                  <div className="label">REMOTE SESSION</div>
                  <div className="val">Enter your support code</div>
                </div>
              </div>

              <form className="rs-join" onSubmit={submit}>
                <div className="rs-join-title"><strong>Join</strong> with a code</div>
                <label htmlFor="rs-code" className="rs-join-label">Support code</label>
                <div className="rs-join-row">
                  <input
                    id="rs-code"
                    type="text"
                    inputMode="numeric"
                    className={`rs-join-input${err ? ' err' : ''}`}
                    value={code}
                    onChange={(e) => { setCode(e.target.value); if (err) setErr(false); }}
                    placeholder="e.g. 4821"
                    autoComplete="off"
                  />
                  <button type="submit" className="rs-join-btn" aria-label="Join session"><Icon.arrow /></button>
                </div>
                {err && <span className="rs-join-err">Enter the code your technician gave you.</span>}
                <p className="rs-join-note-fine">You'll be taken to our secure ScreenConnect page to download and start the session.</p>
              </form>

              <ul className="rs-card-reassure">
                <li><span className="tick"><Icon.check /></span>You approve before anyone connects</li>
                <li><span className="tick"><Icon.check /></span>Nothing is left installed afterwards</li>
                <li><span className="tick"><Icon.check /></span>Session is encrypted end to end</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { SupportPage });