/* global React, Icon */

function ContactPage() {
  return (
    <>
      <section className="page-hero container">
        <div className="page-hero__grid">
          <div>
            <div className="page-hero__crumb">Contact</div>
            <h1 className="display">Send us the <em>order</em>.</h1>
          </div>
          <p className="lede">
            For lenders ordering an appraisal: email goes straight to our inbox. For everyone else &mdash; call or email, and we'll point you the right direction.
          </p>
        </div>
      </section>

      <section className="section container">
        <div className="contact">
          {/* LEFT: contact info */}
          <div className="contact__info">
            <div>
              <span className="eyebrow">Office</span>
              <div style={{ marginTop: 24, fontFamily: "var(--serif)", fontSize: 36, lineHeight: 1.15, letterSpacing: "-0.015em" }}>
                Master&nbsp;Appraisers&nbsp;LLC<br />
                Waterford Professional Center<br />
                York,&nbsp;PA&nbsp;17402
              </div>
            </div>

            <hr className="rule" />

            <div className="contact__info-block">
              <div className="contact__info-label">By phone</div>
              <div className="contact__info-value">
                <a href="tel:7178438100">(717) 843&#8209;8100</a>
              </div>
              <div className="contact__info-sub">Direct line. Leave a voicemail and we'll typically call back within an hour.</div>
            </div>

            <div className="contact__info-block">
              <div className="contact__info-label">By email</div>
              <div className="contact__info-value">
                <a href="mailto:value@amaster.com">value@amaster.com</a>
              </div>
              <div className="contact__info-sub">For new orders, send through your AMC or email directly.</div>
            </div>

            <div className="contact__info-block">
              <div className="contact__info-label">Hours</div>
              <div className="contact__info-value">
                Monday &mdash; Friday<br />
                <span style={{ fontSize: 18, color: "var(--ink-2)" }}>8&#8202;am &mdash; 6&#8202;pm</span>
              </div>
              <div className="contact__info-sub">Inspections by appointment, including some Saturdays in spring.</div>
            </div>

            <hr className="rule" />

            <div>
              <div className="contact__info-label">On our panel</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 12 }}>
                {["Mercury VMP", "AppraisalPort", "RealView", "ValueLink", "Reggora", "Anow", "Direct"].map((p) => (
                  <span key={p} style={{
                    fontFamily: "var(--mono)", fontSize: 11, padding: "5px 10px",
                    border: "1px solid var(--hairline)", background: "var(--paper)",
                    color: "var(--ink-2)", letterSpacing: "0.04em"
                  }}>{p}</span>
                ))}
              </div>
            </div>
          </div>

          {/* RIGHT: email CTA card */}
          <div className="contact-form">
            <h3 className="contact-form__title">Email us your order</h3>
            <p className="contact-form__sub">For licensed lenders &amp; AMC partners &mdash; or anyone with a question.</p>

            <div style={{
              marginTop: 24,
              padding: "32px 28px",
              border: "1px solid var(--hairline)",
              background: "var(--paper)",
              borderRadius: 4,
            }}>
              <div style={{ fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-2)" }}>
                Email
              </div>
              <div style={{ marginTop: 10, fontFamily: "var(--serif)", fontSize: 32, lineHeight: 1.15, letterSpacing: "-0.015em" }}>
                <a href="mailto:value@amaster.com" style={{ color: "var(--ink)", textDecoration: "none", borderBottom: "1px solid var(--clay)" }}>
                  value@amaster.com
                </a>
              </div>
              <p style={{ marginTop: 18, color: "var(--ink-2)", lineHeight: 1.55 }}>
                Include the subject property address, assignment type, target due date, and borrower / access details. We'll confirm fee, scope, and a delivery date within four business hours.
              </p>
              <a href="mailto:value@amaster.com?subject=New%20appraisal%20order" className="btn btn--primary" style={{ alignSelf: "flex-start", marginTop: 24 }}>
                Compose an email <Icon.arrow width="14" height="14" />
              </a>
            </div>

            <div style={{
              marginTop: 20,
              padding: "20px 24px",
              border: "1px solid var(--hairline)",
              background: "var(--canvas-2)",
              borderRadius: 4,
            }}>
              <div style={{ fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-2)" }}>
                Prefer to talk?
              </div>
              <div style={{ marginTop: 8, fontFamily: "var(--serif)", fontSize: 24, lineHeight: 1.2 }}>
                <a href="tel:7178438100" style={{ color: "var(--ink)", textDecoration: "none", borderBottom: "1px solid var(--clay)" }}>
                  (717) 843&#8209;8100
                </a>
              </div>
            </div>

            <span className="small" style={{ marginTop: 16 }}>No spam, ever &mdash; emails come straight to us.</span>
          </div>
        </div>
      </section>

    </>
  );
}

window.ContactPage = ContactPage;