// App composition + Tweaks panel for primary color

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "coral"
}/*EDITMODE-END*/;

const PALETTES = {
  coral:   { primary:'#F08A2C', deep:'#D9711A', soft:'#FFE4CC', tint:'#FFF5EB', label:'Coral' },
  sunset:  { primary:'#E85D3C', deep:'#C44424', soft:'#FFD9CC', tint:'#FFF0EA', label:'Sunset' },
  forest:  { primary:'#2F8F4E', deep:'#236A3B', soft:'#CCEBD7', tint:'#EAF7EF', label:'Forest' },
  ocean:   { primary:'#2E73C2', deep:'#1F5694', soft:'#CCDEF2', tint:'#EAF1FA', label:'Ocean' },
  plum:    { primary:'#7E3FB5', deep:'#5E2E89', soft:'#E0CFEF', tint:'#F4ECFA', label:'Plum' },
  ink:     { primary:'#14110F', deep:'#000000', soft:'#D6D2CC', tint:'#F2EDE5', label:'Mono' },
};

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

  React.useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.coral;
    document.documentElement.style.setProperty('--primary', p.primary);
    document.documentElement.style.setProperty('--primary-deep', p.deep);
    document.documentElement.style.setProperty('--primary-soft', p.soft);
    document.documentElement.style.setProperty('--primary-tint', p.tint);
  }, [tweaks.palette]);

  return (
    <>
      <Nav/>
      <Hero/>
      <ClientTicker/>
      <About/>
      <Modules/>
      <Features/>
      <TrackingCTA/>
      <Pricing/>
      <Clients/>
      <Footer/>
      <WhatsAppFAB/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Cor primária" subtitle="Toda a paleta da landing">
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8}}>
            {Object.entries(PALETTES).map(([k, p]) => (
              <button key={k} onClick={() => setTweak('palette', k)} style={{
                padding:'10px 8px', borderRadius:8, cursor:'pointer',
                border: tweaks.palette===k ? `2px solid ${p.primary}` : '1px solid rgba(255,255,255,0.1)',
                background: tweaks.palette===k ? 'rgba(255,255,255,0.06)' : 'transparent',
                display:'flex', flexDirection:'column', alignItems:'center', gap:6,
              }}>
                <div style={{display:'flex', gap:3}}>
                  <div style={{width:14, height:14, borderRadius:'50%', background:p.primary}}/>
                  <div style={{width:14, height:14, borderRadius:'50%', background:p.deep}}/>
                  <div style={{width:14, height:14, borderRadius:'50%', background:p.soft}}/>
                </div>
                <span style={{fontSize:11, color:'rgba(255,255,255,0.85)', fontWeight: tweaks.palette===k?600:400}}>{p.label}</span>
              </button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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