// Main App
const { useState: useS, useEffect: useE } = React;

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandHue": 340,
  "brandChroma": 0.10,
  "heroLayout": "split",
  "darkAccent": false
}/*EDITMODE-END*/;

const HERO_LAYOUTS = ['split', 'centered', 'magazine'];

function App() {
  const [lang, setLang] = useS(() => {
    const saved = localStorage.getItem('angel-shine-lang');
    if (saved) return saved;
    const nav = (navigator.language || 'en').toLowerCase();
    if (nav.startsWith('pt')) return 'pt';
    if (nav.startsWith('es')) return 'es';
    return 'en';
  });
  const [tweaks, setTweak] = useTweaks(TWEAKS_DEFAULTS);

  useE(() => { localStorage.setItem('angel-shine-lang', lang); }, [lang]);

  // Apply brand color from tweaks
  useE(() => {
    const root = document.documentElement;
    const hue = tweaks.brandHue;
    const chroma = tweaks.brandChroma;
    root.style.setProperty('--brand', `oklch(0.7 ${chroma} ${hue})`);
    root.style.setProperty('--brand-deep', `oklch(0.58 ${chroma} ${hue})`);
    root.style.setProperty('--brand-light', `oklch(0.88 ${chroma * 0.7} ${hue})`);
    root.style.setProperty('--brand-soft', `oklch(0.94 ${chroma * 0.4} ${hue})`);
    root.style.setProperty('--brand-bg', `oklch(0.97 ${chroma * 0.25} ${hue})`);
  }, [tweaks.brandHue, tweaks.brandChroma]);

  const t = I18N[lang];

  return (
    <>
      <AnnouncementBar t={t} />
      <Nav t={t} lang={lang} setLang={setLang} />
      <main>
        <Hero t={t} layout={tweaks.heroLayout} />
        <TrustBar t={t} />
        <About t={t} />
        <Services t={t} />
        <Process t={t} />
        <Why t={t} />
        <GuaranteeBand t={t} />
        <Gallery t={t} />
        <Testimonials t={t} />
        <Areas t={t} />
        <FAQ t={t} />
        <Contact t={t} />
      </main>
      <Footer t={t} />
      <MobileStickyCTA t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection title={lang === 'pt' ? 'Cor da marca' : 'Brand color'}>
          <TweakSlider label={lang === 'pt' ? 'Tom (matiz)' : 'Hue'} value={tweaks.brandHue} min={0} max={360} step={1} onChange={v => setTweak('brandHue', v)} />
          <TweakSlider label={lang === 'pt' ? 'Saturação' : 'Saturation'} value={tweaks.brandChroma} min={0.02} max={0.20} step={0.005} onChange={v => setTweak('brandChroma', v)} />
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            {[
              { label: 'Pink', h: 340, c: 0.10 },
              { label: 'Rose', h: 10, c: 0.10 },
              { label: 'Mauve', h: 320, c: 0.08 },
              { label: 'Sage', h: 150, c: 0.06 },
              { label: 'Sky', h: 230, c: 0.07 },
            ].map(p => (
              <button key={p.label}
                onClick={() => setTweak({ brandHue: p.h, brandChroma: p.c })}
                style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: `oklch(0.7 ${p.c} ${p.h})`,
                  border: tweaks.brandHue === p.h ? '2px solid #000' : '1px solid rgba(0,0,0,0.1)',
                  cursor: 'pointer'
                }}
                title={p.label}
              />
            ))}
          </div>
        </TweakSection>

        <TweakSection title={lang === 'pt' ? 'Layout do Hero' : 'Hero layout'}>
          <TweakRadio
            value={tweaks.heroLayout}
            options={HERO_LAYOUTS.map(l => ({ value: l, label: l }))}
            onChange={v => setTweak('heroLayout', v)}
          />
        </TweakSection>

        <TweakSection title={lang === 'pt' ? 'Idioma' : 'Language'}>
          <TweakRadio
            value={lang}
            options={[{ value: 'en', label: 'English' }, { value: 'pt', label: 'Português' }, { value: 'es', label: 'Español' }]}
            onChange={v => setLang(v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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