// pesito — App shell, ties everything together

const App = () => {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "terracotta",
    "lang": "es",
    "showStamps": true,
    "paperTexture": true
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState(tweaks.lang || 'es');
  React.useEffect(() => { setLang(tweaks.lang); }, [tweaks.lang]);

  const [principal, setPrincipal] = React.useState(6500);
  const [term, setTerm] = React.useState(8);
  const [speiOpen, setSpeiOpen] = React.useState(false);
  const [applyOpen, setApplyOpen] = React.useState(() => {
    try { return new URLSearchParams(location.search).get('apply') === '1'; }
    catch { return false; }
  });

  // recompute totals (mirror calculator math)
  const apertura = Math.round(principal * 0.02);
  const interest = principal * 0.003 * 14 * term;
  const total = Math.round(principal + interest + apertura);
  const quincenal = Math.round(total / term);

  // Apply accent
  React.useEffect(() => {
    const map = {
      terracotta: { brand: 'oklch(0.62 0.16 28)', deep: 'oklch(0.54 0.17 28)', soft: 'oklch(0.93 0.04 28)', wash: 'oklch(0.95 0.025 28)' },
      olive:      { brand: 'oklch(0.55 0.13 110)', deep: 'oklch(0.46 0.13 110)', soft: 'oklch(0.93 0.04 110)', wash: 'oklch(0.95 0.025 110)' },
      ink:        { brand: 'oklch(0.30 0.04 60)', deep: 'oklch(0.22 0.03 60)', soft: 'oklch(0.92 0.012 60)', wash: 'oklch(0.94 0.012 60)' },
      mexgreen:   { brand: 'oklch(0.50 0.15 155)', deep: 'oklch(0.42 0.15 155)', soft: 'oklch(0.93 0.04 155)', wash: 'oklch(0.95 0.025 155)' },
    };
    const c = map[tweaks.accent] || map.terracotta;
    document.documentElement.style.setProperty('--brand', c.brand);
    document.documentElement.style.setProperty('--brand-deep', c.deep);
    document.documentElement.style.setProperty('--brand-soft', c.soft);
    document.documentElement.style.setProperty('--brand-wash', c.wash);
  }, [tweaks.accent]);

  React.useEffect(() => {
    document.body.style.setProperty('--paper-display', tweaks.paperTexture ? 'block' : 'none');
    const sty = document.getElementById('paper-toggle') || (() => {
      const s = document.createElement('style'); s.id = 'paper-toggle'; document.head.appendChild(s); return s;
    })();
    sty.textContent = tweaks.paperTexture ? '' : 'body::before { display: none !important; }';
  }, [tweaks.paperTexture]);

  const onScroll = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <React.Fragment>
      <Topbar lang={lang} setLang={(v) => { setLang(v); setTweak('lang', v); }} onApply={() => setApplyOpen(true)} onScroll={onScroll} />
      <Hero lang={lang} onApply={() => setApplyOpen(true)} onScroll={onScroll} />
      <Calculator lang={lang} principal={principal} setPrincipal={setPrincipal} term={term} setTerm={setTerm} />
      <ThreeSteps lang={lang} onSimulate={() => setSpeiOpen(true)} />
      <Schedule lang={lang} term={term} quincenal={quincenal} />
      <TrustStrip lang={lang} />
      <Testimonials lang={lang} />
      <FAQ lang={lang} />
      <FinalCTA lang={lang} onApply={() => setApplyOpen(true)} />
      <Footer lang={lang} />

      <SPEISheet lang={lang} open={speiOpen} onClose={() => setSpeiOpen(false)} principal={principal} />
      <ApplySheet lang={lang} open={applyOpen} onClose={() => setApplyOpen(false)} principal={principal} term={term} quincenal={quincenal} total={total} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Tema">
          <TweakRadio label="Acento" value={tweaks.accent} onChange={(v) => setTweak('accent', v)}
            options={[
              { value: 'terracotta', label: 'Terracotta' },
              { value: 'olive', label: 'Olivo' },
              { value: 'mexgreen', label: 'Verde MX' },
              { value: 'ink', label: 'Tinta' },
            ]} />
          <TweakToggle label="Textura papel" value={tweaks.paperTexture} onChange={(v) => setTweak('paperTexture', v)} />
        </TweakSection>
        <TweakSection title="Idioma">
          <TweakRadio label="Idioma" value={lang} onChange={(v) => { setLang(v); setTweak('lang', v); }}
            options={[{ value: 'es', label: 'Español' }, { value: 'ru', label: 'Русский' }]} />
        </TweakSection>
        <TweakSection title="Acciones">
          <TweakButton onClick={() => setSpeiOpen(true)}>Ver depósito SPEI</TweakButton>
          <TweakButton onClick={() => setApplyOpen(true)}>Abrir solicitud</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
};

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