// Estate / Downsizing page — full content

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

  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: 22 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Estate &amp; senior downsizing resets</span>
            <h1 className="display-h1" style={{ fontSize: "64px", lineHeight: "1.02" }}>A lifetime of stuff, <em>handled with care.</em></h1>
            <p className="lede" style={{ maxWidth: "52ch" }}>When the house has to be cleared and doing it alone is too overwhelming.

            </p>
            <p className="body" style={{ color: "var(--fg2)", maxWidth: "56ch" }}>Estate clearouts and senior downsizing handled with the care and quiet most haulers don't know how to give. We work slowly when it matters. We pause when you find something.  We make space for what’s next, without rushing what came before.



            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 14, font: "500 13px/1 var(--font-sans)", color: "var(--fg2)", marginTop: 4 }}>
              <span>Salt Lake &amp; Park City</span>
              <span style={{ color: "var(--tossit-red)" }}>·</span>
              <span>Discretion guaranteed</span>
              <span style={{ color: "var(--tossit-red)" }}>·</span>
              <span>NDAs available on request</span>
            </div>
            <div className="hero__ctas" style={{ marginTop: 8 }}>
              <a href="#estate-quote" className="btn btn--primary btn--lg" onClick={(e) => {e.preventDefault();document.getElementById("estate-quote").scrollIntoView({ behavior: "smooth" });}}>
                Schedule a walkthrough <span className="arrow" aria-hidden>→</span>
              </a>
              <button className="btn btn--ghost" onClick={() => document.getElementById("estate-how").scrollIntoView({ behavior: "smooth" })}>Or learn how we work →</button>
            </div>
          </div>
          <div className="hero__media">
            <div className="photo" style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--tossit-cream-dark)" }}>
              <img src="assets/estate-hero.png" alt="A family dinner around a candlelit table, surrounded by packing boxes labeled China, Kitchen, Fragile and Alex's Room" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>
        </div>
      </section>

      {/* A NOTE BEFORE WE START */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, position: "sticky", top: 100 }}>
            <span className="eyebrow">A note before we start</span>
            <h2 className="display-h2">The boxes are heavy. <em>The decisions are heavier.</em></h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <p className="lede" style={{ fontSize: 19 }}>
              Whether you're downsizing a parent, closing an estate, or facing forty years of a
              life you didn't live — you don't need a junk hauler.
            </p>
            <p className="body" style={{ color: "var(--fg2)", maxWidth: "62ch" }}>
              You need a careful crew. A clear price. Someone who won't make this harder than it
              already is. Someone who understands that the box labeled "kitchen, 1987" might be
              the one you need to sit with for twenty minutes before it leaves the house.
            </p>
            <p className="body" style={{ color: "var(--fg2)", maxWidth: "62ch" }}>
              We do this work because somebody has to do it well. The boxes are heavy. The
              decisions are heavier. We carry both.
            </p>
            <p style={{ font: "300 italic 16px/1.4 var(--font-serif)", color: "var(--fg1)", marginTop: 8 }}>— The Toss It team</p>
          </div>
        </div>
      </section>

      {/* WHO WE WORK WITH */}
      <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">Who we work with</span>
            <h2 className="display-h2">Families, executors, <em>and the people helping them.</em></h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
            {[
            { n: "01", t: "Adult children, often from out of town",
              p: ["You flew in for the weekend. The house is bigger than you remembered. Every closet is full.",
              "We can do a walkthrough on FaceTime or Zoom, send the quote in writing, and handle the rest while you're back at the hotel or already on the way to the airport. You don't have to live here to get it done here."] },
            { n: "02", t: "Estate attorneys and executors",
              p: ["You need the house cleared, but you also need a paper trail.",
              "We provide itemized invoices for the file, a summary of what was removed and where it went, and donation receipts where they're available. We've worked alongside Salt Lake firms and we understand the documentation and discretion that estates require."] },
            { n: "03", t: "Senior move managers & downsizing families",
              p: ["The hardest part is rarely the move itself — it's the forty years that aren't moving with you.",
              "We coordinate with your senior move manager, or directly with the family, to clear what's staying behind at the pace the homeowner needs. We don't rush them out of rooms. We work with the plan you've already made."] }].
            map((c) =>
            <div key={c.n} style={{ background: "#ffffff", border: "1px solid rgba(26,11,8,0.08)", borderRadius: 16, padding: "32px 28px", display: "flex", flexDirection: "column", gap: 14 }}>
                <span style={{ font: "300 italic 36px/1 var(--font-serif)", color: "var(--tossit-red)", letterSpacing: "-0.02em" }}>{c.n}</span>
                <h3 style={{ font: "700 22px/1.25 var(--font-sans)", letterSpacing: "-0.01em", margin: 0 }}>{c.t}</h3>
                {c.p.map((para, i) => <p key={i} className="body-sm" style={{ color: i === 0 ? "var(--fg1)" : "var(--fg2)", margin: 0 }}>{para}</p>)}
              </div>
            )}
          </div>
          <div style={{ marginTop: 40 }}>
            <button className="btn btn--ghost" onClick={() => document.getElementById("estate-how").scrollIntoView({ behavior: "smooth" })}>See how our process works →</button>
          </div>
        </div>
      </section>

      {/* HOW WE WORK */}
      <section id="estate-how" className={"section section--full " + themeClass}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 56 }}>
            <span className="eyebrow">How we work</span>
            <h2 className="display-h2">Before. Arrive. <em>Work. Where. Done.</em></h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {[
            { k: "Before we arrive",
              t: "A walkthrough, then a written price. No on‑site surprises.",
              body: [
              "In‑person or by video, we walk the property, ask about anything the family wants kept or set aside, and scope the work.",
              "Then we send a single project price with a clear do‑not‑exceed cap. You see it in writing before we touch anything. No \u201cwe'll tell you when we get there,\u201d and no hourly meter running while you decide what to keep."]
            },
            { k: "When we arrive",
              t: "A clean cargo van. Uniformed crew. Not a junk truck circus.",
              body: [
              "We show up in a clean cargo van with a small logo, not a rusty trailer.",
              "Floor runners go down on walked paths. Doorways and corners are padded. Shoe covers go on indoors. Two‑person crew in matching uniforms with name tags. If the driveway feels exposed, we park on the street. Neighbors see a service van, not a spectacle."]
            },
            { k: "As we work",
              t: "We pause when you find something. Or when you need a minute.",
              body: [
              "If something comes out of a closet that wasn't expected — a letter, a photograph, an heirloom you didn't know was there — we stop. We set it aside. We don't push to keep things moving because \u201cwe're on the clock.\u201d",
              "If you need a minute in a room, you get it. The work is physical, but the decisions are emotional. We respect both."]
            },
            { k: "What goes where",
              t: "Donated where it can be. And we tell you where it went.",
              body: [
              "Most of what we remove is recycled or donated rather than dumped. We partner with named local charities like Habitat ReStore, Deseret Industries, The Other Side Thrift Boutique, and Big Brothers Big Sisters of Utah.",
              "After the job, you get a summary of what went where, with donation receipts when they're available. You'll know what was thrown away, what was re‑used, and what went to charity."]
            },
            { k: "When we're done",
              t: "A closing walkthrough. Then a quiet exit.",
              body: [
              "Before we leave, the crew lead walks the space with you (or your agent, or the executor) — or sends photos if you're out of state.",
              "Floors are swept or vacuumed. Surfaces are clear. Doors closed, lights off. A small thank‑you left on the counter. The house is empty, photo‑ready, or listing‑ready, depending on what's next."]
            }].
            map((s, i) =>
            <div key={i} style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 56, padding: "32px 0", borderTop: "1px solid rgba(26,11,8,0.10)" }}>
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>{s.k}</span>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  <h3 style={{ font: "700 26px/1.2 var(--font-sans)", letterSpacing: "-0.015em", margin: 0 }}>{s.t}</h3>
                  {s.body.map((p, j) => <p key={j} className="body" style={{ color: "var(--fg2)", margin: 0, maxWidth: "64ch" }}>{p}</p>)}
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* WHAT EVERY ESTATE JOB INCLUDES */}
      <section className={"section section--full " + themeClass} style={{ background: "var(--tossit-cream-deep)" }}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 48, maxWidth: 820 }}>
            <span className="eyebrow">What every estate job includes</span>
            <h2 className="display-h2">The floor, <em>not the upsell.</em></h2>
            <p style={{ marginTop: 20, font: "400 17px/1.55 var(--font-sans)", color: "var(--fg2)", maxWidth: "62ch" }}>
              Not add‑ons. Not "premium tier" upgrades. These are the floor. If we miss one,
              tell us within 48 hours and we'll come back and make it right at no extra charge.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
            <div style={{ background: "#ffffff", border: "1px solid rgba(26,11,8,0.08)", borderRadius: 16, padding: 32, display: "flex", flexDirection: "column", gap: 16 }}>
              <span className="eyebrow">Included on every job</span>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {[
                "Walkthrough quote with a written do‑not‑exceed price",
                "Clean, branded cargo van — not a dump truck",
                "Uniformed two‑person crew with name tags",
                "Floor runners on all walked interior paths",
                "Doorway and corner padding where needed",
                "Shoe covers indoors",
                "Itemized list of what was removed and where it went",
                "Donation receipts where available",
                "Photographs of the cleared space (on request)",
                "Closing walkthrough with the crew lead",
                "Floors swept or vacuumed before we leave",
                "NDA signed on request"].
                map((b, i) =>
                <li key={i} className="body-sm" style={{ color: "var(--fg1)", display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ flex: "0 0 auto", marginTop: 2 }}>
                      <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>
            <div style={{ background: "#ffffff", border: "1px solid rgba(26,11,8,0.08)", borderRadius: 16, padding: 32, display: "flex", flexDirection: "column", gap: 16 }}>
              <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Flagged upfront, not after</span>
              <p className="body-sm" style={{ color: "var(--fg2)", margin: 0 }}>These don't disqualify you. They're simply called out and priced correctly during the walkthrough so they're never a surprise later.</p>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, marginTop: 4 }}>
                {[
                "Hazardous materials (paint, solvents, chemicals, propane, refrigerants)",
                "True hoarder‑level cleanouts requiring multi‑day crews",
                "Heavy debris (concrete, dirt, roofing, brick, tile) charged separately",
                "Pianos, safes, or hot tubs",
                "Items requiring more than three flights of stairs",
                "Anything beyond 100 ft from a van access point"].
                map((b, i) =>
                <li key={i} className="body-sm" style={{ color: "var(--fg1)", display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 auto", width: 6, height: 6, background: "var(--tossit-red)", marginTop: 8, borderRadius: "50%" }} />
                    <span>{b}</span>
                  </li>
                )}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* PRICING, SAID PLAINLY */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner">
          <div className="section__head" style={{ marginBottom: 48, maxWidth: 820 }}>
            <span className="eyebrow">Pricing, said plainly</span>
            <h2 className="display-h2">One written number, <em>with a cap.</em></h2>
            <p style={{ marginTop: 20, font: "400 17px/1.55 var(--font-sans)", color: "var(--fg2)", maxWidth: "62ch" }}>
              Estate cleanouts and downsizing jobs are scoped per property — there's no single flat tier that
              fits every house. After the walkthrough, you get one written number with a clear cap.
              No hourly meter running while you decide what to keep.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {[
            { name: "Smaller Whole-Home Reset", from: "From $2,400", typical: "Most jobs land around $2,400–$3,600", bullets: ["Condos, townhomes, and smaller houses up to ~1,800 sq ft", "Lighter estates and senior downsizes where the whole home needs to be cleared, but it's not packed to the ceiling"] },
            { name: "Standard Whole-Home Reset", from: "From $3,800", typical: "Most jobs land around $4,500–$7,500", featured: true, bullets: ["Typical single‑family homes ~1,800–3,000 sq ft", "Multiple bedrooms, living areas, basement and garage with normal “family life” accumulation"] },
            { name: "Large Whole-Home or Complex Reset", from: "Custom quote", typical: "Usually $7,500+", bullets: ["Larger homes 3,000+ sq ft, multiple outbuildings, or long‑term accumulation", "Homes with packed basements, attics, or hoarder‑level spaces", "Situations where you'll clearly be on site for multiple days or need multiple crews"] }].
            map((c, i) =>
            <div key={i} style={{ position: "relative", background: c.featured ? "var(--tossit-charcoal)" : "#ffffff", color: c.featured ? "var(--tossit-cream)" : "var(--tossit-charcoal)", border: c.featured ? "none" : "1px solid rgba(26,11,8,0.08)", borderRadius: 20, padding: "36px 32px", display: "flex", flexDirection: "column", gap: 20, boxShadow: c.featured ? "0 24px 60px rgba(26,11,8,0.18)" : "0 8px 24px rgba(26,11,8,0.05)" }}>
                {c.featured && <span style={{ position: "absolute", top: -13, left: "50%", transform: "translateX(-50%)", padding: "7px 16px", borderRadius: 999, background: "var(--tossit-charcoal)", color: "var(--tossit-cream)", font: "600 11px/1 var(--font-sans)", letterSpacing: "0.14em", textTransform: "uppercase", whiteSpace: "nowrap", border: "1px solid rgba(242,237,227,0.22)", zIndex: 2 }}>Most booked</span>}
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  <h3 style={{ font: "700 28px/1.15 var(--font-sans)", letterSpacing: "-0.02em", margin: 0, color: c.featured ? "var(--tossit-cream)" : "var(--tossit-charcoal)" }}>{c.name}</h3>
                  <span style={{ font: "700 36px/1 var(--font-sans)", letterSpacing: "-0.02em", color: c.featured ? "var(--tossit-cream)" : "var(--tossit-charcoal)" }}>{c.from}</span>
                  <span className="body-sm" style={{ color: c.featured ? "rgba(242,237,227,0.65)" : "var(--fg2)" }}>{c.typical}</span>
                </div>
                <span className="eyebrow" style={{ color: c.featured ? "rgba(242,237,227,0.65)" : "var(--fg2)", paddingTop: 18, borderTop: c.featured ? "1px solid rgba(242,237,227,0.18)" : "1px solid rgba(26,11,8,0.08)" }}>Best for</span>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                  {c.bullets.map((b, j) =>
                <li key={j} className="body-sm" style={{ color: c.featured ? "var(--tossit-cream)" : "var(--fg1)", display: "flex", gap: 12, alignItems: "flex-start" }}>
                      <span style={{ flex: "0 0 auto", width: 6, height: 6, background: c.featured ? "var(--tossit-red)" : "var(--tossit-charcoal)", marginTop: 8, borderRadius: "50%" }} />
                      <span>{b}</span>
                    </li>
                )}
                </ul>
                <div style={{ marginTop: "auto", paddingTop: 8 }}>
                  <a href="#estate-quote" className={"btn btn--lg " + (c.featured ? "btn--primary" : "btn--secondary")} style={{ width: "100%", justifyContent: "center" }} onClick={(e) => {e.preventDefault();document.getElementById("estate-quote").scrollIntoView({ behavior: "smooth" });}}>
                    Get Instant Estimate <span className="arrow" aria-hidden>→</span>
                  </a>
                </div>
              </div>
            )}
          </div>
          <p style={{ marginTop: 32, font: "300 italic 22px/1.4 var(--font-serif)", color: "var(--tossit-charcoal)", maxWidth: "60ch" }}>
            Every estate quote is written. Every quote has a do‑not‑exceed cap. You'll always know
            the ceiling before we touch anything.
          </p>
        </div>
      </section>

      {/* DISCRETION */}
      <section className={"section section--full " + themeClass} style={{ background: "var(--tossit-cream-deep)" }}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, position: "sticky", top: 100 }}>
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Discretion, guaranteed</span>
            <h2 className="display-h2">What happens at the property, <em>stays at the property.</em></h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <p className="body" style={{ color: "var(--fg1)", maxWidth: "62ch" }}>
              We don't post the address. We don't photograph the items for our social media.
              We don't talk about the family outside of the work.
            </p>
            <p className="body" style={{ color: "var(--fg2)", maxWidth: "62ch" }}>
              We sign NDAs on request — for executors, attorneys, listing agents, or anyone else
              who needs the paper. The neighbors see a clean cargo van with a small logo in the
              driveway or on the street. That's the whole show.
            </p>
            <p className="body" style={{ color: "var(--fg2)", maxWidth: "62ch" }}>
              Senior clients and grieving families come to us specifically because the work needs
              to be done quietly. We've kept it that way for every job we've taken, and we plan
              to keep doing so.
            </p>
          </div>
        </div>
      </section>

      {/* FROM A CLIENT */}
      <section className={"section section--full " + themeClass}>
        <div className="section__inner" style={{ display: "flex", flexDirection: "column", gap: 28, maxWidth: 900 }}>
          <span className="eyebrow">From a client</span>
          <p style={{ font: "300 italic 36px/1.35 var(--font-serif)", color: "var(--tossit-charcoal)", letterSpacing: "-0.01em", margin: 0 }}>
            "I flew in from Boston on a Friday. By Sunday night the house was empty, photographed,
            swept, and the donation receipts were in my inbox. I never had to fight with a hauler
            about the price. I never had to be there while they worked. They treated my mother's
            house the way she would have."
          </p>
          <div style={{ display: "flex", gap: 16, alignItems: "baseline", paddingTop: 12, borderTop: "1px solid rgba(26,11,8,0.10)" }}>
            <span style={{ font: "700 14px/1 var(--font-sans)", letterSpacing: "0.04em" }}>Elaine W.</span>
            <span className="body-sm" style={{ color: "var(--fg2)" }}>Park City · Estate clearout, 2025</span>
          </div>
        </div>
      </section>

      {/* QUESTIONS FAMILIES ASK */}
      <section className={"section section--full " + themeClass} style={{ background: "var(--tossit-cream-deep)" }}>
        <div className="section__inner" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, position: "sticky", top: 100 }}>
            <span className="eyebrow">Questions families ask</span>
            <h2 className="display-h2">Plain <em>answers.</em></h2>
          </div>
          <div className="faq__grid">
            {[
            ["I'm out of state. Can you do this without me being there?",
            "Yes. Most of our estate work is done with someone managing remotely. We can do the walkthrough by video call, send the written quote with the do‑not‑exceed price, and complete the work with a designated local contact (an agent, neighbor, or executor). After the job, we send photographs of the cleared space and the itemized list of what was removed and where it went."],
            ["What if we find something important after you've started?",
            "We pause. Anything in question goes into a \u201chold\u201d area and stays there until you've reviewed it. We don't push to keep the job moving at your expense. The price doesn't change because you took an extra hour with a box. The whole point of what we do is to give you room to make those decisions."],
            ["Do you handle the donation logistics, or do we?",
            "We do. We sort items during the walkthrough and during the job itself, deliver them to our partner charities, and send you donation receipts when they're available. You don't have to call anyone, schedule pickups, or load your own car."],
            ["What about valuables we want appraised or auctioned?",
            "We don't appraise or sell items — that's not our work. If you have valuables that need to be valued or auctioned, we coordinate with your appraiser, estate‑sale company, or auction house so those items are handled first. Once that's done, we clear what's left."],
            ["Can you sign an NDA?",
            "Yes. For executors, attorneys, families managing high‑profile estates, or anyone who simply wants the paper, we can sign your NDA before the walkthrough or provide our standard NDA for you to countersign."],
            ["How fast can you start?",
            "Walkthroughs typically happen within 48 hours of your inquiry. The job itself is scheduled around your timeline — we've started as quickly as the next day, and we've also held dates six weeks out to match family schedules. We don't pressure the timing; we match it."]].
            map(([q, a], i) =>
            <div key={i} className={"faq__item" + (openFaq === i ? " is-open" : "")} onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                <div className="faq__row">
                  <h3 className="faq__q">{q}</h3>
                  <span className="faq__sign" aria-hidden></span>
                </div>
                <p className="faq__a">{a}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section id="estate-quote" 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)" }}>Schedule a walkthrough</span>
            <h2 className="display-h2" style={{ color: "var(--tossit-cream)" }}>Talk through your <em>estate or downsizing project.</em></h2>
            <p className="lede" style={{ color: "rgba(242,237,227,0.78)", maxWidth: "48ch" }}>
              Tell us a bit about the property and timing. We'll schedule a walkthrough
              (in‑person or by video), send you a written quote with a clear do‑not‑exceed cap,
              and hold your date so you can plan around it.
            </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> Walkthroughs typically within 48 hours.</span>
              <span><span style={{ color: "var(--tossit-red)" }}>·</span> Written quote, do‑not‑exceed cap.</span>
              <span><span style={{ color: "var(--tossit-red)" }}>·</span> NDA signed on request.</span>
            </div>
          </div>

          <form className="form2" onSubmit={(e) => {e.preventDefault();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">We got your note. We'll be in touch within a business day.</h3>
                <p className="form2__sub">Take your time. We'll work around you and your family.</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">Estate &amp; downsizing</span>
                  <h3 className="form2__title">Schedule a walkthrough.</h3>
                  <p className="form2__sub">Takes about a minute. We respond within one business day.</p>
                </div>
                <div className="form2__grid">
                  <div className="form2__field"><span className="form2__label">Your name</span><input className="form2__input" required placeholder="Full name" /></div>
                  <div className="form2__field"><span className="form2__label">Relationship to the property</span>
                    <select className="form2__select" defaultValue="">
                      <option value="" disabled>Choose one</option>
                      <option>Adult child</option>
                      <option>Executor</option>
                      <option>Attorney</option>
                      <option>Homeowner</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div className="form2__field"><span className="form2__label">Email</span><input className="form2__input" type="email" required placeholder="you@example.com" /></div>
                  <div className="form2__field"><span className="form2__label">Mobile</span><input className="form2__input" type="tel" required placeholder="(555) 123‑4567" /></div>
                  <div className="form2__field form2__field--full"><span className="form2__label">Property city / area</span><input className="form2__input" required placeholder="Salt Lake, Park City, neighborhood…" /></div>
                  <div className="form2__field"><span className="form2__label">Rough situation</span>
                    <select className="form2__select" defaultValue="">
                      <option value="" disabled>Choose one</option>
                      <option>Last 25% left</option>
                      <option>Whole house</option>
                      <option>Hoarder‑level</option>
                    </select>
                  </div>
                  <div className="form2__field"><span className="form2__label">When you'd like it completed by</span>
                    <select className="form2__select" defaultValue="">
                      <option value="" disabled>Choose one</option>
                      <option>This week</option>
                      <option>Next 30 days</option>
                      <option>Next 60–90 days</option>
                      <option>No firm deadline</option>
                    </select>
                  </div>
                </div>
                <button className="btn btn--primary btn--lg form2__submit" type="submit">Schedule a walkthrough <span className="arrow" aria-hidden>→</span></button>
                <p className="form2__foot">No automated drip. One person, one business day.</p>
              </>
            }
          </form>
        </div>
      </section>
    </>);
}
window.PageEstate = PageEstate;