// app.jsx — Ensambla la invitación.
const { T: TA } = window;

function DemoBanner() {
  const [open, setOpen] = React.useState(true);
  if (!open) return null;
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 50, background: TA.ink, color: TA.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, padding: '9px 16px', flexWrap: 'wrap' }}>
      <Micro size={10} ls=".12em" color={TA.bg} style={{ textAlign: 'center' }}>
        Vista previa · comparte enlaces personales como <span style={{ color: TA.accent }}>?id=INV001&amp;k=7typqw</span>
      </Micro>
      <button onClick={() => setOpen(false)} style={{ background: 'transparent', border: `1px solid rgba(236,227,207,.4)`, color: TA.bg,
        cursor: 'pointer', fontFamily: TA.micro, fontSize: 9, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 600, padding: '4px 9px', borderRadius: 2 }}>
        Ocultar
      </button>
    </div>
  );
}

function App() {
  const invite = React.useMemo(() => window.getInvite(), []);
  window.useSecurity(invite);

  return (
    <AccessGate invite={invite}>
      <React.Fragment>
        {invite.status === 'none' && <DemoBanner />}
        <Hero invite={invite} />
        <PhotoBand id="bandHero" src="fotos/portada.jpg" placeholder="Foto favorita de los novios — a sangre completa" />
        <Historia />
        <Detalles />
        <Regalos />
        <Hospedaje />
        <RSVP invite={invite} />
        <Footer />
      </React.Fragment>
    </AccessGate>
  );
}

window.injectThemeCSS();
ReactDOM.createRoot(document.getElementById('root')).render(<App />);