/* global React, Icon, SecHead */

function ServicesPage({ setPage }) {
  const services = [
    {
      num: "01",
      title: "Refinance appraisals",
      body: (
        <>
          <p>
            The bread&#8209;and&#8209;butter of our practice. Most weeks half the
            board is refinance assignments — conventional, FHA, VA, and the
            occasional non&#8209;QM file.
          </p>
          <p>
            Full URAR with two photo addenda, comp photo addendum, location map,
            and a sketch with GLA breakdown. XML and PDF delivered through your
            platform of choice.
          </p>
        </>
      ),
      meta: [
        ["Forms", "1004 · 1004C · 2055"],
        ["Property types", "SFR, condo, 2–4 unit"],
        ["Turnaround", "48–72 hr typical"],
        ["Inspection", "Interior + exterior"],
      ],
    },
    {
      num: "02",
      title: "Purchase transactions",
      body: (
        <>
          <p>
            Time&#8209;sensitive by definition. We watch contract dates, contingency
            deadlines, and rate locks and prioritize accordingly.
          </p>
          <p>
            Most purchase assignments inspect within 24–48 hours of order and
            deliver inside the original lock window — even on the busiest weeks of
            spring.
          </p>
        </>
      ),
      meta: [
        ["Forms", "1004 · 1073 · 1025"],
        ["Property types", "SFR, condo, 2–4 unit"],
        ["Turnaround", "Lock&#8209;date aware"],
        ["Inspection", "Interior + exterior"],
      ],
    },
    {
      num: "03",
      title: "Home equity & HELOC",
      body: (
        <>
          <p>
            Streamlined products for second&#8209;lien programs. We handle the
            full menu — interior 1004, exterior&#8209;only 2055, hybrid, and desktop
            where your guidelines allow.
          </p>
          <p>
            Where AVM cascades miss, we step in with a quick&#8209;turn drive&#8209;by or
            evaluation report that still satisfies the regulatory paper trail.
          </p>
        </>
      ),
      meta: [
        ["Forms", "2055 · 1075 · Desktop · Evaluation"],
        ["Property types", "SFR, condo"],
        ["Turnaround", "24–48 hr typical"],
        ["Inspection", "Exterior or none"],
      ],
    },
    {
      num: "04",
      title: "Multi-family & investment",
      body: (
        <>
          <p>
            Two&#8209;to&#8209;four&#8209;unit residential income properties with full
            operating income statements, rent schedules, and unit&#8209;by&#8209;unit
            comparables.
          </p>
          <p>
            We also handle small portfolio reviews for community bank lenders
            holding a handful of investor mortgages on the books.
          </p>
        </>
      ),
      meta: [
        ["Forms", "1025 · 216 · 71B"],
        ["Property types", "2–4 unit, mixed&#8209;use res."],
        ["Turnaround", "5–7 business days"],
        ["Inspection", "All units, interior"],
      ],
    },
    {
      num: "05",
      title: "Condominium projects",
      body: (
        <>
          <p>
            Unit appraisals on form 1073, with project review for warrantability,
            HOA financials, owner&#8209;occupancy ratios, and limited&#8209;review
            qualification.
          </p>
          <p>
            We work the major York County developments and most of the converted
            historic buildings downtown.
          </p>
        </>
      ),
      meta: [
        ["Forms", "1073 · 1075 · Project Review"],
        ["Property types", "Condo, attached PUD"],
        ["Turnaround", "3–5 business days"],
        ["Inspection", "Interior + common"],
      ],
    },
    {
      num: "06",
      title: "Field reviews & desk reviews",
      body: (
        <>
          <p>
            Independent review of an existing report for quality control, dispute
            resolution, or compliance audit. Field or desk depending on scope.
          </p>
          <p>
            We never review another local appraiser's work without disclosure, and
            we approach every review assuming the original appraiser is competent
            until the evidence says otherwise.
          </p>
        </>
      ),
      meta: [
        ["Forms", "2000 · 2000A · Custom"],
        ["Property types", "All residential"],
        ["Turnaround", "5–10 business days"],
        ["Inspection", "Optional"],
      ],
    },
  ];

  return (
    <>
      <section className="page-hero container">
        <div className="page-hero__grid">
          <div>
            <div className="page-hero__crumb">Services</div>
            <h1 className="display">Residential. <em>Only.</em> Done well.</h1>
          </div>
          <p className="lede">
            We don't do commercial. We don't do litigation. We don't do tax
            appeals. We do residential mortgage&#8209;related appraisals for
            lenders — and we do them with the care of a shop that doesn't take on
            anything it can't finish well.
          </p>
        </div>
      </section>

      <section className="section container" style={{ paddingTop: 32 }}>
        {services.map((s) => (
          <div className="service-row" key={s.num}>
            <div>
              <span className="service-row__num">{s.num}</span>
              <h2 className="service-row__title">{s.title}</h2>
            </div>
            <div className="service-row__body">{s.body}</div>
            <div className="service-row__meta">
              {s.meta.map(([k, v]) => (
                <div className="service-row__meta-row" key={k}>
                  <span className="service-row__meta-key">{k}</span>
                  <span className="service-row__meta-val" dangerouslySetInnerHTML={{ __html: v }} />
                </div>
              ))}
            </div>
          </div>
        ))}
      </section>

      {/* What we deliver */}
      <section className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
        <div className="container">
          <SecHead
            eyebrow="Every report includes"
            title={<>The <em>same</em> envelope, every time.</>}
            intro="No matter the form, you get the same complete package — signed, sealed, and ready for the underwriter's first review."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1px 48px", marginTop: 16 }}>
            {[
              "Signed PDF and MISMO 2.6 XML",
              "Subject property photos — front, rear, street, plus interior",
              "Comparable photos — minimum three, geo&#8209;tagged",
              "Hand&#8209;drawn floor plan with GLA calculation",
              "Plat / location map with subject and comp pins",
              "Detailed adjustment commentary on every line",
              "Market conditions narrative — current quarter, local",
              "Neighborhood description with school&#8209;district context",
              "USPAP compliance addendum",
              "Direct&#8209;dial phone number for revision questions",
            ].map((item, i) => (
              <div key={i} style={{ display: "flex", gap: 14, padding: "16px 0", borderTop: "1px solid var(--hairline)", alignItems: "flex-start" }}>
                <Icon.check width="18" height="18" style={{ color: "var(--clay)", flexShrink: 0, marginTop: 2 }} />
                <span dangerouslySetInnerHTML={{ __html: item }} style={{ fontSize: 16, fontFamily: "var(--serif)" }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timing */}
      <section className="section container">
        <div style={{ maxWidth: 720 }}>
          <span className="eyebrow">A note on timing</span>
          <h2 className="display" style={{ marginTop: 16, fontSize: "clamp(28px, 3vw, 40px)" }}>
            48 hours, planned around.
          </h2>
          <p className="lede" style={{ marginTop: 20 }}>
            When we accept an assignment we commit to a delivery date and we
            meet it. If something on the borrower's end pushes a date, we'll
            call before the date slips &mdash; never after.
          </p>
        </div>
      </section>

      <section className="cta-strip">
        <div className="container">
          <div className="cta-strip__inner">
            <div>
              <h2 className="display">Order one this week.</h2>
            </div>
            <button className="btn btn--clay" onClick={() => setPage("contact")}>
              Order an appraisal <Icon.arrow width="16" height="16" />
            </button>
          </div>
        </div>
      </section>
    </>
  );
}

window.ServicesPage = ServicesPage;
