// app.jsx — App principal + Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#33348E",
  "fontPairing": "fraunces",
  "heroLayout": "split"
}/*EDITMODE-END*/;

const FONT_PAIRINGS = {
  fraunces:  { serif: "'Fraunces', 'Cormorant Garamond', Georgia, serif",         sans: "'Manrope', system-ui, sans-serif",          label: "Fraunces / Manrope" },
  cormorant: { serif: "'Cormorant Garamond', 'Fraunces', Georgia, serif",         sans: "'Inter', system-ui, sans-serif",            label: "Cormorant / Inter" },
  dmserif:   { serif: "'DM Serif Display', 'Fraunces', Georgia, serif",           sans: "'Plus Jakarta Sans', system-ui, sans-serif", label: "DM Serif / Jakarta" },
  newsreader:{ serif: "'Newsreader', 'Fraunces', Georgia, serif",                 sans: "'Inter', system-ui, sans-serif",            label: "Newsreader / Inter" },
};

// converte hex → tinta clara (mistura com bg para o tint dos cards de tratamento)
function hexToTint(hex, alpha = 0.08) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
function lighten(hex, amt = 0.18) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const mix = (c) => Math.min(255, Math.round(c + (255 - c) * amt));
  const toHex = (n) => n.toString(16).padStart(2, '0');
  return `#${toHex(mix(r))}${toHex(mix(g))}${toHex(mix(b))}`;
}

function ThemeStyle({ primary, pairing }) {
  const fp = FONT_PAIRINGS[pairing] || FONT_PAIRINGS.fraunces;
  return (
    <style>{`
      :root {
        --primary: ${primary};
        --primary-2: ${lighten(primary, 0.15)};
        --primary-tint: ${hexToTint(primary, 0.09)};
        --serif: ${fp.serif};
        --sans: ${fp.sans};
      }
    `}</style>
  );
}

// Scroll reveal — observa elementos com .reveal e adiciona .in quando entram em vista
function useScrollReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window) || !els.length) {
      els.forEach(e => e.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  }, []);
}

// O conteudo so existe depois do mount, entao o pulo nativo do navegador para
// #ancora acontece antes do alvo existir e o visitante cai no topo da pagina.
function useAncoraInicial() {
  React.useEffect(() => {
    const id = decodeURIComponent(window.location.hash.slice(1));
    if (!id) return;
    requestAnimationFrame(() => {
      const alvo = document.getElementById(id);
      if (alvo) alvo.scrollIntoView({ behavior: 'instant', block: 'start' });
    });
  }, []);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useScrollReveal();
  useAncoraInicial();

  return (
    <>
      <ThemeStyle primary={t.primaryColor} pairing={t.fontPairing} />

      <Nav />
      <main>
        <div className="reveal"><Hero layout={t.heroLayout} /></div>
        <div className="reveal"><Sobre /></div>
        <div className="reveal"><Tratamentos /></div>
        <div className="reveal"><Tour /></div>
        <div className="reveal"><AntesDepois /></div>
        <div className="reveal"><Depoimentos /></div>
        <div className="reveal"><FAQ /></div>
        <div className="reveal"><Localizacao /></div>
      </main>
      <Footer />
      <WhatsAppFloat />

      <TweaksPanel title="Tweaks · IHC">
        <TweakSection label="Cor de destaque">
          <TweakColor
            label="Primária"
            value={t.primaryColor}
            options={['#33348E', '#1E5F74', '#0E3B43', '#7A4F2B']}
            onChange={(v) => setTweak('primaryColor', v)}
          />
        </TweakSection>

        <TweakSection label="Tipografia">
          <TweakSelect
            label="Pares de fonte"
            value={t.fontPairing}
            options={Object.keys(FONT_PAIRINGS).map(k => ({ value: k, label: FONT_PAIRINGS[k].label }))}
            onChange={(v) => setTweak('fontPairing', v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakRadio
            label="Layout"
            value={t.heroLayout}
            options={[
              { value: 'split',     label: 'Dividido' },
              { value: 'centered',  label: 'Centro' },
              { value: 'fullbleed', label: 'Largo' },
            ]}
            onChange={(v) => setTweak('heroLayout', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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