// Root App
function App() {
  const defaults = /*EDITMODE-BEGIN*/{
    "accent": "#ff6a1a",
    "font": "Space Grotesk",
    "heroTitle": "Crie influencers de IA que vendem nas redes sociais",
    "heroDate": "DIA 16 DE MAIO · AO VIVO",
    "heroSub": "Um dia intenso, ao vivo, criando seu próprio influencer digital do zero. Aprenda a construir, treinar e monetizar personagens de IA que geram vendas reais direto do celular."
  }/*EDITMODE-END*/;

  const [accent, setAccent] = useState(defaults.accent);
  const [font, setFont] = useState(defaults.font);
  const [copy, setCopy] = useState({
    heroTitle: defaults.heroTitle,
    heroDate: defaults.heroDate,
    heroSub: defaults.heroSub,
  });
  const [tweaksVisible, setTweaksVisible] = useState(false);

  // Derive accent variants
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', accent);
    // naive lighter/glow
    const hexToRgb = (h) => {
      h = h.replace('#','');
      return [0,2,4].map(i => parseInt(h.substring(i,i+2),16));
    };
    const [r,g,b] = hexToRgb(accent);
    document.documentElement.style.setProperty('--accent-glow', `rgba(${r},${g},${b},0.55)`);
    document.documentElement.style.setProperty('--accent-soft', `rgba(${r},${g},${b},0.12)`);
    // Lighter version
    const lighten = (v) => Math.min(255, Math.round(v + (255 - v) * 0.2));
    document.documentElement.style.setProperty('--accent-2', `rgb(${lighten(r)}, ${lighten(g)}, ${lighten(b)})`);
  }, [accent]);

  useEffect(() => {
    document.documentElement.style.setProperty('--font-display', `'${font}', 'Inter', sans-serif`);
  }, [font]);

  // Edit-mode protocol
  useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  // Persist edits
  useEffect(() => {
    window.parent.postMessage({
      type: '__edit_mode_set_keys',
      edits: { accent, font, ...copy },
    }, '*');
  }, [accent, font, copy]);

  return (
    <>
      <Header/>
      <Hero copy={copy}/>
      <WhyAI/>
      <FutureBanner/>
      <Content/>
      <Schedule/>
      <Instructor/>
      <Certificate/>
      <Guarantee/>
      <Price/>
      <FAQ/>
      <Footer/>
      <TweaksPanel
        copy={copy} setCopy={setCopy}
        accent={accent} setAccent={setAccent}
        font={font} setFont={setFont}
        visible={tweaksVisible}/>
    </>
  );
}

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