// Main app entry

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#f08838",
  "showStickyCTA": true,
  "showFloatSide": true,
  "showAlertBar": true,
  "density": "high"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.style.setProperty("--red", t.primary);
  }, [t.primary]);

  return (
    <div data-screen-label="01 Roof Repair HP">
      {t.showAlertBar && <AlertBar />}
      <TopInfo />
      <Header />
      <GNav />
      <Hero />
      <TrustBar />
      <CampaignRow />
      <StatBand />
      <ReasonsSection />
      <ServicesSection />
      <WorksSection />
      <FlowSection />
      <ReviewsSection />
      <CEOSection />
      <StaffSection />
      <AreaSection />
      <FAQSection />
      <ContactSection />
      <Footer />

      {t.showStickyCTA && <StickyCTA />}
      {t.showFloatSide && <FloatSide />}

      <TweaksPanel title="Tweaks">
        <TweakSection title="表示">
          <TweakToggle label="上部スクロール帯" value={t.showAlertBar} onChange={v => setTweak("showAlertBar", v)} />
          <TweakToggle label="下部固定CTA" value={t.showStickyCTA} onChange={v => setTweak("showStickyCTA", v)} />
          <TweakToggle label="右側フローティング" value={t.showFloatSide} onChange={v => setTweak("showFloatSide", v)} />
        </TweakSection>
        <TweakSection title="ブランドカラー">
          <TweakColor
            label="メインカラー"
            value={t.primary}
            onChange={v => setTweak("primary", v)}
            options={["#f08838", "#3aa56d", "#2e7d57", "#e8201f", "#0e3a82"]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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