// Poderosamente na Melhor Idade — QR confirmation page
const PDS = window.SecretRiaExtraordinRiaDesignSystem_852e48;
const { Icon: PI } = window;
const MAPS = "https://maps.app.goo.gl/kGgVHewSJzXpBYoaA";

function InfoPill({ icon, label, value }) {
  return (
    <div className="pmi-pill">
      <span className="pmi-pill-ico"><PI name={icon} size={19} color="var(--gold-300)" /></span>
      <span>
        <span className="pmi-pill-label">{label}</span>
        <span className="pmi-pill-value">{value}</span>
      </span>
    </div>
  );
}

function PmiPage() {
  React.useEffect(() => { document.querySelectorAll(".pmi-rise").forEach((el, i) => setTimeout(() => el.classList.add("in"), 90 + i * 110)); }, []);
  return (
    <main className="pmi-wrap">
      <div className="pmi-inner">
        <img className="pmi-logo pmi-rise" src="assets/pmi-logo.png" alt="Poderosamente na Melhor Idade" />
        <div className="pmi-badge pmi-rise">
          <PI name="CheckCheck" size={17} color="var(--purple-900)" stroke={2.4} />
          Participação confirmada
        </div>
        <h1 className="pmi-h1 pmi-rise">
          Parabéns! Sua participação no <em>Poderosamente na Melhor Idade</em> está garantida.
        </h1>
        <p className="pmi-lead pmi-rise">
          Prepare-se para uma noite icônica, com muita música e dança, e uma programação pensada para você:
        </p>
        <ul className="pmi-prog pmi-rise">
          <li><span className="pmi-prog-emo">🎷</span> Jazz ao vivo com <strong>Alex Freitas Jazz Experience</strong></li>
          <li><span className="pmi-prog-emo">🎭</span> Show interativo com <strong>Beto Barros</strong></li>
          <li><span className="pmi-prog-emo">🎤</span> Apresentação de <strong>Márcia Witczak</strong></li>
          <li><span className="pmi-prog-emo">🍲</span> <strong>Buffet de caldos</strong></li>
        </ul>
        <p className="pmi-lead pmi-rise">
          Estamos muito felizes em receber você. Aproveite cada momento!
        </p>
        <div className="pmi-info pmi-rise">
          <span className="pmi-info-title">Informações do evento</span>
          <div className="pmi-pills">
            <InfoPill icon="MapPin" label="Local" value="Clube Ases" />
            <InfoPill icon="Clock" label="Início" value="18h30" />
          </div>
        </div>
        <a className="pmi-cta pmi-rise" href={MAPS} target="_blank" rel="noopener noreferrer">
          <span>Como chegar</span>
          <span className="pmi-cta-ico"><PI name="ArrowUpRight" size={20} color="var(--purple-900)" stroke={2.4} /></span>
        </a>
        <p className="pmi-foot pmi-rise">Nos vemos lá ★</p>
        <div className="pmi-eleva pmi-rise">
          <span className="pmi-eleva-label">Realização</span>
          <img src="assets/logo-eleva-branca.png" alt="Instituto Eleva" />
        </div>
      </div>
    </main>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PmiPage />);