const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "headline": "A",
  "sectionTheme": "white",
  "highlightTier": "basic",
  "benefitsGap": 96,
  "gwHero": "garage",
  "gwDeadline": "September 30"
} /*EDITMODE-END*/;

const VALID_PAGES = ["home", "giveaway", "realtors", "estate", "realtors-giftcard", "realtors-listing", "how", "pricing", "areas", "faq", "about", "contact", "book", "redeem", "redeem-homeowner", "redeem-listing"];

// Resolve the current page from a real path first, then a legacy #hash, then the
// shell's own INITIAL_PAGE. Both URL styles keep working.
function pageFromLocation() {
  const byPath = window.pageForPath(window.location.pathname);
  if (byPath && byPath !== "home") return byPath;
  const h = window.location.hash.replace(/^#/, "");
  if (VALID_PAGES.includes(h)) return h;
  if (byPath === "home") return "home";
  return VALID_PAGES.includes(window.INITIAL_PAGE) ? window.INITIAL_PAGE : "home";
}

function App() {
  const [page, setPage] = React.useState(pageFromLocation);
  const [bookCtx, setBookCtx] = React.useState({});
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const navigate = (target, ctx) => {
    setBookCtx(ctx || {});
    setPage(target);
    const path = window.TOSSIT_PATHS[target];
    if (path) {
      history.pushState(null, "", path);
    } else {
      history.pushState(null, "", "/#" + target);
    }
    window.applyMeta(target);
    window.scrollTo({ top: 0, behavior: "auto" });
  };

  // Keep state in sync with browser back/forward, for both URL styles.
  React.useEffect(() => {
    const sync = () => { const p = pageFromLocation(); setPage(p); window.applyMeta(p); };
    window.addEventListener("popstate", sync);
    window.addEventListener("hashchange", sync);
    return () => { window.removeEventListener("popstate", sync); window.removeEventListener("hashchange", sync); };
  }, []);

  const themeClass = "theme-" + t.sectionTheme;
  const navTheme = t.sectionTheme; // "cream" | "white" | "charcoal"

  // Booking is its own full-bleed surface
  if (page === "book") {
    return (
      <>
          <BookingFlow navigate={navigate} initialTier={bookCtx.tier} />
          <TweaksWindow tweaks={t} setTweak={setTweak} />
        </>);

  }

  // Giveaway capture page — standalone surface, no site nav or footer
  if (page === "giveaway") {
    return (
      <>
          <PageGiveaway hero={t.gwHero} deadline={t.gwDeadline} />
          <TweaksWindow tweaks={t} setTweak={setTweak} />
        </>);

  }

  return (
    <>
        <TopNav page={page} navigate={navigate} theme={navTheme} />
        <main className="page">
          {page === "home" && <HomePage navigate={navigate} theme={t.sectionTheme} headline={t.headline} heroVariant={t.heroVariant} highlightTier={t.highlightTier} benefitsGap={t.benefitsGap} />}
          {page === "realtors" && <PageRealtors navigate={navigate} theme={t.sectionTheme} />}
          {page === "estate" && <PageEstate navigate={navigate} theme={t.sectionTheme} />}
          {page === "realtors-giftcard" && <PageRealtorsGiftCard navigate={navigate} theme={t.sectionTheme} />}
          {page === "realtors-listing" && <PageRealtorsListing navigate={navigate} theme={t.sectionTheme} />}
          {page === "redeem" && <PageRedeem navigate={navigate} theme={t.sectionTheme} />}
          {page === "redeem-homeowner" && <PageRedeemHomeowner navigate={navigate} theme={t.sectionTheme} />}
          {page === "redeem-listing" && <PageRedeemListing navigate={navigate} theme={t.sectionTheme} />}
          {page === "how" && <PageHowItWorks navigate={navigate} theme={t.sectionTheme} />}
          {page === "pricing" && <PagePricing navigate={navigate} highlight={t.highlightTier} theme={t.sectionTheme} />}
          {page === "areas" && <PageAreas navigate={navigate} theme={t.sectionTheme} />}
          {page === "faq" && <PageFAQ navigate={navigate} theme={t.sectionTheme} />}
          {page === "about" && <PageAbout navigate={navigate} theme={t.sectionTheme} />}
          {page === "contact" && <PageContact navigate={navigate} theme={t.sectionTheme} />}
        </main>
        <Footer navigate={navigate} />
        <TweaksWindow tweaks={t} setTweak={setTweak} />
      </>);

}

function HomePage({ navigate, theme, headline, heroVariant, highlightTier, benefitsGap }) {
  const themeClass = "theme-" + theme;
  return (
    <>
        <div className={themeClass}>
          <Hero variant={heroVariant} headline={headline} navigate={navigate} />
        </div>

        {/* Benefits strip — one-line banner sitting right under the hero */}
        <div className={themeClass}>
          <Benefits gap={benefitsGap} />
        </div>

        {/* How it works */}
        <section className={"section section--full " + themeClass} style={{ paddingTop: 32 }}>
          <div className="section__inner">
            <div className="section__head">
              <span className="eyebrow">How it works</span>
              <h2 className="display-h2">Three steps. <em>
No driveway haggling.</em></h2>
            </div>
            <HowItWorks />
          </div>
        </section>

        {/* Pricing — front and center */}
        <section className={"section section--full " + themeClass}>
          <div className="section__inner">
            <div className="section__head">
              <span className="eyebrow">Pricing</span>
              <h2 className="display-h2">Flat Rate Pricing <em>Instant Quote. No Games.</em></h2>
              <p className="lede" style={{ maxWidth: "44ch" }}>No hidden fees. No surprise charges.  If the job matches what you tell us, the price stands. No awkward driveway negotiations. </p>
            </div>
            <PricingTiers highlight={highlightTier} 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: 32, display: "flex", gap: 14, alignItems: "center" }}>
              <button className="btn btn--ghost" onClick={() => navigate("pricing")}>See full pricing &amp; what we take →</button>
            </div>
          </div>
        </section>

        <PricingPhilosophy />

        {/* Saturday Reset Days */}
        <SaturdayResetDays navigate={navigate} />

        <NotAFranchise />
        <section className="section section--full theme-charcoal reset-guarantee-section" style={{ background: "var(--tossit-charcoal)", display: "flex", alignItems: "center", justifyContent: "center", paddingTop: 72, paddingBottom: 72 }}>
          <div className="section__inner" style={{ display: "flex", justifyContent: "center" }}>
            <ResetGuarantee standalone={true} />
          </div>
        </section>

        {/* Testimonials — scrolling carousel */}
        <div className={themeClass}>
          <TestimonialCarousel />
        </div>

        {/* CTA band — always charcoal regardless of section theme */}
        <CTABand navigate={navigate} />
      </>);
}

function TweaksWindow({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
        <TweakSection label="Giveaway page">
          <TweakRadio label="Hero image"
        value={tweaks.gwHero}
        options={[
        { label: "Garage", value: "garage" },
        { label: "Room", value: "living" },
        { label: "Estate", value: "estate" }]
        }
        onChange={(v) => setTweak("gwHero", v)} />
          <TweakText label="Entry deadline"
        value={tweaks.gwDeadline}
        onChange={(v) => setTweak("gwDeadline", v)} />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakRadio label="Layout"
        value={tweaks.heroVariant}
        options={[
        { label: "Split", value: "split" },
        { label: "Centered", value: "centered" },
        { label: "Editorial", value: "editorial" }]
        }
        onChange={(v) => setTweak("heroVariant", v)} />
          <TweakRadio label="Headline"
        value={tweaks.headline}
        options={[
        { label: "Fresh air", value: "A" },
        { label: "The price", value: "B" },
        { label: "Tell us", value: "C" }]
        }
        onChange={(v) => setTweak("headline", v)} />
        </TweakSection>
        <TweakSection label="Benefits row">
          <TweakSlider label="Gap between stats"
        value={tweaks.benefitsGap}
        min={0} max={240} step={4} unit="px"
        onChange={(v) => setTweak("benefitsGap", v)} />
        </TweakSection>
        <TweakSection label="Pricing">
          <TweakRadio label="Featured tier"
        value={tweaks.highlightTier}
        options={[
        { label: "Quick", value: "quick" },
        { label: "Basic", value: "basic" },
        { label: "Deep", value: "deep" }]
        }
        onChange={(v) => setTweak("highlightTier", v)} />
        </TweakSection>
        <TweakSection label="Section background">
          <TweakRadio label="Theme"
        value={tweaks.sectionTheme}
        options={[
        { label: "Cream", value: "cream" },
        { label: "White", value: "white" },
        { label: "Charcoal", value: "charcoal" }]
        }
        onChange={(v) => setTweak("sectionTheme", v)} />
        </TweakSection>
      </TweaksPanel>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);