// Zen Interiors — Root app + router

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#8a7558",
  "paper": "#faf7f2",
  "displayFont": "Cormorant Garamond",
  "showAwardBadges": true,
  "heroVariant": "rotating"
}/*EDITMODE-END*/;

function App() {
  // Hash router -------------------------------------------------------------
  const [route, setRoute] = useState(() => window.location.hash.replace(/^#/, '') || '/');
  const [enquiryOpen, setEnquiryOpen] = useState(false);
  const [locale, setLocale] = useState('EN');
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks live
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--clay', t.accent);
    r.style.setProperty('--clay-deep', shade(t.accent, -10));
    r.style.setProperty('--paper', t.paper);
    r.style.setProperty('--linen-soft', mix(t.paper, '#ece5d6', 0.5));
    r.style.setProperty('--font-display', `'${t.displayFont}', serif`);
  }, [t.accent, t.paper, t.displayFont]);

  // Hash subscription
  useEffect(() => {
    const onHash = () => {
      const r = window.location.hash.replace(/^#/, '') || '/';
      setRoute(r);
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = useCallback((to) => {
    window.location.hash = to;
  }, []);

  // Route resolution --------------------------------------------------------
  let page;
  if (route === '/' || route === '') {
    page = <HomePage navigate={navigate} openEnquiry={() => setEnquiryOpen(true)} />;
  } else if (route.startsWith('/projects/')) {
    const slug = route.replace('/projects/', '');
    page = <CaseStudyPage navigate={navigate} slug={slug} openEnquiry={() => setEnquiryOpen(true)} />;
  } else if (route === '/projects') {
    page = <ProjectsPage navigate={navigate} />;
  } else if (route.startsWith('/sectors/')) {
    const slug = route.replace('/sectors/', '');
    page = <SectorsPage navigate={navigate} slug={slug} />;
  } else if (route === '/sectors') {
    page = <SectorsPage navigate={navigate} />;
  } else if (route === '/services') {
    page = <ServicesPage navigate={navigate} openEnquiry={() => setEnquiryOpen(true)} />;
  } else if (route === '/about') {
    page = <AboutPage navigate={navigate} openEnquiry={() => setEnquiryOpen(true)} />;
  } else if (route === '/awards') {
    page = <AwardsPage navigate={navigate} />;
  } else if (route === '/contact') {
    page = <ContactPage openEnquiry={() => setEnquiryOpen(true)} />;
  } else if (route === '/journal') {
    page = <JournalPage navigate={navigate} />;
  } else {
    page = (
      <main className="container" style={{ padding: '160px 0', textAlign: 'center' }}>
        <div className="eyebrow">404</div>
        <h1 className="display" style={{ fontSize: 96, margin: '20px 0' }}>Page not found.</h1>
        <button className="btn" onClick={() => navigate('/')}>Back home <ArrowRight /></button>
      </main>
    );
  }

  return (
    <>
      <Nav route={route} navigate={navigate} locale={locale} setLocale={setLocale} openEnquiry={() => setEnquiryOpen(true)} />
      {page}
      <Footer navigate={navigate} openEnquiry={() => setEnquiryOpen(true)} />
      <EnquiryDrawer open={enquiryOpen} onClose={() => setEnquiryOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual system" />
        <TweakColor label="Accent" value={t.accent} onChange={v => setTweak('accent', v)}
          options={['#8a7558','#6d5a40','#7a8470','#a39082','#3d4a3f','#947a5c']} />
        <TweakColor label="Paper" value={t.paper} onChange={v => setTweak('paper', v)}
          options={['#faf7f2','#f4eee2','#ffffff','#ece5d6','#f0ebe1']} />
        <TweakSelect label="Display font" value={t.displayFont} onChange={v => setTweak('displayFont', v)}
          options={['Cormorant Garamond','Italiana','DM Serif Display','Marcellus']} />

        <TweakSection label="Content" />
        <TweakToggle label="Award badges on cards" value={t.showAwardBadges} onChange={v => setTweak('showAwardBadges', v)} />
        <TweakRadio label="Hero" value={t.heroVariant} onChange={v => setTweak('heroVariant', v)}
          options={['rotating','still']} />

        <TweakSection label="Quick links" />
        <TweakButton label="Open Volante case study" onClick={() => navigate('/projects/volante-penthouse')} />
        <TweakButton label="Open Villas sector" onClick={() => navigate('/sectors/villas')} />
        <TweakButton label="Open enquiry drawer" onClick={() => setEnquiryOpen(true)} />
      </TweaksPanel>
    </>
  );
}

// helpers
function shade(hex, percent) {
  const num = parseInt(hex.replace('#',''),16);
  const r = Math.max(0, Math.min(255, (num >> 16) + percent*2.55));
  const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00FF) + percent*2.55));
  const b = Math.max(0, Math.min(255, (num & 0x0000FF) + percent*2.55));
  return '#' + ((1<<24) + (Math.round(r)<<16) + (Math.round(g)<<8) + Math.round(b)).toString(16).slice(1);
}
function mix(a, b, t) {
  const ah = parseInt(a.replace('#',''),16), bh = parseInt(b.replace('#',''),16);
  const ar = ah>>16, ag = (ah>>8)&0xFF, ab = ah&0xFF;
  const br = bh>>16, bg = (bh>>8)&0xFF, bb = bh&0xFF;
  const r = Math.round(ar + (br-ar)*t), g = Math.round(ag + (bg-ag)*t), bl = Math.round(ab + (bb-ab)*t);
  return '#' + ((1<<24) + (r<<16) + (g<<8) + bl).toString(16).slice(1);
}

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