// Main App
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "v1",
  "accent": "#c5f64a",
  "showGrid": true,
  "showLines": true
}/*EDITMODE-END*/;

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

  // apply accent color live
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    // derive a softer + glow variant
    const hexToRgba = (hex, a) => {
      const m = hex.replace('#','').match(/.{2}/g);
      if (!m) return `rgba(197,246,74,${a})`;
      const [r,g,b] = m.map(x => parseInt(x, 16));
      return `rgba(${r},${g},${b},${a})`;
    };
    document.documentElement.style.setProperty('--accent-glow', hexToRgba(tweaks.accent, 0.55));
    document.documentElement.style.setProperty('--accent-soft', hexToRgba(tweaks.accent, 0.12));
    // brighten variant
    document.documentElement.style.setProperty('--accent-2', tweaks.accent);
  }, [tweaks.accent]);

  const scrollToForm = () => {
    document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  // placeholder — user will replace with real number later
  const openWhats = () => {
    const number = "5515996002354";
    const text = encodeURIComponent("Olá TargetPro, vim pela landing page e quero saber mais sobre a gestão de tráfego.");
    window.open(`https://wa.me/${number}?text=${text}`, '_blank');
  };

  const Hero = tweaks.heroVariant === 'v2' ? HeroV2 : tweaks.heroVariant === 'v3' ? HeroV3 : HeroV1;

  return (
    <div className="shell">
      <div className="bg-field"/>
      {tweaks.showGrid && <div className="bg-grid"/>}
      {tweaks.showLines && <DiagonalLines/>}

      <Nav/>
      <Hero onWhats={openWhats} onForm={scrollToForm}/>
      <Platforms/>
      <Clients/>
      <Method/>
      <Services/>
      <ContactSection onWhats={openWhats}/>
      <Footer/>
      <FloatingWhats onClick={openWhats}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakSelect
            label="Variação"
            value={tweaks.heroVariant}
            onChange={v => setTweak('heroVariant', v)}
            options={[
              { value: 'v1', label: 'Split + dashboard' },
              { value: 'v2', label: 'Centralizado' },
              { value: 'v3', label: 'Mega-tipo' }
            ]}
          />
        </TweakSection>
        <TweakSection label="Aparência">
          <TweakColor
            label="Cor de destaque"
            value={tweaks.accent}
            onChange={v => setTweak('accent', v)}
            options={['#c5f64a', '#a3e635', '#5eead4', '#fbbf24', '#f472b6']}
          />
          <TweakToggle
            label="Grade de fundo"
            value={tweaks.showGrid}
            onChange={v => setTweak('showGrid', v)}
          />
          <TweakToggle
            label="Linhas diagonais"
            value={tweaks.showLines}
            onChange={v => setTweak('showLines', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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