/* app-main.jsx — composes the page, owns Tweaks + scroll reveal, mounts to #root */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "Centered",
  "heroBg": false,
  "moduleStyle": "Expandable grid",
  "intgLayout": "Flow graph",
  "sphereSize": 80,
  "orbitLabels": false,
  "docStyle": "Animated",
  "faqStyle": "Two columns",
  "certsTheme": "Dark",
  "typeface": "Atlassian Sans"
}/*EDITMODE-END*/;

const MAP = {
  heroLayout: { 'Centered': 'below', 'Split': 'right', 'Spotlight': 'below' },
  pillarStyle: { 'Cards': 'cards', 'Numbered rows': 'rows', 'Icon tiles': 'tiles' },
  moduleStyle: { 'Expandable grid': 'grid', 'List rows': 'list', 'Compact grid': 'compact' },
};

// Settled brand direction: editorial-light theme, Qity logo green, product-below hero.
const ACCENT = ['#46DD8F', '#2FB874', '#0C7A48', '#E6FAF0'];

// Typeface pairings for the Typography tweak (display = headings, sans = body)
const TYPE = {
  'Atlassian Sans': { display: '"Atlassian Sans", -apple-system, sans-serif', sans: '"Atlassian Sans", -apple-system, sans-serif' },
  'Space Grotesk + Plex': { display: '"Space Grotesk", sans-serif', sans: '"IBM Plex Sans", sans-serif' },
  'Bricolage + Hanken': { display: '"Bricolage Grotesque", sans-serif', sans: '"Hanken Grotesk", sans-serif' },
  'Schibsted Grotesk': { display: '"Schibsted Grotesk", sans-serif', sans: '"Schibsted Grotesk", sans-serif' },
};

function useReveal(deps) {
  useEffect(() => {
    const reveal = (el) => { el.style.opacity = '1'; el.style.transform = 'none'; el.setAttribute('data-revealed', '1'); };
    const els = Array.from(document.querySelectorAll('.reveal:not([data-revealed])'));
    if (!('IntersectionObserver' in window)) { els.forEach(reveal); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => { if (en.isIntersecting) { reveal(en.target); io.unobserve(en.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, deps);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const themeClass = 'theme-light';
  const derived = {
    heroLayout: MAP.heroLayout[t.heroLayout] || 'below',
    heroSpot: t.heroLayout === 'Spotlight',
    heroBg: !!t.heroBg,
    moduleStyle: MAP.moduleStyle[t.moduleStyle] || 'grid',
    intgLayout: t.intgLayout || 'Flow graph',
    sphereSize: t.sphereSize ?? 80,
    orbitLabels: !!t.orbitLabels,
    docStyle: t.docStyle || 'Detailed',
    faqStyle: t.faqStyle || 'List',
    certsTheme: t.certsTheme || 'Dark',
  };
  const accentVars = {
    '--brand-bright': ACCENT[0], '--brand': ACCENT[1], '--brand-deep': ACCENT[2],
    '--brand-tint': ACCENT[3], '--brand-tint-2': ACCENT[3],
    '--font-display': (TYPE[t.typeface] || TYPE['Atlassian Sans']).display,
    '--font-sans': (TYPE[t.typeface] || TYPE['Atlassian Sans']).sans,
  };

  const goDemo = () => { window.location.href = 'mailto:info@qity.be?subject=Demo%20request'; };

  useReveal([derived.heroLayout, derived.moduleStyle]);

  return (
    <div className={themeClass} style={accentVars}>
      <Nav darkHero={false} onDemo={goDemo} />
      <main>
        <Hero tweaks={derived} onDemo={goDemo} />
        <Trust />
        <Pillars tweaks={derived} />
        <Modules tweaks={derived} />
        <Integrations tweaks={derived} />
        <SmartDocs tweaks={derived} />
        <UseCases />
        <FAQ tweaks={derived} />
        <Proof />
        <Certs tweaks={derived} />
        <CTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero layout" />
        <TweakRadio label="Layout" value={t.heroLayout}
          options={['Centered', 'Split', 'Spotlight']}
          onChange={(v) => setTweak('heroLayout', v)} />
        <TweakToggle label="Background image" value={t.heroBg}
          onChange={(v) => setTweak('heroBg', v)} />

        <TweakSection label="Module cards" />
        <TweakRadio label="Layout" value={t.moduleStyle}
          options={['Expandable grid', 'List rows', 'Compact grid']}
          onChange={(v) => setTweak('moduleStyle', v)} />

        <TweakSection label="Smart documents" />
        <TweakRadio label="Document" value={t.docStyle || 'Detailed'}
          options={['Detailed', 'Abstract', 'Animated']}
          onChange={(v) => setTweak('docStyle', v)} />

        <TweakSection label="FAQ" />
        <TweakSelect label="Layout" value={t.faqStyle || 'List'}
          options={['List', 'Two columns', 'Expand all', 'Side-by-side']}
          onChange={(v) => setTweak('faqStyle', v)} />

        <TweakSection label="Certifications" />
        <TweakRadio label="Background" value={t.certsTheme || 'Dark'}
          options={['Dark', 'Light']}
          onChange={(v) => setTweak('certsTheme', v)} />

        <TweakSection label="Typography" />
        <TweakSelect label="Typeface" value={t.typeface}
          options={['Atlassian Sans', 'Space Grotesk + Plex', 'Bricolage + Hanken', 'Schibsted Grotesk']}
          onChange={(v) => setTweak('typeface', v)} />
      </TweaksPanel>
    </div>
  );
}

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