// ===== LA PRICASH — App =====

(function () {
  if (document.getElementById('nav-css')) return;
  const css = `
  .nav { position: sticky; top: 0; z-index: 100; background: rgba(20,16,15,0); transition: background .3s, box-shadow .3s, padding .3s; }
  .nav.scrolled { background: rgba(20,16,15,.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
  .nav-inner { display:flex; align-items:center; justify-content:space-between; padding: 16px 0; }
  .nav-brand { display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#fff; font-size:15px; white-space:nowrap; }
  .nav-links { display:flex; align-items:center; gap:26px; }
  .nav-links a { font-size:14px; font-weight:600; color: var(--text-on-dark-soft); transition:color .2s; cursor:pointer; }
  .nav-links a:hover { color:#fff; }
  .nav-cta { padding:11px 20px; font-size:14px; }
  @media (max-width: 720px) { .nav-links .nl { display:none; } }
  `;
  const s = document.createElement('style'); s.id = 'nav-css'; s.textContent = css; document.head.appendChild(s);
})();

function buildWhatsText(name) {
  const who = (name && name.trim()) ? name.trim() : 'uma amiga';
  const link = qrLink(name);
  const msg = 'Oi! 💗 Quero te indicar a LA PRIMORE no programa LA PRICA$H.\n\n' + 'Vindo pela minha indicação, você ganha uma consulta gratuita — e em cada compra eu acumulo cashback e pontos pra subir de nível.\n\n' + 'Use meu link/código: ' + link + '\n\nVem com a gente! ✨';
  return msg;
}

function shareWhats(name) { const url = 'https://wa.me/?text=' + encodeURIComponent(buildWhatsText(name)); window.open(url, '_blank', 'noopener'); }

function Nav({ onIndicar, onScrollTo }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []);
  return (
    <nav className={'nav ' + (scrolled ? 'scrolled' : '')}>
      <div className="wrap nav-inner">
        <div className="nav-brand"><BrandFlower size={18} color="var(--gold-light)" /> LA Primore</div>
        <div className="nav-links">
          <a className="nl" onClick={() => onScrollTo('como-funciona')}>Como funciona</a>
          <a className="nl" onClick={() => onScrollTo('niveis')}>Níveis</a>
          <a className="nl" onClick={() => onScrollTo('pontuacao')}>Simular</a>
          <button className="btn btn-primary nav-cta" onClick={onIndicar}><WhatsIcon size={16} /> Indicar</button>
        </div>
      </div>
    </nav>
  );
}

function useScrollReveal(dep) {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll('.reveal'));
    if (!('IntersectionObserver' in window)) { els.forEach((e) => e.classList.add('in')); return; }
    const io = new IntersectionObserver((entries) => { entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, [dep]);
}

function App() {
  const [patientName, setPatientName] = React.useState('');
  const scrollTo = (id) => { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 10, behavior: 'smooth' }); };
  const goIndicar = () => scrollTo('indicar');
  useScrollReveal(patientName);
  return (
    <React.Fragment>
      <Nav onIndicar={goIndicar} onScrollTo={scrollTo} />
      <Hero onIndicar={goIndicar} onScrollTo={scrollTo} patientName={patientName} />
      <ComoFunciona />
      <Niveis patientName={patientName} />
      <CalcSection />
      <ShareSection patientName={patientName} setPatientName={setPatientName} onWhats={shareWhats} />
      <Footer />
    </React.Fragment>
  );
}

const boot = document.getElementById('boot');
if (boot) { boot.style.opacity = '0'; setTimeout(() => boot.remove(), 500); }
ReactDOM.createRoot(document.getElementById('root')).render(<App />);