// ===== LA PRICASH — Content sections =====

(function () {
  if (document.getElementById('sections-css')) return;
  const css = `
  .hero { background: var(--ink); color: var(--text-on-dark); overflow:hidden; position:relative; }
  .hero::before { content:''; position:absolute; width:60vw; height:60vw; right:-18vw; top:-22vw; border-radius:50%; background: radial-gradient(circle, rgba(232,74,138,.34), rgba(232,74,138,0) 62%); pointer-events:none; }
  .hero::after { content:''; position:absolute; left:-12vw; bottom:-20vw; width:46vw; height:46vw; border-radius:50%; background: radial-gradient(circle, rgba(200,164,92,.18), rgba(200,164,92,0) 64%); pointer-events:none; }
  .hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,5vw,70px); align-items:center; position:relative; z-index:2; }
  .hero h1 { font-family:var(--font-display); font-weight:900; letter-spacing:-.03em; line-height:.86; font-size: clamp(58px, 12vw, 138px); margin:.12em 0 .18em; }
  .hero h1 .cash { color: transparent; -webkit-background-clip:text; background-clip:text; background-image: var(--gold-grad); }
  .hero-lead { color: var(--text-on-dark-soft); font-size: clamp(16px,1.5vw,20px); max-width: 30ch; }
  .hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top: clamp(24px,3vw,38px); }
  .hero-meta { display:flex; gap:28px; margin-top:34px; flex-wrap:wrap; }
  .hero-meta .num { font-family:var(--font-display); font-weight:900; font-size:30px; color:var(--gold-light); line-height:1; }
  .hero-meta .cap { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-on-dark-soft); margin-top:6px; }
  .fan { position:relative; aspect-ratio: 1/1; max-width:520px; margin-inline:auto; width:100%; }
  .fan .fan-card { position:absolute; left:8%; right:8%; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
  .fan .f0 { top:6%;  transform: rotate(-13deg) translateY(8%); z-index:1; }
  .fan .f1 { top:26%; transform: rotate(2deg); z-index:2; }
  .fan .f2 { top:46%; transform: rotate(15deg) translateY(-6%); z-index:3; }
  .fan:hover .f0 { transform: rotate(-17deg) translate(-12%, 0%); }
  .fan:hover .f1 { transform: rotate(0deg) translateY(-4%); }
  .fan:hover .f2 { transform: rotate(17deg) translate(12%, -4%); }
  .sec-head { max-width: 60ch; }
  .sec-head .section-title + p { margin-top: 18px; }
  .steps { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.5vw,30px); margin-top: clamp(38px,5vw,60px); }
  .step { position:relative; padding-top: 26px; }
  .step .n { font-family:var(--font-display); font-weight:900; font-size: 15px; color:#fff; background:var(--pink); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; box-shadow:0 10px 22px -10px rgba(232,74,138,.7); }
  .step h3 { font-family:var(--font-display); font-weight:800; font-size: clamp(19px,2vw,24px); margin:18px 0 8px; letter-spacing:-.01em; }
  .step p { color: var(--text-soft); margin:0; font-size:15.5px; }
  .step .gain { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
  .gain-item { display:flex; gap:10px; align-items:flex-start; font-size:14.5px; font-weight:600; }
  .gain-item .ck { color:var(--pink-deep); flex:0 0 auto; margin-top:2px; }
  .pin-note { display:flex; gap:16px; align-items:center; margin-top: clamp(36px,5vw,56px); background: var(--blush); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(20px,3vw,30px) clamp(22px,3.5vw,38px); }
  .pin-note .pn-flag { font-family:var(--font-display); font-weight:900; color:var(--pink-deep); font-size: clamp(18px,2.2vw,26px); line-height:1.15; letter-spacing:-.01em; }
  .niveis { background: var(--cream-2); }
  .tier-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px); margin-top: clamp(40px,5vw,64px); align-items:start; }
  .tier-col { display:flex; flex-direction:column; }
  .tier-col .card-wrap { margin-bottom: 22px; }
  .tier-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  .tier-head .tname { font-family:var(--font-display); font-weight:900; font-size: clamp(22px,2.4vw,30px); letter-spacing:-.01em; }
  .tier-head .tcash { font-family:var(--font-display); font-weight:900; color:var(--pink-deep); font-size: clamp(18px,2vw,24px); }
  .tier-need { font-size:13px; letter-spacing:.04em; color:var(--text-soft); margin:4px 0 14px; font-weight:600; }
  .tier-bens { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  .tier-bens li { display:flex; gap:10px; font-size:14.5px; color:var(--text); align-items:flex-start; }
  .tier-bens .dot { width:7px; height:7px; border-radius:50%; background:var(--gold); margin-top:7px; flex:0 0 auto; }
  .journey { margin-top: clamp(44px,5vw,66px); }
  .journey-track { position:relative; height:4px; background:var(--line); border-radius:999px; margin: 40px 0 8px; }
  .journey-fill { position:absolute; inset:0 auto 0 0; width:100%; background:var(--gold-grad); border-radius:999px; }
  .journey-pts { display:flex; justify-content:space-between; }
  .journey-pt { text-align:center; flex:1; }
  .journey-pt .pt-name { font-family:var(--font-display); font-weight:900; font-size:16px; }
  .journey-pt .pt-pts { font-size:12px; color:var(--text-soft); letter-spacing:.05em; }
  .journey-pt .pt-dot { width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--pink); margin:0 auto 12px; position:relative; top:-46px; }
  @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .fan { max-width: 380px; margin-top: 12px; } .steps, .tier-grid { grid-template-columns: 1fr; } .journey-pt .pt-dot { top:-44px; } }
  `;
  const s = document.createElement('style'); s.id = 'sections-css'; s.textContent = css; document.head.appendChild(s);
})();

function Check({ color = 'var(--pink-deep)' }) { return (<svg className="ck" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>); }

function Hero({ onIndicar, onScrollTo, patientName }) {
  const tiers = window.PROGRAM.tiers;
  return (
    <header className="hero pad" id="topo">
      <div className="wrap hero-grid">
        <div>
          <p className="eyebrow on-dark">LA Primore · programa de recompensas</p>
          <h1>LA PRI<span className="cash">CA$H</span></h1>
          <p className="hero-lead">Seja muito bem-vinda. Aqui você acumula pontos, sobe de nível e ganha cashback de verdade — inclusive com as compras das amigas que você indica.</p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={onIndicar}><WhatsIcon /> Indicar uma amiga</button>
            <button className="btn btn-ghost on-dark" onClick={() => onScrollTo('como-funciona')}>Como funciona</button>
          </div>
          <div className="hero-meta">
            <div><div className="num">3</div><div className="cap">níveis</div></div>
            <div><div className="num">até 20%</div><div className="cap">de cashback</div></div>
            <div><div className="num">∞</div><div className="cap">indicações</div></div>
          </div>
        </div>
        <div className="fan">{tiers.map((t, i) => (<div className={'fan-card f' + i} key={t.id}><TierCard tier={t} patientName={patientName} qrText={qrLink(patientName)} /></div>))}</div>
      </div>
    </header>
  );
}

function ComoFunciona() {
  return (
    <section className="pad" id="como-funciona">
      <div className="wrap">
        <div className="sec-head reveal">
          <p className="eyebrow">indicação</p>
          <h2 className="section-title">como funciona</h2>
          <p className="lead" style={{ marginTop: 16, maxWidth: '54ch' }}>Indicar é simples e todo mundo sai ganhando. A sua amiga é bem recebida e você é recompensada por cada compra que ela faz.</p>
        </div>
        <div className="steps">
          <div className="step reveal d1"><div className="n">01</div><h3>Você indica</h3><p>Compartilhe seu link ou QR com uma amiga. Ela chega indicada por você e ganha uma <strong>consulta gratuita</strong> — o incentivo perfeito para ela contar que veio pela sua indicação.</p></div>
          <div className="step reveal d2"><div className="n">02</div><h3>Ela faz a primeira compra</h3><p>Assim que sua indicada realiza qualquer procedimento ou compra de produto com a gente, a recompensa cai pra você automaticamente.</p></div>
          <div className="step reveal d3"><div className="n">03</div><h3>Você ganha</h3><div className="gain"><div className="gain-item"><Check /> <span>O cashback do seu nível sobre o valor da compra dela</span></div><div className="gain-item"><Check /> <span>Os pontos do que ela comprou — para subir de nível e desbloquear mais benefícios</span></div></div></div>
        </div>
        <div className="pin-note reveal"><PinIcon /><div className="pn-flag">Você acumula pontos tanto com as suas compras quanto com as compras das suas indicadas.</div></div>
      </div>
    </section>
  );
}

function Niveis({ patientName }) {
  const tiers = window.PROGRAM.tiers;
  return (
    <section className="niveis pad" id="niveis">
      <div className="wrap">
        <div className="sec-head reveal"><p className="eyebrow">níveis</p><h2 className="section-title">seu cartão, seu nível</h2><p className="lead" style={{ marginTop: 16, maxWidth: '52ch' }}>Você ganha um cartão personalizado de acordo com cada nível. Quanto mais pontos, maior o seu cashback. <em>Toque no cartão para virar.</em></p></div>
        <div className="tier-grid">{tiers.map((t, i) => (<div className={'tier-col reveal d' + Math.min(i + 1, 3)} key={t.id}><div className="card-wrap"><TierCard tier={t} patientName={patientName} qrText={qrLink(patientName)} /></div><div className="tier-head"><span className="tname">{t.name}</span><span className="tcash">{t.cashback}%</span></div><div className="tier-need">{t.pointsNeeded === 0 ? 'nível inicial · você começa aqui' : t.pointsNeeded.toLocaleString('pt-BR') + ' pontos acumulados'}</div><ul className="tier-bens">{t.benefits.map((b, k) => (<li key={k}><span className="dot" /><span>{b}</span></li>))}</ul></div>))}</div>
        <div className="journey reveal"><hr className="hairline thin" /><div className="journey-track"><div className="journey-fill" /></div><div className="journey-pts">{tiers.map((t) => (<div className="journey-pt" key={t.id}><div className="pt-dot" /><div className="pt-name">{t.name}</div><div className="pt-pts">{t.pointsNeeded === 0 ? 'início' : t.pointsNeeded.toLocaleString('pt-BR') + ' pts'}</div></div>))}</div></div>
      </div>
    </section>
  );
}

function WhatsIcon({ size = 18 }) { return (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.13h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.23 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28z"/></svg>); }
function PinIcon() { return (<svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="var(--pink-deep)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ flex: '0 0 auto' }}><path d="M12 17v5" /><path d="M9 10.76V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5.76a2 2 0 0 0 .59 1.42l1.12 1.12c.13.13.2.3.2.49V15a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-.21c0-.19.07-.36.2-.49l1.12-1.12A2 2 0 0 0 9 10.76z" /></svg>); }

function qrLink(name) {
  const base = 'https://lapricash.laprimore.com.br';
  const code = referralCode(name);
  return base + '/?ref=' + code;
}
function referralCode(name) {
  const clean = (name && name.trim()) ? name.trim() : 'PRIMORE';
  const slug = clean.normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/[^a-zA-Z]/g, '').toUpperCase().slice(0, 6) || 'PRIMOR';
  return slug + '500';
}

Object.assign(window, { Hero, ComoFunciona, Niveis, WhatsIcon, PinIcon, Check, qrLink, referralCode });