// Main app — composes sections and wires the Tweaks panel

function App() {
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "industry": "plumbing",
    "theme": "copper",
    "showProcess": true,
    "showPromise": true,
    "showTestimonials": true,
    "showBigCTA": true
  }/*EDITMODE-END*/);

  const data = INDUSTRIES[t.industry] || INDUSTRIES.plumbing;
  const theme = THEMES[t.theme] || THEMES.copper;

  // Apply theme to :root
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--bg", theme.bg);
    root.style.setProperty("--bg-alt", theme.bgAlt);
    root.style.setProperty("--ink", theme.ink);
    root.style.setProperty("--ink-soft", theme.inkSoft);
    root.style.setProperty("--accent", theme.accent);
    root.style.setProperty("--accent-ink", theme.accentInk);
    root.style.setProperty("--line", theme.line);
    root.style.setProperty("--dark", theme.dark);
    root.style.setProperty("--dark-ink", theme.darkInk);
  }, [theme]);

  // Update page title to reflect industry
  React.useEffect(() => {
    document.title = `${data.brand} — ${data.tagline}`;
  }, [data]);

  const scrollToBook = () => {
    const el = document.getElementById("book");
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
  };

  return (
    <div data-screen-label="01 Landing">
      <Nav data={data} onBook={scrollToBook} />
      <Hero data={data} key={"hero-" + t.industry} />
      <Trust />
      <Services data={data} />
      {t.showProcess && <Process />}
      {t.showPromise && <Promise data={data} />}
      <BookingSection data={data} key={"book-" + t.industry} />
      {t.showTestimonials && <Testimonials />}
      <FAQ data={data} key={"faq-" + t.industry} />
      {t.showBigCTA && <BigCTA data={data} />}
      <Footer data={data} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Industry">
          <TweakSelect
            label="Trade"
            value={t.industry}
            options={[
              { value: "plumbing", label: "Plumbing" },
              { value: "electrical", label: "Electrical" },
              { value: "hvac", label: "HVAC · AC repair" },
              { value: "pest", label: "Pest control" },
              { value: "painting", label: "Painting" },
            ]}
            onChange={(v) => setTweak("industry", v)}
          />
        </TweakSection>

        <TweakSection label="Theme">
          <TweakRadio
            label="Palette"
            value={t.theme}
            options={[
              { value: "copper", label: "Copper" },
              { value: "ink", label: "Ink" },
              { value: "forest", label: "Forest" },
            ]}
            onChange={(v) => setTweak("theme", v)}
          />
        </TweakSection>

        <TweakSection label="Sections">
          <TweakToggle
            label="Process band"
            value={t.showProcess}
            onChange={(v) => setTweak("showProcess", v)}
          />
          <TweakToggle
            label="Promises grid"
            value={t.showPromise}
            onChange={(v) => setTweak("showPromise", v)}
          />
          <TweakToggle
            label="Testimonials"
            value={t.showTestimonials}
            onChange={(v) => setTweak("showTestimonials", v)}
          />
          <TweakToggle
            label="Closing CTA band"
            value={t.showBigCTA}
            onChange={(v) => setTweak("showBigCTA", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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