/* Main app: composes all sections + tweaks panel */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blue",
  "showDarkSection": true,
  "showAuthority": true,
  "showCases": true,
  "showIntegrations": true
}/*EDITMODE-END*/;

const ACCENTS = {
  blue:   { blue: '#2563EB', cyan: '#5CE1E6' },
  indigo: { blue: '#4F46E5', cyan: '#A5B4FC' },
  teal:   { blue: '#0F766E', cyan: '#5EEAD4' },
  sunset: { blue: '#E11D48', cyan: '#FB923C' }
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  React.useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[tweaks.accent] || ACCENTS.blue;
    root.style.setProperty('--blue', a.blue);
    root.style.setProperty('--cyan', a.cyan);
  }, [tweaks.accent]);

  // Map accent key to its first color for the TweakColor "value" check
  const accentColors = (key) => [ACCENTS[key].blue, ACCENTS[key].cyan];
  const accentOptions = Object.keys(ACCENTS).map(accentColors);
  // store accent as the array so TweakColor can match
  const accentArr = accentColors(tweaks.accent);
  const onAccentChange = (arr) => {
    const found = Object.entries(ACCENTS).find(([k, v]) => v.blue === arr[0]);
    if (found) setTweak('accent', found[0]);
  };

  return (
    <div id="top">
      <Header />
      <Hero tweaks={tweaks} />
      <LogosMarquee />
      <Problems />
      <Solutions />
      {tweaks.showDarkSection && <DarkSection />}
      {tweaks.showIntegrations && <Integrations />}
      <HowItWorks />
      {tweaks.showCases && <Cases />}
      {tweaks.showAuthority && <Authority />}
      <FinalCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Cor de acento">
          <TweakColor
            label="Paleta"
            value={accentArr}
            options={accentOptions}
            onChange={onAccentChange}
          />
        </TweakSection>

        <TweakSection label="Seções visíveis">
          <TweakToggle label="Central de comando" value={tweaks.showDarkSection} onChange={(v) => setTweak('showDarkSection', v)} />
          <TweakToggle label="Integrações" value={tweaks.showIntegrations} onChange={(v) => setTweak('showIntegrations', v)} />
          <TweakToggle label="Projetos / Cases" value={tweaks.showCases} onChange={(v) => setTweak('showCases', v)} />
          <TweakToggle label="Autoridade / Sobre" value={tweaks.showAuthority} onChange={(v) => setTweak('showAuthority', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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