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

/* ------------------------------------------------------------------
   FLOW — "Coming soon" landing page
   Minimal interactivity: form submission flow.
   The only ambient animation is the background drift (in CSS).
------------------------------------------------------------------ */

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

  const [email, setEmail] = useState("");
  const [status, setStatus] = useState("idle"); // idle | loading | success | error
  const [errorMsg, setErrorMsg] = useState("");

  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());

  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    if (!emailValid) {
      setErrorMsg("Enter a valid email to join the beta");
      setStatus("error");
      return;
    }
    setErrorMsg("");
    setStatus("loading");
    setTimeout(() => setStatus("success"), 900);
  }, [emailValid]);

  const handleChange = (e) => {
    setEmail(e.target.value);
    if (status === "error") setStatus("idle");
  };

  /* ----- 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>
        <p className="lp__lede lp__lede--cta">Join the beta to get access now.</p>

        <form className="lp__form" onSubmit={handleSubmit} noValidate>
          {status !== "success" ? <React.Fragment>
              <div className={`lp__field ${status === "error" ? "is-error" : ""}`}>
                <input
                type="email"
                inputMode="email"
                autoComplete="email"
                placeholder="you@studio.com"
                value={email}
                onChange={handleChange}
                disabled={status === "loading"}
                className="lp__input"
                aria-label="Email address" />
              
                <button
                type="submit"
                className="lp__submit"
                disabled={status === "loading"}
                aria-busy={status === "loading"}>
                
                  {status === "loading" ?
                <React.Fragment>
                      <span className="lp__spinner" aria-hidden="true"></span>
                      <span>Joining…</span>
                    </React.Fragment> :

                <React.Fragment>
                      <span>Join the beta</span>
                      <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <path d="M3 8h10M9 4l4 4-4 4" />
                      </svg>
                    </React.Fragment>
                }
                </button>
              </div>
              <div className="lp__meta">
                {status === "error" ?
              <span className="lp__error">{errorMsg}</span> :

              <span>No spam. One short note when we open the doors.</span>
              }
              </div>
            </React.Fragment> :

          <div className="lp__success" role="status">
              <span className="lp__success-check" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 12.5l5 5 11-12" />
                </svg>
              </span>
              <span className="lp__success-text">
                <strong>You're on the list.</strong>
                <span>We'll be in touch when the beta opens.</span>
              </span>
            </div>
          }
        </form>
      </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;