const PAGE_META = {
  home:     { title: 'Vacant Home Staging | Austin & San Antonio | Ari Joon Home',         desc: 'Expert vacant home staging serving Austin, San Antonio, Kyle, Buda, Pflugerville, New Braunfels, and the Texas Hill Country. Homes styled to sell — fast and above ask.' },
  work:     { title: 'Portfolio | Ari Joon Home — Home Staging Austin & San Antonio',       desc: 'Browse staged homes across Austin, San Antonio, and Central Texas. Every install by Ari Joon Home is styled to sell faster and above ask.' },
  services: { title: 'Services & Pricing | Ari Joon Home — Home Staging Austin',           desc: 'Vacant home staging, interior curation, and agent partnership programs for Austin, San Antonio, and surrounding Texas communities. White-glove service, transparent pricing.' },
  about:    { title: 'About Ariana Khaledi | Ari Joon Home — Austin Home Stager',          desc: 'Meet Ariana Khaledi, FIDM-trained founder of Ari Joon Home — a boutique staging studio serving Austin, San Antonio, Kyle, Buda, New Braunfels, and the Texas Hill Country.' },
  inquiry:  { title: 'Start Your Inquiry | Ari Joon Home — Austin Home Staging',           desc: 'Ready to stage your home? Book a complimentary site visit with Ari Joon Home. Serving Austin, San Antonio, and surrounding Central Texas communities.' },
};

// Root app
function App() {
  const [route, navigate] = useHashRoute();
  const [tweaks, setTweaks] = useState(window.TWEAKS);
  const setTweak = (k, v) => setTweaks(t => ({...t, [k]: v}));

  // Apply tweaks to body
  useEffect(() => {
    document.body.dataset.palette = tweaks.palette;
    document.body.dataset.display = tweaks.displayFont;
    document.body.dataset.script = tweaks.scriptFont;
    document.body.dataset.grain = String(!!tweaks.grainy);
    document.body.dataset.cursor = String(!!tweaks.showCursor);
  }, [tweaks]);

  // Per-page SEO: update <title> and meta description on route change
  useEffect(() => {
    const key = route.name === 'project' ? 'work' : (route.name || 'home');
    const meta = PAGE_META[key] || PAGE_META.home;
    document.title = meta.title;
    let el = document.querySelector('meta[name="description"]');
    if (el) el.setAttribute('content', meta.desc);
  }, [route.name]);

  // Page transition
  const [pageKey, setPageKey] = useState(route.name + (route.slug||''));
  useEffect(() => {
    setPageKey(route.name + (route.slug||''));
  }, [route.name, route.slug]);

  let page;
  switch (route.name) {
    case 'work': page = <Portfolio navigate={navigate}/>; break;
    case 'project': page = <Project slug={route.slug} navigate={navigate}/>; break;
    case 'services': page = <Services navigate={navigate}/>; break;
    case 'about': page = <About navigate={navigate}/>; break;
    case 'inquiry': page = <Inquiry navigate={navigate}/>; break;
    default: page = <Home navigate={navigate}/>;
  }

  return (
    <>
      <ScrollProgress/>
      <Nav route={route} navigate={navigate}/>
      <div key={pageKey} className="page-wrap">
        {page}
      </div>
      {route.name !== 'inquiry' && <Footer navigate={navigate}/>}
      <TweaksPanel tweaks={tweaks} setTweak={setTweak}/>
      <style>{`
        .page-wrap { animation: pageIn .7s cubic-bezier(.2,.7,.2,1); }
        @keyframes pageIn {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: none; }
        }
      `}</style>
    </>
  );
}

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