// Balduino landing — orchestration + Tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF5A36",
  "displayFont": "Cinzel",
  "templarVibe": "sutil",
  "background": "grain"
}/*EDITMODE-END*/;

// Mapping helpers
const ACCENT_PRESETS = {
  '#FF5A36': { name: 'Naranja brasa',  accent: '#FF5A36', glow: '#FFA12B' },
  '#C8A25A': { name: 'Dorado templario', accent: '#C8A25A', glow: '#E8C878' },
  '#7A1F1F': { name: 'Sangre',          accent: '#7A1F1F', glow: '#A83838' },
};

const FONT_PRESETS = {
  'Cinzel':            { stack: "'Cinzel', 'EB Garamond', serif" },
  'Cormorant Garamond':{ stack: "'Cormorant Garamond', 'EB Garamond', serif" },
  'EB Garamond':       { stack: "'EB Garamond', serif" },
};

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

  // Apply CSS variables when tweaks change
  React.useEffect(() => {
    const root = document.documentElement;
    const a = ACCENT_PRESETS[t.accent] || ACCENT_PRESETS['#FF5A36'];
    root.style.setProperty('--accent', a.accent);
    root.style.setProperty('--accent-glow', a.glow);

    const f = FONT_PRESETS[t.displayFont] || FONT_PRESETS['Cinzel'];
    root.style.setProperty('--font-display', f.stack);

    document.body.setAttribute('data-tex', t.background);
    document.body.setAttribute('data-templar', t.templarVibe);
  }, [t.accent, t.displayFont, t.background, t.templarVibe]);

  // Reveal on scroll
  useReveal();

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <Manifesto />
        <FeaturePanels />
        <HowItWorks />
        <ArmyShowcase />
        <Testimonials />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Acento" />
        <TweakColor
          label="Color del acento"
          value={t.accent}
          options={['#FF5A36', '#C8A25A', '#7A1F1F']}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label="Tipografía" />
        <TweakSelect
          label="Display (títulos)"
          value={t.displayFont}
          options={['Cinzel', 'Cormorant Garamond', 'EB Garamond']}
          onChange={(v) => setTweak('displayFont', v)}
        />

        <TweakSection label="Atmósfera" />
        <TweakRadio
          label="Intensidad templaria"
          value={t.templarVibe}
          options={['sutil', 'medio', 'alto']}
          onChange={(v) => setTweak('templarVibe', v)}
        />
        <TweakRadio
          label="Fondo"
          value={t.background}
          options={['liso', 'grain', 'vitral']}
          onChange={(v) => setTweak('background', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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