// MomentIQ Creator Portal — app shell (production)

function GradientHeadline({ text }) {
  // Gradient-clip the last two words, matching the site's rotating tail-word treatment
  const words = text.split(" ");
  const head = words.slice(0, -2).join(" ");
  const tail = words.slice(-2).join(" ");
  return (
    <h1>{head}{head ? " " : ""}<span className="mq-gradient-text">{tail}</span></h1>
  );
}

function CreatorMenu({ creator }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [open]);

  if (!creator) {
    return <a className="mq-btn-primary cp-topnav-cta" href="https://bemomentiq.com" target="_blank" rel="noreferrer">Get Started</a>;
  }

  const initial = creator.handle.replace("@", "").charAt(0).toUpperCase();
  const photo = creator.avatarUrl || creator.photo;
  return (
    <div className="cp-account" ref={ref}>
      <button type="button" className="cp-account-btn" aria-haspopup="true" aria-expanded={open} onClick={() => setOpen(!open)}>
        {photo
          ? <img className="cp-account-avatar" src={photo} alt={creator.handle} />
          : <span className="cp-account-avatar cp-account-initial">{initial}</span>}
        <MqIcon size={15} d="m6 9 6 6 6-6" style={{ opacity: 0.6 }} />
      </button>
      {open && (
        <div className="cp-account-menu" role="menu">
          <div className="cp-account-head">
            {photo
              ? <img className="cp-account-avatar cp-account-avatar-lg" src={photo} alt="" />
              : <span className="cp-account-avatar cp-account-avatar-lg cp-account-initial">{initial}</span>}
            <div className="cp-account-meta">
              <strong>{creator.name}</strong>
              <span>{creator.handle}</span>
            </div>
          </div>
          <a className="cp-account-item" href="https://bemomentiq.com" target="_blank" rel="noreferrer" role="menuitem">Creator dashboard</a>
          <a className="cp-account-item" href="mailto:partnerships@bemomentiq.com" role="menuitem">Payout history</a>
          <a className="cp-account-item" href="mailto:partnerships@bemomentiq.com" role="menuitem">Help &amp; support</a>
        </div>
      )}
    </div>
  );
}

function App() {
  const [creator, setCreator] = React.useState(null);
  const [isDone, setIsDone] = React.useState(false);
  const creatorHandle = creator ? creator.handle : null;

  React.useEffect(() => {
    // Double rAF: only trigger entrance animations once the rendering timeline
    // is really ticking. In a frozen/non-rendered iframe rAF never fires, so the
    // animation never starts and the (visible) base styles show instead.
    let id2;
    const id1 = requestAnimationFrame(() => {
      id2 = requestAnimationFrame(() => { document.documentElement.dataset.mounted = "1"; });
    });
    return () => { cancelAnimationFrame(id1); if (id2) cancelAnimationFrame(id2); };
  }, []);

  return (
    <div className="cp-stage">
      <header className="cp-topnav">
        <div className="cp-topnav-inner">
          <div className="cp-topnav-brand">
            <a href="https://bemomentiq.com" target="_blank" rel="noreferrer"><img className="cp-logo" src="assets/momentiq-lockup.png" alt="MomentIQ" /></a>
            <span className="cp-portal-label">Creator Portal</span>
          </div>
          <nav className="cp-topnav-links">
            <a href="https://bemomentiq.com" target="_blank" rel="noreferrer">Solutions</a>
            <a href="https://bemomentiq.com" target="_blank" rel="noreferrer">Content Platform</a>
            <a href="https://bemomentiq.com" target="_blank" rel="noreferrer">Our Work</a>
            <a href="https://bemomentiq.com" target="_blank" rel="noreferrer">About</a>
            <a className="cp-nav-extra" href="https://bemomentiq.com" target="_blank" rel="noreferrer">TikTok Shop Academy</a>
            <a className="cp-nav-extra" href="https://bemomentiq.com" target="_blank" rel="noreferrer">Competitor Analysis</a>
          </nav>
          <CreatorMenu creator={creator} />
        </div>
      </header>
      <div className="cp-shell">

        <div className="cp-home">
          <header className="cp-hero">
            {creatorHandle && !isDone && (
              <span className="mq-eyebrow">
                <span>MomentIQ <span className="cp-eyebrow-x">×</span> <strong className="cp-eyebrow-handle">{creatorHandle}</strong></span>
              </span>
            )}
            {isDone
              ? <GradientHeadline text="Thank you for making beautiful moments with us" />
              : <GradientHeadline text="Let's Get You Paid" />}
            {!isDone && (
              <p className="cp-hero-sub">
                Drop your post links, tell us where to send the money.
              </p>
            )}
          </header>

          <div className="cp-flow-wrap">
            <PortalFlow onCreator={setCreator} onDone={setIsDone} />
          </div>
        </div>

        <footer style={{ marginTop: 56, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.07)",
          display: "flex", flexWrap: "wrap", gap: 18, justifyContent: "center",
          fontSize: 12, color: "rgba(255,255,255,0.35)" }}>
          <span>MomentIQ · Paid Affiliate Program</span>
          <a href="https://bemomentiq.com" target="_blank" rel="noreferrer" style={{ color: "rgba(255,255,255,0.45)", textDecoration: "none" }}>bemomentiq.com</a>
          <span style={{ opacity: 0.5 }}>|</span>
          <a href="/pay.html" style={{ color: "rgba(255,255,255,0.45)", textDecoration: "none" }}>Team: Pay Console</a>
          <a href="https://bemomentiq.monday.com/boards/6432796645" target="_blank" rel="noreferrer" style={{ color: "rgba(255,255,255,0.45)", textDecoration: "none" }}>Team: Payments board</a>
          <a href="https://platform.bemomentiq.com" target="_blank" rel="noreferrer" style={{ color: "rgba(255,255,255,0.45)", textDecoration: "none" }}>Team: ShopInsights</a>
        </footer>
      </div>
    </div>
  );
}

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