/* MeuLook — Main App */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#FF2D78",
  "darkMode": false,
  "showUpload": true,
  "heroStyle": "gradient"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = React.useState(false);
  const [showSticky, setShowSticky] = React.useState(false);

  useScrollReveal();
  useDrawnLines();
  React.useEffect(() => { setTimeout(() => { if(typeof initImmersive === "function") initImmersive(); }, 500); }, []);

  /* Scroll handler */
  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 80);
      setShowSticky(window.scrollY > 600);
      /* Progress bar */
      const d = document.documentElement;
      const pct = (d.scrollTop / (d.scrollHeight - d.clientHeight)) * 100;
      const bar = document.getElementById('scroll-progress');
      if (bar) bar.style.width = pct + '%';
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  /* Apply accent color */
  React.useEffect(() => {
    document.documentElement.style.setProperty('--pink', tweaks.accentColor);
  }, [tweaks.accentColor]);

  return (
    <React.Fragment>
      {/* Progress Bar */}
      <div id="scroll-progress"></div>

      {/* Header */}
      <header className={`header ${scrolled ? 'scrolled' : ''}`}>
        <div className="container">
          <div className="header-inner">
            <a href="#hero" className="header-logo">
              <MeuLookIcon size={36} />
              <span className="logo-text">Meu<em>Look</em></span>
            </a>
            <a href="#price" className="header-cta" onClick={e=>{e.preventDefault();document.getElementById('price')?.scrollIntoView({behavior:'smooth'})}}>Quero Minha Paleta</a>
          </div>
        </div>
      </header>

      {/* Sections */}
      <HeroSection tweaks={tweaks} />
      <PriceStrip />
      <PainSection />
      <TransformSection />
      <InteractivePaletteSection />
      <StepsSection />
      <ReceivesSection />
      {tweaks.showUpload && <UploadSection />}
      <TestimonialsSection />
      <PricingSection tweaks={tweaks} />
      <AnimatedCounters />
      <GuaranteeSection />
      <NewsletterSection />
      <FAQSection />
      <FinalCTASection />

      {/* Custom Cursor */}
      <CustomCursor />

      {/* Footer */}
      <footer className="footer">
        <div className="container">
          <div className="footer-inner">
            <div className="footer-brand">
              <MeuLookIcon size={32} />
              <span className="logo-text" style={{ fontSize: '1.2rem' }}>Meu<em>Look</em></span>
            </div>
            <p className="footer-tagline">Coloração Pessoal por IA + Especialistas</p>
            <div className="footer-links">
              <a href="politica-de-privacidade.html">Política de Privacidade</a>
              <a href="termos-de-uso.html">Termos de Uso</a>
              <a href="contato.html">Contato</a>
              <a href="garantia.html">Garantia</a>
            </div>
            <p className="footer-copy">© 2026 MeuLook · Todos os direitos reservados</p>
          </div>
        </div>
      </footer>

      {/* Sticky Mobile CTA */}
      <div className={`sticky-cta ${showSticky ? 'show' : ''}`}>
        <div className="sticky-price">
          <span className="sticky-amount">R$197,80</span>
          <span className="sticky-label">Oferta de Lançamento</span>
        </div>
        <a href="#price" className="sticky-btn" onClick={e=>{e.preventDefault();document.getElementById('price')?.scrollIntoView({behavior:'smooth'})}}>Garantir Análise</a>
      </div>

      {/* Tweaks Panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Cores">
          <TweakColor label="Cor destaque" value={tweaks.accentColor} onChange={v => setTweak('accentColor', v)} options={['#FF2D78','#E91E8C','#8B5CF6','#EC4899','#F97316']} />
        </TweakSection>
        <TweakSection label="Seções">
          <TweakToggle label="Área de Upload" value={tweaks.showUpload} onChange={v => setTweak('showUpload', v)} />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakRadio label="Estilo" value={tweaks.heroStyle} onChange={v => setTweak('heroStyle', v)} options={['gradient','mesh','dark']} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
};

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