// Pricing tiers + how-it-works + benefits + what-we-take + testimonial + cta band

const TIERS = [
{ id: "quick", name: "Quick Toss", price: 295,
  tagline: "The small pile you're tired of seeing.",
  examples: ["A couch and a few smaller items", "A tight pile of 8–10 boxes/totes", "\"I really need to get rid of that\" items in the house or yard"],
  list: [],
  foot: "The annoying little project you walk past constantly and keep telling yourself you'll “just take next time” but never do." },
{ id: "basic", name: "Basic Reset", price: 495,
  tagline: "The “there goes my Saturday” project.",
  examples: ["A longer wall of boxes/totes and small furniture", "A solid pile in the basement plus a smaller one in the garage", "Enough that you could do it with a truck, but it would take multiple runs and a whole Saturday"],
  list: [],
  foot: "The kind of job where you know you could  do it if you had a whole Saturday… you just don't want to spend the time and take multiple trips to do it." },
{ id: "deep", name: "Deep Reset", price: 795, from: true,
  tagline: "The big, \"whole‑production\" mess handled for you.",
  examples: ["Multiples areas of typical household junk", "Several heavy‑use piles you want gone in one visit", "The “we should probably just rent a dumpster for this” situation"],
  list: [],
  foot: "The big, lingering mess you've put off because it feels like “a whole production” to deal with." }];

window.TIERS = TIERS;

function PricingTiers({ highlight, navigate, showBadge = true }) {
  return (
    <div className="pricing__grid">
      {TIERS.map((t) => {
        const featured = highlight === t.id;
        return (
          <div key={t.id} className={"tier" + (featured ? " is-featured" : "")}>
            {featured && showBadge && <span className="tier__badge">Most booked</span>}
            <span className="tier__name">{t.name}</span>
            <div className="tier__price">{t.from && <small style={{ alignSelf: "flex-end", marginBottom: 14, marginRight: -2 }}>from</small>}${t.price}<small>{t.from ? "& up" : "flat"}</small></div>
            <p className="tier__tagline">{t.tagline}</p>
            <div className="tier__examples">
              <span className="tier__sub">Looks like</span>
              <ul className="tier__ex-list">
                {t.examples.map((e) => <li key={e}>{e}</li>)}
              </ul>
            </div>
            {t.list.length > 0 &&
            <ul className="tier__list">
              {t.list.map((l) => <li key={l}>{l}</li>)}
            </ul>}
            {t.foot && <p className="tier__foot" style={{ fontStyle: "italic" }}>{t.foot}</p>}
            <div className="tier__cta">
              <button
                className={"btn " + (featured ? "btn--primary" : "btn--secondary")}
                onClick={() => {window.location.href = "Quote.html?tier=" + t.id;}}>
                
                Get an instant quote <span className="arrow" aria-hidden>→</span>
              </button>
            </div>
          </div>);

      })}
    </div>);

}
window.PricingTiers = PricingTiers;

function ResetGuarantee({ standalone }) {
  const baseStyle = { display: "flex", flexDirection: "column", gap: 18, alignItems: "center", textAlign: "center", maxWidth: 720, marginLeft: "auto", marginRight: "auto" };
  const rootStyle = standalone ? baseStyle : Object.assign({}, baseStyle, { marginTop: 64, paddingTop: 40, borderTop: "1px solid var(--tossit-cream-dark)" });
  return (
    <div style={rootStyle}>
      <span className="eyebrow">Our promise</span>
      <h3 className="display-h2" style={{ fontSize: 40, margin: 0 }}>Reset Right <em>Guarantee.</em></h3>
      <p className="body" style={{ color: "var(--fg2)", maxWidth: "58ch", margin: 0 }}>If any job feels half‑done — we missed agreed‑on items, left obvious junk, or didn't leave the space in "reset" condition — let us know within 48 hours. We'll come back and fix it at no extra charge. No arguing, no nickel‑and‑diming. We are only happy if you are too.

      </p>
    </div>);
}
window.ResetGuarantee = ResetGuarantee;

// Saturday Reset Days — shared between the home page and pricing page so
// edits to one mirror to both. `navigate` powers the Contact button.
function SaturdayResetDays({ navigate }) {
  return (
    <section className="section section--full">
      <div className="section__inner sat" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 72, alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <span className="eyebrow">How scheduling works</span>
            <h2 className="display-h2" style={{ fontSize: 52, lineHeight: 1.03, margin: 0 }}>Saturday <em>Reset Days.</em></h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, maxWidth: "52ch" }}>
            <p className="body" style={{ color: "var(--fg2)", fontSize: 17, lineHeight: 1.65 }}>Right now we run in‑home Home Resets on Saturdays only while we grow. Saturdays are our <strong>dedicated Reset Days</strong> — the only thing on the calendar is clearing unwanted items and handing rooms back finished and ready for their next purpose. Weekdays are when we handle estimates, planning, and donation runs so your visit doesn't get squeezed between other jobs.</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, paddingTop: 24, borderTop: "1px solid var(--tossit-cream-dark)" }}>
            <h3 className="h3" style={{ font: "700 22px/1.2 var(--font-sans)", letterSpacing: "-0.015em", margin: 0 }}>Limited Saturday spots <em style={{ font: "300 italic 1em/1 var(--font-serif)" }}>(by design).</em></h3>
            <p className="body" style={{ color: "var(--fg2)", fontSize: 17, lineHeight: 1.65, maxWidth: "52ch" }}>We're a small, owner‑operated company, so we cap the number of Resets each Saturday. That way <strong>we don't overbook, rush, or keep you waiting around all day</strong> when you've got other things to do. Once a Saturday is booked up, that's it. If you're working around a move date or listing photos and don't see a Saturday that works, use our instant quote tool or contact form and we'll see if we can open a <strong>special slot</strong> for you.</p>
            <div style={{ marginTop: 8, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <button className="btn btn--primary" 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")}>Contact us</button>
            </div>
          </div>
        </div>

        {/* Ghost calendar — Saturdays highlighted */}
        <div className="ghostcal" aria-hidden="true">
          <div className="ghostcal__grid">
            {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((d) =>
            <span key={d} className={"ghostcal__dow" + (d === "Sat" ? " is-sat" : "")}>{d}</span>
            )}
            {Array.from({ length: 30 }, (_, i) => {
              const day = i + 1;
              // Month starts on a Wednesday (col 3) so Saturdays land on 4, 11, 18, 25.
              const isSat = day % 7 === 4;
              const cell = <span key={day} className={"ghostcal__day" + (isSat ? " is-sat" : "")}>{day}</span>;
              if (day === 1) return [<span key="pad1" className="ghostcal__day is-pad" />, <span key="pad2" className="ghostcal__day is-pad" />, cell];
              return cell;
            })}
          </div>
          <div className="ghostcal__legend">
            <span className="ghostcal__legend-dot" /> Reset Day
          </div>
        </div>
      </div>
    </section>);
}
window.SaturdayResetDays = SaturdayResetDays;

// Pricing philosophy — "Not the cheapest. On purpose." Shared across home + pricing pages.
function PricingPhilosophy() {
  const cheaper = [
  "A high pressure sales pitch while in your driveway",
  "People you don't necessarily want working in your home",
  "No floor protection, no sweep\u2011up, and a rushed crew racing to the next job. In and out as fast as possible."];
  const tossit = [
  "Upfront, all\u2011in pricing for the scope we agree on",
  "Finished usable spaces, not just \u201cless junk\u201d",
  "Owner\u2011operated, insured service that's accountable",
  "Donation\u2011minded by default. Most things can have a second life"];

  return (
    <section className="section section--full" style={{ background: "var(--tossit-white)" }}>
      <div className="section__inner philo">
        <div className="philo__head">
          <div className="philo__head-l">
            <span className="eyebrow">Our pricing philosophy</span>
            <h2 className="display-h2" style={{ fontSize: 56, lineHeight: 1.0, margin: 0 }}>Not the cheapest. <em>On purpose.</em></h2>
            <p className="body philo__head-p" style={{ color: "var(--fg2)", fontSize: 18, lineHeight: 1.7 }}>Tossit isn't built to be the cheapest option. It's priced so we can be insured, take our time, protect your floors and walls, finish the space, and stand behind the work. That costs a little more up front — but we don't cut corners or play games in the driveway. We built the service we'd want working in our home.</p>
          </div>
        </div>

        <div className="philo__compare">
          <div className="philo__col">
            <span className="eyebrow" style={{ color: "var(--tossit-charcoal-50)" }}>What "cheaper" usually means</span>
            <ul className="philo__list">
              {cheaper.map((t, i) =>
              <li key={i} className="philo__item philo__item--muted">{t}</li>
              )}
            </ul>
            <p className="philo__note">That might be fine for a broken futon. It's usually not what you want for a $1M listing, an estate, or your parents' house.</p>
          </div>

          <div className="philo__col philo__col--tossit">
            <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>What you're paying for with Tossit</span>
            <ul className="philo__list">
              {tossit.map((t, i) =>
              <li key={i} className="philo__item philo__item--yes">{t}</li>
              )}
            </ul>
          </div>
        </div>
      </div>
    </section>);
}
window.PricingPhilosophy = PricingPhilosophy;

// "Not a franchise. Not a guy with a pickup." — shared across home + pricing pages.
function NotAFranchise() {
  return (
    <section className="section section--full" style={{ background: "var(--tossit-white)" }}>
      <div className="section__inner franchise">
        <span className="eyebrow" style={{ color: "var(--tossit-red)" }}>Who we are</span>
        <h2 className="display-h2" style={{ fontSize: 52, lineHeight: 1.02, margin: 0, maxWidth: "18ch" }}>Not a franchise. <em>Not a guy with a pickup.</em></h2>
        <p className="body" style={{ color: "var(--fg2)", fontSize: 20, lineHeight: 1.6, maxWidth: "56ch", margin: 0 }}>Most options are either a big national brand focused on volume and speed, or a random guy with a truck from Craigslist. Tossit is neither. We're a small, owner‑operated home reset company built for higher‑end homes and estates in the Salt Lake Valley and Park City — which means clean vans, careful work, and someone whose name is actually on the line every time we show up.</p>
      </div>
    </section>);
}
window.NotAFranchise = NotAFranchise;

function HowItWorks() {
  const steps = [
  { n: "01", t: "Tell us what's going", d: "Give us a snapshot of your project. You'll see your price before you book — no on-site surprises." },
  { n: "02", t: "Pick a window", d: "Two-hour arrival windows. We text the morning of with the team's name and a photo." },
  { n: "03", t: "We handle the rest", d: "Uniformed crew removes your unwanted items. Floors covered, doors padded. Your space, cleared — calmly." }];

  return (
    <div className="how__grid">
      {steps.map((s) =>
      <div className="how__step" key={s.n}>
          <span className="how__num">STEP {s.n}</span>
          <h3 className="h3">{s.t}</h3>
          <p className="body" style={{ color: "var(--fg2)" }}>{s.d}</p>
        </div>
      )}
    </div>);

}
window.HowItWorks = HowItWorks;

function Benefits() {
  const items = [
  { k: <>$295<em></em></>, v: "Starting price · no hidden fees" },
  { k: "30s", v: "To get a price" },
  { k: "50%+", v: "Donated or Recycled" }];

  return (
    <div className="benefits">
      {items.map((it, i) =>
      <div className="benefit" key={i}>
          <div className="benefit__k">{it.k}</div>
          <div className="benefit__v">{it.v}</div>
        </div>
      )}
    </div>);

}
window.Benefits = Benefits;

const TAKES = [
["Mattresses", "from $129"], ["Couches", "from $129"], ["Treadmills", "from $149"],
["Refrigerators", "from $149"], ["Patio sets", "from $179"], ["Pianos (upright)", "from $349"],
["Hot tubs", "from $549"], ["Garage clearouts", "from $329"], ["Estate clearouts", "from $1,100"],
["Yard waste", "from $179"], ["Construction debris", "from $329"], ["Office furniture", "from $329"]];


function WhatWeTake() {
  return (
    <div className="takes__grid">
      {TAKES.map(([name, price]) =>
      <div className="take" key={name}>
          <span className="take__name">{name}</span>
          <span className="take__price">{price}</span>
        </div>
      )}
    </div>);

}
window.WhatWeTake = WhatWeTake;

function Testimonial() {
  return (
    <p className="quote">"They were in and out in forty minutes. I can park in my garage again!."</p>);

}
window.Testimonial = Testimonial;

const TESTIMONIALS = [
{ quote: "They were in and out in forty minutes. I can park in my garage again.", name: "Maya R.", meta: "Cottonwood Heights · Salt Lake City" },
{ quote: "The price they quoted online was the price I paid. No surprises at the door, which is exactly what I wanted.", name: "Daniel K.", meta: "Park Meadows · Park City" },
{ quote: "Uniformed, calm, and careful with the floors. It felt nothing like the junk haulers I'd used before.", name: "Susan T.", meta: "Holladay · Salt Lake City" },
{ quote: "We cleared out my late father's estate without a single stressful moment. They handled everything with real respect.", name: "James W.", meta: "The Avenues · Salt Lake City" },
{ quote: "Booked in the morning, gone by the afternoon. The text with the team's name and photo was a lovely touch.", name: "Priya N.", meta: "Draper · Salt Lake City" }];


function TestimonialCarousel() {
  const trackRef = React.useRef(null);
  const scrollBy = (dir) => {
    const track = trackRef.current;
    if (!track) return;
    track.scrollBy({ left: dir * track.clientWidth * 0.8, behavior: "smooth" });
  };
  return (
    <section className="tcar">
      <div className="tcar__head">
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <span className="eyebrow">What people say</span>
          <h2 className="display-h2">Quietly, <em>the best part of their week.</em></h2>
        </div>
        <div className="tcar__nav">
          <button className="tcar__arrow" aria-label="Previous" onClick={() => scrollBy(-1)}>
            <span aria-hidden>←</span>
          </button>
          <button className="tcar__arrow" aria-label="Next" onClick={() => scrollBy(1)}>
            <span aria-hidden>→</span>
          </button>
        </div>
      </div>
      <div className="tcar__track" ref={trackRef}>
        {TESTIMONIALS.map((t, i) =>
        <figure className="tcard" key={i}>
            <blockquote className="tcard__quote">"{t.quote}"</blockquote>
            <figcaption className="tcard__attr">
              <span className="testimonial__name">{t.name}</span>
              <span className="testimonial__meta">{t.meta}</span>
            </figcaption>
          </figure>
        )}
      </div>
    </section>);

}
window.TestimonialCarousel = TestimonialCarousel;

function EditorialQuote() {
  return (
    <section className="editorial-quote">
      <p className="editorial-quote__text" style={{ fontFamily: "\"Perfectly Nineties\"", fontWeight: "300" }}>
        Get your space back<span className="red-period"></span>
      </p>
      <div className="editorial-quote__attr"></div>
    </section>);

}
window.EditorialQuote = EditorialQuote;

function CTABand({ navigate }) {
  return (
    <section className="cta-band">
      <h2 className="display-h2">Ready when you are.</h2>
      <p className="cta-band__sub">A price in 30 seconds. No email required.</p>
      <button className="btn btn--primary btn--lg" onClick={() => {window.location.href = "Quote.html";}}>
        Get an instant quote <span className="arrow" aria-hidden>→</span>
      </button>
    </section>);

}
window.CTABand = CTABand;