/* AGYST — main app */
const { useState: useStateA, useEffect: useEffectA } = React;

const CFG = (typeof window !== "undefined" && window.AGYST_CFG) || {
  tgBotUrl: "#",
  discordInviteUrl: "#",
  startOnboardingUrl: "/api/web/start_onboarding",
};

function ConnectWalletForm({ className, children, style }) {
  return (
    <form method="post" action={CFG.startOnboardingUrl} style={{ display: "inline" }}>
      <button type="submit" className={className} style={style}>
        {children}
      </button>
    </form>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useStateA(false);
  useEffectA(() => {
    const onS = () => setScrolled(window.scrollY > 8);
    onS();
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  return (
    <nav className="top" style={{ borderBottomColor: scrolled ? "rgba(10,19,32,0.10)" : "transparent" }}>
      <div className="wrap row">
        <a href="/" className="brand"><Wordmark /></a>
        <div className="links">
          <a href="#markets">Markets</a>
          <a href="#clans">Clans</a>
          <a href="#how">How it works</a>
          <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <span className="dot"></span> Status
          </a>
          <a href="#">Docs</a>
        </div>
        <div className="cta">
          <ConnectWalletForm className="btn btn-ghost">Onboard</ConnectWalletForm>
          <a className="btn btn-ink" href={CFG.discordInviteUrl} target="_blank" rel="noopener">Add to Discord <Icon.arrow /></a>
        </div>
      </div>
    </nav>
  );
}

function AnimatedLogo() {
  return (
    <div className="logo-stage">
      <div className="energy-smoke" />
      <div className="logo-wrapper">
        <div className="spin-shell">
          <img
            src="/static/mascot.png"
            alt="AGYST mascot"
            className="logo-anim"
          />
        </div>
      </div>
      <style>{`
        .logo-stage {
          perspective: 1400px;
          transform-style: preserve-3d;
          position: relative;
          width: 300px;
          height: 320px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .logo-wrapper {
          position: relative;
          z-index: 2;
          width: 260px;
          height: 260px;
          display: flex;
          align-items: center;
          justify-content: center;
          animation: logoTravel 6.2s infinite cubic-bezier(.45, 0, .2, 1);
          transform-origin: 50% 52%;
          will-change: transform;
        }
        .spin-shell {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          transform-style: preserve-3d;
          animation: yAxisSpin 6.2s infinite linear;
          will-change: transform;
        }
        .logo-anim {
          width: 100%;
          height: auto;
          object-fit: contain;
          filter:
            drop-shadow(0 0 8px rgba(120, 220, 255, 0.8))
            drop-shadow(0 0 24px rgba(120, 220, 255, 0.5));
          user-select: none;
          pointer-events: none;
          animation: energyPulse 6.2s infinite;
          will-change: filter, opacity;
        }
        .energy-smoke {
          position: absolute;
          z-index: 1;
          left: 50%;
          bottom: 30px;
          width: 220px;
          height: 80px;
          border-radius: 999px;
          transform: translateX(-50%) scale(0.35);
          opacity: 0;
          background:
            radial-gradient(circle at 50% 50%, rgba(155, 235, 255, 0.65), transparent 36%),
            radial-gradient(circle at 30% 55%, rgba(50, 175, 255, 0.5), transparent 42%),
            radial-gradient(circle at 72% 45%, rgba(120, 220, 255, 0.45), transparent 40%);
          filter: blur(14px);
          animation: smokeBurst 6.2s infinite;
          pointer-events: none;
        }
        @keyframes logoTravel {
          0%, 8% { transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1); }
          14% { transform: translate3d(-10px, 0, 0) rotateZ(-10deg) scale(1); }
          22% { transform: translate3d(10px, 0, 0) rotateZ(10deg) scale(1); }
          30% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) scale(1.01); }
          38% { transform: translate3d(0, -10px, 0) rotateZ(0deg) scale(1.05); }
          46% { transform: translate3d(0, -78px, 0) rotateZ(0deg) scale(1.06); }
          58% { transform: translate3d(0, -104px, 0) rotateZ(0deg) scale(1.04); }
          68% { transform: translate3d(0, -52px, 0) rotateZ(0deg) scale(1.02); }
          78% { transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1); }
          84% { transform: translate3d(0, -7px, 0) rotateZ(0deg) scale(1); }
          90%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1); }
        }
        @keyframes yAxisSpin {
          0%, 22% { transform: rotateY(0deg); }
          30% { transform: rotateY(120deg); }
          38% { transform: rotateY(540deg); }
          46% { transform: rotateY(900deg); }
          58% { transform: rotateY(1260deg); }
          68% { transform: rotateY(1500deg); }
          78% { transform: rotateY(1620deg); }
          84% { transform: rotateY(1680deg); }
          90%, 100% { transform: rotateY(1800deg); }
        }
        @keyframes energyPulse {
          0%, 28%, 90%, 100% {
            filter:
              drop-shadow(0 0 8px rgba(120, 220, 255, 0.8))
              drop-shadow(0 0 24px rgba(120, 220, 255, 0.5));
            opacity: 1;
          }
          36%, 58% {
            filter:
              blur(1.4px)
              drop-shadow(0 0 18px rgba(170, 245, 255, 1))
              drop-shadow(0 0 52px rgba(40, 180, 255, 0.98));
            opacity: 0.9;
          }
          68%, 78% {
            filter:
              blur(0.6px)
              drop-shadow(0 0 14px rgba(170, 245, 255, 0.95))
              drop-shadow(0 0 36px rgba(40, 180, 255, 0.75));
            opacity: 1;
          }
        }
        @keyframes smokeBurst {
          0%, 28%, 100% { opacity: 0; transform: translateX(-50%) scale(0.35); }
          36% { opacity: 0.35; transform: translateX(-50%) scale(0.8); }
          46% { opacity: 0.9; transform: translateX(-50%) scale(1.3); }
          60% { opacity: 0.65; transform: translateX(-50%) translateY(10px) scale(1.65); }
          80% { opacity: 0; transform: translateX(-50%) translateY(18px) scale(1.9); }
        }
      `}</style>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow">Powered by HIP-3 · Live on Hyperliquid</div>
          <h1>
            The <em>24/7</em> terminal<br />for on-chain stocks.
          </h1>
          <p className="lede">
            AGYST turns your Discord or Telegram into a trading desk. Tokenized
            NVDA, TSLA, SPY — tradable from a slash command, ranked across your
            clan, settled on Hyperliquid. Markets close at four. We don't.
          </p>
          <div className="ctas">
            <ConnectWalletForm className="btn btn-ink">Onboard now</ConnectWalletForm>
            <a className="btn btn-ghost" href={CFG.discordInviteUrl} target="_blank" rel="noopener"><Icon.discord /> Add to Discord</a>
            <a className="btn btn-ghost" href={CFG.tgBotUrl} target="_blank" rel="noopener"><Icon.telegram /> Open in Telegram</a>
          </div>
          <div className="meta-strip">
            <div className="cell">
              <div className="k">24/7</div>
              <div className="v">Always open</div>
            </div>
            <div className="cell">
              <div className="k">~8s settle</div>
              <div className="v">On Hyperliquid</div>
            </div>
            <div className="cell">
              <div className="k">No custody</div>
              <div className="v">Your wallet, your keys</div>
            </div>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 32, alignItems: "flex-start" }}>
          <div style={{ width: "100%" }}>
            <ChatDemo platform="discord" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Wedge() {
  return (
    <section className="wedge">
      <div className="wrap">
        <div className="wedge-grid">
          <div>
            <div className="eyebrow">The wedge</div>
            <div className="big-stat">
              23<span className="of">/ 30</span>
            </div>
            <p className="stat-cap">
              of the top pairs on Hyperliquid are now <em>HIP-3 tokenized equities</em>.
              The order book moved on-chain. The product layer hasn't — yet.
            </p>
          </div>
          <div>
            <p style={{ fontFamily: "var(--serif)", fontSize: 28, lineHeight: 1.25, letterSpacing: "-0.01em", color: "var(--paper)", margin: 0, maxWidth: 480 }}>
              We're building the vertical app for the TradFi-curious — weekend traders,
              degens who want NVDA exposure after the bell, and clans who'd rather
              compete than scroll.
            </p>
            <div style={{ marginTop: 22, fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".14em", color: "rgba(236,233,226,0.55)" }}>
              ↳ NO VERTICAL PRODUCT EXISTS. WE'RE FIRST.
            </div>
          </div>
        </div>

        <div className="stat-row">
          <div className="cell">
            <div className="k">24h Volume</div>
            <div className="v">$1.42B</div>
            <div className="sub">Across HIP-3 equity pairs on HL</div>
          </div>
          <div className="cell">
            <div className="k">Tradable instruments</div>
            <div className="v">47</div>
            <div className="sub">Single-name equities & index ETFs</div>
          </div>
          <div className="cell">
            <div className="k">Median fill</div>
            <div className="v">8.2s</div>
            <div className="sub">From command to receipt</div>
          </div>
          <div className="cell">
            <div className="k">Open hours</div>
            <div className="v">24 / 7</div>
            <div className="sub">Settles while NYSE sleeps</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Demo() {
  const [platform, setPlatform] = useStateA("discord");
  return (
    <section className="demo" id="how">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Built where you already are</div>
            <h2>Trade like you <em>chat</em>.</h2>
          </div>
          <div className="sec-desc">
            No new app to download. No browser tab to babysit. Drop AGYST into
            your server, type a slash command, get a real fill on Hyperliquid.
            Charts, receipts, leaderboards — all in the channel.
          </div>
        </div>

        <div className="demo-grid">
          <div>
            <div className="switch" role="tablist">
              <button className={platform === "discord" ? "active" : ""} onClick={() => setPlatform("discord")}><Icon.discord /> Discord</button>
              <button className={platform === "telegram" ? "active" : ""} onClick={() => setPlatform("telegram")}><Icon.telegram /> Telegram</button>
            </div>
            <ChatDemo platform={platform} key={platform} />
          </div>
          <div className="demo-bullets">
            <div className="b">
              <div className="num">01</div>
              <div>
                <div className="ttl">Slash commands, real fills.</div>
                <div className="desc">/price, /buy, /sell, /watch, /chart. Each one hits Hyperliquid directly — no IOU, no internal book.</div>
              </div>
            </div>
            <div className="b">
              <div className="num">02</div>
              <div>
                <div className="ttl">Receipts in the channel.</div>
                <div className="desc">Every fill posts publicly to the clan. Your edge is visible. So are your losses.</div>
              </div>
            </div>
            <div className="b">
              <div className="num">03</div>
              <div>
                <div className="ttl">Watchlists & alerts.</div>
                <div className="desc">Tag a ticker and the bot pings the channel on breakouts, halts, and after-hours moves.</div>
              </div>
            </div>
            <div className="b">
              <div className="num">04</div>
              <div>
                <div className="ttl">Wallet-native.</div>
                <div className="desc">Connect once via <span style={{ fontFamily: "var(--mono)", color: "var(--steel)" }}>/onboard</span>. We never touch your keys. Withdrawals settle straight to your address.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Clans() {
  const rows = [
    { rank: 1, av: "RN", name: "ronin.eth",   clan: "RONIN",   pnl: "+$184,210", wr: "68%", up: true },
    { rank: 2, av: "VX", name: "vexley",      clan: "OBELISK", pnl: "+$132,402", wr: "61%", up: true },
    { rank: 3, av: "TK", name: "tanaka_k",    clan: "RONIN",   pnl: "+$98,755",  wr: "57%", up: true },
    { rank: 4, av: "0X", name: "0xparallel",  clan: "MERIDIAN",pnl: "+$74,118",  wr: "54%", up: true },
    { rank: 5, av: "AB", name: "abel.sol",    clan: "OBELISK", pnl: "+$41,902",  wr: "52%", up: true },
    { rank: 6, av: "JU", name: "junipr",      clan: "MERIDIAN",pnl: "-$8,420",   wr: "46%", up: false },
  ];
  return (
    <section className="clans" id="clans">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Clans · Seasons · Edge</div>
            <h2>Your clan is your <em>edge</em>.</h2>
          </div>
          <div className="sec-desc">
            Trading alone is a hobby. Trading with people who watch your screen
            is a job. AGYST organizes traders into clans with shared
            leaderboards, weekly seasons, and prize pools paid in USDC.
          </div>
        </div>

        <div className="clan-grid">
          <div className="clan-card">
            <div className="head">
              <div className="ttl">Season 04 · Leaderboard</div>
              <div className="sub">Live · 14d remaining</div>
            </div>
            {rows.map((r) => (
              <div className="lb-row" key={r.rank}>
                <div className="lb-rank">{String(r.rank).padStart(2, "0")}</div>
                <div className="lb-name">
                  <div className="av">{r.av}</div>
                  <span className="handle">{r.name}</span>
                  <span className="clan-tag">{r.clan}</span>
                </div>
                <div className={`lb-pnl ${r.up ? "" : "dn"}`}>{r.pnl}</div>
                <div className="lb-wr">{r.wr}</div>
              </div>
            ))}
            <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--line-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span className="mono" style={{ fontSize: 11, color: "rgba(10,19,32,0.55)", letterSpacing: ".12em" }}>PRIZE POOL · USDC</span>
              <span className="h-serif" style={{ fontSize: 24 }}>$42,500</span>
            </div>
          </div>

          <div className="clan-features">
            <div className="feat">
              <div className="ic"><Icon.trophy /></div>
              <div className="h">Weekly seasons.</div>
              <div className="d">Two-week cycles. PnL resets. Prize pools fund from a 0.5% taker rebate — no entry fees.</div>
              <div className="tag">PAID IN USDC</div>
            </div>
            <div className="feat">
              <div className="ic"><Icon.flame /></div>
              <div className="h">Streaks & XP.</div>
              <div className="d">Win streaks compound XP. Clans level up. Top clans unlock priority fills and lower fees.</div>
              <div className="tag">ON-CHAIN BADGES</div>
            </div>
            <div className="feat">
              <div className="ic"><Icon.bolt /></div>
              <div className="h">Copy any clan-mate.</div>
              <div className="d">One command mirrors a teammate's position with your own sizing. Performance attribution is transparent.</div>
              <div className="tag">/copy @vexley</div>
            </div>
            <div className="feat">
              <div className="ic"><Icon.shield /></div>
              <div className="h">No custody. Ever.</div>
              <div className="d">Trades route through your connected wallet. AGYST never holds your funds, your keys, or your edge.</div>
              <div className="tag">SELF-CUSTODIED</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Markets() {
  return (
    <section className="markets" id="markets">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Markets · Live now</div>
            <h2>NVDA, TSLA, SPY — <em>after the bell</em>.</h2>
          </div>
          <div className="sec-desc">
            47 single-name equities and index ETFs, traded as HIP-3 perpetuals
            on Hyperliquid. Prices index to real spot via oracle, settle in
            USDC, open 24/7. New tickers added weekly by community vote.
          </div>
        </div>

        <div className="mkt-grid">
          {MARKETS.map((m, i) => (
            <div className="mkt-card" key={m.sym}>
              <div className="top">
                <div>
                  <div className="sym">{m.sym}</div>
                  <div className="nm">{m.name}</div>
                </div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: ".1em", color: "var(--steel)" }}>HIP-3</div>
              </div>
              <div className="px">${m.px.toFixed(2)}</div>
              <div className={`chg ${m.chg >= 0 ? "up" : "dn"}`}>
                {m.chg >= 0 ? "+" : ""}{m.chg.toFixed(2)}% · 24h
              </div>
              <div className="spark">
                <Sparkline seed={m.spark} up={m.chg >= 0} color={m.chg >= 0 ? "#4F8F5C" : "#B05647"} />
              </div>
              <div className="bot">
                <span className="pair">{m.sym}-USDC PERP</span>
                <span className="vol">VOL {m.vol}</span>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <div className="mono" style={{ fontSize: 12, color: "rgba(10,19,32,0.55)", letterSpacing: ".1em" }}>
            SHOWING 12 OF 47 · UPDATES EVERY 250MS
          </div>
          <a className="btn btn-ghost" href="#">Browse all markets <Icon.arrow /></a>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="howitworks">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="eyebrow">From zero to first fill</div>
            <h2>Three steps. <em>Under two minutes.</em></h2>
          </div>
          <div className="sec-desc">
            No KYC walls, no onboarding funnels, no app store waits. If you can
            type, you can trade.
          </div>
        </div>

        <div className="how-grid">
          <div className="step-card">
            <div className="step-no">STEP 01</div>
            <h3>Add the bot.</h3>
            <p>Drop AGYST into your Discord server or open <span className="mono">@agyst_bot</span> on Telegram. Permissions take one click.</p>
            <div className="mock">
              <div><span className="k">$</span> <span className="v">/install agyst</span></div>
              <div><span className="k">→</span> permissions: send_messages, slash_commands</div>
              <div><span className="k">→</span> <span className="v">installed ✓</span></div>
            </div>
          </div>
          <div className="step-card">
            <div className="step-no">STEP 02</div>
            <h3>Connect a wallet.</h3>
            <p>Run <span className="mono">/onboard</span> — the bot sends you a private link. Sign once with any EVM wallet. Funds stay self-custodied.</p>
            <div className="mock">
              <div><span className="k">$</span> <span className="v">/onboard</span></div>
              <div><span className="k">→</span> wallet: 0xA4..91F</div>
              <div><span className="k">→</span> <span className="v">connected · clan: RONIN</span></div>
            </div>
          </div>
          <div className="step-card">
            <div className="step-no">STEP 03</div>
            <h3>Type your first trade.</h3>
            <p>Any ticker, any size, any time. The fill posts to the channel. Your XP starts climbing. Welcome to the floor.</p>
            <div className="mock">
              <div><span className="k">$</span> <span className="v">/buy NVDA 500</span></div>
              <div><span className="k">→</span> filled @ $142.88 · 8.2s</div>
              <div><span className="k">→</span> <span className="v">+12.4 XP · streak: 03</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta" id="cta">
      <div className="wrap cta-inner">
        <div className="eyebrow">Now in open beta</div>
        <h2>Markets close at four.<br /><em>We don't.</em></h2>
        <p className="sub">
          Join the first cohort of clans trading HIP-3 equities on Hyperliquid.
          Free during beta. Priority access for early servers.
        </p>
        <div className="ctas">
          <ConnectWalletForm className="btn btn-on-navy">Onboard now</ConnectWalletForm>
          <a className="btn btn-ghost-on-navy" href={CFG.discordInviteUrl} target="_blank" rel="noopener"><Icon.discord /> Add to Discord</a>
          <a className="btn btn-ghost-on-navy" href={CFG.tgBotUrl} target="_blank" rel="noopener"><Icon.telegram /> Open Telegram bot</a>
        </div>
        <div style={{ marginTop: 32, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", color: "rgba(236,233,226,0.45)" }}>
          NO KYC · NO CUSTODY · NO EMAIL REQUIRED
        </div>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer>
      <div className="wrap">
        <div className="row">
          <div>
            <div className="brand-foot">
              <Wordmark size={13} color="rgba(236,233,226,0.9)" />
              <p>The 24/7 terminal for on-chain stocks. Powered by HIP-3, settled on Hyperliquid, native to Discord and Telegram.</p>
            </div>
          </div>
          <div>
            <h4>Product</h4>
            <ul>
              <li><a href="#markets">Markets</a></li>
              <li><a href="#clans">Clans</a></li>
              <li><a href="#how">Slash commands</a></li>
              <li><a href="#">API</a></li>
            </ul>
          </div>
          <div>
            <h4>Resources</h4>
            <ul>
              <li><a href="#">Docs</a></li>
              <li><a href="#">HIP-3 explainer</a></li>
              <li><a href="#">Risk disclosures</a></li>
              <li><a href="#">Status page</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Discord</a></li>
              <li><a href="#">X / Twitter</a></li>
              <li><a href="#">careers@agyst.com</a></li>
            </ul>
          </div>
        </div>
        <div className="legal">
          <span>© 2026 AGYST LABS · AGYST.COM</span>
          <span>Not financial advice. Perpetuals carry liquidation risk.</span>
        </div>
      </div>
    </footer>
  );
}

function MascotDock() {
  return (
    <div className="mascot-dock" aria-hidden="true">
      <AnimatedLogo />
      <style>{`
        .mascot-dock {
          position: fixed;
          right: 20px;
          bottom: 20px;
          width: 88px;
          height: 88px;
          z-index: 60;
          pointer-events: none;
        }
        .mascot-dock .logo-stage {
          width: 88px !important;
          height: 88px !important;
        }
        .mascot-dock .logo-wrapper,
        .mascot-dock .spin-shell {
          width: 72px !important;
          height: 72px !important;
        }
        .mascot-dock .energy-smoke {
          width: 60px !important;
          height: 22px !important;
          bottom: 8px !important;
        }
        @media (max-width: 480px) {
          .mascot-dock { display: none; }
        }
      `}</style>
    </div>
  );
}

function App() {
  return (
    <>
      <Nav />
      <Hero />
      <TickerTape />
      <Wedge />
      <Demo />
      <Clans />
      <Markets />
      <HowItWorks />
      <CTA />
      <Foot />
      <MascotDock />
    </>
  );
}

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