/* Qortex — main App. Composes Nav + Hero + sections + Footer + Tweaks. */

function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "sand",
    "layout": "editorial",
    "headingFont": "inter-tight"
  }/*EDITMODE-END*/;

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const p = PALETTES[t.palette] || PALETTES.sand;

  React.useEffect(() => {
    document.documentElement.dataset.heading = t.headingFont;
    document.documentElement.style.setProperty('--accent', p.accent);
    document.documentElement.style.setProperty('--tint', p.tint);
  }, [t.headingFont, p.accent, p.tint]);

  const HeroComponent =
    t.layout === 'script' ? HeroScript :
    t.layout === 'manifesto' ? HeroManifesto :
    HeroEditorial;

  return (
    <>
      <TopNav accent={p.accent} />
      <main>
        <HeroComponent accent={p.accent} tint={p.tint} />
        <Services />
        <Method />
        <Cases />
        <Team />
        <QGroupBand />
        <Career />
        <Contact />
      </main>
      <Footer accent={p.accent} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Färg & ton">
          <TweakRadio
            label="Accentfärg"
            value={t.palette}
            options={[
              { value: 'sand', label: 'Sand' },
              { value: 'green', label: 'Grön' },
              { value: 'mono', label: 'Mono' },
            ]}
            onChange={v => setTweak('palette', v)}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakSelect
            label="Hero-variant"
            value={t.layout}
            options={[
              { value: 'editorial', label: 'A · Editorial (oversize)' },
              { value: 'script', label: 'B · Handskrivet anslag' },
              { value: 'manifesto', label: 'C · Centrerad manifest' },
            ]}
            onChange={v => setTweak('layout', v)}
          />
        </TweakSection>
        <TweakSection label="Typografi">
          <TweakSelect
            label="Rubrikfont"
            value={t.headingFont}
            options={[
              { value: 'inter-tight', label: 'Inter Tight (grotesk, modern)' },
              { value: 'fraunces', label: 'Instrument Serif (editorial)' },
              { value: 'space-grotesk', label: 'Space Grotesk (geometrisk)' },
            ]}
            onChange={v => setTweak('headingFont', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

fetch('content.json')
  .then(r => r.json())
  .then(content => {
    window.QORTEX_CONTENT = content;
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  })
  .catch(err => {
    document.getElementById('root').innerHTML =
      '<p style="padding:2rem;font-family:sans-serif">Kunde inte ladda content.json: ' + err + '</p>';
  });