// ===== LA PRICASH — Interactive tools =====

(function () {
  if (document.getElementById('tools-css')) return;
  const css = `
  .calc { background: var(--ink); color: var(--text-on-dark); overflow:hidden; position:relative; }
  .calc::before { content:''; position:absolute; right:-15vw; bottom:-20vw; width:50vw; height:50vw; border-radius:50%; background: radial-gradient(circle, rgba(232,74,138,.22), rgba(232,74,138,0) 62%); pointer-events:none; }
  .calc-grid { display:grid; grid-template-columns: 1.25fr .9fr; gap: clamp(24px,3.5vw,48px); margin-top: clamp(40px,5vw,60px); position:relative; z-index:2; align-items:start; }
  .panel { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: clamp(22px,3vw,34px); backdrop-filter: blur(4px); }
  .panel h3 { font-family:var(--font-display); font-weight:800; margin:0 0 4px; font-size: clamp(20px,2.2vw,26px); letter-spacing:-.01em; }
  .panel .ph-sub { color: var(--text-on-dark-soft); font-size:14px; margin:0 0 22px; }
  .proc { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 0; border-top:1px solid rgba(255,255,255,.1); }
  .proc:first-of-type { border-top:0; }
  .proc .p-name { font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:9px; }
  .proc .p-name .hl { background:var(--pink); color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:999px; text-transform:uppercase; }
  .proc .p-desc { color: var(--text-on-dark-soft); font-size:12.5px; margin-top:3px; max-width:34ch; }
  .proc .p-pts { color: var(--gold-light); font-weight:700; font-size:12.5px; letter-spacing:.04em; margin-top:4px; }
  .stepper { display:flex; align-items:center; gap:0; flex:0 0 auto; border:1px solid rgba(255,255,255,.2); border-radius:999px; overflow:hidden; }
  .stepper button { width:38px; height:38px; background:transparent; border:0; color:#fff; font-size:20px; cursor:pointer; transition:background .2s; display:grid; place-items:center; }
  .stepper button:hover { background: rgba(255,255,255,.12); }
  .stepper button:disabled { opacity:.3; cursor:not-allowed; }
  .stepper .val { min-width:34px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
  .total-box { margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
  .total-box .tb-pts { font-family:var(--font-display); font-weight:900; font-size: clamp(40px,6vw,64px); line-height:.9; color:var(--gold-light); }
  .total-box .tb-cap { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-on-dark-soft); }
  .tier-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; font-weight:800; font-size:14px; letter-spacing:.04em; }
  .tier-badge .bd { width:9px; height:9px; border-radius:50%; }
  .simbar { height:8px; border-radius:999px; background:rgba(255,255,255,.14); margin-top:18px; position:relative; overflow:hidden; }
  .simbar > span { position:absolute; inset:0 auto 0 0; background:var(--gold-grad); border-radius:999px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
  .sim-next { font-size:13.5px; color:var(--text-on-dark-soft); margin-top:12px; }
  .sim-next b { color:#fff; }
  .calc-card .field { margin-bottom:18px; }
  .calc-card label { display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-on-dark-soft); margin-bottom:9px; }
  .money-input { display:flex; align-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:0 16px; transition:border-color .2s; }
  .money-input:focus-within { border-color:var(--pink); }
  .money-input .cur { color:var(--text-on-dark-soft); font-weight:700; }
  .money-input input { flex:1; background:transparent; border:0; outline:0; color:#fff; font-size:22px; font-weight:800; padding:14px 8px; font-variant-numeric:tabular-nums; width:100%; }
  .tier-pills { display:flex; gap:8px; flex-wrap:wrap; }
  .tier-pills button { flex:1; min-width:74px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18); color:#fff; padding:11px 8px; border-radius:12px; cursor:pointer; font-weight:700; font-size:13px; transition:all .2s; }
  .tier-pills button .pc { display:block; font-size:11px; color:var(--text-on-dark-soft); font-weight:600; margin-top:2px; }
  .tier-pills button.active { border-color:var(--pink); background:rgba(232,74,138,.16); }
  .cb-result { margin-top:8px; text-align:center; padding:26px 18px; border-radius:16px; background: var(--gold-grad); color:#1c1407; }
  .cb-result .cb-cap { font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; opacity:.75; }
  .cb-result .cb-val { font-family:var(--font-display); font-weight:900; font-size: clamp(34px,5vw,52px); line-height:1; margin:6px 0; }
  .cb-result .cb-note { font-size:12.5px; font-weight:600; opacity:.8; }
  .share { background: var(--cream-2); }
  .share-grid { display:grid; grid-template-columns: 1fr .85fr; gap: clamp(28px,4vw,64px); align-items:center; margin-top: clamp(36px,4vw,52px); }
  .name-field { background:#fff; border:1px solid var(--line); border-radius:14px; padding:4px 6px 4px 18px; display:flex; align-items:center; gap:10px; max-width:420px; }
  .name-field input { flex:1; border:0; outline:0; font-size:16px; font-weight:600; padding:14px 4px; background:transparent; color:var(--text); }
  .ref-box { display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:wrap; }
  .ref-code { font-family:var(--font-display); font-weight:900; font-size:22px; letter-spacing:.06em; color:var(--pink-deep); background:#fff; border:2px dashed var(--pink); border-radius:12px; padding:12px 20px; }
  .copy-btn { background:var(--ink); color:#fff; border:0; padding:13px 18px; border-radius:12px; font-weight:700; cursor:pointer; font-size:14px; transition:opacity .2s; }
  .copy-btn:hover { opacity:.85; }
  .share-qr { background:#fff; border-radius:20px; padding:22px; box-shadow: var(--shadow-card); display:flex; flex-direction:column; align-items:center; gap:14px; max-width:300px; margin-inline:auto; }
  .share-qr .qr-cap { font-size:13px; color:var(--text-soft); text-align:center; }
  .share-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
  .foot { background: var(--ink); color: var(--text-on-dark); text-align:center; }
  .foot .ag { font-family:var(--font-display); font-weight:900; color:var(--gold-light); font-size: clamp(13px,1.4vw,15px); letter-spacing:.06em; }
  .foot .ag-body { max-width: 56ch; margin: 18px auto 0; color: var(--text-on-dark-soft); font-size: clamp(15px,1.6vw,18px); }
  .foot .fwordmark { font-family:var(--font-serif); font-weight:500; letter-spacing:.34em; text-transform:uppercase; font-size: clamp(20px,3vw,30px); display:inline-flex; align-items:center; gap:12px; }
  @media (max-width: 860px) { .calc-grid, .share-grid { grid-template-columns: 1fr; } .proc { flex-wrap:wrap; } }
  `;
  const s = document.createElement('style'); s.id = 'tools-css'; s.textContent = css; document.head.appendChild(s);
})();

const TIER_COLORS = { platinum: '#c7c9cd', rose: '#E8A0B6', black: '#14100F' };

function tierForPoints(pts) { const tiers = window.PROGRAM.tiers; let cur = tiers[0]; for (const t of tiers) if (pts >= t.pointsNeeded) cur = t; return cur; }
function nextTier(pts) { const tiers = window.PROGRAM.tiers; return tiers.find((t) => pts < t.pointsNeeded) || null; }

function Stepper({ value, onChange }) { return (<div className="stepper" onClick={(e) => e.stopPropagation()}><button onClick={() => onChange(Math.max(0, value - 1))} disabled={value === 0} aria-label="menos">−</button><span className="val">{value}</span><button onClick={() => onChange(value + 1)} aria-label="mais">+</button></div>); }

function CalcSection() {
  const procs = window.PROGRAM.procedures;
  const [counts, setCounts] = React.useState({});
  const total = procs.reduce((sum, p) => sum + (counts[p.id] || 0) * p.points, 0);
  const cur = tierForPoints(total);
  const next = nextTier(total);
  const maxPts = 3000;
  const pct = Math.min(100, (total / maxPts) * 100);
  const [value, setValue] = React.useState('500');
  const [calcTier, setCalcTier] = React.useState('platinum');
  React.useEffect(() => { setCalcTier(cur.id); }, [cur.id]);
  const tierObj = window.PROGRAM.tiers.find((t) => t.id === calcTier);
  const numeric = parseFloat((value || '0').replace(/\./g, '').replace(',', '.')) || 0;
  const cashback = numeric * (tierObj.cashback / 100);
  const fmt = (n) => n.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  return (
    <section className="calc pad" id="pontuacao">
      <div className="wrap">
        <div className="sec-head reveal"><p className="eyebrow on-dark">pontuação</p><h2 className="section-title" style={{ color: '#fff' }}>simule seus ganhos</h2><p className="lead" style={{ marginTop: 16, maxWidth: '52ch', color: 'var(--text-on-dark-soft)' }}>Cada procedimento rende pontos. Monte uma combinação e veja em qual nível você chega — e quanto de cashback isso significa.</p></div>
        <div className="calc-grid">
          <div className="panel reveal">
            <h3>Quanto eu pontuo?</h3>
            <p className="ph-sub">Some suas sessões — e também os procedimentos das suas indicadas.</p>
            {procs.map((p) => (<div className="proc" key={p.id}><div style={{ flex: 1 }}><div className="p-name">{p.name} {p.highlight && <span className="hl">queridinho</span>}</div><div className="p-desc">{p.desc}</div><div className="p-pts">{p.points} pontos · {p.unit}</div></div><Stepper value={counts[p.id] || 0} onChange={(v) => setCounts((c) => ({ ...c, [p.id]: v }))} /></div>))}
            <div className="total-box"><div><div className="tb-pts">{total.toLocaleString('pt-BR')}</div><div className="tb-cap">pontos acumulados</div></div><div style={{ textAlign: 'right' }}><span className="tier-badge" style={{ background: cur.id === 'black' ? 'var(--gold-grad)' : 'rgba(255,255,255,.1)', color: cur.id === 'black' ? '#1c1407' : '#fff' }}><span className="bd" style={{ background: TIER_COLORS[cur.id] }} /> nível {cur.name}</span></div></div>
            <div className="simbar"><span style={{ width: pct + '%' }} /></div>
            <div className="sim-next">{next ? <span>Faltam <b>{(next.pointsNeeded - total).toLocaleString('pt-BR')} pontos</b> para o nível <b>{next.name}</b> ({next.cashback}% de cashback).</span> : <span>Você chegou ao <b>topo</b> — nível BLACK com 20% de cashback. 🖤</span>}</div>
          </div>
          <div className="panel calc-card reveal d1">
            <h3>Calcule o cashback</h3>
            <p className="ph-sub">Sobre uma compra sua — ou de uma indicada.</p>
            <div className="field"><label>Valor da compra</label><div className="money-input"><span className="cur">R$</span><input inputMode="decimal" value={value} onChange={(e) => setValue(e.target.value.replace(/[^0-9.,]/g, ''))} /></div></div>
            <div className="field"><label>Seu nível</label><div className="tier-pills">{window.PROGRAM.tiers.map((t) => (<button key={t.id} className={calcTier === t.id ? 'active' : ''} onClick={() => setCalcTier(t.id)}>{t.name}<span className="pc">{t.cashback}%</span></button>))}</div></div>
            <div className="cb-result"><div className="cb-cap">você recebe de volta</div><div className="cb-val">R$ {fmt(cashback)}</div><div className="cb-note">{tierObj.cashback}% de R$ {fmt(numeric)} no nível {tierObj.name}</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ShareSection({ patientName, setPatientName, onWhats }) {
  const [copied, setCopied] = React.useState(false);
  const code = referralCode(patientName);
  const link = qrLink(patientName);
  const copy = () => { const t = link; if (navigator.clipboard) navigator.clipboard.writeText(t).then(() => flash()).catch(() => fallback(t)); else fallback(t); };
  const fallback = (t) => { try { const i = document.createElement('input'); i.value = t; document.body.appendChild(i); i.select(); document.execCommand('copy'); i.remove(); flash(); } catch (e) {} };
  const flash = () => { setCopied(true); setTimeout(() => setCopied(false), 1800); };
  return (
    <section className="share pad" id="indicar">
      <div className="wrap">
        <div className="sec-head reveal"><p className="eyebrow">indicação</p><h2 className="section-title">indique uma amiga</h2><p className="lead" style={{ marginTop: 16, maxWidth: '52ch' }}>Personalize seu convite, compartilhe pelo WhatsApp e comece a acumular cashback com as compras dela. Sua amiga ganha uma consulta gratuita.</p></div>
        <div className="share-grid">
          <div className="reveal">
            <label style={{ fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--text-soft)', fontWeight: 700 }}>Seu nome (personaliza seu cartão e convite)</label>
            <div className="name-field" style={{ marginTop: 10 }}><input placeholder="Ex.: Marina Souza" value={patientName} onChange={(e) => setPatientName(e.target.value)} maxLength={22} /></div>
            <div className="ref-box"><span className="ref-code">{code}</span><button className="copy-btn" onClick={copy}>{copied ? '✓ Link copiado' : 'Copiar link'}</button></div>
            <div className="share-actions"><button className="btn btn-primary" onClick={() => onWhats(patientName)}><WhatsIcon /> Compartilhar no WhatsApp</button><button className="btn btn-ghost" onClick={copy}>Copiar convite</button></div>
          </div>
          <div className="share-qr reveal d1"><MiniQR text={link} size={200} dark="#14100F" /><div className="qr-cap">Aponte a câmera para abrir o convite com o código <b>{code}</b></div></div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot pad">
      <div className="wrap">
        <div className="ag reveal">agora sim, bem-vinda ao LA PRICASH</div>
        <p className="ag-body reveal d1">É um prazer imenso te ver fazer parte de um movimento tão especial. Esta é a sua oportunidade de conquistar a sua <strong style={{ color: 'var(--text-on-dark)' }}>melhor versão</strong> — sem precisar gastar para isso. Estamos com você.</p>
        <hr className="hairline" style={{ maxWidth: 280, margin: '40px auto' }} />
        <div className="fwordmark reveal"><BrandFlower size={26} color="var(--gold-light)" /> LA Primore</div>
      </div>
    </footer>
  );
}

Object.assign(window, { CalcSection, ShareSection, Footer, tierForPoints, nextTier });