// App root — composes the page and wires the Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "photo",
  "showRibbon": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <React.Fragment>
      <Header />
      <Hero />
      <Trips />
      <Gallery />
      <RiverMap />
      <Testimonials />
      <TrustBar />
      <HowItWorks />
      <WhyRaftWithUs />
      <FAQ />
      {tweaks.showRibbon && <Blog />}
      <FinalCTA />
      <Footer />
      <StickyMobileBar />

      <TweaksPanel>
          <TweakSection label="Sections">
            <TweakToggle
              label="Show blog teaser"
              value={tweaks.showRibbon}
              onChange={(v) => setTweak("showRibbon", v)}
            />
          </TweakSection>

          <TweakSection label="Jump to">
            <div style={{ display: "grid", gap: 6 }}>
              {[
                ["Hero", "#top"], ["Trips", "#trips"], ["How", "#how"],
                ["Reviews", "#reviews"], ["FAQ", "#faq"], ["Book", "#book"],
              ].map(([l, h]) => (
                <a key={h} href={h} style={{
                  padding: "8px 10px", border: "1px solid rgba(255,255,255,0.15)",
                  borderRadius: 4, fontSize: 12, color: "#fff",
                  fontFamily: "var(--font-ui)", letterSpacing: ".06em",
                }}>{l} <span style={{ float: "right", opacity: .5 }}>↗</span></a>
              ))}
            </div>
          </TweakSection>
        </TweaksPanel>
    </React.Fragment>
  );
}

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