// ===== LA PRICASH — Card components =====

(function () {
  if (document.getElementById('card-css')) return;
  const css = `
  .credit-card { position: relative; width: 100%; aspect-ratio: 1.586 / 1; border-radius: 16px; cursor: pointer; perspective: 1400px; font-family: var(--font-body); }
  .cc-inner { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
  .credit-card.flipped .cc-inner { transform: rotateY(180deg); }
  .cc-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: var(--shadow-card); padding: clamp(16px, 4.5%, 26px); display: flex; flex-direction: column; justify-content: space-between; }
  .cc-back { transform: rotateY(180deg); }
  .cc-front { opacity: 1; transition: opacity 0s linear .4s; }
  .cc-back  { opacity: 0; transition: opacity 0s linear .4s; }
  .credit-card.flipped .cc-front { opacity: 0; }
  .credit-card.flipped .cc-back  { opacity: 1; }
  .cc-platinum { background: linear-gradient(135deg,#e9eaec 0%,#fdfdfe 16%,#c5c7cc 38%,#eef0f3 58%,#b6b9bf 82%,#e0e2e5 100%); color:#2a2d31; }
  .cc-rose { background: linear-gradient(135deg,#f4c7b8 0%,#fbe6df 22%,#f0b3c2 46%,#fcefe9 64%,#e7b39d 86%,#f6d6cc 100%); color:#7a3b46; }
  .cc-black { background: linear-gradient(135deg,#1b1b1d 0%,#2e2e33 24%,#0d0d0f 48%,#37373c 66%,#101012 88%,#252528 100%); color:#ece6df; }
  .cc-face::after { content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.5; background: repeating-linear-gradient(112deg, rgba(255,255,255,0) 0 2px, rgba(255,255,255,.28) 2px 3px, rgba(0,0,0,.05) 3px 5px); }
  .cc-black .cc-face::after, .credit-card .cc-back::after { opacity:.28; }
  .cc-sheen { position:absolute; top:-60%; left:-30%; width:55%; height:220%; pointer-events:none; z-index:3; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%, transparent 100%); transform: rotate(8deg) translateX(-40%); animation: sheen 6.5s ease-in-out infinite; }
  .cc-black .cc-sheen { background: linear-gradient(105deg, transparent 0%, rgba(234,212,154,.0) 30%, rgba(234,212,154,.42) 50%, rgba(234,212,154,0) 70%, transparent 100%); }
  .credit-card:hover .cc-sheen { animation-duration: 2.2s; }
  body.no-sheen .cc-sheen { display:none; }
  @keyframes sheen { 0%{ transform: rotate(8deg) translateX(-60%);} 55%,100%{ transform: rotate(8deg) translateX(360%);} }
  .cc-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; position:relative; z-index:2; }
  .cc-label { font-size: clamp(8px, 1.6%, 11px); letter-spacing:.22em; text-transform:uppercase; font-weight:700; opacity:.78; }
  .cc-mid { display:flex; align-items:center; gap: clamp(10px,3%,18px); position:relative; z-index:2; }
  .cc-name { font-size: clamp(13px, 3.4%, 19px); letter-spacing:.12em; font-weight:700; text-transform:uppercase; position:relative; z-index:2; }
  .cc-number { font-family: var(--font-body); font-size: clamp(9px, 2.3%, 13px); letter-spacing:.16em; opacity:.82; margin-top:4px; position:relative; z-index:2; }
  .cc-cash { font-family: var(--font-display); font-weight:900; line-height:1; }
  .cc-chip { width: clamp(34px,11%,46px); aspect-ratio: 4/3; border-radius:6px; position:relative; background: linear-gradient(135deg,#d9b25a,#f3e0a6 45%,#c79a3f 70%,#e6cf8e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
  .cc-chip::before { content:''; position:absolute; inset:18% 30%; border:1px solid rgba(0,0,0,.32); border-radius:2px; box-shadow: -38% 0 0 -1px rgba(0,0,0,.28), 38% 0 0 -1px rgba(0,0,0,.28); }
  .cc-chip::after { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.3); }
  .cc-wifi { display:block; opacity:.85; }
  .cc-bank { display:flex; align-items:center; gap:6px; font-weight:800; letter-spacing:.04em; }
  .cc-bank .bk { font-size: clamp(9px,2%,12px); }
  .cc-bank .stk { display:flex; flex-direction:column; line-height:.96; font-size: clamp(7px,1.5%,9px); letter-spacing:.06em; }
  .cc-stripe { position:absolute; left:0; right:0; top:13%; height:16%; background:#0c0c0e; z-index:1; }
  .cc-rose .cc-stripe, .cc-platinum .cc-stripe { background:#2a2226; }
  .cc-back-body { position:relative; z-index:2; margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; height:100%; }
  .cc-qr { background:#fff; padding:6px; border-radius:8px; align-self:flex-end; box-shadow:0 4px 12px rgba(0,0,0,.25); }
  .cc-qr svg, .cc-qr canvas { display:block; }
  .cc-flip-hint { position:absolute; top: clamp(14px,5%,22px); left: clamp(16px,4.5%,26px); right: clamp(16px,4.5%,26px); z-index:2; font-size: clamp(9px,2%,12px); letter-spacing:.04em; opacity:.7; }
  `;
  const s = document.createElement('style'); s.id = 'card-css'; s.textContent = css; document.head.appendChild(s);
})();

function BrandFlower({ size = 16, color = 'var(--pink)' }) {
  const petals = [0, 60, 120, 180, 240, 300];
  return (<svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }} aria-hidden="true"><g transform="translate(50 50)">{petals.map((a) => (<ellipse key={a} cx="0" cy="-26" rx="13" ry="22" fill={color} transform={`rotate(${a})`} opacity="0.92" />))}<circle cx="0" cy="0" r="11" fill="#fff" opacity="0.9" /><circle cx="0" cy="0" r="6" fill={color} /></g></svg>);
}

function Contactless({ stroke = 'currentColor', size = 22 }) {
  return (<svg className="cc-wifi" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.7" strokeLinecap="round"><path d="M7 8.5a7 7 0 0 1 0 7" /><path d="M10.5 6a11 11 0 0 1 0 12" /><path d="M14 3.7a15 15 0 0 1 0 16.6" /></svg>);
}

function BankLogo({ color }) {
  return (<div className="cc-bank" style={{ color }}><span className="bk">BANK</span><BrandFlower size={13} color={color} /><span className="stk"><span>LA PRI</span><span>CA$H</span></span></div>);
}

function MiniQR({ text, size = 92, dark = '#14100F', light = '#ffffff' }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current || typeof qrcode === 'undefined') return;
    try {
      const qr = qrcode(0, 'M');
      qr.addData(text || 'https://laprimore.com.br');
      qr.make();
      const count = qr.getModuleCount();
      const cv = ref.current;
      const dpr = window.devicePixelRatio || 1;
      cv.width = size * dpr; cv.height = size * dpr;
      cv.style.width = size + 'px'; cv.style.height = size + 'px';
      const ctx = cv.getContext('2d');
      ctx.scale(dpr, dpr);
      ctx.fillStyle = light; ctx.fillRect(0, 0, size, size);
      const cell = size / count;
      ctx.fillStyle = dark;
      for (let r = 0; r < count; r++) { for (let c = 0; c < count; c++) { if (qr.isDark(r, c)) ctx.fillRect(Math.floor(c * cell), Math.floor(r * cell), Math.ceil(cell), Math.ceil(cell)); } }
    } catch (e) {}
  }, [text, size]);
  return <canvas ref={ref} />;
}

function TierCard({ tier, patientName, qrText, defaultFlipped = false }) {
  const [flipped, setFlipped] = React.useState(defaultFlipped);
  const isBlack = tier.id === 'black';
  const name = (tier.id === 'platinum') ? tier.cardName : ((patientName && patientName.trim()) ? patientName.trim().toUpperCase() : tier.cardName);
  const surface = 'cc-' + tier.id;
  const sub = isBlack ? 'var(--gold-light)' : (tier.id === 'rose' ? '#9c4f5d' : '#4a4d52');
  return (
    <div className={'credit-card ' + (flipped ? 'flipped' : '')} onClick={() => setFlipped((f) => !f)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setFlipped((f) => !f); } }} aria-label={'Cartão ' + tier.name + ', tocar para virar'}>
      <div className="cc-inner">
        <div className={'cc-face cc-front ' + surface}>
          <div className="cc-sheen" />
          <div className="cc-row"><span className="cc-label">{tier.cardLabel}</span><BankLogo color={isBlack ? 'var(--gold-light)' : 'currentColor'} /></div>
          <div className="cc-mid"><div className="cc-chip" /><Contactless size={22} stroke={isBlack ? 'var(--gold-light)' : 'currentColor'} /></div>
          <div className="cc-row" style={{ alignItems: 'flex-end' }}>
            <div><div className="cc-name">{name}</div><div className="cc-number">{tier.number}</div></div>
            <div style={{ textAlign: 'right' }}><div className="cc-cash" style={{ fontSize: 'clamp(20px,6%,30px)', color: isBlack ? 'var(--gold-light)' : 'inherit' }}>{tier.cashback}%</div><div className="cc-label" style={{ opacity: .8 }}>cashback</div></div>
          </div>
        </div>
        <div className={'cc-face cc-back ' + surface}>
          <div className="cc-sheen" />
          <div className="cc-stripe" />
          <div className="cc-flip-hint" style={{ color: sub }}>{tier.name} · {tier.cashback}% de cashback</div>
          <div className="cc-back-body">
            <div style={{ maxWidth: '58%' }}><div style={{ fontWeight: 800, fontSize: 'clamp(11px,2.6%,15px)', marginBottom: 6, color: isBlack ? 'var(--gold-light)' : 'inherit' }}>QR de regras</div><div style={{ fontSize: 'clamp(9px,2.1%,12px)', lineHeight: 1.4, color: sub }}>Escaneie para ver todas as regras e solicitar seu cashback.</div></div>
            <div className="cc-qr"><MiniQR text={qrText} size={88} /></div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TierCard, BrandFlower, Contactless, BankLogo, MiniQR });