// Production app — kinetic, scroll-driven joinery.
// V2 defaults baked in: ascend flow, loader on, rail on, dark Stability Fund on,
// market section off, flywheel removed.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    if (typeof console !== "undefined") console.error("Kigumi render error:", error, info);
  }
  render() {
    if (!this.state.hasError) return this.props.children;
    return (
      <div style={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "32px",
        background: "#FAF7F0",
        color: "#1A1613",
        textAlign: "center",
        fontFamily: '"IBM Plex Sans", -apple-system, sans-serif',
      }}>
        <div style={{ maxWidth: "440px" }}>
          <div style={{
            fontFamily: '"IBM Plex Mono", monospace',
            fontSize: "11px",
            letterSpacing: "1.5px",
            color: "#8B8276",
            textTransform: "uppercase",
            marginBottom: "16px",
          }}>
            kigumi
          </div>
          <h1 style={{
            fontFamily: '"IBM Plex Serif", Georgia, serif',
            fontWeight: 600,
            fontSize: "36px",
            lineHeight: 1.1,
            margin: "0 0 20px",
            letterSpacing: "-0.018em",
          }}>
            The page didn't load cleanly<span style={{ color: "#B04A3A" }}>.</span>
          </h1>
          <p style={{ fontSize: "15px", lineHeight: 1.6, color: "#8B8276", margin: "0 0 24px" }}>
            This is usually caused by a browser extension (translate, ad-blocker, or a
            Boost in Arc) modifying the page. Try disabling extensions for this site,
            or open it in a private window.
          </p>
          <a
            href="."
            style={{
              display: "inline-block",
              padding: "12px 20px",
              background: "#1B2845",
              color: "#FAF7F0",
              borderRadius: "4px",
              fontSize: "13px",
              fontWeight: 500,
            }}
          >
            Reload
          </a>
        </div>
      </div>
    );
  }
}

const StickyNav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 8);
    onS();
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  return (
    <header style={{
      position: "fixed",
      top: 0, left: 0, right: 0,
      zIndex: 100,
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      padding: "16px 48px 16px 80px",
      background: scrolled ? "rgba(250, 247, 240, 0.88)" : "transparent",
      backdropFilter: scrolled ? "blur(10px) saturate(140%)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(10px) saturate(140%)" : "none",
      borderBottom: scrolled ? "0.5px solid rgba(26, 22, 19, 0.08)" : "0.5px solid transparent",
      transition: "background 240ms cubic-bezier(.22,1,.36,1), border-color 240ms cubic-bezier(.22,1,.36,1), backdrop-filter 240ms cubic-bezier(.22,1,.36,1)",
    }}>
      <a
        href="#top"
        onClick={(e) => {
          e.preventDefault();
          window.scrollTo({ top: 0, behavior: "smooth" });
        }}
        aria-label="Kigumi — back to top"
        style={{ display: "inline-flex", cursor: "pointer" }}
      >
        <KigumiLockup size={20} />
      </a>
      <nav style={{ display: "flex", gap: "40px", alignItems: "center" }}>
        {["Protocol", "Borrow", "Earn"].map((l) => (
          <a key={l} href={`#${l.toLowerCase()}`} className="km-nav-link">{l}</a>
        ))}
        <a href="#waitlist" className="km-btn km-btn-primary">Join waitlist</a>
      </nav>
    </header>
  );
};

const App = () => {
  const [loading, setLoading] = React.useState(true);

  return (
    <>
      {loading && (
        <LoaderScreen
          onDone={() => setLoading(false)}
          duration={1800}
        />
      )}

      <div className="km-root">
        <ScrollProgressRail />
        <StickyNav />

        <main>
          <Hero />
          <Problem />
          <HowItWorks />
          <FourWins />
          <StabilityFund />
          <Waitlist />
          <Footer />
        </main>
      </div>
    </>
  );
};

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