// ============================================================
// Hattie — Closed beta landing
// ============================================================

const App = () => (
  <main className="lead">
    <div className="container container--narrow lead__inner">
      <a href="/" className="lead__brand" aria-label="Hattie home">
        <img src="assets/hattie-wordmark.svg" alt="Hattie" />
      </a>

      <div className="lead__copy">
        <div className="t-eyebrow lead__eyebrow">Sign up for the closed beta</div>
        <h1 className="t-display-xl lead__title">
          Hattie finds and delivers warm leads to STR property managers.
        </h1>
      </div>

      <div className="lead__form">
        <iframe
          data-tally-src="https://tally.so/embed/PdGo1x?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1&hideBranding=1"
          loading="lazy"
          width="100%"
          height="500"
          frameBorder="0"
          marginHeight="0"
          marginWidth="0"
          title="Sign up for the Hattie closed beta"
          style={{ display: "block", border: 0, background: "transparent" }}
        />
      </div>

      <footer className="lead__footer">
        <span>© 2026 Hattie</span>
      </footer>
    </div>
  </main>
);

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

// Re-scan for the Tally iframe once React mounts it.
const loadTallyEmbeds = () => {
  if (window.Tally && typeof window.Tally.loadEmbeds === "function") {
    window.Tally.loadEmbeds();
  } else {
    setTimeout(loadTallyEmbeds, 200);
  }
};
setTimeout(loadTallyEmbeds, 100);