/* global React, Icon, SecHead */

function AboutPage({ setPage }) {
  return (
    <>
      <section className="page-hero container">
        <div className="page-hero__grid">
          <div>
            <div className="page-hero__crumb">About</div>
            <h1 className="display">Two decades. <em>One county.</em> Every kind of home.</h1>
          </div>
          <p className="lede">
            Master Appraisers is an independent residential appraisal practice serving lenders, banks, and AMCs across York County, PA. Every report is walked, written, and signed personally &mdash; that's why our clients keep coming back.
          </p>
        </div>
      </section>

      <section className="section container">
        <div className="about-hero">
          <div className="about-hero__img">
            <image-slot
              id="about-photo"
              shape="rect"
              src="images/about-photo.jpg"
              placeholder="A York County neighborhood or streetscape"
            ></image-slot>
          </div>
          <div>
            <span className="eyebrow">The practice</span>
            <h2 className="display" style={{ marginTop: 16, fontSize: "clamp(28px, 3vw, 44px)" }}>
              Local appraisers, local knowledge.
            </h2>
            <div className="body" style={{ marginTop: 24 }}>
              <p>
                Master Appraisers focuses exclusively on residential property valuation in York County and the surrounding region. No subcontractors, no remote desktops dressed up as inspections &mdash; just careful, locally-informed appraisals.
              </p>
              <p>
                When you order from us, the same person who walks the property pulls the comps, writes the commentary, and answers the phone when underwriting calls. That's not a marketing slogan; it's how the work gets done.
              </p>
              <p>
                Most days you'll find us somewhere between Hanover and the Susquehanna &mdash; clipboard in hand, measuring floor plans and learning new corners of the county.
              </p>
            </div>
            <div style={{ marginTop: 32 }}>
              <a className="arrow-link" onClick={() => setPage("contact")} href="#contact">
                Get in touch <Icon.arrow width="14" height="14" />
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="section container" style={{ paddingTop: 0 }}>
        <div className="creds">
          <div>
            <span className="eyebrow">Credentials</span>
            <h2 className="display" style={{ marginTop: 16, fontSize: "clamp(28px, 3vw, 44px)" }}>
              On paper.
            </h2>
            <p className="lede" style={{ marginTop: 16 }}>
              The licensing, the coverage, the affiliations &mdash; everything an underwriter or compliance officer needs to clear the file.
            </p>
          </div>
          <ul className="creds__list">
            {[
              ["Certified Residential Appraiser (PA)", "Active"],
              ["AQB Continuing Education", "Current"],
              ["USPAP Certified", "Current cycle"],
              ["FHA Approved Roster", "Active"],
              ["VA Fee Panel", "Active"],
              ["E&O Insurance", "In force"],
              ["Appraisal Institute", "Affiliate member"],
            ].map(([l, v]) => (
              <li key={l}>
                <span className="creds__label">{l}</span>
                <span className="creds__value">{v}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
        <div className="container">
          <SecHead
            eyebrow="What we believe"
            title={<>Three things that make a <em>good</em> report.</>}
            intro="A clean appraisal isn't magic. It's three boring habits done well, every single time."
          />
          <div className="values-grid">
            <div className="value-card">
              <span className="value-card__num">i.</span>
              <h3 className="value-card__title">Walk the property.</h3>
              <p className="value-card__desc">
                Drive&#8209;bys and desktops have their place, but most assignments get
                the full interior inspection. There's no substitute for standing in
                the basement.
              </p>
            </div>
            <div className="value-card">
              <span className="value-card__num">ii.</span>
              <h3 className="value-card__title">Pick comps that match.</h3>
              <p className="value-card__desc">
                A 1940s Cape in East York doesn't compare to a 2018 colonial in
                Spring Grove. Two decades of local sales means we know which sale
                is actually a comp and which one just looks like one.
              </p>
            </div>
            <div className="value-card">
              <span className="value-card__num">iii.</span>
              <h3 className="value-card__title">Write so underwriting doesn't call.</h3>
              <p className="value-card__desc">
                Every adjustment gets explained. Every commentary answers the
                question before it's asked. The fewer revision requests, the
                better &mdash; for everyone.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Story strip */}
      <section className="section container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <span className="eyebrow">Why local matters</span>
            <h2 className="display" style={{ marginTop: 16, fontSize: "clamp(28px, 3vw, 44px)" }}>
              The county has a thousand neighborhoods. We know which one matters for the comp.
            </h2>
            <p className="lede" style={{ marginTop: 20 }}>
              In York County, a six&#8209;block difference can change a value by 15%. We've
              spent two decades learning where those lines are &mdash; the old streetcar
              suburbs, the redrawn school districts, the corridors near the
              expansion. It shows up in the comps we choose.
            </p>
          </div>
          <div className="about-hero__img" style={{ aspectRatio: "5/4" }}>
            <image-slot
              id="about-secondary"
              shape="rect"
              src="images/about-secondary.jpg"
              placeholder="A neighborhood detail — porch, fence line, rooflines"
            ></image-slot>
          </div>
        </div>
      </section>

      <section className="cta-strip">
        <div className="container">
          <div className="cta-strip__inner">
            <div>
              <h2 className="display">Set up a vendor account.</h2>
              <p className="lede" style={{ color: "color-mix(in oklab, var(--cream) 70%, transparent)", marginTop: 12 }}>
                We're on most major AMC panels and onboard direct lenders in a single afternoon.
              </p>
            </div>
            <button className="btn btn--clay" onClick={() => setPage("contact")}>
              Start the process <Icon.arrow width="16" height="16" />
            </button>
          </div>
        </div>
      </section>
    </>
  );
}

window.AboutPage = AboutPage;
