/* global React, ReactDOM */
// Trakkables.com — page root. Renders once the editable content has loaded.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTheme": "indigo",
  "showEyebrow": true,
  "stickyHeader": true
}/*EDITMODE-END*/;

function Site() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [contactOpen, setContactOpen] = React.useState(false);
  const [supportOpen, setSupportOpen] = React.useState(false);
  const [termsOpen, setTermsOpen] = React.useState(false);
  const [aboutOpen, setAboutOpen] = React.useState(false);
  const [pressOpen, setPressOpen] = React.useState(false);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const product = t.heroTheme === 'master' ? undefined : t.heroTheme;
  const support = tkContent().site.support;
  return (
    <div data-product={product}>
      <MktHeader sticky={t.stickyHeader} onAbout={() => setAboutOpen(true)} onPress={() => setPressOpen(true)} />
      <MktHero showEyebrow={t.showEyebrow} onContact={() => setContactOpen(true)} />
      <MktProducts />
      <MktFooter onAbout={() => setAboutOpen(true)} onPress={() => setPressOpen(true)} onSupport={() => setSupportOpen(true)} onTerms={() => setTermsOpen(true)} onContact={() => setContactOpen(true)} />
      <MktContactModal open={contactOpen} onClose={() => setContactOpen(false)} />
      <MktContactModal open={supportOpen} onClose={() => setSupportOpen(false)} formUrl={support.formUrl} title={support.title} subtitle={support.subtitle} />
      <MktTermsModal open={termsOpen} onClose={() => setTermsOpen(false)} />
      <MktAboutModal open={aboutOpen} onClose={() => setAboutOpen(false)} />
      <MktPressModal open={pressOpen} onClose={() => setPressOpen(false)} />
      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakSelect label="Hero theme" value={t.heroTheme}
          options={[
            { value: 'indigo', label: 'Hero (Teal)' },
            { value: 'master', label: 'Master (Teal)' },
            { value: 'proofing', label: 'Flow (Violet)' },
            { value: 'travel', label: 'Travel (Cyan)' },
            { value: 'golf', label: 'Golf (Green)' },
            { value: 'tab', label: 'Tab (Gold)' },
          ]}
          onChange={(v) => setTweak('heroTheme', v)} />
        <TweakSection label="Layout" />
        <TweakToggle label="Hero eyebrow badge" value={t.showEyebrow} onChange={(v) => setTweak('showEyebrow', v)} />
        <TweakToggle label="Sticky header" value={t.stickyHeader} onChange={(v) => setTweak('stickyHeader', v)} />
      </TweaksPanel>
    </div>
  );
}
window.TK_CONTENT_READY
  .then(() => ReactDOM.createRoot(document.getElementById('root')).render(<Site />))
  .catch((err) => {
    console.error(err);
    document.getElementById('root').textContent = 'Sorry — this page could not load. Please refresh.';
  });