/* global React, Icon, SecHead, YorkCountyMap */

function HomePage({ setPage }) {
  return (
    <>
      {/* HERO */}
      <section className="hero container">
        <div className="hero__grid">
          <div className="hero__copy">
            <span className="eyebrow">Residential Appraisals · York County, PA</span>
            <h1 className="display" style={{ marginTop: 24, fontSize: "clamp(28px, 3.2vw, 52px)" }}>
              The home next door, <em>valued</em> by someone who lives here too.
            </h1>
            <p className="lede" style={{ marginTop: 28 }}>
              Independent residential appraisals for lenders and banks across York
              County. Twenty years of local market knowledge, USPAP&#8209;compliant
              reports, and a turnaround your underwriters can plan around.
            </p>
            <div className="hero__cta-row">
              <button className="btn btn--primary" onClick={() => setPage("contact")}>
                Order an appraisal <Icon.arrow width="16" height="16" />
              </button>
              <button className="btn btn--ghost" onClick={() => setPage("services")}>
                See what we cover
              </button>
            </div>
            <div className="hero__meta">
              <div className="hero__meta-item">
                <span className="hero__meta-num">20<span style={{ color: "var(--clay)" }}>+</span></span>
                <span className="hero__meta-label">Years in practice</span>
              </div>
              <div className="hero__meta-item">
                <span className="hero__meta-num">7,400</span>
                <span className="hero__meta-label">Reports delivered</span>
              </div>
              <div className="hero__meta-item">
                <span className="hero__meta-num">48hr</span>
                <span className="hero__meta-label">Typical turnaround</span>
              </div>
              <div className="hero__meta-item">
                <span className="hero__meta-num">1</span>
                <span className="hero__meta-label">County. All of it.</span>
              </div>
            </div>
          </div>

          <div className="hero__img-wrap">
            <div className="hero__img">
              <image-slot
                id="hero-photo"
                shape="rect"
                src="images/hero-photo.jpg"
                placeholder="Drop a York County street, home exterior, or porch shot"
              ></image-slot>
            </div>
            <div className="hero__badge">
              <span className="hero__badge-eyebrow">Est. 2005</span>
              <span className="hero__badge-text">Certified Residential Appraiser, PA-RL-002847</span>
            </div>
            <span className="hero__img-caption">A row house in the city of York</span>
          </div>
        </div>
      </section>

      {/* TRUST STRIP */}
      <section className="trust">
        <div className="container">
          <div className="trust__inner">
            <div className="trust__item">
              <span className="trust__num">USPAP</span>
              <span className="trust__label">Every report, every time</span>
            </div>
            <div className="trust__item">
              <span className="trust__num">FNMA · FHLMC</span>
              <span className="trust__label">GSE&#8209;approved formats</span>
            </div>
            <div className="trust__item">
              <span className="trust__num">AMC&nbsp;friendly</span>
              <span className="trust__label">We work your platform</span>
            </div>
            <div className="trust__item">
              <span className="trust__num">$1M E&amp;O</span>
              <span className="trust__label">Errors &amp; omissions covered</span>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICES PREVIEW */}
      <section className="section container">
        <SecHead
          eyebrow="What we deliver"
          title={<>Reports built for <em>lenders</em>, written for <em>real</em> homes.</>}
          intro="Every assignment is handled in&#8209;house by a certified residential appraiser who has walked properties in every zip code in the county. No subcontractors, no surprises."
        />

        <div className="services-grid">
          {[
            {
              num: "01",
              title: "Refinance appraisals",
              desc: "Conventional, FHA, and VA refinance valuations with the comparable selection and adjustment commentary your underwriting team expects.",
              forms: ["1004", "1004C", "2055"],
            },
            {
              num: "02",
              title: "Purchase transactions",
              desc: "Pre&#8209;close valuations on contracts ranging from $90K row homes in the city to $1.2M estate properties along the Susquehanna.",
              forms: ["1004", "1073", "1025"],
            },
            {
              num: "03",
              title: "Home equity & HELOC",
              desc: "Streamlined reports for second&#8209;lien products, including drive&#8209;by and desktop options where program guidelines allow.",
              forms: ["2055", "1075", "Desktop"],
            },
            {
              num: "04",
              title: "Condo & multi-family",
              desc: "Project review and unit valuation for condominiums; 2–4 unit residential income properties with rent schedules.",
              forms: ["1073", "1025", "216"],
            },
          ].map((s) => (
            <div className="service-card" key={s.num} onClick={() => setPage("services")}>
              <span className="service-card__num">— {s.num}</span>
              <h3 className="service-card__title">{s.title}</h3>
              <p className="service-card__desc" dangerouslySetInnerHTML={{ __html: s.desc }} />
              <div className="service-card__forms">
                {s.forms.map((f) => <span className="service-card__form" key={f}>Form {f}</span>)}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* PROCESS */}
      <section className="process section">
        <div className="container">
          <div className="sec-head">
            <div>
              <span className="eyebrow">How it works</span>
              <h2 className="display sec-head__title" style={{ color: "var(--cream)" }}>
                Order it Monday. Report by Wednesday.
              </h2>
            </div>
            <p className="lede sec-head__intro" style={{ color: "color-mix(in oklab, var(--cream) 85%, transparent)" }}>
              A typical assignment moves through three quiet steps. We share status at every one so your processors and borrowers always know where things stand.
            </p>
          </div>

          <div className="process__grid">
            <div className="process__step">
              <div className="process__rule"></div>
              <span className="process__num">01</span>
              <h3 className="process__title">Order received</h3>
              <p className="process__desc">
                Send through your AMC, vendor portal, or email. We confirm scope, fee, and target date within four business hours.
              </p>
            </div>
            <div className="process__step">
              <div className="process__rule"></div>
              <span className="process__num">02</span>
              <h3 className="process__title">Inspection</h3>
              <p className="process__desc">
                Scheduled with the borrower or listing agent within 24–48 hours. Interior, exterior, measurements, photos, plot.
              </p>
            </div>
            <div className="process__step">
              <div className="process__rule"></div>
              <span className="process__num">03</span>
              <h3 className="process__title">Report delivered</h3>
              <p className="process__desc">
                Signed PDF + XML through your platform. Most assignments close inside 48 hours of inspection.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICE AREA */}
      <section className="section container">
        <div className="area">
          <div>
            <span className="eyebrow">Where we work</span>
            <h2 className="display" style={{ marginTop: 16 }}>
              All of <em>York County</em>. Every borough, every back road.
            </h2>
            <p className="lede" style={{ marginTop: 20 }}>
              From the row homes of central York to the farms past Stewartstown, we cover the whole county — no extra mileage fees, no out&#8209;of&#8209;area surcharges.
            </p>
            <div className="area__towns">
              {["York", "Hanover", "Red Lion", "Dallastown", "Spring Grove", "Dover",
                "Stewartstown", "Glen Rock", "Wrightsville", "Jacobus", "Manchester",
                "Shrewsbury", "Dillsburg", "New Freedom", "Felton"].map((t) => (
                <div className="area__town" key={t}>{t}</div>
              ))}
            </div>
          </div>
          <div className="area__map">
            <YorkCountyMap />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-strip">
        <div className="container">
          <div className="cta-strip__inner">
            <div>
              <span className="eyebrow" style={{ color: "var(--clay-2)" }}>Ready when you are</span>
              <h2 className="display" style={{ marginTop: 16 }}>
                Place an order. We'll have it back to you this week.
              </h2>
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn--clay" onClick={() => setPage("contact")}>
                Order an appraisal <Icon.arrow width="16" height="16" />
              </button>
              <a className="btn btn--ghost" style={{ color: "var(--cream)", borderColor: "color-mix(in oklab, var(--cream) 30%, transparent)" }} href="tel:7178438100">
                <Icon.phone width="14" height="14" /> (717) 843&#8209;8100
              </a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.HomePage = HomePage;