// SmallTown.jsx — "The Small Town Discount" personal poster-style callout
function SmallTown() {
  return (
    <section id="small-town" className="sec" style={{ position: "relative", overflow: "hidden", background: "var(--gm-paper)" }}>
      <div className="sunburst" style={{
        position: "absolute", top: 0, left: 0, right: 0, bottom: 0,
        pointerEvents: "none", opacity: .55
      }}></div>
      <div className="wrap" style={{ position: "relative" }}>
        <div className="card" style={{ background: "#fff", boxShadow: "var(--shadow-block-lg)", padding: 0, position: "relative" }}>
          {/* corner stamp */}
          <div style={{
            position: "absolute", top: -16, left: 30, background: "var(--gm-yellow)",
            border: "var(--stroke) solid var(--gm-ink)", padding: "8px 16px", transform: "rotate(-2deg)",
            fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase",
            fontSize: 15, letterSpacing: ".04em", zIndex: 2
          }}>The Small Town Discount</div>

          <div style={{ display: "grid", gridTemplateColumns: "1.25fr .75fr", gap: 0 }} className="about-grid">
            <div style={{ padding: "52px 44px 44px" }}>
              <h2 style={{
                fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase",
                fontSize: "clamp(2rem, 3.6vw, 3.1rem)", lineHeight: .96, letterSpacing: "-.005em",
                color: "var(--gm-ink)", margin: 0, textWrap: "balance"
              }}>
                I grew up in a small town.<br/>
                <span style={{ color: "var(--gm-orange)" }}>I moved back on purpose.</span>
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.62, color: "var(--fg-2)", margin: "22px 0 0", maxWidth: 620 }}>
                Born and raised in Lancaster, PA. Spent over a decade in Philadelphia building a
                career. Now I'm back, raising my kids in the same kind of place that raised me.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.62, color: "var(--fg-2)", margin: "14px 0 0", maxWidth: 620 }}>
                I believe in small towns. I also know how it usually goes for the businesses in them.
                You're great at the thing you do, you've got a reputation built on word of mouth, and
                marketing is the stuff you'll get to eventually.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.62, color: "var(--gm-ink)", margin: "14px 0 0", maxWidth: 620, fontWeight: 500 }}>
                Here's the deal. If you run a small business in a small town, and you need a website,
                help getting found, or just a plan to make the phone ring a little more, reach out.
                We'll find a way to work together.
              </p>
              <div style={{ marginTop: 28 }}>
                <Btn variant="primary" href="#contact" icon="lightning">Reach Out</Btn>
              </div>
            </div>

            {/* side panel */}
            <div style={{
              background: "var(--gm-paper)", color: "var(--gm-ink)", borderLeft: "var(--stroke) solid var(--gm-ink)",
              display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center",
              padding: "44px 32px", position: "relative", overflow: "hidden", textAlign: "center", minHeight: 480
            }}>
              {/* farm graphic behind the place name */}
              <img src="assets/wc-farm.png" alt="" style={{
                position: "absolute", bottom: -10, left: "50%", transform: "translateX(-50%)",
                width: "130%", maxWidth: "none", pointerEvents: "none", opacity: .5
              }} />

              <i className="ph-fill ph-map-pin" style={{ position: "relative", fontSize: 46, color: "var(--gm-orange)" }}></i>
              <div style={{ position: "relative", fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", fontSize: 44, lineHeight: .9, marginTop: 14, color: "var(--gm-ink)" }}>
                Lancaster,<br/>PA
              </div>
              <div style={{ position: "relative", fontFamily: "var(--font-body)", fontSize: 14, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--gm-ink)", marginTop: 12 }}>
                Home Base
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SmallTown });