// Catatu — Site shell v2
// Marketing/landing site is always light, regardless of in-app dark setting.
if (window.setCatatuTheme) window.setCatatuTheme('light', false);

const PAGES = [
  { k: 'home', l: 'Beranda' },
  { k: 'features', l: 'Fitur' },
  { k: 'story', l: 'Cerita' },
  { k: 'pricing', l: 'Harga' },
  { k: 'help', l: 'Bantuan' },
];

function useHashRoute() {
  const [route, setRoute] = React.useState(() => (window.location.hash || '#home').slice(1));
  React.useEffect(() => {
    const onHash = () => setRoute((window.location.hash || '#home').slice(1));
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const goto = (k) => {
    if (k === 'download') { window.location.href = '/app.html'; return; }
    window.location.hash = '#' + k;
    window.scrollTo({ top: 0, behavior: 'auto' });
  };
  return [route, goto];
}

function SiteHeader({ route, goto }) {
  const c = window.CT2;
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50, height: 76, padding: '0 64px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: 'rgba(247,241,227,0.85)', backdropFilter: 'blur(10px)',
      borderBottom: `1px solid ${c.line}`,
    }}>
      <div style={{ cursor: 'pointer' }} onClick={() => goto('home')}>
        <LockupHorizontal markSize={36} wordSize={26} color={c.ink} />
      </div>
      <nav style={{ display: 'flex', gap: 26, alignItems: 'center' }}>
        {PAGES.map(p => {
          const on = route === p.k;
          return (
            <button key={p.k} onClick={() => goto(p.k)} style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              fontFamily: 'DM Sans', fontSize: 14, fontWeight: 500,
              color: on ? c.ink : c.ink2, padding: '6px 0', position: 'relative',
            }}>
              {p.l}
              {on && <div style={{ position: 'absolute', bottom: -4, left: 0, right: 0, height: 2, background: c.terra, borderRadius: 1 }} />}
            </button>
          );
        })}
        <button onClick={() => goto('download')} style={{
          fontFamily: 'DM Sans', fontSize: 14, fontWeight: 500,
          padding: '10px 18px', borderRadius: 10, background: c.ink, color: c.cream, border: 'none', cursor: 'pointer',
        }}>Mulai gratis →</button>
      </nav>
    </header>
  );
}

function SiteFooter({ goto }) {
  const c = window.CT2;
  return (
    <footer style={{ background: c.warmDark, color: c.cream, padding: '60px 64px 36px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, paddingBottom: 40, borderBottom: '1px solid rgba(247,241,227,0.1)' }}>
          <div>
            <LockupHorizontal markSize={32} wordSize={22} color={c.cream} accent="#e07a4f" paper="#15110f" middle="#3a2f28" back="#e07a4f" />
            <p style={{ fontFamily: 'DM Sans', fontSize: 13, color: 'rgba(247,241,227,0.6)', lineHeight: 1.65, marginTop: 16, maxWidth: 280 }}>
              Buku saku digital untuk uangmu. Dibuat dengan tangan di Bandung 🇮🇩
            </p>
          </div>
          {[
            { h: 'Produk', items: [['Fitur', 'features'], ['Harga', 'pricing'], ['Unduh', 'download']] },
            { h: 'Perusahaan', items: [['Cerita', 'story'], ['Bantuan', 'help'], ['halo@catatu.app', null]] },
            { h: 'Legal', items: [['Privasi', null], ['Syarat', null], ['Keamanan', null]] },
          ].map((col, i) => (
            <div key={i}>
              <div style={{ fontFamily: 'Geist Mono', fontSize: 10, letterSpacing: 1.4, color: 'rgba(247,241,227,0.5)', textTransform: 'uppercase' }}>{col.h}</div>
              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map(([l, k], j) => (
                  <div key={j} onClick={k ? () => goto(k) : undefined} style={{ fontFamily: 'DM Sans', fontSize: 14, color: c.cream, cursor: k ? 'pointer' : 'default', opacity: k ? 1 : 0.7 }}>{l}</div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, fontFamily: 'Geist Mono', fontSize: 10, letterSpacing: 0.6, color: 'rgba(247,241,227,0.5)' }}>
          <div>© 2026 CATATU INDONESIA · BANDUNG</div>
          <div>VERSI WEB 2.4.1 — DICATAT DENGAN TANGAN</div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [route, goto] = useHashRoute();
  const c = window.CT2;

  let Page = window.HomePageV2;
  if (route === 'features') Page = window.FeaturesPageV2;
  else if (route === 'story') Page = window.StoryPageV2;
  else if (route === 'pricing') Page = window.PricingPageV2;
  else if (route === 'help') Page = window.HelpPageV2;
  else if (route === 'download') Page = window.DownloadPageV2;

  return (
    <div style={{ background: c.cream, color: c.ink, minHeight: '100vh' }}>
      <SiteHeader route={route} goto={goto} />
      <main><Page goto={goto} /></main>
      <SiteFooter goto={goto} />
    </div>
  );
}

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