// Maison Yeya — App shell

function App() {
  const [route, setRoute] = useState("home");
  const [savedLooks, setSavedLooks] = useState([]);
  const [openLook, setOpenLook] = useState(null);
  const [enquiryOpen, setEnquiryOpen] = useState(false);
  const [apptOpen, setApptOpen] = useState(false);

  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply tweaks → CSS variables
  useEffect(() => {
    const root = document.documentElement;
    const accent = ACCENTS[t.accent] || ACCENTS.champagne;
    root.style.setProperty("--accent", accent.value);
    root.style.setProperty("--accent-deep", accent.deep);
    root.style.setProperty("--serif-display", `"${t.displayFont}", "Cormorant Garamond", serif`);
  }, [t.accent, t.displayFont]);

  // Hide initial-load splash
  useEffect(() => {
    const el = document.getElementById("initial-load");
    if (el) {
      setTimeout(() => {
        el.classList.add("gone");
        setTimeout(() => el.remove(), 700);
      }, 220);
    }
  }, []);

  // Scroll to top on route change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, [route]);

  const isSaved = useCallback((look) => savedLooks.some(s => s.id === look.id), [savedLooks]);
  const onSave = useCallback((look) => {
    setSavedLooks(prev => {
      if (prev.some(p => p.id === look.id)) return prev.filter(p => p.id !== look.id);
      return [...prev, look];
    });
  }, []);
  const onRemoveSaved = useCallback((look) => {
    setSavedLooks(prev => prev.filter(p => p.id !== look.id));
  }, []);

  const onAppointment = () => { setApptOpen(true); setEnquiryOpen(false); };
  const onEnquiry     = () => setEnquiryOpen(true);
  const onOpenLook    = (l) => setOpenLook(l);

  return (
    <TweakCtx.Provider value={t}>
      <div className="page-wrap" data-screen-label={`route:${route}`}>
        <SiteHeader
          route={route} setRoute={setRoute}
          onAppointment={onAppointment}
          onEnquiry={onEnquiry}
          enquiryCount={savedLooks.length}
        />

        <main>
          {route === "home" && (
            <Home setRoute={setRoute}
                  onAppointment={onAppointment}
                  onOpenLook={onOpenLook}
                  onSave={onSave}
                  isSaved={isSaved}
                  hero={t.homeHero}/>
          )}
          {route === "bridal" && (
            <CollectionsPage kind="bridal" setRoute={setRoute}
                             onAppointment={onAppointment}
                             onOpenLook={onOpenLook}
                             onSave={onSave}
                             isSaved={isSaved}/>
          )}
          {route === "couture" && (
            <CollectionsPage kind="couture" setRoute={setRoute}
                             onAppointment={onAppointment}
                             onOpenLook={onOpenLook}
                             onSave={onSave}
                             isSaved={isSaved}/>
          )}
          {route === "atelier" && (
            <MaisonPage setRoute={setRoute} onAppointment={onAppointment}/>
          )}
          {route === "press" && (
            <PressPage setRoute={setRoute} onAppointment={onAppointment}/>
          )}
          {route === "contact" && (
            <ContactPage setRoute={setRoute} onAppointment={onAppointment}/>
          )}
        </main>

        <SiteFooter setRoute={setRoute} onAppointment={onAppointment}/>

        {/* Overlays */}
        <LookDrawer look={openLook}
                    onClose={() => setOpenLook(null)}
                    onSave={onSave}
                    saved={openLook ? isSaved(openLook) : false}
                    onAppointment={() => { setOpenLook(null); onAppointment(); }}/>

        <EnquiryDrawer open={enquiryOpen} items={savedLooks}
                       onClose={() => setEnquiryOpen(false)}
                       onRemove={onRemoveSaved}
                       onAppointment={() => { setEnquiryOpen(false); onAppointment(); }}/>

        <AppointmentModal open={apptOpen}
                          onClose={() => setApptOpen(false)}
                          savedItems={savedLooks}
                          onRemoveSaved={onRemoveSaved}/>

        {/* Tweaks Panel */}
        <TweaksPanel title="Tweaks">
          <TweakSection label="Display Font">
            <TweakRadio label="Family" value={t.displayFont}
                        onChange={(v) => setTweak("displayFont", v)}
                        options={[
                          { value: "Italiana", label: "Italiana" },
                          { value: "Tenor Sans", label: "Tenor" },
                          { value: "Cormorant Garamond", label: "Cormorant" }
                        ]}/>
          </TweakSection>

          <TweakSection label="Accent">
            <TweakRadio label="Color" value={t.accent}
                        onChange={(v) => setTweak("accent", v)}
                        options={[
                          { value: "champagne", label: "Champagne" },
                          { value: "blush",     label: "Blush" },
                          { value: "ink",       label: "Ink" },
                          { value: "rouge",     label: "Rouge" }
                        ]}/>
          </TweakSection>

          <TweakSection label="Composition">
            <TweakToggle label="Vertical rails" value={t.showVerticals}
                         onChange={(v) => setTweak("showVerticals", v)}/>
          </TweakSection>

          <TweakSection label="Home Hero">
            <TweakSelect label="Featured Image" value={t.homeHero}
                         onChange={(v) => setTweak("homeHero", v)}
                         options={[
                           { value: "marionettes",   label: "Les Marionettes" },
                           { value: "bridal",        label: "Shades of White" },
                           { value: "valenciennes",  label: "Les Valenciennes" },
                           { value: "runway",        label: "L'Ascension" }
                         ]}/>
          </TweakSection>
        </TweaksPanel>
      </div>
    </TweakCtx.Provider>
  );
}

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