// Secondary pages: How it works, Pricing, Areas, FAQ, About, Contact

function PageHowItWorks({ navigate, theme }) {
  const detail = [
  { n: "01", t: "Get your price online",
    d: "Answer a few quick questions — what's going, how much, how's the access — and our instant estimator shows you a flat‑rate range right away. No phone call, no sales visit, no waiting for someone to walk your house.",
    bullets: ["A price in about a minute", "No phone call, no on‑site visit", "Flat‑rate ranges, published upfront"] },
  { n: "02", t: "Lock in your One‑Price",
    d: "Send a few photos by text and we send back one flat quote for everything. It won't change in the driveway — and if we ever underestimate the workload, that's on us, not you.",
    bullets: ["One flat price, sent by text", "Never changes at the door", "Bigger jobs: a quick walkthrough sets a do‑not‑exceed cap"] },
  { n: "03", t: "We clear it — calmly",
    d: "A quiet, uniformed crew arrives on time in clean vans, protects your floors and entry points where needed, and leaves each room swept or vacuumed. Donations and recyclables get rerouted first — the landfill is our last stop, not our first.",
    bullets: ["Uniformed, discreet crew", "Floors and doorways protected", "Donate & recycle first, landfill last"] },
  { n: "04", t: "Pay when it's done. And you are happy.",
    d: "You only pay once the work is finished and you've walked the space. Most people just tap a card when we're done and get an emailed receipt on the spot. No deposits, no pre‑charges, no surprise add‑ons at the door.",
    bullets: ["Pay after, not before", "No deposits or pre‑charges", "Emailed receipt on the spot"] }];

  return (
    <>
      <section className={"section section--full " + (theme === "charcoal" ? "theme-charcoal" : theme === "white" ? "theme-white" : "theme-cream")}>
        <div className="section__inner">
          <div className="section__head">
            <span className="eyebrow">How it works</span>
            <h1 className="display-h1">Four steps.<br /><em>No sales visit.</em></h1>
            <p className="lede">A price online in about a minute. One flat quote by text. A calm crew at the door. You pay when it's done.</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 64 }}>
            {detail.map((s) =>
            <div key={s.n} style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 64, paddingTop: 32, borderTop: "2px solid var(--fg1)" }}>
                <div>
                  <div className="how__num" style={{ marginBottom: 12 }}>STEP {s.n}</div>
                  <h2 className="display-h2" style={{ fontSize: 40 }}>{s.t}</h2>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                  <p className="lede" style={{ fontSize: 22 }}>{s.d}</p>
                  <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
                    {s.bullets.map((b) =>
                  <li key={b} style={{ font: "500 15px/1.4 var(--font-sans)", color: "var(--fg1)", display: "flex", alignItems: "center", gap: 12 }}>
                        <span style={{ display: "inline-block", width: 8, height: 8, background: "var(--tossit-red)", borderRadius: 1, flexShrink: 0 }}></span>
                        {b}
                      </li>
                  )}
                  </ul>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
      <CTABand navigate={navigate} />
    </>);

}
window.PageHowItWorks = PageHowItWorks;

function PagePricing({ navigate, highlight, theme }) {
  return (
    <>
      <section className={"section section--full " + (theme === "charcoal" ? "theme-charcoal" : theme === "white" ? "theme-white" : "theme-cream")}>
        <div className="section__inner">
          <div className="section__head">
            <span className="eyebrow">Pricing</span>
            <h1 className="display-h1">See your price <em>first.</em></h1>
            <p className="lede" style={{ fontWeight: "500" }}>Three flat tiers. No "actually, we charge extra for that" surprises. </p>
          </div>
          <PricingTiers highlight={highlight} navigate={navigate} />
          <div style={{ marginTop: 96, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
            <span className="eyebrow">Upfront pricing</span>
            <h2 className="display-h2 upfront-h" style={{ fontSize: 56, lineHeight: 1.02, margin: 0 }}>How our<br /><em>upfront pricing</em><br />works.</h2>
          </div>
          <p className="body" style={{ marginTop: 20, maxWidth: "78ch", marginLeft: "auto", marginRight: "auto", textAlign: "center", color: "var(--fg2)", fontSize: 17, lineHeight: 1.7 }}>
            These are our flat rates for everyday junk removal and smaller Home Resets. For larger, whole‑home, estate, or more multi-day projects, the amount of labor and disposal fees can swing a lot based on what's actually there. To price those fairly, we start with an online range and then confirm one exact project price with a few photos or a quick walkthrough if needed.
          </p>
          <p className="body" style={{ marginTop: 20, maxWidth: "78ch", marginLeft: "auto", marginRight: "auto", textAlign: "center", color: "var(--fg2)", fontSize: 17, lineHeight: 1.7 }}>
            Either way, you'll have a price range today and know your total before we start work. No guessing, no driveway haggling.
          </p>
          <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <span className="eyebrow">WHAT'S NOT INCLUDED</span>
              <h2 className="display-h2" style={{ fontSize: 64, lineHeight: 1.03, margin: 0 }}>Plain rules.<br /><em>No surprises.</em></h2>
            </div>
            <div style={{ paddingTop: 24, borderTop: "2px solid var(--fg1)", display: "flex", flexDirection: "column", gap: 12 }}>
              <span className="eyebrow" style={{ color: "var(--fg1)" }}>WHEN A CUSTOM PRICE IS NEEDED</span>
              <ul className="body" style={{ color: "var(--fg2)", listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                <li style={{ display: "flex", gap: 10 }}><span style={{ color: "var(--tossit-red)" }}>·</span> Heavy debris (concrete, dirt, roofing, brick)</li>
                <li style={{ display: "flex", gap: 10 }}><span style={{ color: "var(--tossit-red)" }}>·</span> Extreme clean‑outs (hoarder rooms, lots of bagging and sorting)</li>
                <li style={{ display: "flex", gap: 10 }}><span style={{ color: "var(--tossit-red)" }}>·</span> Unusually heavy items (safes, pianos, hot tubs)</li>
                <li style={{ display: "flex", gap: 10 }}><span style={{ color: "var(--tossit-red)" }}>·</span> Homes with lots of stairs or long carries</li>
                <li style={{ display: "flex", gap: 10 }}><span style={{ color: "var(--tossit-red)" }}>·</span> Requires demolition or significant deconstruction</li>
              </ul>
              <p className="body" style={{ color: "var(--fg2)" }}>If your job looks like any of these, we'll flag it upfront and agree on a clear do‑not‑exceed price before we touch anything.</p>
              <span className="eyebrow" style={{ color: "var(--fg1)", marginTop: 16 }}>WHAT WE DO NOT TAKE</span>
              <p className="body" style={{ color: "var(--fg2)" }}>Chemicals, hazardous waste, or any sort of biohazard materials. These require a licensed specialty handler — we're happy to point you to one.</p>
            </div>
          </div>
        </div>
      </section>
      <PricingPhilosophy />
      <SaturdayResetDays navigate={navigate} />
      <NotAFranchise />
      <section className={"section section--full " + (theme === "charcoal" ? "theme-charcoal" : theme === "white" ? "theme-white" : "theme-cream")}>
        <div className="section__inner">
          <ResetGuarantee />
        </div>
      </section>
      <CTABand navigate={navigate} />
    </>);}window.PagePricing = PagePricing;function PageAreas({ navigate, theme }) {const areas = [
  { city: "Greater Salt Lake City", n: "Bountiful · North Salt Lake · Salt Lake City · The Avenues · Sugar House · Holladay · Millcreek · Cottonwood Heights · Murray · Midvale · West Valley · Taylorsville · Sandy · West Jordan · South Jordan · Riverton · Draper · Bluffdale · Lehi", live: true },
  { city: "Park City & Surrounding Areas", n: "Old Town · Deer Valley · Empire Pass · Park Meadows · Prospector · Silver Lake · Canyons Village · Snyderville Basin · Jeremy Ranch · Kimball Junction · Promontory", live: true }];

  return (
    <>
      <section className={"section section--full " + (theme === "charcoal" ? "theme-charcoal" : theme === "white" ? "theme-white" : "theme-cream")}>
        <div className="section__inner">
          <div className="areas__hero" style={{ display: "grid", gridTemplateColumns: "0.8fr 1.4fr", gap: 56, alignItems: "center", marginBottom: 72 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 22, textAlign: "left", alignItems: "flex-start" }}>
              <span className="eyebrow">Service area</span>
              <h1 className="display-h1" style={{ textAlign: "left", fontSize: "64px", lineHeight: "1.02" }}>Greater Salt Lake area and <em>Park City.</em></h1>
              <p className="lede" style={{ textAlign: "left", margin: 0 }}>We serve the Greater Salt Lake Valley and the Park City basin — from Bountiful to Lehi, and the greater Park City area.</p>
              <p className="hero__tag" style={{ margin: 0, textAlign: "left" }}>WITH LIMITED AVAILABILITY FOR LARGER ESTATE AND LISTING PROJECTS OUTSIDE OUR RADIUS.</p>
              <div style={{ marginTop: 12, display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
                <button className="btn btn--primary btn--lg" onClick={() => {window.location.href = "Quote.html";}}>Get an instant quote <span className="arrow" aria-hidden>→</span></button>
                <button className="btn btn--ghost" onClick={() => navigate("contact")}>Or ask about your address</button>
              </div>
            </div>
            <div className="photo" style={{ aspectRatio: "3/2", background: "#EFEAE1" }}>
              <img src="assets/service-area-map.png"
              alt="Hand-drawn map of the Tossit service area: Bountiful, Salt Lake City, Murray, Sandy, Holladay, Draper, Lehi, and Park City"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>
          <div className="areas__grid">
            {areas.map((a) =>
            <div key={a.city} className={"area" + (a.live ? "" : " area--soon")}>
                <span className="area__status">{a.live ? "Live" : "Waitlist"}</span>
                <div className="area__city">{a.city}</div>
                <p className="area__neighborhoods">{a.n}</p>
              </div>
            )}
          </div>

          {/* Small note below the area boxes — nearby? and a quiet pricing disclaimer. */}
          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "start", paddingTop: 40, borderTop: "1px solid var(--tossit-cream-dark)" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
              <span className="eyebrow">Just outside the radius?</span>
              <p className="lede" style={{ margin: 0, fontSize: 22, textAlign: "left" }}>
                Don't see your neighborhood but you're nearby? <em>Ask about your address</em> and we'll let you know if your project is a fit.
              </p>
              <button className="btn btn--ghost" style={{ marginTop: 4 }} onClick={() => navigate("contact")}>
                Ask about your address →
              </button>
            </div>
            <p className="body-sm" style={{ margin: 0, color: "var(--fg2)", maxWidth: "44ch" }}>Higher project minimums apply for jobs outside the listed radius (estate, full‑home listing projects, cleanouts, and deep resets only).

            </p>
          </div>
        </div>
      </section>
    </>);

}
window.PageAreas = PageAreas;

function PageFAQ({ navigate, theme }) {
  const items = [
  ["Do you only schedule jobs on Saturdays?", "For now, yes. Saturdays are when we run on‑site Resets so we can give each home a proper, unhurried visit. Weekdays are when we handle estimates, walkthroughs, donation drops, and operations so jobs run smoothly. As we grow the crew, we'll open more weekday visit times. Until then, if Saturdays are tricky, let us know and we'll see if we can line up a special time that works."],
  ["Will the price change when you show up?", "No. Our goal is that you never feel trapped in your own driveway. For standard jobs, once we confirm the price from photos — or a walkthrough if needed — that number is your total for that visit. If the scope is obviously bigger than what was agreed on, or extra rooms or piles are added onsite, we'll take a look, explain, give you a new price, and only start if you approve. We don't start loading and then ask for more halfway through."],
  ["Do you give quotes over the phone?", "No, we don't. The fastest way to get a quote is our instant quote tool — answer a few quick questions and we'll follow up. We do it this way because it's the quickest way for us to understand your project and give you an accurate quote."],
  ["When do I pay?", "After the job. We don't charge it until the team confirms the work is completed and you're satisfied."],
  ["What if I need to cancel or reschedule?", "Reschedule any time, free, from the link in your confirmation. Cancel up to 2 hours before your window — no charge."],
  ["What happens to my stuff?", "We recycle or donate items first. We partner with local nonprofits and certified e-waste handlers. Anything we can't reroute goes to the landfill — but it's our last stop, not our first."],
  ["Do you take hazardous waste?", "No paint, chemicals, fuel, or asbestos — those need a specialty handler. We can recommend one for you. We are not licensed to remove any sort of chemical or hazardous materials."],
  ["Is tipping expected?", "Tipping is not expected. If you really want to recognize a job well done, leave a review."]];

  const [open, setOpen] = React.useState(-1);
  return (
    <>
      <section className={"section section--full " + (theme === "charcoal" ? "theme-charcoal" : theme === "white" ? "theme-white" : "theme-cream")}>
        <div className="section__inner">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
            <div className="section__head" style={{ margin: 0, position: "sticky", top: 100 }}>
              <span className="eyebrow">FAQ</span>
              <h1 className="display-h1" style={{ fontSize: 72 }}>Plain answers.</h1>
              <p className="lede">Still have a question? <button onClick={() => navigate("contact")} style={{ font: "inherit", color: "var(--tossit-red)", background: "none", border: "none", padding: 0, cursor: "pointer", textDecoration: "underline", textUnderlineOffset: 4 }}>Send us a note.</button></p>
            </div>
            <div className="faq__grid">
              {items.map(([q, a], i) =>
              <div key={q} className={"faq__item" + (open === i ? " is-open" : "")}
              onClick={() => setOpen(open === 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>
        </div>
      </section>
      <CTABand navigate={navigate} />
    </>);

}
window.PageFAQ = PageFAQ;

function PageAbout({ navigate, theme }) {
  const themeClass = theme === "charcoal" ? "theme-charcoal" : theme === "white" ? "theme-white" : "theme-cream";
  return (
    <>
      <section className={"section section--full " + themeClass}>
        <div className="section__inner" style={{ textAlign: "center" }}>
          <div className="about__hero" style={{ padding: "0 0 48px", textAlign: "center" }}>
            <span className="eyebrow">About Tossit</span>
            <h1 className="display-h1" style={{ marginTop: 16 }}>The opposite of <em>"junk be gone."</em></h1>
            <p className="lede" style={{ maxWidth: "34ch", margin: "20px auto 0", fontWeight: 500 }}>All junk removal companies are the same. That's why we started our own.</p>
          </div>

          <div style={{ maxWidth: 640, margin: "0 auto", display: "flex", flexDirection: "column", gap: 28, paddingBottom: 88 }}>
            <p className="body" style={{ fontSize: 18, lineHeight: 1.65, color: "var(--fg2)" }}>They have no prices on the page. Cartoon looking trucks. Shouting headlines. And one big button: "Call for pricing." The only way to know what anything cost was to get on the phone, schedule a visit, have a stranger walk through the house, and then hope the number they gave you in the driveway matched what you had in your head. And then they pressure you into hiring them on the spot. It felt backwards for something this simple.</p>
            <h2 className="display-h2" style={{ fontSize: 44, margin: "8px 0" }}>Tossit is the opposite <em>of that.</em></h2>
            <p className="body" style={{ fontSize: 18, lineHeight: 1.65, color: "var(--fg2)" }}>We publish clear flat‑rate ranges, give you an instant estimate online in under a minute, and then lock in one price before we start. No sales visit. No driveway haggling. No surprise "truck size" games. Just a quiet, uniformed crew who shows up when we say we will, protects your floors and walls, and hands the room back finished and ready to use.</p>
            <p className="body" style={{ fontSize: 18, lineHeight: 1.65, fontWeight: 500 }}>If you care as much about how the process feels as you do about the result, you're who we built this for.</p>
          </div>

          <div style={{ borderTop: "2px solid var(--fg1)", paddingTop: 48, marginBottom: 88 }}>
            <span className="eyebrow" style={{ display: "block", marginBottom: 40 }}>What we believe</span>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "40px 48px", maxWidth: 900, margin: "0 auto" }}>
              <div className="value" style={{ alignItems: "center" }}>
                <h4>Calm by default</h4>
                <p>You shouldn't have to manage the crew you hired. We arrive in clean, discreet vans, in uniform, with a clear plan. We work quietly, protect your paths and entry points, and leave rooms swept or vacuumed so they feel truly done — not "less messy."</p>
              </div>
              <div className="value" style={{ alignItems: "center" }}>
                <h4>Clear price before we arrive</h4>
                <p>We don't think you should have to invite a stranger over just to find out what it costs. Our instant estimator gives you a price right away. Send a few photos and we'll give you a One‑Price quote that won't change in the driveway. If we underestimate the workload it's on us, not you. The price won't change.</p>
              </div>
              <div className="value" style={{ alignItems: "center" }}>
                <h4>Simple payment when we're done</h4>
                <p>You only pay once the work is finished and you've walked the space. Most clients just tap a card when we're done and get an emailed receipt on the spot. No deposits, no pre‑charges, and no surprise add‑ons at the door.</p>
              </div>
              <div className="value" style={{ alignItems: "center" }}>
                <h4>Reroute first, dump last</h4>
                <p>A lot of what leaves a home doesn't need to go straight to the landfill. We separate obvious donations and recyclables and use local partners wherever we can. The landfill is our last stop, not our first.</p>
              </div>
            </div>
          </div>

          <div style={{ borderTop: "2px solid var(--fg1)", paddingTop: 48 }}>
            <div style={{ maxWidth: 720, margin: "0 auto" }}>
              <h2 className="display-h2" style={{ fontSize: 40 }}>Built for the <em>"too nice for junk guys"</em> homes.</h2>
              <p className="body" style={{ fontSize: 18, lineHeight: 1.65, color: "var(--fg2)", marginTop: 24 }}>Most junk companies are built for speed and volume. Tossit exists for the homes and projects where optics, discretion, and who shows up at the door actually matter.</p>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: "36px auto 0", display: "flex", flexDirection: "column", gap: 0, maxWidth: 760 }}>
              {[
              "For people who don't want “some guy from Craigslist” wandering inside their house.",
              "Listings where the way crews behavior and appearance reflects on the agent.",
              "Estates and senior moves where there's decades of life in every room and compassion and respect is required."].
              map((t, i) =>
              <li key={i} style={{ display: "flex", gap: 14, alignItems: "center", justifyContent: "center", padding: "22px 0", borderTop: "1px solid var(--border-1)" }}>
                <span aria-hidden style={{ flex: "0 0 auto", width: 10, height: 10, background: "var(--tossit-red)" }} />
                <span className="body" style={{ fontSize: 19, lineHeight: 1.5 }}>{t}</span>
              </li>
              )}
            </ul>
            <div style={{ maxWidth: 640, margin: "44px auto 0", display: "flex", flexDirection: "column", gap: 24 }}>
              <p className="body" style={{ fontSize: 18, lineHeight: 1.65, color: "var(--fg2)" }}>We're not the cheapest or the fastest option, and that's on purpose. Our job is to make one of the most annoying parts of home ownership feel controlled, quiet, and finished.</p>
              <p className="lede" style={{ maxWidth: "none" }}>So you can get your home back — <em>without the “junk be gone” circus.</em></p>
            </div>
          </div>
        </div>
      </section>
    </>);

}
window.PageAbout = PageAbout;

function PageContact({ navigate, theme }) {
  const [sent, setSent] = React.useState(false);
  return (
    <section className={"section section--full " + (theme === "charcoal" ? "theme-charcoal" : theme === "white" ? "theme-white" : "theme-cream")}>
      <div className="section__inner">
        <div className="contact__grid">
          <div className="contact__info">
            <span className="eyebrow">Contact</span>
            <h1 className="display-h1" style={{ fontSize: 80 }}>How can we<br /><em>help?</em></h1>
            <p className="lede">For booking, the fastest path is the instant quote tool. For everything else, here's how to reach us.</p>
            <div className="contact__row">
              <span className="k">By email</span>
              <span className="v"><a href="mailto:sam@tossitslc.com?subject=Tossit%20Question">sam@tossitslc.com</a></span>
            </div>
            <div className="contact__row">
              <span className="k">By phone</span>
              <span className="v"><a href="tel:+18015181450">801-518-1450</a></span>
            </div>
          </div>
          <form className="form2" style={{ alignSelf: "end" }} onSubmit={(e) => {
            e.preventDefault();
            const f = e.target;
            if (window.sb) {
              window.sb.from('contact_messages').insert({
                source_page: 'Contact.html',
                name:    f.name.value,
                email:   f.email.value,
                message: f.message.value
              }).then(({ error }) => { if (error) console.error('contact insert', error); });
            }
            setSent(true);
          }}>
            {sent ?
            <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">Got it. We'll be in touch within a business day.</h3>
                <p className="form2__sub">If it's about a booking that's today or tomorrow, the instant quote tool is the fastest way to reach us.</p>
                <button type="button" className="btn btn--ghost" onClick={() => setSent(false)} style={{ alignSelf: "flex-start" }}>Send another</button>
              </div> :

            <>
                <div className="form2__head">
                  <span className="form2__chip">Send a note</span>
                  <h3 className="form2__title">Tell us what's on your mind.</h3>
                  <p className="form2__sub">We reply within one business day.</p>
                </div>
                <div className="form2__grid">
                  <div className="form2__field form2__field--full">
                    <span className="form2__label">Your name</span>
                    <input className="form2__input" name="name" required placeholder="Full name" />
                  </div>
                  <div className="form2__field form2__field--full">
                    <span className="form2__label">Email</span>
                    <input className="form2__input" name="email" type="email" required placeholder="hello@example.com" />
                  </div>
                  <div className="form2__field form2__field--full">
                    <span className="form2__label">What's going on?</span>
                    <textarea className="form2__input" name="message" required rows="4" style={{ resize: "vertical", minHeight: 120 }} placeholder="A line or two is plenty."></textarea>
                  </div>
                </div>
                <button className="btn btn--primary btn--lg form2__submit" type="submit">Send <span className="arrow" aria-hidden>→</span></button>
                <p className="form2__foot">For general bookings and quotes, the instant quote tool is faster.</p>
              </>
            }
          </form>
        </div>
      </div>
    </section>);

}
window.PageContact = PageContact;