// Gift-card redemption decision page (/redeem) + two destination pages.
// PageRedeem is the "fork" screen: two large buttons routing to distinct pages.

function RedeemCard() {
  // The $250 Reset Gift Card visual, reused from the realtor page treatment.
  return (
    <div style={{ width: 300, maxWidth: "100%", aspectRatio: "1.6/1", background: "var(--tossit-charcoal)", borderRadius: 14, padding: 26, display: "flex", flexDirection: "column", justifyContent: "space-between", color: "var(--tossit-cream)", boxShadow: "0 30px 60px rgba(26,11,8,0.22)", transform: "rotate(-3deg)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <span style={{ font: "600 11px/1 var(--font-sans)", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--tossit-red)" }}>Reset Gift Card</span>
        <img src="assets/tossit-logo-cream.svg" alt="Tossit" style={{ height: 15 }} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
        <span style={{ font: "300 italic 60px/1 var(--font-serif)", letterSpacing: "-0.02em" }}>$250</span>
        <span style={{ font: "400 12px/1.4 var(--font-sans)", color: "rgba(242,237,227,0.72)" }}>Toward your home reset</span>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", font: "500 11px/1 var(--font-sans)", letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(242,237,227,0.6)" }}>
        <span>Ready to redeem</span>
        <span>$0 to activate</span>
      </div>
    </div>);
}

function PageRedeem({ navigate, theme }) {
  const themeClass = theme === "charcoal" ? "theme-charcoal" : "theme-white";

  const paths = [
  {
    id: "redeem-listing",
    eyebrow: "Getting ready to sell",
    title: <>I'm getting my home <em>ready to sell.</em></>,
    blurb: "Clear the clutter and reset the space so it photographs clean and hits the market fast.",
    meta: "Sellers & pre-listing"
  },
  {
    id: "redeem-homeowner",
    eyebrow: "Just moved in",
    title: <>I just bought <em>a home.</em></>,
    blurb: "New keys, a pile of boxes, and leftover stuff from the last owners. We'll clear it out so you can actually settle in.",
    meta: "New homeowners"
  }];


  return (
    <section className={"section section--full " + themeClass} style={{ paddingTop: 48, paddingBottom: 56, minHeight: "calc(100vh - 73px)", display: "flex", alignItems: "center" }}>
      <div className="section__inner" style={{ display: "flex", flexDirection: "column", gap: 36, width: "100%", maxWidth: 1040, marginLeft: "auto", marginRight: "auto" }}>

        {/* Header — text left, gift card image right */}
        <div style={{ display: "grid", gridTemplateColumns: "1.35fr 0.65fr", gap: 48, alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Redeem your $250 gift card</span>
            <h1 className="display-h1" style={{ textWrap: "pretty", fontSize: "clamp(48px, 5.2vw, 80px)", lineHeight: 0.99 }}>Start by telling us <em>where you are in the process.</em></h1>
            <p className="lede" style={{ maxWidth: "44ch", fontSize: 21 }}>Pick the one that sounds like you and we'll take it from there.

            </p>
          </div>
          <div style={{ width: "100%", maxWidth: 400, justifySelf: "center", aspectRatio: "1088/1356", overflow: "hidden", borderRadius: 24, boxShadow: "0 30px 70px rgba(26,11,8,0.16)" }}>
            <img
              src="assets/gift-card-scene.png"
              alt="$250 Tossit Home Reset gift card"
              style={{ width: "100%", height: "100%", display: "block", objectFit: "cover" }} />
          </div>
        </div>

        {/* Divider between hero and choice cards */}
        <div style={{ height: 1, width: "100%", background: "rgba(26,11,8,0.12)" }} />

        {/* The two-button fork */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, width: "100%" }}>
          {paths.map((p) =>
          <button
            key={p.id}
            onClick={() => navigate(p.id)}
            style={{ background: "var(--tossit-white)", border: "1px solid rgba(26,11,8,0.1)", borderRadius: 24, padding: "32px 36px", textAlign: "left", cursor: "pointer", display: "flex", flexDirection: "column", gap: 14, minHeight: 0, font: "inherit", color: "var(--tossit-charcoal)", transition: "transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease" }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = "translateY(-4px)";e.currentTarget.style.borderColor = "var(--tossit-red)";e.currentTarget.style.boxShadow = "0 28px 64px rgba(26,11,8,0.14)";}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = "";e.currentTarget.style.borderColor = "rgba(26,11,8,0.1)";e.currentTarget.style.boxShadow = "";}}>
              <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>{p.eyebrow}</span>
              <h2 className="display-h2" style={{ fontSize: 36, margin: 0, lineHeight: 1.04 }}>{p.title}</h2>
              <p className="body" style={{ color: "var(--fg2)", margin: 0, maxWidth: "36ch", fontSize: 16 }}>{p.blurb}</p>
              <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 18, borderTop: "1px solid rgba(26,11,8,0.1)" }}>
                <span className="body-sm" style={{ color: "var(--fg2)" }}>{p.meta}</span>
                <span style={{ font: "600 16px/1 var(--font-sans)", color: "var(--tossit-red)", letterSpacing: "-0.01em" }}>This is me <span className="arrow" aria-hidden style={{ marginLeft: 4 }}>→</span></span>
              </div>
            </button>
          )}
        </div>

        {/* Reassurance / help line */}
        <p className="body-sm" style={{ color: "var(--fg2)", maxWidth: "60ch", textAlign: "center", marginLeft: "auto", marginRight: "auto" }}>
          Either way, redeeming takes about a minute and your $250 is applied automatically.{" "}
          <button onClick={() => navigate("contact")} style={{ background: "none", border: "none", padding: 0, font: "inherit", color: "var(--tossit-red)", cursor: "pointer", textDecoration: "underline", textUnderlineOffset: 4 }}>Not sure or lost your card? Talk to us →</button>
        </p>
      </div>
    </section>);
}
window.PageRedeem = PageRedeem;

function PageRedeemHomeowner({ navigate, theme }) {
  const themeClass = theme === "charcoal" ? "theme-charcoal" : "theme-white";
  const [submitted, setSubmitted] = React.useState(false);
  const scrollToForm = () => document.getElementById("homeowner-redeem").scrollIntoView({ behavior: "smooth" });

  // What happens when you book — three simple cards, card 3 is the hero.
  const steps = [
  {
    n: "01",
    t: "Boxes & packing, gone",
    body: "We break down and haul the unpacked boxes and packing materials from your move, so you're not cutting cardboard for weeks or stuffing recycling bins to the brim."
  },
  {
    n: "02",
    t: "We reset the rooms that actually matter",
    body: "In your living room, kitchen, bedroom, and entry we move wrong‑room boxes into the correct areas, place furniture in the correct areas if needed, and sweep or vacuum the main paths so it feels clean underfoot, not gritty and dusty."
  },
  {
    n: "03",
    t: "We get the rooms you actually live in ready first",
    body: "Your living room, kitchen, and bedroom become calm, usable spaces, so you can relax, eat, and sleep like normal while you take your time settling the rest of the house.",
    hero: true
  }];


  // Pricing tiers — the middle one is the featured / most-booked card.
  const tiers = [
  {
    label: "Smaller homes",
    desc: "Condos, townhomes, smaller houses (typically up to ~1,800 sq ft).",
    price: "$595",
    note: "After your $250 credit, most smaller homes pay around $345.",
    featured: false
  },
  {
    label: "Standard homes",
    desc: "Most 3–4 bedroom homes (~1,800–2,800 sq ft).",
    price: "$795",
    note: "After your $250 credit, most standard homes pay around $545.",
    badge: "Most booked",
    featured: true
  },
  {
    label: "Larger homes",
    desc: "Larger / heavier homes (~2,800–4,000+ sq ft). Extra time for heavier volume and adjacent spaces.",
    price: "From $1,150",
    note: "Most larger‑home Resets land between $1,150 and $1,750 before your $250 credit. We confirm your exact price from photos.",
    featured: false
  }];


  return (
    <>
      {/* Hero */}
      <section className={"section section--full " + themeClass} style={{ paddingTop: 48, paddingBottom: 56, minHeight: "calc(100vh - 73px)", display: "flex", alignItems: "center" }}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "center", width: "100%" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <button className="btn btn--ghost" onClick={() => navigate("redeem")} style={{ alignSelf: "flex-start", marginBottom: 8 }}>← Back to redeem</button>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>New homeowners · $250 credit</span>
            <h1 className="display-h1" style={{ fontSize: "clamp(46px, 5vw, 72px)", lineHeight: 1.0 }}>Welcome home. <em>
Let's make it feel that way.</em></h1>
            <p className="lede" style={{ maxWidth: "56ch" }}>
              Use your <strong style={{ fontWeight: 600 }}>$250 Home Reset credit</strong> to erase the feeling of
              "we're still moving in" — every box and all packing materials gone, your living room, kitchen,
              bedroom, and entry <strong>actually usable</strong> — so you get straight to "<strong>we're loving our new space</strong>."
            </p>
            <div className="hero__ctas">
              <a href="Quote.html" className="btn btn--primary btn--lg">
                Redeem my $250 credit <span className="arrow" aria-hidden>→</span>
              </a>
            </div>
            <span className="body-sm" style={{ color: "var(--fg2)" }}>Takes about 60 seconds.</span>
            <p className="body-sm" style={{ color: "var(--fg2)", marginTop: 4, maxWidth: "48ch" }}>
              For higher‑end homes in the Greater Salt Lake Valley &amp; Park City.
            </p>
          </div>
          <div className="hero__media">
            <div className="photo" style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--tossit-cream-dark)" }}>
              <img src="assets/realtor-living-room.png" alt="A calm, settled-in living room" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>
        </div>
      </section>

      {/* The moment you pictured on the walkthrough */}
      <section className={"section section--full " + themeClass} style={{ background: "var(--tossit-cream-deep)" }}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <span className="eyebrow">The moment you pictured on the walkthrough</span>
            <h2 className="display-h2">You're in your new house. <em>It just doesn't feel like you live here yet.</em></h2>
            <p className="body" style={{ color: "var(--fg2)", maxWidth: "46ch" }}>
              On the tour, you probably saw it clearly: you come home from a long day, drop your
              keys on the counter, sink into <em style={{ font: "300 italic 1em var(--font-serif)" }}>that</em> couch, put on your favorite show, and
              finally exhale in your new place.
            </p>
            <p className="body" style={{ color: "var(--fg1)", maxWidth: "46ch" }}>
              Tossit exists to close that gap in one quiet visit.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 24 }}>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 18 }}>
              {["The couch is still half‑wrapped in plastic and buried in boxes.",
              "The kitchen counters are holding everything except dinner.",
              "The entryway is lined with \u201cwe'll deal with this later\u201d piles.",
              "The garage is pretending to be a storage unit, so you're parking outside.",
              "You're in the house. It just doesn't feel like home yet."].
              map((x, i) =>
              <li key={i} style={{ display: "flex", gap: 20, paddingTop: 18, borderTop: "1px solid var(--tossit-cream-dark)" }}>
                  <span style={{ flex: "0 0 auto", width: 8, height: 8, background: "var(--tossit-red)", marginTop: 9, borderRadius: "50%" }} />
                  <span className="body" style={{ color: "var(--fg1)" }}>{x}</span>
                </li>
              )}
            </ul>
          </div>
        </div>
      </section>

      {/* What happens when you book a New Home Reset */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 56, maxWidth: 820 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>What happens when you book</span>
            <h2 className="display-h2">Your New Home Reset, <em>step by step.</em></h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, alignItems: "stretch" }}>
            {steps.map((s) => {
              const hero = s.hero;
              return (
                <div key={s.n} style={{ display: "flex", flexDirection: "column", gap: 20, background: hero ? "var(--tossit-charcoal)" : "var(--tossit-white)", border: hero ? "none" : "1px solid rgba(26,11,8,0.08)", borderRadius: 20, padding: hero ? "40px 36px" : "36px 32px", boxShadow: hero ? "0 24px 60px rgba(26,11,8,0.18)" : "0 8px 24px rgba(26,11,8,0.05)" }}>
                  <span style={{ font: "300 italic 40px/1 var(--font-serif)", letterSpacing: "-0.02em", color: hero ? "rgba(242,237,227,0.55)" : "var(--tossit-red)" }}>{s.n}</span>
                  <h3 style={{ font: "700 22px/1.28 var(--font-sans)", letterSpacing: "-0.015em", margin: 0, color: hero ? "var(--tossit-cream)" : "var(--tossit-charcoal)" }}>{s.t}</h3>
                  <p className="body" style={{ color: hero ? "rgba(242,237,227,0.82)" : "var(--fg2)", margin: 0 }}>{s.body}</p>
                </div>);

            })}
          </div>
        </div>
      </section>

      {/* New Home Reset pricing */}
      <section className={"section section--full " + themeClass} style={{ background: "var(--tossit-cream-deep)" }}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 56, maxWidth: 760 }}>
            <span className="eyebrow">Simple Pricing by the Size of Your Home</span>
            <h2 className="display-h2">Get a <em>Moving Mess Makeover.</em></h2>
            <p className="lede" style={{ maxWidth: "60ch" }}>Every New Home Reset removes the last traces of your moves and makes your living room, kitchen, bedroom, and entryway usable again. Pricing just reflects how big the home is and how much we're clearing to get you there.



            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, alignItems: "stretch" }}>
            {tiers.map((tier, i) => {
              const dark = tier.featured;
              return (
                <div key={i} style={{ background: dark ? "var(--tossit-charcoal)" : "#ffffff", color: dark ? "var(--tossit-cream)" : "var(--tossit-charcoal)", border: dark ? "none" : "1px solid rgba(26,11,8,0.08)", borderRadius: 24, padding: "44px 36px 36px", display: "flex", flexDirection: "column", gap: 22, position: "relative", boxShadow: dark ? "0 24px 60px rgba(26,11,8,0.18)" : "0 8px 24px rgba(26,11,8,0.05)" }}>
                  {tier.badge &&
                  <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" }}>{tier.badge}</span>
                  }
                  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                    <h3 style={{ font: "700 26px/1.1 var(--font-sans)", letterSpacing: "-0.02em", margin: 0, color: dark ? "var(--tossit-cream)" : "var(--tossit-charcoal)" }}>{tier.label}</h3>
                    <p className="body-sm" style={{ color: dark ? "rgba(242,237,227,0.7)" : "var(--fg2)", margin: 0, maxWidth: "30ch" }}>{tier.desc}</p>
                  </div>
                  <div style={{ paddingTop: 20, borderTop: dark ? "1px solid rgba(242,237,227,0.14)" : "1px solid rgba(26,11,8,0.08)", display: "flex", flexDirection: "column", gap: 6 }}>
                    <span style={{ font: "700 48px/1 var(--font-sans)", letterSpacing: "-0.03em", color: dark ? "var(--tossit-cream)" : "var(--tossit-charcoal)" }}>{tier.price}</span>
                    <span className="body-sm" style={{ color: dark ? "rgba(242,237,227,0.65)" : "var(--fg2)" }}>Full New Home Reset, flat rate</span>
                  </div>
                  <p style={{ font: "300 italic 17px/1.45 var(--font-serif)", color: dark ? "var(--tossit-cream)" : "var(--tossit-charcoal)", margin: 0 }}>
                    "{tier.note}"
                  </p>
                  <button className="btn btn--primary btn--lg" onClick={() => {window.location.href = "Quote.html";}} style={{ marginTop: "auto", justifyContent: "center", width: "100%" }}>Redeem my credit <span className="arrow" aria-hidden>→</span></button>
                </div>);

            })}
          </div>

          {/* Bonus — free muscle, spans below the pricing cards */}
          <div style={{ marginTop: 24, display: "flex", gap: 28, alignItems: "center", padding: "32px 36px", background: "var(--tossit-charcoal)", color: "var(--tossit-cream)", borderRadius: 24, boxShadow: "0 24px 60px rgba(26,11,8,0.18)" }}>
            <span style={{ flex: "0 0 auto", alignSelf: "flex-start", 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", marginTop: 4 }}>Bonus</span>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <h3 style={{ font: "700 24px/1.2 var(--font-sans)", letterSpacing: "-0.015em", margin: 0, color: "var(--tossit-cream)" }}>Free muscle while we're here.</h3>
              <p className="body" style={{ color: "rgba(242,237,227,0.8)", margin: 0, maxWidth: "64ch" }}>
                Every Reset includes up to 20 minutes of furniture muscle — point at the couch,
                media console, bed, or dresser and we'll slide it where you want it before we go. No
                wrestling heavy pieces alone after we leave.
              </p>
            </div>
          </div>

          <p className="body-sm" style={{ color: "var(--fg2)", marginTop: 40, maxWidth: "80ch" }}>
            Pricing assumes typical new‑home clutter: boxes, packing material, household items, and
            light furniture. If there's heavy construction debris or unusually large items, we'll
            confirm any changes from your photos before you decide. No truck fractions, no surprise
            driveway add‑ons.
          </p>
        </div>
      </section>

      {/* Is this for you? */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Is this for you?</span>
            <h2 className="display-h2">A good use of your credit <em>if this sounds like you.</em></h2>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 }}>
            {[
            "You're tired of walking into a project instead of a home.",
            "Your couch, counters, or bed are still blocked by boxes and wrap.",
            "The entry and main rooms feel like storage more than living space.",
            "You'd rather pay once and be done than spend weekends cutting down boxes and dragging them to the curb."].
            map((b, i) =>
            <li key={i} className="body" style={{ color: "var(--fg1)", display: "flex", gap: 14, alignItems: "flex-start", paddingTop: 16, borderTop: "1px solid var(--tossit-cream-dark)" }}>
                <svg width="20" height="20" viewBox="0 0 18 18" fill="none" style={{ flex: "0 0 auto", marginTop: 3 }}>
                  <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>
        </div>
      </section>

      {/* Redeem form */}
      <section id="homeowner-redeem" 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)" }}>Redeem your $250 credit</span>
            <h2 className="display-h2" style={{ color: "var(--tossit-cream)" }}>Tell us what's <em>in your way.</em></h2>
            <p className="lede" style={{ color: "rgba(242,237,227,0.78)", maxWidth: "44ch" }}>
              Share a few details and, if you like, a couple of photos. We'll confirm a flat rate
              with your credit applied and schedule your visit.
            </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> Flat rate with your $250 credit applied up front.</span>
              <span><span style={{ color: "var(--tossit-red)" }}>·</span> One quiet visit — you don't lift a thing.</span>
            </div>
          </div>

          <div className="form2" style={{ display: "flex", flexDirection: "column", gap: 20, justifyContent: "center" }}>
            <div className="form2__head">
              <span className="form2__chip">Redeem $250 credit</span>
              <h3 className="form2__title">Ready to use your credit?</h3>
              <p className="form2__sub">Get your instant quote and we'll apply your $250 credit before you lock in your New Home Reset.</p>
            </div>
            <button className="btn btn--primary btn--lg" onClick={() => {window.location.href = "Quote.html";}} style={{ justifyContent: "center" }}>Redeem my $250 credit now <span className="arrow" aria-hidden>→</span></button>
            <p className="form2__foot">Takes about 60 seconds for instant quote.</p>
          </div>
        </div>
      </section>
    </>);
}
window.PageRedeemHomeowner = PageRedeemHomeowner;

function PageRedeemListing({ navigate, theme }) {
  const themeClass = theme === "charcoal" ? "theme-charcoal" : "theme-white";
  const [submitted, setSubmitted] = React.useState(false);
  const scrollToForm = () => document.getElementById("listing-redeem").scrollIntoView({ behavior: "smooth" });

  // Carrying-cost calculator — seller's own perspective. Credit applied to the reset price.
  const LIST_READY_PRICE = 2500;
  const CREDIT = 250;
  const netResetPrice = LIST_READY_PRICE - CREDIT;
  const [monthlyCost, setMonthlyCost] = React.useState(4000);
  const [weeksDIY, setWeeksDIY] = React.useState(4);
  const weeklyCost = monthlyCost / 4;
  const diyCarryCost = weeklyCost * weeksDIY;
  const difference = diyCarryCost - netResetPrice;
  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} style={{ paddingTop: 48, paddingBottom: 56, minHeight: "calc(100vh - 73px)", display: "flex", alignItems: "center" }}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "center", width: "100%" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <button className="btn btn--ghost" onClick={() => navigate("redeem")} style={{ alignSelf: "flex-start", marginBottom: 8 }}>← Back to redeem</button>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Getting ready to sell · $250 credit</span>
            <h1 className="display-h1" style={{ fontSize: "clamp(38px, 4.4vw, 62px)", lineHeight: 1.02 }}>Get the house list‑ready — <em>before or after you move.</em></h1>
            <p className="lede" style={{ maxWidth: "56ch" }}>
              Use your <strong style={{ fontWeight: 600 }}>$250 Toss It Home Reset credit</strong> to get the house ready for
              photos and showings — whether you're decluttering while you still live there, or clearing out
              everything left behind after you've moved. Either way, you don't have to deal with it yourself.
            </p>
            <div className="hero__ctas">
              <a href="Quote.html" className="btn btn--primary btn--lg">
                Redeem my $250 credit <span className="arrow" aria-hidden>→</span>
              </a>
            </div>
            <span className="body-sm" style={{ color: "var(--fg2)" }}>Takes about 2 minutes.</span>
            <p className="body-sm" style={{ color: "var(--fg2)", marginTop: 4, maxWidth: "48ch" }}>
              Referred by your agent for higher‑end homes in the Salt Lake Valley &amp; Park City.
            </p>
          </div>
          <div className="hero__media">
            <div className="photo" style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--tossit-cream-dark)" }}>
              <img src="assets/realtor-living-room.png" alt="A clean, list-ready living room" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>
        </div>
      </section>

      {/* The "messy middle" of selling */}
      <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 messy middle of selling</span>
            <h2 className="display-h2">Whether you've moved out or not, <em>the last stretch is the hardest.</em></h2>
            <p className="body" style={{ color: "var(--fg2)", maxWidth: "46ch" }}>
              Maybe you're still living there and need to thin things down before the photographer comes.
              Maybe you've already moved and there's a house full of leftovers waiting on weekends. Either
              way, getting it truly list‑ready is the part that drags.
            </p>
            <p className="body" style={{ color: "var(--fg1)", maxWidth: "46ch" }}>
              Toss It exists to own that middle step for you.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <span className="body-sm" style={{ color: "var(--fg2)", letterSpacing: "0.04em", textTransform: "uppercase", fontWeight: 600 }}>What we clear</span>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 18 }}>
              {[
              "Furniture and clutter you're clearing out before you list",
              "Leftover junk and \u201cwe'll donate this later\u201d piles",
              "Boxes, paint cans, and garage clutter",
              "Rooms that look empty, but aren't quite ready for photos or showings"].
              map((x, i) =>
              <li key={i} style={{ display: "flex", gap: 20, paddingTop: 18, borderTop: "1px solid var(--tossit-cream-dark)" }}>
                  <span style={{ flex: "0 0 auto", width: 8, height: 8, background: "var(--tossit-red)", marginTop: 9, borderRadius: "50%" }} />
                  <span className="body" style={{ color: "var(--fg1)" }}>{x}</span>
                </li>
              )}
            </ul>
          </div>
        </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 your home List‑Ready — a return that dwarfs the cost of the service itself.


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

      {/* Your list-ready home reset */}
      <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: 16 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Your List‑Ready Home Reset</span>
            <h2 className="display-h2">A quiet closing team <em>for the house you're leaving.</em></h2>
            <p className="body" style={{ color: "var(--fg2)", maxWidth: "42ch" }}>
              In a single visit, our discreet crew finishes the house so you can stay focused on
              settling into the new place.
            </p>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 }}>
            {[
            "Removes what no longer belongs — junk, donations, leftovers",
            "Protects floors, doors, and tight corners while we carry out",
            "Loads everything into clean, un‑loud vans",
            "Leaves each room cleared and lightly swept, ready for cleaners, stagers, and photographers"].
            map((b, i) =>
            <li key={i} className="body" style={{ color: "var(--fg1)", display: "flex", gap: 14, alignItems: "flex-start", paddingTop: 16, borderTop: "1px solid var(--tossit-cream-dark)" }}>
                <svg width="20" height="20" viewBox="0 0 18 18" fill="none" style={{ flex: "0 0 auto", marginTop: 3 }}>
                  <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>
        </div>

        {/* Preparation sequence */}
        <div className="section__inner" style={{ marginTop: 56 }}>
          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "center", gap: 14, padding: "28px 32px", background: "#ffffff", border: "1px solid rgba(26,11,8,0.08)", borderRadius: 20 }}>
            {["Move out", "Toss It Home Reset", "Cleaners", "Staging & Photos", "Showings"].map((step, i, arr) =>
            <React.Fragment key={step}>
                <span style={{ font: i === 1 ? "700 17px/1.2 var(--font-sans)" : "500 16px/1.2 var(--font-sans)", color: i === 1 ? "var(--tossit-red)" : "var(--tossit-charcoal)", letterSpacing: "-0.01em", padding: i === 1 ? "8px 16px" : "0", background: i === 1 ? "rgba(199,42,28,0.08)" : "transparent", borderRadius: 999 }}>{step}</span>
                {i < arr.length - 1 && <span className="arrow" aria-hidden style={{ color: "var(--fg2)", fontSize: 18 }}>→</span>}
              </React.Fragment>
            )}
          </div>
        </div>
      </section>

      {/* Two services — Listing Ready Reset vs Listing Clean Out */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 56, maxWidth: 820 }}>
            <span className="eyebrow">WE HANDLE THE HEAVY LIFTING</span>
            <h2 className="display-h2"><em>Two ways we help.</em></h2>
            <p style={{ marginTop: 20, font: "400 18px/1.5 var(--font-sans)", color: "var(--fg2)", maxWidth: "60ch" }}>
              Most homes fall into one of two buckets. Pick the one that matches yours and we'll quote
              it as a single project price — with your $250 credit applied.
            </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% 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 — 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 · before your $250 credit</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", "Photographer 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={() => {window.location.href = "Quote.html";}} style={{ marginTop: "auto", justifyContent: "center", width: "100%" }}>Redeem for a Reset <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 70% 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 occupied and long‑occupied homes — most contents cleared or major declutter so the home can be listed.</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 · before your $250 credit</span>
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {["Full 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={() => {window.location.href = "Quote.html";}} style={{ marginTop: "auto", justifyContent: "center", width: "100%" }}>Redeem for a Clean Out <span className="arrow" aria-hidden>→</span></button>
            </div>
          </div>
        </div>
      </section>

      {/* DIY vs Toss It calculator */}
      <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">The math</span>
            <h2 className="display-h2">What does <em>"do it yourself"</em> really cost?</h2>
            <p className="lede" style={{ maxWidth: "56ch" }}>
              The longer the old house sits while you "get to it on the weekend," the more it quietly
              costs you. Plug in two numbers and see what a slow clear‑out actually adds up to.
            </p>
          </div>

          <div className="calc calc--bordered">
            <div className="calc__inputs">
              <label className="calc__field">
                <span className="calc__label">YOUR TOTAL MONTHLY COST TO KEEP THIS HOUSE (HOLDING COST)</span>
                <span className="calc__help">Mortgage  + taxes + insurance + HOA + average utilities + Misc</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 YOU TO FINISH CLEARING IT YOURSELF</span>
                <span className="calc__help">Working nights and weekends around everything else in your life</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 calc__out--bordered">
              <p className="calc__line">
                At <strong>{weeksDIY} {weeksDIY === 1 ? "week" : "weeks"}</strong>, keeping this house costs you about <strong>{money(diyCarryCost)}</strong> while you clear it yourself.
              </p>
              <p className="calc__line">
                A typical <em>List‑Ready Reset</em> for a 4‑bed home is about <strong>{money(LIST_READY_PRICE)}</strong> — <strong>{money(netResetPrice)}</strong> after your $250 credit.
              </p>
              <p className="calc__line calc__line--punch">
                {closeEnough ?
                <>At these numbers, doing it yourself 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 yourself costs about <strong>{money(difference)}</strong> more in carrying costs than having us clear it in one visit.</> :
                <>At these numbers, doing it yourself saves about <strong>{money(Math.abs(difference))}</strong> in pure carrying costs — before you factor in your time, energy, and momentum to market.</>
                }
              </p>
            </div>
          </div>

          <p className="calc__kicker">Speed to market is leverage: homes that photograph and show well and on time get better offers, appraise higher, and sell faster — so you can fully move on.</p>
        </div>
      </section>

      {/* How your $250 credit works */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 56, maxWidth: 760 }}>
            <span className="eyebrow">How your $250 credit works</span>
            <h2 className="display-h2">We keep this part <em>as simple as possible.</em></h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, alignItems: "stretch" }}>
            {[
            { n: "01", t: "Tell us about the home.", b: "Use the short form below and add a few photos of the areas that need help." },
            { n: "02", t: "Get your instant estimate.", b: "We'll confirm a clear, flat price for your List‑Ready Home Reset, set a date to do the work, and apply your $250 credit from your agent at checkout." },
            { n: "03", t: "We see to the rest.", b: "On the day, we arrive, clear what's been marked to go, and hand the home back list‑ready so your agent can move straight to cleaning, staging, photos or whatever the next steps are." }].
            map((s) =>
            <div key={s.n} style={{ display: "flex", flexDirection: "column", gap: 16, background: "var(--tossit-white)", border: "1px solid rgba(26,11,8,0.1)", borderRadius: 20, padding: "32px 30px" }}>
                <div style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--tossit-charcoal)", color: "var(--tossit-cream)", display: "flex", alignItems: "center", justifyContent: "center", font: "600 15px/1 var(--font-sans)", flex: "0 0 auto" }}>{s.n}</div>
                <h3 style={{ font: "700 21px/1.25 var(--font-sans)", letterSpacing: "-0.015em", margin: 0, color: "var(--tossit-charcoal)" }}>{s.t}</h3>
                <p className="body-sm" style={{ color: "var(--fg2)", margin: 0 }}>{s.b}</p>
              </div>
            )}
          </div>
          <p className="body-sm" style={{ color: "var(--fg2)", marginTop: 40, maxWidth: "80ch" }}>
            $250 credit valid toward Toss It Home Resets and full‑home clean‑outs within our service
            area. One credit per household. Must be used within 6
            months of issue.
          </p>
        </div>
      </section>

      {/* Mini FAQ */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 48, maxWidth: 760 }}>
            <span className="eyebrow">Mini FAQ</span>
            <h2 className="display-h2">A few quick answers.</h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {[
            { q: "Do I need to be there?", a: "Not always. Many sellers give us a code or lockbox. We'll agree on what should go with you or your agent beforehand, then you come back to a finished, photo‑ready home." },
            { q: "Will I know the price before you come?", a: "Yes. We'll place your home in the right tier, apply your $250 credit, and confirm everything before you decide. No truck fractions, no surprise driveway add‑ons." },
            { q: "Where do you operate?", a: "Greater Salt Lake Valley + Park City (Bountiful to Lehi, plus the Park City basin). Larger estate projects in nearby areas considered by request." }].
            map((f, i) =>
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48, padding: "32px 0", borderTop: i === 0 ? "2px solid var(--fg1)" : "1px solid var(--tossit-cream-dark)" }}>
                <h3 style={{ font: "700 22px/1.25 var(--font-sans)", letterSpacing: "-0.015em", margin: 0, color: "var(--tossit-charcoal)" }}>{f.q}</h3>
                <p className="body" style={{ color: "var(--fg2)", margin: 0, maxWidth: "52ch" }}>{f.a}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Redeem form */}
      <section id="listing-redeem" 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)" }}>Redeem your $250 credit</span>
            <h2 className="display-h2" style={{ color: "var(--tossit-cream)" }}>Pay once, never come back <em>to the old house.</em></h2>
            <p className="lede" style={{ color: "rgba(242,237,227,0.78)", maxWidth: "44ch" }}>
              Share a few details and a couple of photos of the areas that need help. We'll confirm a
              flat rate with your credit applied and lock in your date.
            </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> Flat rate with your $250 credit applied up front.</span>
              <span><span style={{ color: "var(--tossit-red)" }}>·</span> One quiet visit — handed back list‑ready.</span>
            </div>
          </div>

          <div className="form2" style={{ display: "flex", flexDirection: "column", gap: 20, justifyContent: "center" }}>
            <div className="form2__head">
              <span className="form2__chip">Redeem $250 credit</span>
              <h3 className="form2__title">Ready to use your credit?</h3>
              <p className="form2__sub">Get your instant estimate and we'll apply your $250 credit before you lock in your List‑Ready Reset.</p>
            </div>
            <button className="btn btn--primary btn--lg" onClick={() => {window.location.href = "Quote.html";}} style={{ justifyContent: "center" }}>Redeem my $250 credit now <span className="arrow" aria-hidden>→</span></button>
            <p className="form2__foot">Takes about 60 seconds for instant quote.</p>
          </div>
        </div>
      </section>
    </>);
}
window.PageRedeemListing = PageRedeemListing;