// FRANCIS - main app
const STORAGE_KEY = 'francis_age_v1';
const LANG_KEY = 'francis_lang_v1';

function detectLang() {
  try {
    const stored = localStorage.getItem(LANG_KEY);
    if (stored === 'pt' || stored === 'en') return stored;
  } catch (e) {}
  const nav = (navigator.language || navigator.userLanguage || '').toLowerCase();
  if (nav.startsWith('pt')) return 'pt';
  if (!nav) return 'pt';
  return 'en';
}

function App() {
  const [lang, setLangState] = useState(() => detectLang());
  const [page, setPage] = useState(() => getPageFromHash());
  const [accepted, setAccepted] = useState(() => {
    try { return localStorage.getItem(STORAGE_KEY) === '1'; } catch { return false; }
  });
  const [scrolled, setScrolled] = useState(false);

  const t = window.I18N[lang];

  useEffect(() => {
    document.documentElement.lang = lang;
    try { localStorage.setItem(LANG_KEY, lang); } catch {}
  }, [lang]);

  useEffect(() => {
    function onScroll() {
      setScrolled(window.scrollY > 30);
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    function onHashChange() {
      setPage(getPageFromHash());
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  useEffect(() => {
    if (accepted) {
      document.body.style.overflow = '';
    } else {
      document.body.style.overflow = 'hidden';
    }
  }, [accepted]);

  function setLang(l) { setLangState(l); }
  function onAccept() {
    try { localStorage.setItem(STORAGE_KEY, '1'); } catch {}
    setAccepted(true);
  }

  return (
    <React.Fragment>
      {!accepted && <AgeGate t={t} lang={lang} onAccept={onAccept} />}
      <Nav t={t} lang={lang} setLang={setLang} scrolled={scrolled} />
      {page === 'home' ? (
        <React.Fragment>
          <Hero t={t} />
          <Story t={t} />
          <div className="section-divider"></div>
          <Tasting t={t} />
          <div className="section-divider"></div>
          <Serve t={t} />
          <div className="section-divider"></div>
          <Detail t={t} />
          <Origin t={t} />
          <Enquiry t={t} lang={lang} />
        </React.Fragment>
      ) : (
        <LegalPage t={t} page={page} />
      )}
      <Footer t={t} />
    </React.Fragment>
  );
}

function getPageFromHash() {
  const hash = window.location.hash.replace('#', '');
  if (hash === 'privacy' || hash === 'terms') return hash;
  return 'home';
}

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