// Realtors hub + Gift Card sub-page + Listing Prep sub-page

function PageRealtors({ navigate, theme }) {
  const themeClass = theme === "charcoal" ? "theme-charcoal" : "theme-white";
  const tiles = [
  {
    id: "realtors-listing",
    eyebrow: "Before listing",
    title: <>Listing‑Ready Resets &amp; <em>Clean Outs.</em></>,
    blurb: "Pre‑listing junk removal and a whole house reset so you can hit the market fast — and show a home that photographs clean.",
    meta: "Priority scheduling for partner agents"
  },
  {
    id: "realtors-giftcard",
    eyebrow: "After closing",
    title: <>New <em>Home Resets.</em></>,
    blurb: "Post‑move gift that makes you the hero after closing. We erase the last traces of the move so their new house feels like home fast",
    meta: "Priority scheduling for partner agents"
  }];


  return (
    <section className={"section section--full " + themeClass}>
      <div className="section__inner" style={{ display: "flex", flexDirection: "column", gap: 56, maxWidth: 1240 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 56, alignItems: "end" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>For real estate partners</span>
            <h1 className="display-h1" style={{ fontSize: "108px" }}>Two ways we make you look <em>great.</em></h1>
            <p className="lede" style={{ maxWidth: "60ch" }}>
              Pick where you need us — before the listing or after the closing. Either way, your
              clients get a calm, white‑glove crew, and you get the credit.
            </p>
          </div>
          <div className="hero__media">
            <div className="photo" style={{ aspectRatio: "1/1", overflow: "hidden", background: "var(--tossit-white)", borderRadius: 20, display: "flex", alignItems: "flex-end", justifyContent: "center", padding: 12 }}>
              <img src="assets/realtor-sold-lineart.png" alt="Line-art of an agent and client shaking hands by a SOLD sign" style={{ width: "100%", height: "auto", objectFit: "contain", display: "block" }} />
            </div>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
          {tiles.map((tile) =>
          <button
            key={tile.id}
            onClick={() => navigate(tile.id)}
            style={{ background: "#EDEAE4", border: "1px solid rgba(26,11,8,0.08)", borderRadius: 20, padding: "44px 36px", textAlign: "left", cursor: "pointer", display: "flex", flexDirection: "column", gap: 18, minHeight: 360, font: "inherit", color: "inherit", transition: "transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease" }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = "translateY(-3px)";e.currentTarget.style.borderColor = "rgba(26,11,8,0.18)";e.currentTarget.style.boxShadow = "0 24px 60px rgba(26,11,8,0.12)";}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = "";e.currentTarget.style.borderColor = "rgba(26,11,8,0.08)";e.currentTarget.style.boxShadow = "";}}>
              <span className="eyebrow">{tile.eyebrow}</span>
              <h2 className="display-h2" style={{ fontSize: 40, margin: 0 }}>{tile.title}</h2>
              <p className="body" style={{ color: "var(--fg2)", margin: 0, maxWidth: "38ch" }}>{tile.blurb}</p>
              <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 16, borderTop: "1px solid rgba(26,11,8,0.08)" }}>
                <span className="body-sm" style={{ color: "var(--fg2)" }}>{tile.meta}</span>
                <span style={{ font: "600 14px/1 var(--font-sans)", color: "var(--tossit-charcoal)", letterSpacing: "-0.01em" }}>Learn more <span className="arrow" aria-hidden style={{ marginLeft: 4 }}>→</span></span>
              </div>
            </button>
          )}
        </div>
        <p className="body-sm" style={{ color: "var(--fg2)", marginTop: -16 }}>
          If you're not a licensed agent, this page probably isn't for you.{" "}
          <button onClick={() => navigate("home")} style={{ background: "none", border: "none", padding: 0, font: "inherit", color: "var(--tossit-red)", cursor: "pointer", textDecoration: "underline", textUnderlineOffset: 4 }}>Start here instead →</button>
        </p>
      </div>
    </section>);
}
window.PageRealtors = PageRealtors;

function PageRealtorsListing({ navigate, theme }) {
  const themeClass = theme === "charcoal" ? "theme-charcoal" : "theme-white";
  const [submitted, setSubmitted] = React.useState(false);

  // Carrying-cost calculator — change LIST_READY_PRICE in one place to retune.
  const LIST_READY_PRICE = 2500;
  const [monthlyCost, setMonthlyCost] = React.useState(4000);
  const [weeksDIY, setWeeksDIY] = React.useState(4);
  const weeklyCost = monthlyCost / 4.345;
  const diyCarryCost = weeklyCost * weeksDIY;
  const difference = diyCarryCost - LIST_READY_PRICE;
  const roundTo10 = (n) => Math.round(n / 10) * 10;
  const money = (n) => "$" + roundTo10(n).toLocaleString("en-US");
  const closeEnough = Math.abs(difference) <= 250;

  return (
    <>
      {/* Hero */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <button className="btn btn--ghost" onClick={() => navigate("realtors")} style={{ alignSelf: "flex-start", marginBottom: 8 }}>← All realtor services</button>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Before listing</span>
            <h1 className="display-h1">List‑Ready Resets &amp; <em>Clean Outs.</em></h1>
            <p className="lede" style={{ maxWidth: "56ch" }}>Full service whole home pre‑listing preparation so you can hit the market fast — and spend more time showing. 


            </p>
            <div className="hero__ctas">
              <a href="#realtor-join" className="btn btn--primary btn--lg" onClick={(e) => {e.preventDefault();document.getElementById("realtor-join").scrollIntoView({ behavior: "smooth" });}}>
                Become a partner <span className="arrow" aria-hidden>→</span>
              </a>
              <button className="btn btn--ghost" onClick={() => document.getElementById("listing-services").scrollIntoView({ behavior: "smooth" })}>See the two services</button>
            </div>
          </div>
          <div className="hero__media">
            <div className="photo" style={{ aspectRatio: "1086/1448", overflow: "hidden", background: "var(--tossit-cream-dark)" }}>
              <img src="assets/realtor-livingroom-boxes.png" alt="Line-art moving boxes framing a calm, staged living room" style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
            </div>
          </div>
        </div>
      </section>

      {/* Editorial intro — "You got the listing" */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <span className="eyebrow">The problem</span>
            <h2 className="display-h2">You got the listing. <em>Now you need it list‑ready.</em></h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <p className="lede" style={{ fontSize: 18 }}>
              Sellers sign the paperwork… but the house is still full of old furniture, boxes,
              "we'll sort it later" piles, and garage and yard junk.
            </p>
            <p className="body" style={{ color: "var(--fg2)" }}>
              Photos get delayed. Staging is harder. You end up chasing junk crews and cleaners
              while trying not to upset emotional, time‑constrained sellers who don't want to
              deal with their own stuff.
            </p>
            <p className="body" style={{ color: "var(--fg1)" }}>
              Your job is to <em style={{ font: "300 italic 1em var(--font-serif)" }}>sell</em> the house.
              Our job is to get the property to "nothing in the way of photos" — as fast and
              painlessly as possible for you and your seller.
            </p>
          </div>
        </div>
      </section>

      {/* Carrying-cost calculator — "Is it really cheaper to do it yourself?" */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 48, maxWidth: 760 }}>
            <span className="eyebrow">The math</span>
            <h2 className="display-h2">Is it really cheaper for your client <em>do it themselves?</em></h2>
            <p className="lede" style={{ maxWidth: "56ch" }}>
              The longer a house sits while your seller "gets to it on the weekend," the more it
              quietly costs them. Plug in two numbers and see what a slow clear‑out actually adds up to.
            </p>
          </div>

          <div className="calc">
            <div className="calc__inputs">
              <label className="calc__field">
                <span className="calc__label">THIER TOTAL MONTHLY COST TO KEEP THIS HOUSE</span>
                <span className="calc__help">Mortgage  + taxes + insurance + HOA + average utilities (holding cost)</span>
                <div className="calc__value">${monthlyCost.toLocaleString("en-US")}<span className="calc__value-unit"> / month</span></div>
                <input type="range" min={1500} max={30000} step={250}
                value={monthlyCost}
                onChange={(e) => setMonthlyCost(parseInt(e.target.value, 10))}
                className="calc__slider" />
                <div className="calc__rail">
                  <span>$1,500</span>
                  <span>$30,000</span>
                </div>
              </label>

              <label className="calc__field">
                <span className="calc__label">WEEKS IT WILL REALISTICALLY TAKE THEM TO FINISH CLEARING IT THEMSELVES</span>
                <span className="calc__help">Working nights and weekends around everything else in their lives</span>
                <div className="calc__value">{weeksDIY}<span className="calc__value-unit"> {weeksDIY === 1 ? "week" : "weeks"}</span></div>
                <input type="range" min={1} max={8} step={1}
                value={weeksDIY}
                onChange={(e) => setWeeksDIY(parseInt(e.target.value, 10))}
                className="calc__slider" />
                <div className="calc__rail">
                  <span>1 wk</span>
                  <span>8 wks</span>
                </div>
              </label>
            </div>

            <div className="calc__out">
              <p className="calc__line">
                At <strong>{weeksDIY} {weeksDIY === 1 ? "week" : "weeks"}</strong>, keeping this house costs about <strong>{money(diyCarryCost)}</strong> while your seller clears it themselves.
              </p>
              <p className="calc__line">
                Our typical <em>List‑Ready Reset</em> for a 4‑bed home is about <strong>{money(LIST_READY_PRICE)}</strong>.
              </p>
              <p className="calc__line calc__line--punch">
                {closeEnough ?
                <>At these numbers, doing it themselves costs about the same as having us clear it in one visit. The real question is whether those weeks are worth the stress.</> :
                difference > 0 ?
                <>At these numbers, doing it themselves costs about <strong>{money(difference)}</strong> more in carrying costs than having us clear it in one visit.</> :
                <>At these numbers, doing it themselves saves about <strong>{money(Math.abs(difference))}</strong> in pure carrying costs — before you factor in their time, energy, and momentum to market.</>
                }
              </p>
            </div>
          </div>

          <p className="calc__kicker">Speed to market is leverage: listings that launch clean and on time get better offers, appraise higher, and turn into happy sellers who send you your next three clients.



          </p>
        </div>
      </section>

      {/* The house isn't messy — emotional ROI of a reset */}
      <section className={"section section--full " + themeClass} style={{ paddingTop: 112, paddingBottom: 112 }}>
        <div className="section__inner" style={{ maxWidth: 1120, marginLeft: "auto", marginRight: "auto" }}>
          {/* Two-column editorial: headline left, narrative right */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72, alignItems: "start" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
              <span className="eyebrow">Why it pays</span>
              <h2 className="display-h2" style={{ textWrap: "balance" }}>The house isn't messy. <em>It's just full of someone else's life.</em></h2>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <p className="body" style={{ color: "var(--fg2)" }}>
              Most higher‑end homes we see aren't junky — they're just busy telling the current
              owner's story. Every surface, corner, and wall quietly says "their life," which makes
              it hard for a buyer to picture their own couch, their table, their morning coffee.
            </p>
            <p className="body" style={{ color: "var(--fg1)" }}>
              A List‑Ready Reset creates that empty space in the buyer's head. We remove the extra
              layer of "life stuff" so rooms feel calm, neutral, and full of possibility. That's the
              exact moment the ROI happens — when a buyer stops seeing someone else's home and starts
              seeing their own.
            </p>
            <p className="body" style={{ color: "var(--fg2)" }}>
              And that shift is worth real money. When buyers can picture their life in a home, they
              bid with emotion, not just logic — and emotional buyers offer more. Industry data on
              home staging consistently points to offers coming in <strong style={{ fontWeight: 600, color: "var(--fg1)" }}>1–5% higher</strong> when a home shows well.
            </p>
            </div>
          </div>

          {/* Mini case study — ROI on a $1M home, kept light + airy */}
          <div style={{ marginTop: 80, paddingTop: 64, borderTop: "1px solid var(--tossit-cream-dark)", display: "flex", flexDirection: "column", alignItems: "center", gap: 48 }}>
            <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
              <span className="eyebrow" style={{ whiteSpace: "nowrap" }}>Mini case study</span>
              <p style={{ font: "300 italic 34px/1.35 var(--font-serif)", color: "var(--fg1)", margin: 0, maxWidth: "24ch" }}>A $1,000,000 home that shows better pulls higher offers.</p>
            </div>
            <div className="roi-stats" style={{ display: "flex", justifyContent: "center", width: "100%", maxWidth: 760 }}>
              {[
              { lift: "1% lift", amt: "+$10,000" },
              { lift: "3% lift", amt: "+$30,000" },
              { lift: "5% lift", amt: "+$50,000" }].
              map((r, i) =>
              <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: "0 20px", borderLeft: i === 0 ? "none" : "1px solid var(--tossit-cream-dark)" }}>
                  <span style={{ color: "var(--fg3)", font: "600 12px/1 var(--font-sans)", textTransform: "uppercase", letterSpacing: "0.1em", whiteSpace: "nowrap" }}>{r.lift}</span>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: 52, fontWeight: 700, lineHeight: 1, letterSpacing: "-0.03em", color: "var(--tossit-red)" }}>{r.amt}</span>
                </div>
              )}
            </div>
            <p className="body" style={{ color: "var(--fg2)", margin: 0, maxWidth: "58ch", textAlign: "center" }}>Even at the low end, that's thousands of dollars from a single day of getting the home List‑Ready — a return that dwarfs the cost of the service itself.</p>
          </div>
        </div>
      </section>

      {/* Why top agents add it */}
      <section className={"section section--full " + themeClass} style={{ background: "var(--tossit-cream-deep)" }}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 48, maxWidth: 760 }}>
            <span className="eyebrow">Why agents add it</span>
            <h2 className="display-h2">Top agents add a Listing Reset to <em>their toolkit.</em></h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 28, maxWidth: 1100 }}>
            {[
            { t: "Faster to market.", b: "No waiting on sellers to \u201cget around to it.\u201d We clear the property on a date that lines up with your seller to get the stagers and photographer in faster." },
            { t: "Better photos, better offers.", b: "Buyers see the house, not the junk. Listings show up clean on day one and command stronger offers." },
            { t: "Less emotional labor.", b: "You're not the one pushing clients to clean. We absorb that conversation so you stay the trusted advisor." },
            { t: "More reviews and referrals.", b: "Clients remember the agent who solved the pre‑move mess \u2014 not just the paperwork." }].
            map((x, i) =>
            <div key={i} style={{ display: "flex", flexDirection: "column", gap: 12, paddingTop: 22, borderTop: "2px solid var(--fg1)" }}>
                <h3 style={{ font: "700 22px/1.2 var(--font-sans)", letterSpacing: "-0.01em", margin: 0 }}>{x.t}</h3>
                <p className="body" style={{ color: "var(--fg2)", margin: 0 }}>{x.b}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Toss It Tag-It Kit */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 80, alignItems: "center" }}>
          {/* Gift card image — matches the New Home Resets treatment */}
          <div className="hero__media">
            <div className="photo" style={{ aspectRatio: "4/5", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--tossit-cream-dark)", overflow: "hidden", padding: 40 }}>
              <img src="assets/gift-card-front.png" alt="The $250 Tossit Home Reset gift card" style={{ display: "block", width: "100%", maxWidth: 420, height: "auto", borderRadius: 16, transform: "rotate(-5deg)", boxShadow: "0 50px 90px rgba(26,11,8,0.34)" }} />
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>The seller's secret weapon</span>
            <h2 className="display-h2">Tag-It <em>Toss-It Kit.</em></h2>
            <p className="lede" style={{ fontSize: 18 }}>
              Make decluttering seller‑friendly — <em style={{ font: "300 italic 1em var(--font-serif)" }}>and effortless for you.</em>
            </p>
            <p className="body" style={{ color: "var(--fg2)", maxWidth: "58ch" }}>
              Getting a cluttered home list‑ready is easier when your sellers have a simple system
              to follow. The Tag‑It Kit gives them that system — and quietly locks us in as the crew
              that handles the mess at the end.
            </p>

            {/* What's in the kit */}
            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 18 }}>
              <span className="eyebrow">What's in the kit</span>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                <div style={{ paddingTop: 18, borderTop: "2px solid var(--fg1)", display: "flex", flexDirection: "column", gap: 8 }}>
                  <span style={{ font: "700 18px/1.25 var(--font-sans)", letterSpacing: "-0.01em" }}>$250 Toss It Gift Card</span>
                  <span className="body-sm" style={{ color: "var(--fg2)" }}>Good toward any Listing Reset or Clean Out of $600+, so the "big cleanout day" doesn't feel like a sunk cost.</span>
                </div>
                <div style={{ paddingTop: 18, borderTop: "2px solid var(--fg1)", display: "flex", flexDirection: "column", gap: 8 }}>
                  <span style={{ font: "700 18px/1.25 var(--font-sans)", letterSpacing: "-0.01em" }}>Red "Toss It" stickers + instruction card</span>
                  <span className="body-sm" style={{ color: "var(--fg2)" }}>"As you pack, tag items. When you're ready, we follow the red stickers and clear everything in one shot."</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* How it works for sellers */}
        <div className="section__inner" style={{ marginTop: 64 }}>
          <div className="section__head" style={{ marginBottom: 40, maxWidth: 760 }}>
            <span className="eyebrow">How it works for your sellers</span>
            <h3 className="display-h2" style={{ fontSize: 36 }}>One sticker at a time. <em>No move‑out day panic.</em></h3>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
            {[
            { n: "01", b: "You hand them the Tag‑It Kit right after they sign the listing agreement." },
            { n: "02", b: "As they pack over the next few days or weeks, they tag unwanted furniture and items with red stickers \u2014 instead of making 100 high‑pressure decisions on move‑out day." },
            { n: "03", b: "When the red \u201cToss It\u201d stickers are on everything that needs to go, they scan the QR on the $250 card or call us." },
            { n: "04", b: "We show up, follow the red stickers, and get the house ready for you to list." }].
            map((s) =>
            <div key={s.n} style={{ display: "flex", flexDirection: "column", gap: 12, paddingTop: 20, borderTop: "2px solid var(--fg1)" }}>
                <span style={{ font: "300 italic 48px/1 var(--font-serif)", color: "var(--tossit-red)", letterSpacing: "-0.02em" }}>{s.n}</span>
                <p className="body-sm" style={{ color: "var(--fg2)", margin: 0 }}>{s.b}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Two services — Listing Reset vs Listing Clean Out */}
      <section id="listing-services" className={"section section--full " + themeClass}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 56, maxWidth: 820 }}>
            <span className="eyebrow">WE DO THE HEAVY LIFTING</span>
            <h2 className="display-h2">Two <em>ways we help.</em></h2>
            <p style={{ marginTop: 20, font: "400 18px/1.5 var(--font-sans)", color: "var(--fg2)", maxWidth: "60ch" }}>
              Most listings fall into one of two buckets. Pick the one that matches the property
              and we'll quote it as a single project price.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            {/* Listing Ready Reset */}
            <div style={{ background: "#ffffff", border: "1px solid rgba(26,11,8,0.08)", borderRadius: 24, padding: "44px 40px 40px", display: "flex", flexDirection: "column", gap: 24, position: "relative", boxShadow: "0 8px 24px rgba(26,11,8,0.05)" }}>
              <span style={{ position: "absolute", top: 22, right: 22, padding: "7px 14px", borderRadius: 999, background: "var(--tossit-red)", color: "var(--tossit-cream)", font: "600 11px/1 var(--font-sans)", letterSpacing: "0.14em", textTransform: "uppercase" }}>Most popular</span>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <span style={{ alignSelf: "flex-start", padding: "7px 14px", borderRadius: 999, background: "var(--tossit-cream-deep)", font: "600 11px/1 var(--font-sans)", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--fg1)" }}>LAST 25-50% OF STUFF</span>
                <h3 style={{ font: "700 44px/1.05 var(--font-sans)", letterSpacing: "-0.025em", margin: 0 }}>Listing Ready Reset</h3>
                <p className="body" style={{ color: "var(--fg2)", margin: 0, maxWidth: "32ch" }}>For sellers who already moved most things out or are thinning out clutter— clear the leftovers and reset the space.</p>
              </div>
              <div style={{ paddingTop: 20, borderTop: "1px solid rgba(26,11,8,0.08)", display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{ font: "700 56px/1 var(--font-sans)", letterSpacing: "-0.03em", color: "var(--tossit-charcoal)" }}>$1,200<span style={{ color: "var(--fg2)", fontWeight: 500, fontSize: 32 }}>–$1,800</span></span>
                <span className="body-sm" style={{ color: "var(--fg2)" }}>Flat project price · Typical 3–4 bed home</span>
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {["Remove leftovers from house, garage, and yard", "Standard dump fees covered", "Light reset — floors swept, surfaces cleared", "Photog and stager can plug right in"].map((b, i) =>
                <li key={i} className="body-sm" style={{ color: "var(--fg1)", display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" style={{ flex: "0 0 auto", marginTop: 1 }}>
                      <circle cx="9" cy="9" r="9" fill="var(--tossit-charcoal)" />
                      <path d="M5.25 9.25l2.5 2.5L12.75 6.5" stroke="var(--tossit-cream)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    <span>{b}</span>
                  </li>
                )}
              </ul>
              <button className="btn btn--primary btn--lg" onClick={() => document.getElementById("realtor-join").scrollIntoView({ behavior: "smooth" })} style={{ marginTop: "auto", justifyContent: "center", width: "100%" }}>Become a partner <span className="arrow" aria-hidden>→</span></button>
            </div>

            {/* Listing Clean Out — featured */}
            <div style={{ background: "var(--tossit-charcoal)", color: "var(--tossit-cream)", borderRadius: 24, padding: "44px 40px 40px", display: "flex", flexDirection: "column", gap: 24, position: "relative", boxShadow: "0 24px 60px rgba(26,11,8,0.18)" }}>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <span style={{ alignSelf: "flex-start", padding: "7px 14px", borderRadius: 999, background: "rgba(242,237,227,0.08)", border: "1px solid rgba(242,237,227,0.18)", font: "600 11px/1 var(--font-sans)", letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(242,237,227,0.85)" }}>STILL 50%+ FULL</span>
                <h3 style={{ font: "700 44px/1.05 var(--font-sans)", letterSpacing: "-0.025em", margin: 0, color: "var(--tossit-cream)" }}>Listing Clean Out</h3>
                <p className="body" style={{ color: "rgba(242,237,227,0.72)", margin: 0, maxWidth: "32ch" }}>For estates and long‑occupied homes — full contents cleared or heavy decluttering so the listing can move.</p>
              </div>
              <div style={{ paddingTop: 20, borderTop: "1px solid rgba(242,237,227,0.14)", display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{ font: "700 56px/1 var(--font-sans)", letterSpacing: "-0.03em", color: "var(--tossit-cream)" }}>$1,800<span style={{ color: "rgba(242,237,227,0.55)", fontWeight: 500, fontSize: 32 }}>–$3,500+</span></span>
                <span className="body-sm" style={{ color: "rgba(242,237,227,0.65)" }}>Project price with a do‑not‑exceed cap · Quoted after walkthrough</span>
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {["Most of the contents of house, garage, and outbuildings", "Heavy bagging, sorting, and multiple van loads", "Single project price with a do‑not‑exceed cap", "From overwhelming to list‑ready in as few visits as possible"].map((b, i) =>
                <li key={i} className="body-sm" style={{ color: "var(--tossit-cream)", display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" style={{ flex: "0 0 auto", marginTop: 1 }}>
                      <circle cx="9" cy="9" r="9" fill="var(--tossit-red)" />
                      <path d="M5.25 9.25l2.5 2.5L12.75 6.5" stroke="var(--tossit-cream)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    <span>{b}</span>
                  </li>
                )}
              </ul>
              <button className="btn btn--primary btn--lg" onClick={() => document.getElementById("realtor-join").scrollIntoView({ behavior: "smooth" })} style={{ marginTop: "auto", justifyContent: "center", width: "100%" }}>Become a partner <span className="arrow" aria-hidden>→</span></button>
            </div>
          </div>
        </div>
      </section>

      {/* Three steps */}
      <section className={"section section--full " + themeClass} style={{ background: "var(--tossit-cream-deep)" }}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 56 }}>
            <span className="eyebrow">How it works</span>
            <h2 className="display-h2">From cluttered to list‑ready, <em>in three steps.</em></h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {[
            { n: "01", t: "Schedule a quick walkthrough.", b: "You or your seller books a 20–30 minute in‑person or video walkthrough at a time that fits the listing schedule." },
            { n: "02", t: "Get one flat price before we start.", b: "We tell you whether it's a Listing Reset or Clean Out and give you a single project price with a clear do‑not‑exceed cap. No on‑site \u201cwe'll see\u201d games." },
            { n: "03", t: "We clear, reset — you list.", b: "We remove the unwanted and leftover items, do a light clean, send you after photos, and you go straight to photos, staging, and a live listing." }].
            map((s) =>
            <div key={s.n} style={{ display: "flex", flexDirection: "column", gap: 14, paddingTop: 20, borderTop: "2px solid var(--fg1)" }}>
                <span style={{ font: "300 italic 56px/1 var(--font-serif)", color: "var(--tossit-red)", letterSpacing: "-0.02em" }}>{s.n}</span>
                <h3 style={{ font: "700 22px/1.2 var(--font-sans)", letterSpacing: "-0.01em", margin: 0 }}>{s.t}</h3>
                <p className="body" style={{ color: "var(--fg2)", margin: 0 }}>{s.b}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* The List-Ready Guarantee */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Our promise</span>
            <h2 className="display-h2">The <em>List‑Ready</em> Guarantee.</h2>
          </div>
          <div style={{ paddingLeft: 40, borderLeft: "1px solid var(--tossit-cream-dark)", display: "flex", flexDirection: "column", gap: 18 }}>
            <p className="lede" style={{ fontSize: 18 }}>
              If we leave any scoped area obviously not junk‑free or clearly not "list‑ready" for
              photos, tell us within 24 hours.
            </p>
            <p className="body" style={{ color: "var(--fg2)" }}>
              We'll come back and fix it at no extra charge. One call gets the house truly ready —
              or we make it right.
            </p>
          </div>
        </div>
      </section>

      {/* What's extra */}
      <section className={"section section--full " + themeClass} style={{ background: "var(--tossit-cream-deep)" }}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <span className="eyebrow">No surprises</span>
            <h2 className="display-h2">What's extra <em>(so you're never surprised).</em></h2>
            <p className="body" style={{ color: "var(--fg2)", maxWidth: "44ch" }}>
              Most Listing Resets cover normal household contents. Anything below is quoted as a
              Clean Out or referred out — and we'll flag it in the walkthrough before you or your
              seller says yes.
            </p>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 18 }}>
            {[
            { t: "Heavy debris and items", b: "Concrete, dirt, roofing, brick, tile, pianos, safes, hot tubs." },
            { t: "Hazardous or regulated materials", b: "Paint, chemicals, oils, propane tanks, batteries, refrigerators and freezers." },
            { t: "True hoarder‑level contents", b: "Or whole‑estate clearouts that need a multi‑day crew." }].
            map((x, i) =>
            <li key={i} style={{ display: "flex", gap: 24, paddingTop: 18, borderTop: "1px solid var(--tossit-cream-dark)" }}>
                <span style={{ flex: "0 0 auto", width: 8, height: 8, background: "var(--tossit-red)", marginTop: 10, borderRadius: "50%" }} />
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span style={{ font: "700 18px/1.3 var(--font-sans)", letterSpacing: "-0.01em" }}>{x.t}</span>
                  <span className="body-sm" style={{ color: "var(--fg2)" }}>{x.b}</span>
                </div>
              </li>
            )}
          </ul>
        </div>
      </section>

      {/* Become a partner */}
      <section id="realtor-join" className={"section section--full " + themeClass} style={{ background: "var(--tossit-charcoal)", color: "var(--tossit-cream)" }}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Become a partner</span>
            <h2 className="display-h2" style={{ color: "var(--tossit-cream)" }}>Become a <em>Realtor Reset Partner.</em></h2>
            <p style={{ margin: "4px 0 0", font: "700 26px/1.35 var(--font-sans)", letterSpacing: "-0.01em", color: "var(--tossit-cream)" }}>
              Free to join. <span style={{ color: "#A8BFE0" }}>We fund the $250 credits</span> as our marketing cost.
            </p>
            <p className="lede" style={{ color: "rgba(242,237,227,0.78)", maxWidth: "44ch", marginTop: 8 }}>More happy clients. More love in your reviews. And more referrals.</p>
            <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 10, color: "rgba(242,237,227,0.65)", font: "400 14px/1.6 var(--font-sans)" }}>
              <span><span style={{ color: "var(--tossit-red)" }}>·</span> No fees, no minimums.</span>
              <span><span style={{ color: "var(--tossit-red)" }}>·</span> We approve within 1 business day.</span>
            </div>
          </div>

          <form className="form2" onSubmit={(e) => {
            e.preventDefault();
            const f = e.target;
            if (window.sb) {
              window.sb.from('realtor_applications').insert({
                source_page: window.location.hash || 'realtors',
                name:      f.name.value,
                brokerage: f.brokerage.value,
                email:     f.email.value,
                mobile:    f.mobile.value,
                markets:   f.markets.value || null
              }).then(({ error }) => { if (error) console.error('realtor insert', error); });
            }
            setSubmitted(true);
          }}>
            {submitted ?
            <div className="form2__success">
                <div className="form2__success-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7" /></svg></div>
                <h3 className="form2__title">You're in. We'll be in touch within a business day.</h3>
                <p className="form2__sub">Once you're approved, your first pack of $250 Reset Gift Cards ships free.</p>
                <button type="button" className="btn btn--ghost" onClick={() => setSubmitted(false)} style={{ alignSelf: "flex-start" }}>Submit another</button>
              </div> :
            <>
                <div className="form2__head">
                  <span className="form2__chip">Partner application</span>
                  <h3 className="form2__title">Send me my free $250 client reset pack.</h3>
                  <p className="form2__sub">No fees. No minimums. Approval in 1 business day.</p>
                </div>
                <div className="form2__grid">
                  <div className="form2__field form2__field--full"><span className="form2__label">Name</span><input className="form2__input" name="name" required placeholder="Full name" /></div>
                  <div className="form2__field form2__field--full"><span className="form2__label">Brokerage</span><input className="form2__input" name="brokerage" required placeholder="Your firm" /></div>
                  <div className="form2__field"><span className="form2__label">Email</span><input className="form2__input" name="email" type="email" required placeholder="you@brokerage.com" /></div>
                  <div className="form2__field"><span className="form2__label">Mobile</span><input className="form2__input" name="mobile" type="tel" required placeholder="(555) 123‑4567" /></div>
                  <div className="form2__field form2__field--full"><span className="form2__label">Markets served</span><input className="form2__input" name="markets" placeholder="Salt Lake, Park City, ..." /></div>
                </div>
                <button className="btn btn--primary btn--lg form2__submit" type="submit">Send me my free $250 client reset pack <span className="arrow" aria-hidden>→</span></button>
                <p className="form2__foot">Free to join. We fund the credits as our marketing cost.</p>
              </>
            }
          </form>
        </div>
      </section>
    </>);
}
window.PageRealtorsListing = PageRealtorsListing;

function PageRealtorsGiftCard({ navigate, theme }) {
  const themeClass = theme === "charcoal" ? "theme-charcoal" : "theme-white";
  const [submitted, setSubmitted] = React.useState(false);

  return (
    <>
      {/* Hero */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>For real estate partners</span>
            <h1 className="display-h1" style={{ fontSize: "clamp(40px, 4.4vw, 76px)", lineHeight: 1.0 }}>You sold the dream. <em>We help deliver it faster.</em></h1>
            <p className="lede">We help your buyers and sellers ditch the unwanted items, settle in faster, and remember you as the agent who thought of everything.


            </p>
            <div className="hero__ctas">
              <a href="#join" className="btn btn--primary btn--lg" onClick={(e) => {e.preventDefault();document.getElementById("realtor-join").scrollIntoView({ behavior: "smooth" });}}>
                Become a partner <span className="arrow" aria-hidden>→</span>
              </a>
              <button className="btn btn--ghost" onClick={() => {document.getElementById("realtor-how").scrollIntoView({ behavior: "smooth" });}}>How it works</button>
            </div>
            <p style={{ margin: "8px 0 0", font: "700 22px/1.3 var(--font-sans)", letterSpacing: "-0.01em", color: "var(--tossit-charcoal)" }}>
               <span style={{ color: "rgb(12, 12, 12)", fontFamily: "\"Aktiv Grotesk\"", fontWeight: 500, fontSize: "22px" }}>Zero cost to you.</span> Real <em style={{ font: "300 italic 1.05em var(--font-serif)", fontWeight: "400" }}>$250 value</em> to your client.
            </p>
          </div>
          <div className="hero__media">
            <div className="photo" style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--tossit-cream-dark)" }}>
              <img src="assets/realtor-couch-lineart-v2.png" alt="Line-art of a homeowner relaxing on the couch after a Tossit reset" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>
        </div>
      </section>

      {/* One-line bridge: ties the dream to a concrete state */}
      <section className={"section section--full " + themeClass} style={{ paddingTop: 4, paddingBottom: 40 }}>
        <div className="section__inner" style={{ maxWidth: 940, marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
          <p style={{ font: "300 italic clamp(24px, 2.6vw, 34px)/1.32 var(--font-serif)", color: "var(--tossit-charcoal)", margin: 0, textWrap: "balance" }}>We erase the last traces of the move so your clients settle faster and remember you as the one who thought of it all.

          </p>
        </div>
      </section>

      {/* Vision section */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner" style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 20, maxWidth: 880, marginLeft: "auto", marginRight: "auto" }}>
          <span className="eyebrow">The pitch</span>
          <h2 className="display-h2" style={{ textWrap: "balance" }}>Your secret weapon <em>after closing.</em></h2>
          <p className="lede" style={{ maxWidth: "62ch", fontFamily: "var(--font-sans)", fontWeight: 400, fontSize: 20 }}>
            At the showing, your buyers saw what their next life could look like. After move‑in, that
            vision gets buried under boxes, leftover furniture, and a big mess.
          </p>
          <p className="lede" style={{ maxWidth: "62ch", fontFamily: "var(--font-sans)", fontWeight: 400, fontSize: 20 }}>Tossit steps in after the movers. In one visit, we quietly clear what doesn't belong and hand back rooms your clients can actually live in. You look organized, connected, and “full‑service” because you solved the part most agents ignore.



          </p>
        </div>
      </section>

      {/* How it works */}
      <section id="realtor-how" className={"section section--full " + themeClass} style={{ background: "var(--tossit-cream-deep)" }}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 56 }}>
            <span className="eyebrow">How it works</span>
            <h2 className="display-h2">The Realtor Reset Gift Card, <em>in three steps.</em></h2>
            <img src="assets/gift-card-front.png" alt="The $250 Tossit Home Reset gift card" style={{ display: "block", width: "100%", maxWidth: 420, height: "auto", margin: "48px auto 44px", borderRadius: 16, transform: "rotate(-5deg)", boxShadow: "0 50px 90px rgba(26,11,8,0.34)" }} />
            <p style={{ marginTop: 20, font: "400 18px/1.5 var(--font-sans)", color: "var(--tossit-charcoal)", maxWidth: "60ch", fontWeight: "600" }}>Zero cost to you as a realtor. $250 value to your client.</p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {[
            {
              n: "01",
              t: "You join (free).",
              b: "Tell us who you are and where you work. We approve you and ship you a pack of $250 Reset Gift Cards at no cost to you."
            },
            {
              n: "02",
              t: "You hand them out.",
              b: "Give a $250 Reset Gift Card to buyers at move‑in, sellers at listing, or clients with \u201ctoo much stuff.\u201d You're the one who \u201cknows a guy\u201d \u2014 and you look like you bought your client a $250 service. We cover the cost."
            },
            {
              n: "03",
              t: "We do the dirty work.",
              b: "Client books online using their credit. We clear the unwanted items, reset the space so they can actually use it, and you get the thank‑you text for \u201cthat amazing crew you sent.\u201d"
            }].
            map((s) =>
            <div key={s.n} style={{ display: "flex", flexDirection: "column", gap: 14, paddingTop: 20, borderTop: "2px solid var(--fg1)" }}>
                <span style={{ font: "300 italic 56px/1 var(--font-serif)", color: "var(--tossit-red)", letterSpacing: "-0.02em" }}>{s.n}</span>
                <h3 style={{ font: "700 22px/1.2 var(--font-sans)", letterSpacing: "-0.01em", margin: 0 }}>{s.t}</h3>
                <p className="body" style={{ color: "var(--fg2)", margin: 0 }}>{s.b}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Why it works for you */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 40, maxWidth: 760 }}>
            <span className="eyebrow">Why agents love it</span>
            <h2 className="display-h2">The little gift that shows up in every <em>"we love our agent"</em> story.</h2>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 18, maxWidth: 760 }}>
            {[
            "Turns \u201cthanks for helping us buy\u201d into \u201cour agent even handled the post‑move chaos.\u201d",
            "Gives you a concrete, memorable value‑add clients brag about to friends.",
            "Creates a natural follow‑up touch: \u201cHey, did you use your Reset credit yet?\u201d",
            "Makes it effortless to refer you — \u201cCall my agent, she went above and beyond for us.\u201d"].
            map((b, i) =>
            <li key={i} style={{ display: "flex", gap: 16, alignItems: "flex-start", paddingTop: 18, borderTop: "1px solid var(--tossit-cream-dark)" }}>
                <span style={{ flex: "0 0 auto", width: 8, height: 8, background: "var(--tossit-charcoal)", marginTop: 10, borderRadius: "50%" }} />
                <span className="body" style={{ color: "var(--fg1)" }}>{b}</span>
              </li>
            )}
          </ul>
          <p style={{ marginTop: 64, maxWidth: 760, font: "300 italic 32px/1.35 var(--font-serif)", color: "var(--tossit-charcoal)", letterSpacing: "-0.01em", fontWeight: "300" }}>
            You're not just the person who opened doors. You're the person who <em style={{ fontStyle: "italic", fontWeight: "500" }}>finished the transition.</em>
          </p>
        </div>
      </section>

      {/* Join form */}
      <section id="realtor-join" className={"section section--full " + themeClass} style={{ background: "var(--tossit-charcoal)", color: "var(--tossit-cream)" }}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Become a partner</span>
            <h2 className="display-h2" style={{ color: "var(--tossit-cream)" }}>Become a <em>Realtor Reset Partner.</em></h2>
            <p style={{ margin: "4px 0 0", font: "700 26px/1.35 var(--font-sans)", letterSpacing: "-0.01em", color: "var(--tossit-cream)" }}>
              Free to join. <span style={{ color: "#A8BFE0" }}>We fund the $250 credits</span> as our marketing cost.
            </p>
            <p className="lede" style={{ color: "rgba(242,237,227,0.78)", maxWidth: "44ch", marginTop: 8 }}>More happy clients. More love in your reviews. And more referrals.


            </p>
            <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 10, color: "rgba(242,237,227,0.65)", font: "400 14px/1.6 var(--font-sans)" }}>
              <span><span style={{ color: "var(--tossit-red)" }}>·</span> No fees, no minimums.</span>
              <span><span style={{ color: "var(--tossit-red)" }}>·</span> We approve within 1 business day.</span>
            </div>
          </div>

          <form className="form2" onSubmit={(e) => {
            e.preventDefault();
            const f = e.target;
            if (window.sb) {
              window.sb.from('realtor_applications').insert({
                source_page: window.location.hash || 'realtors',
                name:      f.name.value,
                brokerage: f.brokerage.value,
                email:     f.email.value,
                mobile:    f.mobile.value,
                markets:   f.markets.value || null
              }).then(({ error }) => { if (error) console.error('realtor insert', error); });
            }
            setSubmitted(true);
          }}>
            {submitted ?
            <div className="form2__success">
                <div className="form2__success-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7" /></svg></div>
                <h3 className="form2__title">You're in. We'll be in touch within a business day.</h3>
                <p className="form2__sub">Once you're approved, your first pack of $250 Reset Gift Cards ships free.</p>
                <button type="button" className="btn btn--ghost" onClick={() => setSubmitted(false)} style={{ alignSelf: "flex-start" }}>Submit another</button>
              </div> :
            <>
                <div className="form2__head">
                  <span className="form2__chip">Partner application</span>
                  <h3 className="form2__title">Send me my free $250 client reset pack.</h3>
                  <p className="form2__sub">No fees. No minimums. Approval in 1 business day.</p>
                </div>
                <div className="form2__grid">
                  <div className="form2__field form2__field--full"><span className="form2__label">Name</span><input className="form2__input" name="name" required placeholder="Full name" /></div>
                  <div className="form2__field form2__field--full"><span className="form2__label">Brokerage</span><input className="form2__input" name="brokerage" required placeholder="Your firm" /></div>
                  <div className="form2__field"><span className="form2__label">Email</span><input className="form2__input" name="email" type="email" required placeholder="you@brokerage.com" /></div>
                  <div className="form2__field"><span className="form2__label">Mobile</span><input className="form2__input" name="mobile" type="tel" required placeholder="(555) 123‑4567" /></div>
                  <div className="form2__field form2__field--full"><span className="form2__label">Markets served</span><input className="form2__input" name="markets" placeholder="Salt Lake, Park City, ..." /></div>
                </div>
                <button className="btn btn--primary btn--lg form2__submit" type="submit">Send me my free $250 client reset pack <span className="arrow" aria-hidden>→</span></button>
                <p className="form2__foot">Free to join. We fund the credits as our marketing cost.</p>
              </>
            }
          </form>
        </div>
      </section>
    </>);
}
window.PageRealtorsGiftCard = PageRealtorsGiftCard;