/* global React */

function DisclaimerPage({ navigate }) {
  return (
    <div className="page disclaimer-page">
      {/* Header */}
      <section className="section disclaimer-hero" style={{ paddingTop: 160, paddingBottom: 40 }}>
        <div className="container">
          <div className="text-center reveal" style={{ maxWidth: 820, margin: "0 auto" }}>
            <div className="eyebrow mb-16">Important Information</div>
            <h1 className="disclaimer-hero__title">
              <em className="serif-italic">Disclaimers</em>
            </h1>
            <p className="section__lede mt-32" style={{ margin: "32px auto 0" }}>
              Please read the information below before engaging with this website or its services.
              Two separate disclaimers apply to your use of I.O.U. Counseling Services.
            </p>
          </div>
        </div>
      </section>

      {/* Two distinct sections */}
      <section className="section" style={{ paddingTop: 32, paddingBottom: 120 }}>
        <div className="container">
          <div className="disclaimer-grid">

            {/* Emergency */}
            <article className="disclaimer-card disclaimer-card--emergency reveal delay-1" aria-labelledby="emergency-heading">
              <header className="disclaimer-card__head">
                <div className="disclaimer-card__chip">
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                    <path d="M12 9v4" /><path d="M12 17h.01" />
                    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                  </svg>
                  Urgent
                </div>
                <h2 id="emergency-heading" className="disclaimer-card__title">
                  Emergency <em className="serif-italic">Disclaimer</em>
                </h2>
              </header>

              <div className="disclaimer-card__rule" />

              <p className="disclaimer-card__copy">
                I.O.U. Counseling Services does <strong>not</strong> provide emergency or crisis services
                through this website. If you are experiencing a mental health emergency, please reach
                out to one of the resources below immediately.
              </p>

              <ul className="disclaimer-resources">
                <li>
                  <span className="disclaimer-resources__num">911</span>
                  <span className="disclaimer-resources__label">Call for any life-threatening emergency.</span>
                </li>
                <li>
                  <span className="disclaimer-resources__num">988</span>
                  <span className="disclaimer-resources__label">Call or text the Suicide &amp; Crisis Lifeline (24/7).</span>
                </li>
                <li>
                  <span className="disclaimer-resources__num disclaimer-resources__num--word">ER</span>
                  <span className="disclaimer-resources__label">Go to your nearest emergency room.</span>
                </li>
              </ul>
            </article>

            {/* Professional */}
            <article className="disclaimer-card reveal delay-2" aria-labelledby="professional-heading">
              <header className="disclaimer-card__head">
                <div className="disclaimer-card__chip disclaimer-card__chip--neutral">
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                    <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
                  </svg>
                  Informational
                </div>
                <h2 id="professional-heading" className="disclaimer-card__title">
                  Professional <em className="serif-italic">Disclaimer</em>
                </h2>
              </header>

              <div className="disclaimer-card__rule" />

              <p className="disclaimer-card__copy">
                The information provided on this website is for informational purposes only and does not
                constitute mental health treatment, diagnosis, or a therapeutic relationship.
              </p>
              <p className="disclaimer-card__copy">
                Engaging with this website or submitting a contact form does <strong>not</strong> establish
                a client-therapist relationship. A formal therapeutic relationship begins only after an
                intake consultation, completion of required documentation, and mutual agreement to
                begin services.
              </p>
            </article>

          </div>

          {/* Footer note */}
          <div className="disclaimer-foot reveal" style={{ marginTop: 64 }}>
            <p style={{ padding: "20px" }}>
              Questions about these disclaimers, or unsure whether your situation is appropriate for
              telehealth counseling? Reach out and we'll help you find the right next step.
            </p>
            <a className="btn btn-primary mt-16" href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}>
              Contact Gene
            </a>
          </div>
        </div>
      </section>
    </div>);

}

window.DisclaimerPage = DisclaimerPage;