/* Zuleya by FBMI — root app */

function App() {
  const [route, navTo] = useRoute();
  const [quickView, setQuickView] = useState(null);
  const [toast, setToast] = useState('');
  const [saved, setSaved] = useState(() => {
    try { return JSON.parse(localStorage.getItem('zuleya-saved') || '[]'); } catch { return []; }
  });

  useEffect(() => {
    localStorage.setItem('zuleya-saved', JSON.stringify(saved));
  }, [saved]);

  // Tweaks
  const [tw, setTweak] = useTweaks(window.ZULEYA.TWEAK_DEFAULS);
  useEffect(() => {
    document.body.setAttribute('data-theme', tw.theme);
    document.documentElement.style.setProperty('--gold', tw.accent);
  }, [tw.theme, tw.accent]);

  const onEnquire = (c) => {
    setQuickView(null);
    setToast(`We’ll prepare a brief for "${c.name}" — finishing your details now.`);
    navTo('consultation');
  };
  const onSaveToggle = (c) => {
    setSaved(s => {
      const exists = s.includes(c.id);
      setToast(exists ? `${c.name} removed from your portfolio.` : `${c.name} saved to your portfolio.`);
      return exists ? s.filter(x => x !== c.id) : [...s, c.id];
    });
  };
  const isSaved = quickView ? saved.includes(quickView.id) : false;

  const heroIsTransparent = route === 'home';

  let page = null;
  switch (route) {
    case 'home': page = <Home onNav={navTo} onOpenCarpet={setQuickView} />; break;
    case 'story': page = <Story onNav={navTo} />; break;
    case 'collections': page = <Collections onNav={navTo} onOpenCarpet={setQuickView} />; break;
    case 'craftsmanship': page = <Craftsmanship onNav={navTo} />; break;
    case 'projects': page = <Projects onNav={navTo} />; break;
    case 'bespoke': page = <Bespoke onNav={navTo} />; break;
    case 'consultation': page = <Consultation onNav={navTo} onSubmit={() => setToast('Consultation request received — thank you.')} />; break;
    case 'impact': page = <Impact onNav={navTo} />; break;
    case 'showroom': page = <Showroom onNav={navTo} />; break;
    case 'contact': page = <Contact onNav={navTo} onSubmit={() => setToast('Note received — we’ll reply within one working day.')} />; break;
    default: page = <Home onNav={navTo} onOpenCarpet={setQuickView} />;
  }

  return (
    <React.Fragment>
      <Nav route={route} onNav={navTo} transparent={heroIsTransparent} />
      <div data-screen-label={route}>
        {page}
      </div>
      <Footer onNav={navTo} />

      <QuickViewModal
        carpet={quickView}
        onClose={() => setQuickView(null)}
        onEnquire={onEnquire}
        onSave={onSaveToggle}
        saved={isSaved}
      />

      <Toast message={toast} onDone={() => setToast('')} />

      <div className="sticky-bar" onClick={() => navTo('consultation')}>
        Book a consultation →
      </div>

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakColor label="Accent"
                    value={tw.accent}
                    onChange={(v) => setTweak('accent', v)}
                    options={['#B0903F', '#8E3B2E', '#2E3D5A', '#C99A3A', '#5A4636']} />
        <TweakRadio label="Tone"
                    value={tw.theme}
                    onChange={(v) => setTweak('theme', v)}
                    options={['warm', 'cool', 'papyrus']} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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