/* Dulius Web UI Kit — orchestrator */

function WelcomeToast({ onClose }) {
  return (
    <div className="wtoast-wrap" onClick={onClose}>
      <div className="wtoast" onClick={(e) => e.stopPropagation()}>
        <div className="wtoast-icon"><WIcon name="party-popper" size={28} /></div>
        <div className="wtoast-t">You're in.</div>
        <div className="wtoast-s">Your funding score is ready. Open the Dulius dashboard to see your gauge, factors, and matched offers.</div>
        <a className="wbtn wbtn-primary wbtn-lg" href="/dashboard">Open my dashboard <WIcon name="arrow-right" size={20} /></a>
        <button className="wtoast-x" onClick={onClose}>Back to site</button>
      </div>
    </div>
  );
}

function WebApp() {
  const [auth, setAuth] = React.useState(null);   // null | "login"  (signup routes to onboarding)
  const [welcome, setWelcome] = React.useState(false);
  const [learn, setLearn] = React.useState(null); // footer topic

  // Signup === the onboarding flow (its Step 1 already creates the account).
  // Only "login" opens the modal, so we don't duplicate account creation.
  const onAuth = (mode) => {
    if (mode === "login") setAuth("login");
    else window.location.href = "/signup";
  };

  React.useEffect(() => {
    document.body.style.overflow = (auth || welcome || learn) ? "hidden" : "";
  }, [auth, welcome, learn]);

  return (
    <div className="wsite">
      <WNav onAuth={onAuth} />
      <WHero onAuth={onAuth} />
      <WLogos />
      <WWho />
      <WHow />
      <WImpact />
      <WBands />
      <WTestimonials />
      <WPricing onAuth={onAuth} />
      <WFAQ />
      <WCTA onAuth={onAuth} />
      <WFooter onLearn={setLearn} />

      {auth && (
        <div className="wmodal" onClick={(e) => { if (e.target.classList.contains("wmodal")) setAuth(null); }}>
          <WAuth mode="login" onClose={() => setAuth(null)} onDone={() => { setAuth(null); window.location.href = "/dashboard"; }} onSignup={() => { setAuth(null); window.location.href = "/signup"; }} />
        </div>
      )}
      {welcome && <WelcomeToast onClose={() => setWelcome(false)} />}
      {learn && <LearnMoreModal topic={learn} onClose={() => setLearn(null)} onAuth={onAuth} />}
    </div>
  );
}

/* Error boundary — never let a render hiccup blank the marketing site. */
class WebBoundary extends React.Component {
  constructor(p) { super(p); this.state = { err: null }; }
  static getDerivedStateFromError(err) { return { err }; }
  componentDidCatch(err, info) { console.error("[web] render error:", err, info); }
  render() {
    if (this.state.err) {
      return (
        <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, fontFamily: "var(--font-sans, system-ui)", textAlign: "center" }}>
          <div style={{ maxWidth: 420 }}>
            <h1 style={{ fontSize: 24, fontWeight: 800, color: "#1B5C2E", margin: "0 0 10px" }}>Dulius</h1>
            <p style={{ color: "#555", lineHeight: 1.6, margin: "0 0 20px" }}>Something interrupted the page. Refreshing usually fixes it.</p>
            <button onClick={() => window.location.reload()} style={{ background: "#2DBD6E", color: "#08311A", fontWeight: 700, border: "none", borderRadius: 12, padding: "12px 22px", cursor: "pointer", fontSize: 15 }}>Reload</button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

(function mountWeb() {
  try {
    ReactDOM.createRoot(document.getElementById("root")).render(
      <WebBoundary><WebApp /></WebBoundary>
    );
  } catch (e) {
    console.error("[web] mount failed:", e);
    document.getElementById("root").innerHTML =
      '<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-family:system-ui"><div><h1 style="font-size:24px;color:#1B5C2E">Dulius</h1><p style="color:#555">Please refresh the page.</p><button onclick="location.reload()" style="background:#2DBD6E;color:#08311A;font-weight:700;border:none;border-radius:12px;padding:12px 22px;cursor:pointer">Reload</button></div></div>';
  }
})();