// Lista de presentes + Especiais (lua de mel, experiências, mensagens)
window.GiftList = function GiftList() {
  const C = window.CONFIG;
  const [produtos, setProdutos] = React.useState(C.produtos);

  // ── modal de contribuição ───────────────────────────────────
  // source: 'presente' | 'cota'
  // tela:   'shopee' | 'escolha' | 'pix' | 'cartao'
  const [arrecadadoSurpresa, setArrecadadoSurpresa] = React.useState(0);
  const [valorContrib,       setValorContrib]       = React.useState('');

  const [modal,      setModal]      = React.useState(null);
  const [nomeModal,  setNomeModal]  = React.useState('');
  const [copiadoPix, setCopiadoPix] = React.useState(false);
  const [salvando,   setSalvando]   = React.useState(false);
  const [reservaOkId,  setReservaOkId]  = React.useState(null); // presents
  const [cotaOkId,     setCotaOkId]     = React.useState(null); // cotas


  // ── listeners Firestore ─────────────────────────────────────
  React.useEffect(() => {
    if (!window.db) return;
    return window.db.collection('presentes').orderBy('ordem')
      .onSnapshot(snap => {
        if (snap.empty) return;
        setProdutos(snap.docs.map(d => ({ id: d.id, ...d.data() })));
      }, () => {});
  }, []);

  // Cotas: ordem sempre vem do config.js — sem listener Firestore para preservar a ordenação
  // (contribuições são salvas em 'contribuicoes', não alteram as cotas em si)

  // Listener: valor arrecadado atualizado manualmente pelo casal no Firebase
  React.useEffect(() => {
    if (!window.db) return;
    return window.db.collection('metas').doc('surpresa')
      .onSnapshot(doc => {
        if (doc.exists) setArrecadadoSurpresa(Number(doc.data().arrecadado) || 0);
      }, () => {});
  }, []);

  // ── ESC fecha modal ─────────────────────────────────────────
  React.useEffect(() => {
    const onKey = e => { if (e.key === 'Escape') fecharModal(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  // ── modal helpers ───────────────────────────────────────────
  const abrirModal = (item, tela, source) => {
    setModal({ item, tela, source });
    setNomeModal('');
    setValorContrib('');
    setCopiadoPix(false);
  };
  const fecharModal = () => { setModal(null); setNomeModal(''); setValorContrib(''); };
  const irParaTela  = tela => setModal(m => ({ ...m, tela }));

  // ── confirmar (presente = reserva | cota = contribuição) ────
  const confirmarModal = async () => {
    if (!nomeModal.trim() || salvando || !modal) return;
    setSalvando(true);
    const { item, tela, source } = modal;

    try {
      if (source === 'presente') {
        // Transação para evitar dupla reserva
        const ref = window.db.collection('presentes').doc(item.id);
        await window.db.runTransaction(async t => {
          const doc = await t.get(ref);
          if (doc.data().status !== 'disponivel') throw new Error('indisponivel');
          t.update(ref, {
            status: 'reservado', reservadoPor: nomeModal.trim(),
            tipo: tela, reservadoEm: firebase.firestore.FieldValue.serverTimestamp()
          });
        });
        setReservaOkId(item.id);
        setTimeout(() => setReservaOkId(null), 5000);
      } else {
        // Registra contribuição (sem bloquear o item — várias pessoas podem contribuir)
        if (window.db) {
          await window.db.collection('contribuicoes').add({
            cotaId: item.id, cotaNome: item.nome,
            contribuidoPor: nomeModal.trim(),
            metodo: tela,
            valor:    parseFloat(valorContrib.replace(',', '.')) || 0,
            status:   'pendente',
            criadoEm: firebase.firestore.FieldValue.serverTimestamp()
          });
        }
        setCotaOkId(item.id);
        setTimeout(() => setCotaOkId(null), 5000);
      }

      // Redireciona após confirmar
      if (tela === 'shopee' && item.link)
        window.open(item.link, '_blank', 'noopener,noreferrer');
      if (tela === 'cartao') {
        const mpUrl = item.linkMercadoPago || C.mpLink;
        if (mpUrl) window.open(mpUrl, '_blank', 'noopener,noreferrer');
      }

      fecharModal();
    } catch (e) {
      if (e.message === 'indisponivel') {
        alert('Este presente já foi reservado. Que tal escolher outro?');
        fecharModal();
      }
    }
    setSalvando(false);
  };

  // ── copiar Pix ──────────────────────────────────────────────
  const doCopy = (text, setFn) => {
    if (navigator.clipboard) navigator.clipboard.writeText(text).catch(() => fbCopy(text));
    else fbCopy(text);
    setFn(true); setTimeout(() => setFn(false), 2000);
  };
  const fbCopy = text => {
    const ta = document.createElement('textarea');
    ta.value = text; document.body.appendChild(ta);
    ta.select(); try { document.execCommand('copy'); } catch(e) {}
    document.body.removeChild(ta);
  };
  const copyPixModal = () => doCopy(C.pixChave, setCopiadoPix);


  // ── render do modal ─────────────────────────────────────────
  const Modal = () => {
    if (!modal) return null;
    const { item, tela } = modal;
    const preco = item.valor
      ? `R$ ${Number(item.valor).toFixed(2).replace('.', ',')}`
      : item.preco
        ? `R$ ${Number(item.preco).toFixed(2).replace('.', ',')}`
        : null;

    return (
      <div className="gm-overlay" onClick={e => e.target === e.currentTarget && fecharModal()}>
        <div className="gm-card">

          <div className="gm-header">
            <div>
              <p className="gm-item-nome">{item.emoji ? `${item.emoji} ${item.nome}` : item.nome}</p>
              {preco && <p className="gm-item-preco">{preco}</p>}
            </div>
            <button className="gm-close" onClick={fecharModal}>✕</button>
          </div>

          {/* Tela: escolha de método */}
          {tela === 'escolha' && (
            <div className="gm-body">
              <p className="gm-titulo">Como prefere contribuir?</p>
              <p className="gm-subtitulo">
                Escolha a forma mais prática para você.
              </p>
              <div className="gm-metodos">
                <button className="gm-metodo" onClick={() => irParaTela('pix')}>
                  <span className="gm-metodo-emoji">📱</span>
                  <span className="gm-metodo-titulo">Via Pix</span>
                  <span className="gm-metodo-desc">Copie a chave e transfira pelo app do seu banco — rápido e sem taxas</span>
                </button>
                <button className="gm-metodo gm-metodo--cartao" onClick={() => irParaTela('cartao')}>
                  <span className="gm-metodo-emoji">💳</span>
                  <span className="gm-metodo-titulo">Via Cartão</span>
                  <span className="gm-metodo-desc">Crédito, débito ou saldo — pagamento seguro pelo Mercado Pago</span>
                </button>
              </div>
            </div>
          )}

          {/* Tela: Pix */}
          {tela === 'pix' && (
            <div className="gm-body">
              <button className="gm-voltar" onClick={() => irParaTela('escolha')}>← Voltar</button>
              <p className="gm-titulo">Contribuir via Pix</p>
              {preco && (
                <div className="gm-valor-box">
                  <span className="gm-valor-label">Valor sugerido</span>
                  <span className="gm-valor-num">{preco}</span>
                </div>
              )}
              <div className="gm-pix-box">
                <span className="gm-pix-label">Chave Pix (e-mail)</span>
                <div className="gm-pix-row">
                  <span className="gm-pix-chave">{C.pixChave}</span>
                  <button className="gm-pix-copy" onClick={copyPixModal}>
                    {copiadoPix
                      ? <><Icon name="check" size={12}/> Copiado!</>
                      : <><Icon name="copy"  size={12}/> Copiar</>}
                  </button>
                </div>
                <span className="gm-pix-recebedor">{C.pixNome}</span>
              </div>
              {modal.item.id === 'surpresa' && (
                <>
                  <label className="gm-label">Valor que irá contribuir (opcional):</label>
                  <input className="gm-input" placeholder="Ex: 200,00" value={valorContrib}
                         onChange={e => setValorContrib(e.target.value)} />
                </>
              )}
              <label className="gm-label">Seu nome (para identificarmos):</label>
              <input className="gm-input" placeholder="Nome completo" value={nomeModal} autoFocus
                     onChange={e => setNomeModal(e.target.value)}
                     onKeyDown={e => e.key === 'Enter' && confirmarModal()} />
              <button className="gm-btn gm-btn--pix" onClick={confirmarModal}
                      disabled={!nomeModal.trim() || salvando}>
                {salvando ? '…' : 'Confirmar contribuição'}
              </button>
            </div>
          )}

          {/* Tela: Cartão */}
          {tela === 'cartao' && (
            <div className="gm-body">
              <button className="gm-voltar" onClick={() => irParaTela('escolha')}>← Voltar</button>
              <p className="gm-titulo">Contribuir via Cartão</p>
              {preco && (
                <div className="gm-valor-box">
                  <span className="gm-valor-label">Valor sugerido</span>
                  <span className="gm-valor-num">{preco}</span>
                </div>
              )}
              <div className="gm-mp-info">
                <span className="gm-mp-icon">💳</span>
                <p className="gm-mp-texto">Após confirmar, você será redirecionado ao <strong>Mercado Pago</strong> para concluir o pagamento com cartão de crédito, débito ou saldo.</p>
              </div>
              {modal.item.id === 'surpresa' && (
                <>
                  <label className="gm-label">Valor que irá contribuir (opcional):</label>
                  <input className="gm-input" placeholder="Ex: 200,00" value={valorContrib}
                         onChange={e => setValorContrib(e.target.value)} />
                </>
              )}
              <label className="gm-label">Seu nome (para identificarmos):</label>
              <input className="gm-input" placeholder="Nome completo" value={nomeModal} autoFocus
                     onChange={e => setNomeModal(e.target.value)}
                     onKeyDown={e => e.key === 'Enter' && confirmarModal()} />
              <button className="gm-btn gm-btn--cartao" onClick={confirmarModal}
                      disabled={!nomeModal.trim() || salvando}>
                {salvando ? '…' : 'Confirmar e ir ao pagamento →'}
              </button>
            </div>
          )}

          {/* Tela: Comprar pelo link */}
          {tela === 'shopee' && (
            <div className="gm-body">
              <p className="gm-titulo">Comprar pelo link</p>
              <p className="gm-subtitulo">Registre seu nome e finalize a compra pelo link da loja. O item será reservado automaticamente.</p>
              <label className="gm-label">Seu nome:</label>
              <input className="gm-input" placeholder="Nome completo" value={nomeModal} autoFocus
                     onChange={e => setNomeModal(e.target.value)}
                     onKeyDown={e => e.key === 'Enter' && confirmarModal()} />
              <button className="gm-btn gm-btn--shopee" onClick={confirmarModal}
                      disabled={!nomeModal.trim() || salvando}>
                {salvando ? '…' : 'Confirmar e abrir link'}
              </button>
            </div>
          )}
        </div>
      </div>
    );
  };

  // ── render ──────────────────────────────────────────────────
  return (
    <section id="presentes" className="presentes">
      <div className="container">
        <header className="section-header" data-animate>
          <p className="sub">Sua presença é o maior presente</p>
          <h2>Lista de Presentes</h2>
          <Ornament width={140} />
          <p className="presentes-intro">
            Caso queira nos presentear, escolha o item que desejar
            e selecione a forma mais prática para você.
          </p>
        </header>

        <div data-animate>
              <div className="produtos-grid">
                {/* Card Surpresa para nós — estilo cota */}
                {(() => { const surpresa = C.cotas[0]; return (
                  <article key="surpresa" className="cota-card" style={{ '--stagger': '0ms' }}>
                    <div className="cota-icon-wrap">
                      <Icon name={surpresa.icon || 'heart'} size={24} color="#711312" />
                    </div>
                    <h4 className="cota-nome">{surpresa.nome}</h4>
                    <p className="cota-desc">{surpresa.descricao}</p>
                    {surpresa.meta && (
                      <div className="cota-progress">
                        <div className="cota-progress-header">
                          <span className="cota-progress-label">Arrecadado</span>
                          <span className="cota-progress-pct">{Math.min(100, Math.round(arrecadadoSurpresa / surpresa.meta * 100))}%</span>
                        </div>
                        <div className="cota-progress-track">
                          <div className="cota-progress-fill" style={{ width: `${Math.min(100, arrecadadoSurpresa / surpresa.meta * 100)}%` }} />
                        </div>
                      </div>
                    )}
                    <button className="cota-btn" onClick={() => abrirModal(surpresa, 'escolha', 'cota')}>
                      <Icon name="heart" size={13}/> PRESENTEAR
                    </button>
                  </article>
                ); })()}
                {produtos.filter(p => p.status !== 'reservado' && p.status !== 'presenteado').map((p, i) => (
                  <article key={i} className="produto"
                           style={{ '--stagger': `${(i % 6) * 50}ms` }}>
                    <div className="produto-img">
                      {p.imagem
                        ? <img src={p.imagem} alt={p.nome} style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
                        : <><Icon name="gift" size={42} color="#711312"/>
                            <span className="produto-img-tag">{p.nome.split(' ').slice(0,2).join(' ')}</span></>
                      }
                    </div>
                    <div className="produto-body">
                      <div className="produto-info">
                        <h3 className="produto-nome">{p.nome}</h3>
                        {p.preco && <p className="produto-preco">R$ {Number(p.preco).toFixed(2).replace('.', ',')}</p>}
                      </div>
                      {reservaOkId === p.id
                        ? <div className="produto-ok"><Icon name="heart" size={14} color="#993556"/> Reservado! 💛</div>
                        : <div className="produto-actions">
                            {p.link && (
                              <button className="btn-shopee" onClick={() => abrirModal(p, 'shopee', 'presente')}>
                                <Icon name="external-link" size={13}/> PRESENTEAR
                              </button>
                            )}
                            <button className="btn-contribuir" onClick={() => abrirModal(p, 'escolha', 'presente')}>
                              <Icon name="heart" size={13}/> PRESENTEAR
                            </button>
                          </div>
                      }
                    </div>
                  </article>
                ))}
              </div>
        </div>
      </div>

      <Modal />

      <style>{`
        .presentes { background: #ffffff; padding: 96px 0 88px; }
        .presentes .section-header h2 { color: #711312; }
        .presentes .section-header .sub { color: #ADADAD; }
        .presentes-intro {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic; font-size: 17px;
          color: #5C3D2E; max-width: 560px;
          margin: 14px auto 0; line-height: 1.6;
        }

        /* Animações CSS dentro das abas (substituem data-animate) */
        .tab-content.show .produto,
        .tab-content.show .cota-card {
          animation: fadeInUp 0.4s ease both;
          animation-delay: var(--stagger, 0ms);
        }
        .tab-content.show .presentes-info-box,
        .tab-content.show .especiais-section {
          animation: fadeInUp 0.45s ease both;
        }

        /* Info box */
        .presentes-info-box {
          display: flex; align-items: flex-start; gap: 14px;
          background: #fff;
          border: 0.5px solid rgba(184,134,11,0.4);
          border-left: 3px solid #ADADAD;
          border-radius: 10px; padding: 16px 20px;
          margin-bottom: 28px;
          box-shadow: 0 4px 12px -6px rgba(184,134,11,0.15);
        }
        .presentes-info-icon {
          flex-shrink: 0; margin-top: 2px;
          width: 28px; height: 28px; border-radius: 50%;
          background: #FBF6EE; border: 0.5px solid rgba(139,38,53,0.2);
          display: flex; align-items: center; justify-content: center;
        }
        .presentes-info-text {
          font-family: 'Lato', sans-serif; font-size: 13px;
          color: #5C3D2E; line-height: 1.65; margin: 0;
        }
        .presentes-info-text strong { color: #711312; font-weight: 700; }

        /* Tabs */
        .tabs {
          display: flex; justify-content: center;
          gap: 10px; margin: 0 auto 40px; flex-wrap: wrap;
        }
        .tab {
          font-family: 'Lato', sans-serif; font-size: 12px;
          letter-spacing: 1.5px; text-transform: uppercase;
          padding: 12px 24px; border-radius: 999px;
          border: 1px solid #711312; color: #711312; background: transparent;
          display: inline-flex; align-items: center; gap: 8px;
          transition: all 0.25s ease;
        }
        .tab:hover { background: rgba(113,19,18,0.06); }
        .tab--active { background: #711312; color: #ffffff; border-color: #711312; }
        .tab--active:hover { background: #711312; }
        .tab-content.hide { display: none; }
        .tab-content.show { opacity: 1; animation: fadeInUp 0.45s ease both; }

        /* Lista presentes */
        .produtos-grid { display: flex; flex-direction: column; gap: 12px; }
        .produto--surpresa { cursor: pointer; }
        .produto-img--surpresa { background: #711312; }
        .produto {
          background: #fff; border: 0.5px solid rgba(139,38,53,0.18);
          border-radius: 12px; overflow: hidden;
          display: flex; flex-direction: row; align-items: center;
          transition: box-shadow 0.3s, border-color 0.3s;
        }
        .produto:hover {
          box-shadow: 0 8px 24px -12px rgba(139,38,53,0.25);
          border-color: #ADADAD;
        }
        .produto-img {
          width: 90px; align-self: stretch; flex-shrink: 0;
          background: #F1EFE8;
          display: flex; flex-direction: column; align-items: center; justify-content: center;
          gap: 6px; border-right: 0.5px solid rgba(139,38,53,0.1);
          overflow: hidden;
        }
        .produto-img-tag {
          font-family: 'Cormorant Garamond', serif; font-style: italic;
          font-size: 11px; color: #5C3D2E; opacity: 0.55; text-align: center; padding: 0 4px;
        }
        .produto-body {
          padding: 12px 16px;
          display: flex; flex-direction: row; align-items: center;
          gap: 12px; flex: 1;
        }
        .produto-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
        .produto-nome {
          font-family: 'Cormorant Garamond', serif;
          font-size: 17px; font-weight: 600; color: #5C3D2E; line-height: 1.25;
        }
        .produto-preco {
          font-family: 'Lato', sans-serif; font-size: 13px;
          color: #711312; font-weight: 700;
        }
        .produto-actions {
          display: flex; flex-direction: column; gap: 6px;
          flex-shrink: 0;
        }
        .produto-ok {
          display: inline-flex; align-items: center; gap: 7px;
          font-family: 'Lato', sans-serif; font-size: 12px;
          color: #993556; background: #FBEAF0;
          border: 0.5px solid rgba(153,53,86,0.3);
          padding: 8px 12px; border-radius: 8px;
          animation: fadeInUp 0.3s ease both;
        }
        .btn-shopee {
          display: inline-flex; align-items: center; justify-content: center; gap: 7px;
          padding: 9px 16px; border-radius: 8px;
          background: #711312; color: #ffffff;
          font-family: 'Lato', sans-serif; font-size: 11px;
          letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
          transition: background 0.2s, transform 0.15s;
        }
        .btn-shopee:hover { background: #711312; transform: translateY(-1px); }
        .btn-contribuir {
          display: inline-flex; align-items: center; justify-content: center; gap: 7px;
          padding: 9px 16px; border-radius: 8px;
          border: 1px solid #711312; color: #ffffff; background: #711312;
          font-family: 'Lato', sans-serif; font-size: 11px;
          letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
          transition: background 0.2s, color 0.2s, transform 0.15s;
        }
        .btn-contribuir:hover { background: transparent; color: #711312; transform: translateY(-1px); }

        /* ── Especiais ── */
        .especiais-section {
          margin-bottom: 56px;
        }
        .especiais-section-header { margin-bottom: 24px; }
        .especiais-section-titulo {
          font-family: 'Augustus', 'Cormorant Garamond', serif;
          font-size: 22px; font-weight: normal;
          color: #ffffff; letter-spacing: 0.08em;
          text-transform: uppercase;
          margin-bottom: 6px;
        }
        .especiais-section-sub {
          font-family: 'Lato', sans-serif; font-size: 14px;
          color: rgba(255,255,255,0.75); line-height: 1.6; max-width: 560px;
          font-style: italic;
        }

        /* Cotas */
        .cotas-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
        .cota-card {
          background: #fff;
          border: 0.5px solid rgba(184,134,11,0.25);
          border-radius: 14px; padding: 24px 22px 20px;
          display: flex; flex-direction: column; gap: 10px;
          transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
        }
        .cota-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 14px 28px -14px rgba(184,134,11,0.3);
          border-color: #ADADAD;
        }
        .cota-icon-wrap {
          width: 48px; height: 48px; border-radius: 50%;
          background: #FBF6EE;
          border: 0.5px solid rgba(139,38,53,0.2);
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
        }
        .cota-nome {
          font-family: 'Cormorant Garamond', serif;
          font-size: 18px; font-weight: 600; color: #5C3D2E;
        }
        .cota-desc {
          font-family: 'Lato', sans-serif; font-size: 13px;
          color: #6B5849; line-height: 1.55; flex: 1;
        }
        .cota-valor {
          font-family: 'Lato', sans-serif; font-size: 14px;
          font-weight: 700; color: #ADADAD;
        }
        .cota-btn {
          display: inline-flex; align-items: center; gap: 7px;
          padding: 10px 16px; border-radius: 8px;
          border: 1px solid #711312; color: #ffffff; background: #711312;
          font-family: 'Lato', sans-serif; font-size: 11px;
          letter-spacing: 1px; text-transform: uppercase;
          align-self: flex-start;
          transition: background 0.2s, color 0.2s, transform 0.15s;
        }
        .cota-btn:hover { background: transparent; color: #711312; transform: translateY(-1px); }
        /* Barra de progresso da meta */
        .cota-progress { display: flex; flex-direction: column; gap: 5px; margin: 2px 0; }
        .cota-progress-header { display: flex; justify-content: space-between; align-items: center; }
        .cota-progress-label {
          font-family: 'Lato', sans-serif; font-size: 10px;
          letter-spacing: 1.5px; text-transform: uppercase; color: #888780;
        }
        .cota-progress-pct {
          font-family: 'Lato', sans-serif; font-size: 12px;
          font-weight: 700; color: #711312;
        }
        .cota-progress-track {
          height: 6px; background: #f0ece6; border-radius: 999px; overflow: hidden;
        }
        .cota-progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #711312, #c0392b);
          border-radius: 999px;
          transition: width 0.8s cubic-bezier(.4,0,.2,1);
          min-width: 4px;
        }
        .cota-progress-values {
          display: flex; justify-content: space-between;
        }
        .cota-progress-values span {
          font-family: 'Lato', sans-serif; font-size: 11px; color: #888780;
        }
        .cota-progress-values span:first-child { color: #711312; font-weight: 600; }

        .cota-ok {
          display: inline-flex; align-items: center; gap: 7px;
          font-family: 'Lato', sans-serif; font-size: 12px;
          color: #993556; background: #FBEAF0;
          border: 0.5px solid rgba(153,53,86,0.3);
          padding: 8px 12px; border-radius: 8px;
          animation: fadeInUp 0.3s ease both;
        }

        /* Mensagens */
        .msg-section {
          background: #fff;
          border: 0.5px solid rgba(139,38,53,0.15);
          border-radius: 16px; padding: 36px 40px 40px;
          box-shadow: 0 20px 40px -24px rgba(139,38,53,0.12);
        }
        .msg-section .especiais-section-titulo { color: #711312; }
        .msg-section .especiais-section-sub { color: #6B5849; }
        .msg-form { display: flex; flex-direction: column; gap: 16px; }
        .msg-fields { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; align-items: start; }
        .msg-field { display: flex; flex-direction: column; gap: 6px; }
        .msg-field--full { grid-column: 1 / -1; }
        .msg-label {
          font-family: 'Lato', sans-serif; font-size: 10px;
          letter-spacing: 2px; text-transform: uppercase; color: #711312;
        }
        .msg-input, .msg-textarea {
          font-family: 'Lato', sans-serif; font-size: 14px; color: #5C3D2E;
          background: #ffffff; border: 0.5px solid rgba(139,38,53,0.2);
          border-radius: 8px; padding: 11px 14px;
          transition: border-color 0.2s, box-shadow 0.2s;
          resize: vertical;
        }
        .msg-input:focus, .msg-textarea:focus {
          outline: none; border-color: #ADADAD;
          box-shadow: 0 0 0 3px rgba(184,134,11,0.15);
          background: #fff;
        }
        .msg-send-btn {
          display: inline-flex; align-items: center; gap: 8px;
          align-self: flex-start;
          padding: 13px 28px; border-radius: 10px;
          background: #711312; color: #ffffff;
          font-family: 'Cormorant Garamond', serif; font-size: 17px;
          transition: background 0.2s, transform 0.15s;
        }
        .msg-send-btn:hover:not(:disabled) { background: #711312; transform: translateY(-1px); }
        .msg-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        .msg-enviada-box {
          display: flex; flex-direction: column; align-items: center;
          text-align: center; gap: 10px; padding: 20px 0;
          animation: fadeInUp 0.4s ease both;
        }
        .msg-enviada-icon { display: flex; justify-content: center; }
        .msg-enviada-titulo {
          font-family: 'Cormorant Garamond', serif;
          font-size: 24px; font-weight: 600; color: #711312;
        }
        .msg-enviada-desc {
          font-family: 'Lato', sans-serif; font-size: 14px;
          color: #6B5849; line-height: 1.6; max-width: 380px;
          font-style: italic;
        }
        .msg-nova-btn {
          margin-top: 6px;
          font-family: 'Lato', sans-serif; font-size: 11px;
          letter-spacing: 1px; text-transform: uppercase;
          color: #711312; border-bottom: 1px solid #711312;
          padding-bottom: 1px; transition: opacity 0.2s;
        }
        .msg-nova-btn:hover { opacity: 0.7; }

        /* ── Modal ── */
        .gm-overlay {
          position: fixed; inset: 0; z-index: 200;
          background: rgba(30,10,5,0.55); backdrop-filter: blur(4px);
          display: flex; align-items: center; justify-content: center;
          padding: 16px;
          animation: fadeIn 0.2s ease both;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .gm-card {
          background: #ffffff;
          border: 0.5px solid rgba(184,134,11,0.35);
          border-radius: 18px; width: 100%; max-width: 440px;
          box-shadow: 0 32px 64px -16px rgba(30,10,5,0.45); overflow: hidden;
          animation: slideUp 0.28s cubic-bezier(.22,.68,0,1.2) both;
        }
        @keyframes slideUp {
          from { opacity: 0; transform: translateY(24px) scale(0.97); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .gm-header {
          display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
          padding: 22px 24px 18px; background: #fff;
          border-bottom: 0.5px solid rgba(184,134,11,0.2);
        }
        .gm-item-nome {
          font-family: 'Cormorant Garamond', serif;
          font-size: 18px; font-weight: 600; color: #5C3D2E; line-height: 1.25;
        }
        .gm-item-preco {
          font-family: 'Lato', sans-serif; font-size: 15px;
          font-weight: 700; color: #711312; margin-top: 4px;
        }
        .gm-close {
          font-size: 14px; color: #B4B2A9; flex-shrink: 0;
          padding: 4px 6px; border-radius: 6px;
          transition: background 0.2s, color 0.2s;
        }
        .gm-close:hover { background: #F1EFE8; color: #5C3D2E; }
        .gm-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
        .gm-titulo {
          font-family: 'Cormorant Garamond', serif;
          font-size: 20px; font-weight: 600; color: #711312;
        }
        .gm-subtitulo {
          font-family: 'Lato', sans-serif; font-size: 13px;
          color: #6B5849; line-height: 1.6; margin-top: -6px;
        }
        .gm-metodos { display: flex; flex-direction: column; gap: 10px; }
        .gm-metodo {
          display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
          padding: 16px 18px; border-radius: 12px;
          border: 1px solid rgba(139,38,53,0.2);
          background: #fff; text-align: left;
          transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
        }
        .gm-metodo:hover {
          border-color: #711312;
          box-shadow: 0 6px 16px -8px rgba(139,38,53,0.25);
          transform: translateY(-1px);
        }
        .gm-metodo--cartao:hover { border-color: #009ee3; box-shadow: 0 6px 16px -8px rgba(0,158,227,0.2); }
        .gm-metodo-emoji { font-size: 22px; line-height: 1; }
        .gm-metodo-titulo {
          font-family: 'Cormorant Garamond', serif;
          font-size: 17px; font-weight: 600; color: #5C3D2E;
        }
        .gm-metodo-desc {
          font-family: 'Lato', sans-serif; font-size: 12px;
          color: #888780; line-height: 1.4;
        }
        .gm-valor-box {
          display: flex; align-items: baseline; justify-content: space-between;
          background: rgba(139,38,53,0.05);
          border: 0.5px solid rgba(139,38,53,0.15);
          border-radius: 8px; padding: 10px 14px;
        }
        .gm-valor-label {
          font-family: 'Lato', sans-serif; font-size: 10px;
          letter-spacing: 1.5px; text-transform: uppercase; color: #888780;
        }
        .gm-valor-num {
          font-family: 'Cormorant Garamond', serif;
          font-size: 22px; font-weight: 600; color: #711312;
        }
        .gm-pix-box {
          background: #fff; border: 0.5px solid rgba(184,134,11,0.35);
          border-radius: 10px; padding: 14px 16px;
          display: flex; flex-direction: column; gap: 6px;
        }
        .gm-pix-label {
          font-family: 'Lato', sans-serif; font-size: 10px;
          letter-spacing: 1.5px; text-transform: uppercase; color: #888780;
        }
        .gm-pix-row {
          display: flex; align-items: center; gap: 8px;
          background: #ffffff; border-radius: 6px; padding: 8px 10px;
        }
        .gm-pix-chave {
          font-family: 'Lato', monospace; font-size: 13px; color: #5C3D2E;
          flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .gm-pix-copy {
          display: inline-flex; align-items: center; gap: 5px;
          font-family: 'Lato', sans-serif; font-size: 11px;
          letter-spacing: 0.8px; text-transform: uppercase;
          background: #ADADAD; color: #fff;
          padding: 6px 12px; border-radius: 6px; flex-shrink: 0;
          transition: background 0.2s;
        }
        .gm-pix-copy:hover { background: #9A7009; }
        .gm-pix-recebedor {
          font-family: 'Lato', sans-serif; font-size: 11px;
          color: #888780; font-style: italic;
        }
        .gm-mp-info {
          display: flex; align-items: flex-start; gap: 12px;
          background: #EDF6FF; border: 0.5px solid rgba(0,158,227,0.3);
          border-radius: 10px; padding: 14px 16px;
        }
        .gm-mp-icon { font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
        .gm-mp-texto {
          font-family: 'Lato', sans-serif; font-size: 13px;
          color: #1a4f6e; line-height: 1.55;
        }
        .gm-mp-texto strong { font-weight: 700; }
        .gm-voltar {
          align-self: flex-start;
          font-family: 'Lato', sans-serif; font-size: 11px;
          letter-spacing: 1px; color: #888780;
          text-decoration: underline; transition: color 0.2s; margin-bottom: -6px;
        }
        .gm-voltar:hover { color: #5C3D2E; }
        .gm-label {
          font-family: 'Lato', sans-serif; font-size: 10px;
          letter-spacing: 1.5px; text-transform: uppercase; color: #711312; margin-bottom: -6px;
        }
        .gm-input {
          width: 100%; padding: 11px 14px;
          border: 0.5px solid #C0455A; border-radius: 8px;
          font-family: 'Lato', sans-serif; font-size: 14px; color: #5C3D2E; background: #fff;
          transition: border-color 0.2s, box-shadow 0.2s;
        }
        .gm-input:focus { outline: none; border-color: #ADADAD; box-shadow: 0 0 0 3px rgba(184,134,11,0.15); }
        .gm-btn {
          width: 100%; padding: 13px; border-radius: 10px;
          font-family: 'Cormorant Garamond', serif; font-size: 17px; color: #ffffff;
          transition: background 0.2s, transform 0.15s;
        }
        .gm-btn:hover:not(:disabled) { transform: translateY(-1px); }
        .gm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .gm-btn--pix    { background: #711312; }
        .gm-btn--pix:hover:not(:disabled) { background: #711312; }
        .gm-btn--cartao { background: #009ee3; }
        .gm-btn--cartao:hover:not(:disabled) { background: #007ab8; }
        .gm-btn--shopee { background: #711312; }
        .gm-btn--shopee:hover:not(:disabled) { background: #711312; }

        @media (max-width: 900px) {
          .cotas-grid    { grid-template-columns: repeat(2,1fr); }
          .msg-fields    { grid-template-columns: 1fr; }
          .msg-field--full { grid-column: 1; }
        }
        @media (max-width: 560px) {
          .presentes { padding: 72px 0 64px; }
          .cotas-grid    { grid-template-columns: 1fr; }
          .produto-body  { flex-wrap: wrap; }
          .produto-actions { width: 100%; }
          .presentes-info-box { flex-direction: column; gap: 10px; }
          .msg-section { padding: 24px 20px; }
          .gm-card { border-radius: 14px; }
          .gm-body { padding: 18px; }
        }
      `}</style>
    </section>
  );
};

// QR placeholder (mantido para compatibilidade)
function QrPlaceholder() {
  const size = 17;
  const cells = React.useMemo(() => {
    const arr = []; let s = 7;
    for (let y = 0; y < size; y++)
      for (let x = 0; x < size; x++) {
        s = (s * 9301 + 49297) % 233280;
        arr.push((s / 233280) > 0.52);
      }
    return arr;
  }, []);
  const isMarker = (x, y) =>
    [[0,0],[size-7,0],[0,size-7]].some(([cx,cy]) => x>=cx&&x<cx+7&&y>=cy&&y<cy+7);
  const cell = 8;
  return (
    <svg width="156" height="156" viewBox={`0 0 ${size*cell} ${size*cell}`}>
      <rect width="100%" height="100%" fill="#ffffff"/>
      {cells.map((on,i)=>{const x=i%size,y=Math.floor(i/size);return isMarker(x,y)?null:on?<rect key={i} x={x*cell} y={y*cell} width={cell} height={cell} fill="#711312"/>:null;})}
      {[[0,0],[size-7,0],[0,size-7]].map(([cx,cy],i)=>(
        <g key={i}>
          <rect x={cx*cell} y={cy*cell} width={7*cell} height={7*cell} fill="#711312"/>
          <rect x={(cx+1)*cell} y={(cy+1)*cell} width={5*cell} height={5*cell} fill="#ffffff"/>
          <rect x={(cx+2)*cell} y={(cy+2)*cell} width={3*cell} height={3*cell} fill="#711312"/>
        </g>
      ))}
    </svg>
  );
}