// Main app — wires sections (production build, no tweaks panel).

function App() {
  const goRSVP = (e) => {
    e?.preventDefault?.();
    const el = document.querySelector('[data-screen-label="07 RSVP"]');
    if (el) window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
  };

  return (
    <>
      <Hero
        layout="full"
        dateLine={<>Sábado 29<br />Agosto · 2026</>}
        locationLine={<>Zapopan<br />Jalisco · MX</>}
      />

      <FloatingCTA onClick={goRSVP} />

      <Welcome />
      <Countdown targetISO="2026-08-29T15:30:00-06:00" />
      <Padrinos />
      <Details />
      <InfoStrip />
      <RSVP />
      <Foot />
    </>
  );
}

function FloatingCTA({ onClick }) {
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVis(window.scrollY > 600);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <button
      onClick={onClick}
      style={{
        position: "fixed", top: 18, right: 18, zIndex: 50,
        background: "var(--ember)", color: "var(--cream)",
        border: 0, padding: "12px 20px",
        fontFamily: "var(--label)", fontSize: 10, letterSpacing: ".32em", textTransform: "uppercase",
        cursor: "pointer", borderRadius: 999,
        opacity: vis ? 1 : 0, transform: vis ? "translateY(0)" : "translateY(-8px)",
        pointerEvents: vis ? "auto" : "none",
        transition: "opacity .3s, transform .3s",
        boxShadow: "0 8px 24px rgba(0,0,0,.15)"
      }}
    >Confirmar →</button>
  );
}

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