// app.jsx — main app: tab switcher (Clássica + Raw) + tweaks panel + floating WA

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variation": "classica",
  "headline": "C",
  "activeLot": "L1",
  "heroPhoto": "assets/nath-foto2.png",
  "accent": "primary",
  "showProof": true
}/*EDITMODE-END*/;

const LOT_PRICES = { L0: 19, L1: 29, L2: 59, L3: 99 };

const PHOTOS = {
  'assets/nath-foto1.png': 'Foto 1 — sorriso (Quem é Nath)',
  'assets/nath-foto2.png': 'Foto 2 — mão no rosto (hero)',
  'assets/nath-ney7.png':  'Foto 3 — vestido / banco',
  'assets/nath-ney8.png':  'Foto 4 — vestido / banco II',
};

const VARIATIONS = [
  { id: 'classica', label: 'Clássica', Comp: () => window.LPClassica },
  { id: 'raw',      label: 'Raw',      Comp: () => window.LPRaw      },
];

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

  React.useEffect(() => {
    const root = document.documentElement;
    if (t.accent === 'light') {
      root.style.setProperty('--accent',      'var(--gold-light)');
      root.style.setProperty('--accent-soft', '#F2E0A8');
    } else {
      root.style.setProperty('--accent',      'var(--gold)');
      root.style.setProperty('--accent-soft', 'var(--gold-light)');
    }
  }, [t.accent]);

  React.useEffect(() => {
    requestAnimationFrame(() => window.scrollTo({ top: 0, behavior: 'instant' }));
  }, [t.variation]);

  const lpTweaks = {
    headline: t.headline,
    activeLot: t.activeLot,
    activeLotPrice: LOT_PRICES[t.activeLot] || 29,
    heroPhoto: t.heroPhoto,
    showProof: t.showProof,
  };

  const VarObj = VARIATIONS.find(v => v.id === t.variation) || VARIATIONS[0];
  const Comp = VarObj.Comp();

  return (
    <div className="app-shell">
      <header className="shell-topbar">
        <div className="shell-brand">
          <span className="dot"></span>
          <span style={{ fontFamily: 'var(--font-script)', fontSize: 18 }}>Imersão Mulher 1%</span>
          <span style={{ opacity: 0.5, fontSize: 11, marginLeft: 4 }}>· LP studies</span>
        </div>
        <div className="shell-tabs" role="tablist">
          {VARIATIONS.map(v => (
            <button
              key={v.id}
              role="tab"
              data-active={t.variation === v.id}
              className="shell-tab"
              onClick={() => setTweak('variation', v.id)}
            >
              {v.label}
            </button>
          ))}
        </div>
      </header>

      <div className="shell-stage">
        {Comp ? <Comp tweaks={lpTweaks} /> : <div style={{ padding: 40 }}>Carregando…</div>}
      </div>

      {/* Floating WhatsApp button — global */}
      <FloatingWhatsApp />

      <TweaksPanel>
        <TweakSection label="Variação" />
        <TweakRadio
          label="LP"
          value={t.variation}
          options={['classica', 'raw']}
          onChange={(v) => setTweak('variation', v)}
        />

        <TweakSection label="Copy" />
        <TweakRadio
          label="Headline"
          value={t.headline}
          options={['A', 'B', 'C']}
          onChange={(v) => setTweak('headline', v)}
        />
        <div style={{
          padding: '6px 12px 10px', fontSize: 11, color: '#888',
          fontStyle: 'italic', lineHeight: 1.45,
        }}>
          {t.headline === 'A' && '"Ele foi embora. Voltou. Você ficou…"'}
          {t.headline === 'B' && '"A Mulher 1% não espera ser escolhida."'}
          {t.headline === 'C' && '"O problema não é que os homens são uma merda."'}
        </div>

        <TweakSection label="Comercial" />
        <TweakRadio
          label="Lote ativo"
          value={t.activeLot}
          options={['L0', 'L1', 'L2', 'L3']}
          onChange={(v) => setTweak('activeLot', v)}
        />
        <div style={{
          padding: '6px 12px 10px', fontSize: 11, color: '#888', fontStyle: 'italic',
        }}>
          {t.activeLot === 'L0' && 'L0 R$19 — esgotado IRL'}
          {t.activeLot === 'L1' && 'L1 R$29 — lote especial (ativo)'}
          {t.activeLot === 'L2' && 'L2 R$59 — segundo lote'}
          {t.activeLot === 'L3' && 'L3 R$99 — último lote'}
        </div>

        <TweakSection label="Imagem" />
        <TweakSelect
          label="Foto hero"
          value={t.heroPhoto}
          options={Object.entries(PHOTOS).map(([v, l]) => ({ value: v, label: l }))}
          onChange={(v) => setTweak('heroPhoto', v)}
        />
        <div style={{ padding: '6px 12px 10px', fontSize: 11, color: '#888', fontStyle: 'italic' }}>
          foto sorriso fixa em "Quem é Nathalia"
        </div>

        <TweakSection label="Estilo" />
        <TweakRadio
          label="Acento"
          value={t.accent}
          options={['primary', 'light']}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label="Prova social" />
        <TweakToggle
          label="Mostrar prints"
          value={t.showProof}
          onChange={(v) => setTweak('showProof', v)}
        />
        <div style={{ padding: '6px 12px 10px', fontSize: 11, color: '#888', fontStyle: 'italic' }}>
          mocks visuais — substituir por prints reais
        </div>
      </TweaksPanel>
    </div>
  );
}

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