/* global React */
const { useEffect, useRef } = React;

/* ------------------------------------------------------------------
   FLOW — "Coming soon" landing page
   Beta signup handled by Clerk's hosted waitlist component.
   The only ambient animation is the background drift (in CSS).
------------------------------------------------------------------ */

function LandingPage({ device = "desktop" }) {
  const isMobile = device === "mobile";

  const waitlistRef = useRef(null);

  useEffect(() => {
    const appearance = {
      variables: {
        colorPrimary:         "#00a5b2",
        colorBackground:      "transparent",
        colorText:            "#f4f3ee",
        colorTextSecondary:   "rgba(244,243,238,0.7)",
        colorInputBackground: "rgba(10,20,22,0.45)",
        colorInputText:       "#f4f3ee",
        colorNeutral:         "#f4f3ee",
        borderRadius:         "9999px",
        fontFamily:           "'NeueMontreal', 'Helvetica Neue', Helvetica, Arial, sans-serif",
      },
      elements: {
        card:              { background: "transparent", boxShadow: "none", padding: "0 2px", width: "390px", height: "50px", overflow: "visible" },
        cardBox:           { width: "100%", padding: "0", margin: "0", overflow: "visible" },
        header:            { display: "none" },
        footer:            { display: "none" },
        formFieldLabel:    { display: "none" },
        form:              { display: "flex", flexDirection: "row", gap: "8px", alignItems: "flex-start", width: "100%", margin: "0", padding: "0" },
        formField:         { flex: "1", minWidth: "0", margin: "0", padding: "0" },
        formFieldRow:      { margin: "0", padding: "0" },
        formFieldInputGroup: { margin: "0", padding: "0" },
        formFieldInput:    { border: "1px solid rgba(244,243,238,0.22)", backdropFilter: "blur(14px)", margin: "0", width: "250px", height: "38px", marginLeft: "8px", boxSizing: "border-box", marginTop: "-8px" },
        formButtonPrimary: { backgroundColor: "#00a5b2", fontWeight: "500", width: "auto", borderRadius: "9999px", marginTop: "0px", marginRight: "-40px", height: "36px"},
      },
    };

    function mount() {
      if (waitlistRef.current && window.Clerk) {
        window.Clerk.mountWaitlist(waitlistRef.current, { appearance });
      }
    }

    let cancelled = false;

    function waitForClerkAndMount() {
      if (!window.Clerk) { setTimeout(waitForClerkAndMount, 50); return; }
      window.Clerk.load({ signInUrl: "https://app.theflowtool.com/" })
        .then(() => { if (!cancelled) mount(); })
        .catch(console.error);
    }

    waitForClerkAndMount();

    return () => {
      cancelled = true;
      if (waitlistRef.current && window.Clerk) {
        try { window.Clerk.unmountWaitlist(waitlistRef.current); } catch (_) {}
      }
    };
  }, []);

  /* ----- Cursor-reactive spotlight (desktop only) -----
     Sets --mx/--my CSS variables on the root so .lp__spotlight follows. */
  const rootRef = useRef(null);
  useEffect(() => {
    if (isMobile) return;
    const root = rootRef.current;
    if (!root) return;

    const onMove = (e) => {
      const r = root.getBoundingClientRect();
      const px = (e.clientX - r.left) / r.width;
      const py = (e.clientY - r.top) / r.height;
      root.style.setProperty("--mx", `${px * 100}%`);
      root.style.setProperty("--my", `${py * 100}%`);
      root.style.setProperty("--mo", "1");
    };
    const onLeave = () => root.style.setProperty("--mo", "0");

    root.addEventListener("mousemove", onMove);
    root.addEventListener("mouseleave", onLeave);
    return () => {
      root.removeEventListener("mousemove", onMove);
      root.removeEventListener("mouseleave", onLeave);
    };
  }, [isMobile]);

  return (
    <div ref={rootRef} className={`lp lp--${device}`}>
      {/* Video background — swap <img> for <video autoplay muted loop playsinline> in prod */}
      <div className="lp__media" aria-hidden="true">
        <div className="lp__media-drift">
          <img src="assets/bg-placeholder.png" alt="" className="lp__video" />
        </div>
        <div className="lp__scrim"></div>
        <div className="lp__vignette"></div>
        {!isMobile && <div className="lp__spotlight"></div>}
      </div>

      {/* Top chrome */}
      <header className="lp__top">
        <img src="assets/flow-logo-white.png" alt="FLOW" className="lp__logo" />
        {!isMobile &&
        <div className="lp__status">
            <span className="lp__dot"></span>
            <span>Private beta · Summer 2026</span>
          </div>
        }
      </header>

      {/* Hero */}
      <main className="lp__hero">
        <div className="lp__eyebrow">
          <span style={{ lineHeight: "1" }}>A CALM WORKSPACE FOR
CREATIVE PROFESSIONALS</span>
        </div>

        <h1 className="lp__title">
          <span className="lp__title-line">Coming</span>{" "}
          <span className="lp__title-line">
            soon<span className="lp__period">.</span>
          </span>
        </h1>

        <p className="lp__lede">
          Spend less time managing your clients and more time creating.
          {" "}Projects, clients, and money — in one place.
        </p>
        <div className="lp__waitlist" ref={waitlistRef}></div>
      </main>

      {/* Footer */}
      <footer className="lp__foot">
        <span>© 2026 FLOW</span>
        <span className="lp__foot-spacer" aria-hidden="true"></span>
        <span className="lp__foot-meta">
          {isMobile ?
          <span>Beta · Summer 2026</span> :

          <React.Fragment>
              <a href="#">INFO@THEFLOWTOOL.COM</a>
              <span className="lp__sep">·</span>
              <a href="#">Twitter</a>
              <span className="lp__sep">·</span>
              <a href="#">Instagram</a>
            </React.Fragment>
          }
        </span>
      </footer>
    </div>);

}

window.LandingPage = LandingPage;