// App composition + Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayFont": "Fraunces",
  "accentColor": "#C9A36A",
  "heroImage": "clinic-interior",
  "showFab": true
}/*EDITMODE-END*/;

const HERO_OPTIONS = [
  { value: 'clinic-interior', label: 'Zen interior' },
  { value: 'clinic-env',      label: 'Environment' },
  { value: 'treatment-room',  label: 'Treatment room' },
];

const ACCENT_OPTIONS = [
  '#C9A36A', // warm gold (brief default)
  '#E8A598', // soft coral
  '#7A9E7E', // sage
  '#9A6E5A', // rosewood
];

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [branch, setBranch] = useState(BRANCHES[0]);
  const branchPickerRef = useRef(null);

  // Apply tweaks to CSS vars
  useEffect(() => {
    const r = document.documentElement;
    if (tweaks.accentColor) r.style.setProperty('--accent', tweaks.accentColor);
    if (tweaks.displayFont) r.style.setProperty('--display', `'${tweaks.displayFont}', Georgia, serif`);
  }, [tweaks]);

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

  return (
    <>
      <UtilityBar branch={branch} onBranchClick={scrollToBranches} />
      <Nav branch={branch} onBranchClick={scrollToBranches} onBook={scrollToBook} />
      <Hero branch={branch} heroVariant={tweaks.heroImage} onBook={scrollToBook} />
      <TrustStrip />
      <TreatmentGrid />
      <BranchSwitcher branch={branch} setBranch={setBranch} />
      <Specialists branch={branch} />
      <Niches />
      <Awards />
      <SmileGalleryTeaser />
      <Reviews />
      <BookingBand branch={branch} />
      <Footer />
      {tweaks.showFab && <WhatsAppFab />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual system">
          <TweakRadio
            label="Display font"
            value={tweaks.displayFont}
            options={[
              { value: 'Fraunces', label: 'Fraunces' },
              { value: 'Manrope',  label: 'Manrope' },
            ]}
            onChange={(v) => setTweak('displayFont', v)}
          />
          <TweakColor
            label="Warm accent"
            value={tweaks.accentColor}
            options={ACCENT_OPTIONS}
            onChange={(v) => setTweak('accentColor', v)}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakSelect
            label="Hero photo"
            value={tweaks.heroImage}
            options={HERO_OPTIONS}
            onChange={(v) => setTweak('heroImage', v)}
          />
        </TweakSection>
        <TweakSection label="Conversion">
          <TweakToggle
            label="WhatsApp floating button"
            value={tweaks.showFab}
            onChange={(v) => setTweak('showFab', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);