const TWEAK_DEFAULTS_V2 = (() => {
  try {
    const m = document.getElementById('tweak-defaults').textContent.match(/\{[\s\S]*\}/);
    return m ? JSON.parse(m[0]) : {};
  } catch (e) { return {}; }
})();

const ACCENTS_V2 = {
  Terracota: ['#B5502B', '#D9825D', '#F6E4D9'],
  Ladrillo: ['#9E3B22', '#C0614A', '#F4DFD7'],
  Mostaza: ['#A97A1C', '#C99A3E', '#F6ECD3'],
};

const AppV2 = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS_V2);
  React.useEffect(() => {
    const [a, s, ti] = ACCENTS_V2[t.accent] || ACCENTS_V2.Terracota;
    const r = document.documentElement;
    r.style.setProperty('--accent', a);
    r.style.setProperty('--accent-soft', s);
    r.style.setProperty('--accent-tint', ti);
  }, [t.accent]);

  return (
    <>
      <TopStrip/>
      <NavV2/>
      <main>
        <HeroV2/>
        <ProblemV2/>
        <CasosV2/>
        {t.showInflation && <InflationAnim/>}
        <Features/>
        {t.showSystem && <SystemAnim/>}
        <HowV2/>
        <ResultsV2 dev={t.devMode}/>
        <AboutV2/>
        <PricingV2/>
        <LetraV2/>
        <DiagnosticoV2/>
        <FaqV2/>
      </main>
      <FooterV2/>
      <TweaksPanel>
        <TweakSection label="Marca"/>
        <TweakRadio label="Acento" value={t.accent} options={Object.keys(ACCENTS_V2)} onChange={v => setTweak('accent', v)}/>
        <TweakSection label="Animaciones"/>
        <TweakToggle label="Comparativa inflación" value={t.showInflation} onChange={v => setTweak('showInflation', v)}/>
        <TweakToggle label="Sistema en acción" value={t.showSystem} onChange={v => setTweak('showSystem', v)}/>
        <TweakSection label="Desarrollo"/>
        <TweakToggle label="Mostrar testimonio pendiente" value={t.devMode} onChange={v => setTweak('devMode', v)}/>
      </TweaksPanel>
    </>
  );
};

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