/* App shell: composes sections, owns booking modal + tweaks. */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "cream",
  "accent": "#A8804B",
  "fonts": "playfair",
  "heroLayout": "feature",
  "showPitch": true
}/*EDITMODE-END*/;

const ACCENTS = [
  { v: "#A8804B", deep: "#8a6638", name: "Brass" },
  { v: "#8E3A3A", deep: "#6f2c2c", name: "Barber red" },
  { v: "#3f6f6a", deep: "#2c524e", name: "Verdigris" },
  { v: "#2f4a6b", deep: "#22384f", name: "Ink blue" },
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bookOpen, setBookOpen] = useStateA(false);
  const [initialSvc, setInitialSvc] = useStateA(null);
  const [pitchOpen, setPitchOpen] = useStateA(true);

  useEffectA(() => {
    document.documentElement.dataset.theme = t.theme;
    document.documentElement.dataset.fonts = t.fonts === "playfair" ? "playfair" : "condensed";
  }, [t.theme, t.fonts]);

  useEffectA(() => {
    const a = ACCENTS.find((x) => x.v === t.accent) || ACCENTS[0];
    const r = document.documentElement.style;
    r.setProperty("--accent", a.v);
    r.setProperty("--accent-deep", a.deep);
  }, [t.accent]);

  function openBook(svc) { setInitialSvc(svc || null); setBookOpen(true); }

  return (
    <React.Fragment>
      {t.showPitch && pitchOpen && (
        <div className="pitch-bar">
          <span className="pitch-dot"></span>
          <span>Concept redesign — unsolicited pitch for <strong>The Barber Shop</strong>, W&nbsp;Broadway. Not affiliated.</span>
          <button className="pitch-x" onClick={() => setPitchOpen(false)} aria-label="Dismiss">✕</button>
        </div>
      )}

      <Nav onBook={openBook} />
      <main className={t.showPitch && pitchOpen ? "has-pitch" : ""}>
        <Hero onBook={openBook} layout={t.heroLayout} />
        <div className="stripe"></div>
        <Cuts onBook={openBook} />
        <Numbers />
        <WalkIn />
        <Visit onBook={openBook} />
      </main>
      <Footer onBook={openBook} />

      <BookingModal open={bookOpen} onClose={() => setBookOpen(false)} initialService={initialSvc} />

      <button className="fab cond" onClick={() => openBook(null)}>Book a chair</button>

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme} options={["cream", "charcoal"]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakColor label="Accent" value={t.accent} options={ACCENTS.map((a) => a.v)}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Type" />
        <TweakRadio label="Wordmark" value={t.fonts} options={["playfair", "dm-serif"]}
          onChange={(v) => setTweak("fonts", v)} />
        <TweakSection label="Hero" />
        <TweakRadio label="Layout" value={t.heroLayout} options={["feature", "split", "center"]}
          onChange={(v) => setTweak("heroLayout", v)} />
        <TweakSection label="Pitch" />
        <TweakToggle label="Concept banner" value={t.showPitch}
          onChange={(v) => setTweak("showPitch", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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