// BI Reporting detail page
function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  React.useEffect(() => {document.body.dataset.logoFont = t.logoFont || 'mono';}, [t.logoFont]);
  React.useEffect(() => {document.body.dataset.logoAccent = t.logoAccent || 'dot';}, [t.logoAccent]);
  React.useEffect(() => {document.body.dataset.pageFont = t.pageFont || 'current';}, [t.pageFont]);
  React.useEffect(() => {document.body.style.setProperty('--logo-scale', (t.logoSize || 100) / 100);}, [t.logoSize]);
  React.useEffect(() => {document.body.dataset.logoWeight = t.logoWeight || 'auto';}, [t.logoWeight]);
  React.useEffect(() => { document.body.dataset.navHome = t.navHomeText ? 'show' : 'hide'; }, [t.navHomeText]);
  React.useEffect(() => {
    document.body.dataset.ambient = t.ambient ? 'on' : 'off';
    document.body.style.setProperty('--amb-dur', (t.ambientDur || 160) + 's');
  }, [t.ambient, t.ambientDur]);

  return (
    <>
      <SiteNav solid current="bi" />
      <PageHero eyebrow="Business Intelligence"
      title={<>Workplace intelligence<br />for <em>smarter decisions.</em></>}
      sub="We connect and unite your data sources, then build reporting tailored to your organisation — delivered to Power BI on a cadence that suits your team." />
      <Automation />
      <ReportingLines />
      <div className="amb-host dark">
        <AmbientPie tone="light" />
        <BIDemo />
      </div>
      <Contact />
      <Foot />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Ambient visuals" />
        <TweakToggle label="Background motion" value={t.ambient} onChange={(v) => setTweak('ambient', v)} />
        <TweakSlider label="Motion speed (slower →)" min={80} max={320} step={10} unit="s" value={t.ambientDur} onChange={(v) => setTweak('ambientDur', v)} />
        <TweakSection label="Logo" />
        <TweakSelect label="Wordmark font" value={t.logoFont}
        options={[{ value: 'manrope', label: 'Manrope bold' }, { value: 'manrope-black', label: 'Manrope extra-bold' }, { value: 'manrope-light', label: 'Manrope light' }, { value: 'dm', label: 'DM Sans' }, { value: 'mono', label: 'JetBrains Mono' }, { value: 'mono-caps', label: 'Mono spaced caps' }, { value: 'cormorant', label: 'Cormorant Garamond italic' }, { value: 'fraunces-italic', label: 'Fraunces italic' }, { value: 'fraunces-semibold', label: 'Fraunces semibold' }, { value: 'fraunces-black', label: 'Fraunces black' }, { value: 'archivo', label: 'Archivo bold' }]}
        onChange={(v) => setTweak('logoFont', v)} />
        <TweakSlider label="Logo size" min={70} max={160} step={5} unit="%" value={t.logoSize || 100}
        onChange={(v) => setTweak('logoSize', v)} />
        <TweakSelect label="Logo weight" value={t.logoWeight || 'auto'}
        options={[{ value:'auto', label:'Font default' },{ value:'300', label:'Light (300)' },{ value:'400', label:'Regular (400)' },{ value:'500', label:'Medium (500)' },{ value:'600', label:'Semibold (600)' },{ value:'700', label:'Bold (700)' },{ value:'800', label:'Extra bold (800)' }]}
        onChange={(v) => setTweak('logoWeight', v)} />
        <TweakToggle label="SIMPLE.SPACE home link" value={!!t.navHomeText}
          onChange={v => setTweak('navHomeText', v)}/>
        <TweakRadio label="Orange accent" value={t.logoAccent || 'dot'}
        options={[{ value: 'dot', label: 'Dot only' }, { value: 'space', label: '.space' }]}
        onChange={(v) => setTweak('logoAccent', v)} />
        <TweakSection label="Page fonts" />
        <TweakSelect label="Font system" value={t.pageFont || 'current'}
        options={[{ value: 'current', label: 'Manrope + DM Sans + JetBrains' }, { value: 'editorial', label: 'Fraunces + Public Sans + Plex Mono' }, { value: 'archivo', label: 'Archivo + Public Sans + Plex Mono' }]}
        onChange={(v) => setTweak('pageFont', v)} />
      </TweaksPanel>
    </>);

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