// node-page.jsx — The Gasless Node page, converted from the standalone
// "The Gasless Node.html" into a React component so it renders client-side
// (no full page reload). Page-specific CSS lives in styles.css (.gn-* rules).
function NodePage() {
  const rootRef = React.useRef(null);

  // nav scrolled state
  React.useEffect(() => {
    const nav = document.getElementById('gn-nav');
    if (!nav) return;
    const onScroll = () => nav.classList.toggle('scrolled', window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // reveal-on-scroll
  React.useEffect(() => {
    const scope = rootRef.current || document;
    const els = Array.from(scope.querySelectorAll('.reveal'));
    const show = (el) => el.classList.add('in');
    let io;
    try {
      io = new IntersectionObserver((entries) => {
        entries.forEach((e) => { if (e.isIntersecting) { show(e.target); io.unobserve(e.target); } });
      }, { threshold: 0.12 });
      els.forEach((el) => io.observe(el));
    } catch (_) {
      els.forEach(show);
    }
    const safety = setTimeout(() => els.forEach(show), 1200);
    return () => { io && io.disconnect(); clearTimeout(safety); };
  }, []);

  // copy node endpoint URLs (final CTA + hero chips)
  React.useEffect(() => {
    const scope = rootRef.current;
    if (!scope) return;
    const handlers = [];
    scope.querySelectorAll('[data-copy]').forEach((btn) => {
      const onClick = () => {
        const box = btn.closest('.gn-url-row') || btn.closest('.gn-hero-ep') || btn.parentElement;
        const url = box.querySelector('[data-url]').textContent.trim();
        const isIcon = btn.classList.contains('gn-hero-ep-copy');
        const done = () => {
          if (isIcon) {
            btn.classList.add('copied');
            setTimeout(() => btn.classList.remove('copied'), 1500);
          } else {
            btn.textContent = 'Copied!';
            setTimeout(() => { btn.textContent = 'Copy URL'; }, 1500);
          }
        };
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(url).then(done).catch(done);
        } else { done(); }
      };
      btn.addEventListener('click', onClick);
      handlers.push([btn, onClick]);
    });
    return () => handlers.forEach(([btn, fn]) => btn.removeEventListener('click', fn));
  }, []);

  const copyIcon = (
    <svg viewBox="0 0 24 24" fill="none">
      <rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="2" />
      <path d="M5 15V5a2 2 0 012-2h8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );

  return (
    <div className="gn-page" ref={rootRef} data-theme="mint">
      {/* ── nav ── */}
      <nav className="nav" id="gn-nav">
        <div className="wrap nav-inner">
          <a className="brand" href="#/" aria-label="Gasless">
            <img src="assets/gasless-logo-dark.svg" alt="Gasless" style={{ height: '44px', width: 'auto', display: 'block' }} />
          </a>
          <div className="nav-links">
            <a href="#/">Gasless Wallet</a>
            <a className="nav-node nav-active" href="#/node" aria-current="page">
              Gasless Node<span className="nav-new">new</span>
            </a>
          </div>
          <div className="nav-cta">
            <a className="btn btn-ghost" href="#widget" style={{ padding: '10px 18px' }}>Connect your wallet</a>
          </div>
        </div>
      </nav>

      <main>
        {/* ── hero ── */}
        <header className="gn-hero" id="top">
          <div className="wrap gn-hero-grid">
            <div className="gn-hero-copy">
              <span className="eyebrow"><span className="dot"></span>The Gasless Node · Tron network</span>
              <h1 style={{ marginTop: '22px' }}>50% off gas<br /><span className="hl">on every Tron transaction.</span></h1>
              <p className="gn-hero-sub">Connect your wallet, top up once, and let the Gasless Node handle the resources. You keep your keys, your funds, and <b style={{ color: 'var(--ink)' }}>50% of every fee</b> in your pocket.</p>
              <div className="gn-hero-actions">
                <a className="btn btn-primary" href="#widget">Connect your wallet
                  <svg viewBox="0 0 24 24" fill="none" style={{ width: '18px', height: '18px' }}><path d="M5 12h14m0 0l-6-6m6 6l-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </a>
                <a className="btn btn-ghost" href="#how">See how it works</a>
              </div>
              <div className="gn-hero-trust"><span className="dot"></span>Non-custodial · Verify with a signature · Your keys never leave your wallet</div>

              <div className="gn-hero-eps">
                <div className="gn-hero-ep">
                  <span className="gn-hero-ep-proto">HTTP</span>
                  <span className="url" data-url>http://tron-node.gaslesswallet.io</span>
                  <button className="gn-hero-ep-copy" type="button" data-copy aria-label="Copy HTTP endpoint">{copyIcon}</button>
                </div>
                <div className="gn-hero-ep">
                  <span className="gn-hero-ep-proto">gRPC</span>
                  <span className="url" data-url>http://grpc-node.gaslesswallet.io</span>
                  <button className="gn-hero-ep-copy" type="button" data-copy aria-label="Copy gRPC endpoint">{copyIcon}</button>
                </div>
              </div>
            </div>

            <div className="gn-stage" id="widget">
              <div className="gn-glow"></div>
              <div className="gn-chip" style={{ top: '-5%', left: '-7%', animationDelay: '0s' }}>
                <span className="ci"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3l7 3v5c0 4.4-3 8.4-7 9.5C8 19.4 5 15.4 5 11V6l7-3z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" /><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg></span>
                <span>Verify with a signature<small>No fee · nothing leaves your wallet</small></span>
              </div>
              <div className="gn-chip" style={{ bottom: '4%', right: '-6%', animationDelay: '1.6s' }}>
                <span className="ci"><svg viewBox="0 0 24 24" fill="none"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" fill="currentColor" /></svg></span>
                <span>Pay 50% of the fee<small>Charged from your balance</small></span>
              </div>

              <div className="gn-widget">
                <div className="gn-widget-bar">
                  <span className="gw-live"></span>
                  <div>
                    <div className="gw-title">Gasless Node — Connect</div>
                    <div className="gw-sub">Live widget · TronLink via Web3</div>
                  </div>
                  <a className="gw-launch" href="https://tronergy-proxy-web.vercel.app/" target="_blank" rel="noopener">Open
                    <svg viewBox="0 0 24 24" fill="none"><path d="M7 17 17 7M9 7h8v8" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </a>
                </div>
                <iframe className="gn-widget-frame" src="https://tronergy-proxy-web.vercel.app/" title="Gasless Node widget" loading="lazy" allow="clipboard-write; clipboard-read"></iframe>
              </div>
            </div>
          </div>
        </header>

        {/* ── stats strip ── */}
        <section className="wrap" style={{ marginTop: '8px' }}>
          <div className="stats reveal">
            <div className="stat"><div className="num">50<span className="u">%</span></div><div className="lbl">Of the network fee — that's all you pay</div></div>
            <div className="stat"><div className="num">0<span className="u"> TRX</span></div><div className="lbl">Leaves your wallet on every transaction</div></div>
            <div className="stat"><div className="num">2<span className="u"> min</span></div><div className="lbl">To connect a wallet you already use</div></div>
            <div className="stat"><div className="num">Any<span className="u"> wallet</span></div><div className="lbl">That supports a custom Tron node</div></div>
          </div>
        </section>

        {/* ── how it works ── */}
        <section className="sec" id="how">
          <div className="wrap">
            <div className="sec-head center reveal">
              <span className="section-tag">How it works</span>
              <h2>Five steps from wallet to half-price fees.</h2>
              <p>Connect through the widget, fund an internal balance, then route your wallet through the Gasless Node. After that, every transaction just costs half — automatically.</p>
            </div>

            <div className="gn-timeline reveal">
              <div className="gn-tl-item">
                <div className="gn-tl-num">1</div>
                <div className="gn-tl-body">
                  <h3><span className="ti"><svg viewBox="0 0 24 24" fill="none"><path d="M3 9.5 12 4l9 5.5M5 11v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg></span>Connect &amp; verify your wallet</h3>
                  <p>Link your TronLink wallet to the widget over Web3. The widget asks you to <b>sign a simple message</b> to verify you own the wallet — it's not a transaction, costs no fee, and nothing leaves your wallet.</p>
                </div>
              </div>
              <div className="gn-tl-item">
                <div className="gn-tl-num">2</div>
                <div className="gn-tl-body">
                  <h3><span className="ti"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2" /><path d="M3 9h18M7 13h6M7 16h4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg></span>Open your dashboard</h3>
                  <p>Once verified, you land in your personal cabinet — manage the node, follow your full <b>transaction history</b>, and track your <b>internal balance</b> in one place.</p>
                </div>
              </div>
              <div className="gn-tl-item">
                <div className="gn-tl-num">3</div>
                <div className="gn-tl-body">
                  <h3><span className="ti"><svg viewBox="0 0 24 24" fill="none"><path d="M5 21V5a2 2 0 012-2h6a2 2 0 012 2v16M3 21h14M15 8h2.5A1.5 1.5 0 0119 9.5V16a1.5 1.5 0 003 0V9l-3-3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg></span>Top up your internal balance</h3>
                  <p>Fund your internal balance with <b>TRX</b>. It exists only to settle transaction fees — your wallet's own TRX and USDT stay untouched.</p>
                </div>
              </div>
              <div className="gn-tl-item">
                <div className="gn-tl-num">4</div>
                <div className="gn-tl-body">
                  <h3><span className="ti"><svg viewBox="0 0 24 24" fill="none"><path d="M4 8h12m0 0l-3.5-3.5M16 8l-3.5 3.5M20 16H8m0 0l3.5-3.5M8 16l3.5 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg></span>Add the Gasless Node to your wallet</h3>
                  <p>Point your wallet at the Gasless Node by pasting the endpoint into its custom-node settings — over <b>HTTP</b> or <b>gRPC</b>. Works with <b>TronLink</b> and <b>TokenPocket</b>.</p>
                </div>
              </div>
              <div className="gn-tl-item gn-tl-item--key">
                <div className="gn-tl-num">5</div>
                <div className="gn-tl-body">
                  <h3><span className="ti"><svg viewBox="0 0 24 24" fill="none"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" fill="currentColor" /></svg></span>Transact — for half the fee</h3>
                  <p>When you sign a transaction in your wallet, it routes through the Gasless Node. Before broadcasting, the node <b>supplies enough Energy &amp; Bandwidth</b> to execute it, then sends it to the blockchain. <b>No TRX leaves your wallet</b> — your internal balance is charged <b>50% below the standard TRON network fee</b>.</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ── the 50% fee mechanism ── */}
        <section className="sec" id="mechanism" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="sec-head center reveal">
              <span className="section-tag">Where the 50% goes</span>
              <h2>Your wallet pays nothing. Your balance pays half.</h2>
              <p>Normally Tron burns TRX from your wallet for every transfer. The Gasless Node steps in first — it supplies the Energy &amp; Bandwidth the transaction needs, then settles the cost from your internal balance at half the standard network fee.</p>
            </div>

            <div className="gn-flow reveal">
              <div className="gn-flow-track">
                <div className="gn-flow-node">
                  <span className="gn-flow-amt muted"><span className="strike">7 TRX</span></span>
                  <span className="gn-flow-lbl">Standard network fee</span>
                  <span className="gn-flow-meta">What a normal node would burn from your wallet</span>
                </div>
                <div className="gn-flow-arrow"><svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0l-6-6m6 6l-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg></div>
                <div className="gn-flow-node gn-flow-node--mid">
                  <span className="gn-flow-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" fill="currentColor" /></svg></span>
                  <span className="gn-flow-lbl">Gasless Node</span>
                  <span className="gn-flow-meta">Supplies Energy &amp; Bandwidth, then splits the cost</span>
                </div>
                <div className="gn-flow-arrow"><svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0l-6-6m6 6l-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg></div>
                <div className="gn-flow-node">
                  <span className="gn-flow-amt win">3.5 TRX</span>
                  <span className="gn-flow-lbl">Charged from your balance</span>
                  <span className="gn-flow-meta">Settled from your internal TRX — never your wallet</span>
                </div>
              </div>
              <p className="gn-flow-copy">Your internal balance is a float linked to your wallet — it exists only to cover fees. <b>Your wallet keeps its full TRX and USDT.</b> Top it up whenever it runs low, and watch every transaction cost half of what it used to.</p>
            </div>
          </div>
        </section>

        {/* ── comparison ── */}
        <section className="sec" id="compare" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="sec-head center reveal">
              <span className="section-tag">Side by side</span>
              <h2>Same wallet. Different node.</h2>
            </div>
            <div className="compare reveal">
              <div className="cmp-head">
                <div className="cmp-cell cmp-label"></div>
                <div className="cmp-cell cmp-others">Default Tron node</div>
                <div className="cmp-cell cmp-us"><span className="cmp-mark"><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg></span>Gasless Node</div>
              </div>
              <div className="cmp-row">
                <div className="cmp-cell cmp-label">Fee per transaction</div>
                <div className="cmp-cell cmp-others">Full network fee</div>
                <div className="cmp-cell cmp-us">50% of the network fee</div>
              </div>
              <div className="cmp-row">
                <div className="cmp-cell cmp-label">TRX leaves your wallet</div>
                <div className="cmp-cell cmp-others"><span className="cmp-x"><svg viewBox="0 0 24 24" fill="none"><path d="M7 7l10 10M17 7L7 17" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" /></svg></span>Every transaction</div>
                <div className="cmp-cell cmp-us"><span className="cmp-check"><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg></span>Never — paid from balance</div>
              </div>
              <div className="cmp-row">
                <div className="cmp-cell cmp-label">Fee optimization</div>
                <div className="cmp-cell cmp-others"><span className="cmp-x"><svg viewBox="0 0 24 24" fill="none"><path d="M7 7l10 10M17 7L7 17" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" /></svg></span>None</div>
                <div className="cmp-cell cmp-us"><span className="cmp-check"><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg></span>Built into the node</div>
              </div>
              <div className="cmp-row">
                <div className="cmp-cell cmp-label">Keep TronLink / TokenPocket</div>
                <div className="cmp-cell cmp-others"><span className="cmp-check" style={{ background: 'var(--bg-2)', color: 'var(--muted)' }}><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg></span>Yes</div>
                <div className="cmp-cell cmp-us"><span className="cmp-check"><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg></span>Yes — unchanged</div>
              </div>
              <div className="cmp-row">
                <div className="cmp-cell cmp-label">Custody of your keys</div>
                <div className="cmp-cell cmp-others">You</div>
                <div className="cmp-cell cmp-us"><span className="cmp-check"><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg></span>You — node never holds keys</div>
              </div>
              <div className="cmp-row">
                <div className="cmp-cell cmp-label">Setup</div>
                <div className="cmp-cell cmp-others">—</div>
                <div className="cmp-cell cmp-us">Connect widget · paste HTTP or gRPC endpoint</div>
              </div>
            </div>
          </div>
        </section>

        {/* ── compatibility ── */}
        <section className="sec" id="compat" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="sec-head center reveal">
              <span className="section-tag">Compatibility</span>
              <h2>Works with the wallets you already trust.</h2>
              <p>If your wallet lets you set a custom Tron node, it works with Gasless. Connect in under two minutes — no new app, no migration.</p>
            </div>
            <div className="gn-compat reveal">
              <span className="gn-wallet"><span className="gw-mark" style={{ background: '#1A6CE7' }}>T</span><span className="gw-name">TronLink</span></span>
              <span className="gn-wallet"><span className="gw-mark" style={{ background: '#2980FE' }}>TP</span><span className="gw-name">TokenPocket</span></span>
              <span className="gn-wallet"><span className="gw-mark" style={{ background: '#3375BB' }}>T</span><span className="gw-name">Trust Wallet</span></span>
              <span className="gn-wallet"><span className="gw-mark" style={{ background: '#11C2D6' }}>im</span><span className="gw-name">imToken</span></span>
              <span className="gn-wallet"><span className="gw-mark" style={{ background: '#0C1512' }}>OKX</span><span className="gw-name">OKX Wallet</span></span>
              <span className="gn-wallet"><span className="gw-mark" style={{ background: '#00F0FF', color: '#0C1512' }}>B</span><span className="gw-name">Bitget Wallet</span></span>
            </div>
          </div>
        </section>

        {/* ── FAQ ── */}
        <section className="sec" id="faq" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="sec-head center reveal">
              <span className="section-tag">Good to know</span>
              <h2>Questions, answered.</h2>
            </div>
            <div className="gn-faq reveal">
              <div className="gn-q">
                <h3><span className="qm"><svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M12 3l7 3v5c0 4.4-3 8.4-7 9.5C8 19.4 5 15.4 5 11V6l7-3z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" /><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg></span>What does signing the verification message do?</h3>
                <p>When you connect, the widget asks your wallet to sign a short text message. It proves you control the wallet address — nothing more. It isn't a transaction, it costs no fee, and it can never move, approve, or spend any of your funds.</p>
              </div>
              <div className="gn-q">
                <h3><span className="qm"><svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" fill="currentColor" /></svg></span>How can the fee be 50% lower?</h3>
                <p>Before your transaction reaches the blockchain, the Gasless Node supplies the Energy and Bandwidth it needs to execute. That removes the resource burn from your wallet — and Gasless settles it from your internal balance at half the standard TRON network fee.</p>
              </div>
              <div className="gn-q">
                <h3><span className="qm"><svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M5 21V5a2 2 0 012-2h6a2 2 0 012 2v16M3 21h14M15 8h2.5A1.5 1.5 0 0119 9.5V16a1.5 1.5 0 003 0V9l-3-3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg></span>What is the internal balance?</h3>
                <p>It's a TRX float held in your dashboard purely to cover transaction fees. You top it up from the widget, and it's drawn down 50% per transaction. Your wallet's own TRX and USDT are never touched.</p>
              </div>
              <div className="gn-q">
                <h3><span className="qm"><svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M4 8h12m0 0l-3.5-3.5M16 8l-3.5 3.5M20 16H8m0 0l3.5-3.5M8 16l3.5 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg></span>HTTP or gRPC — which endpoint do I use?</h3>
                <p>Both reach the same Gasless Node. Use the <b>HTTP</b> endpoint for wallets like TronLink and TokenPocket that accept a custom full-node URL; use <b>gRPC</b> if your tooling or wallet connects over gRPC. Paste whichever your wallet supports into its node settings.</p>
              </div>
              <div className="gn-q">
                <h3><span className="qm"><svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M12 3l7 3v5c0 4.4-3 8.4-7 9.5C8 19.4 5 15.4 5 11V6l7-3z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" /><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg></span>Is it custodial? Can the node touch my funds?</h3>
                <p>No. The Gasless Node is just an RPC endpoint — it routes your signed transactions and pays the resource cost from your internal balance. It never holds your keys and can never move, freeze, or spend the assets in your wallet.</p>
              </div>
            </div>
          </div>
        </section>

        {/* ── final CTA ── */}
        <section className="final" id="connect">
          <div className="wrap">
            <div className="reveal">
              <span className="section-tag">Connect the node</span>
              <h2 style={{ marginTop: '18px' }}>Half the fee. None of the hassle.</h2>
              <p>Connect your wallet in the widget, top up your internal balance, then add one of these endpoints to your wallet's custom-node settings.</p>
              <div className="gn-endpoints">
                <div className="gn-ep">
                  <div className="gn-ep-top">
                    <span className="gn-ep-proto">HTTP</span>
                    <span className="gn-ep-desc">Full-node URL — TronLink, TokenPocket &amp; most wallets</span>
                  </div>
                  <div className="gn-url-row">
                    <span className="url" data-url>http://tron-node.gaslesswallet.io</span>
                    <button className="gn-url-copy" type="button" data-copy>Copy URL</button>
                  </div>
                </div>
                <div className="gn-ep">
                  <div className="gn-ep-top">
                    <span className="gn-ep-proto">gRPC</span>
                    <span className="gn-ep-desc">For wallets &amp; tooling that connect over gRPC</span>
                  </div>
                  <div className="gn-url-row">
                    <span className="url" data-url>http://grpc-node.gaslesswallet.io</span>
                    <button className="gn-url-copy" type="button" data-copy>Copy URL</button>
                  </div>
                </div>
              </div>
              <div className="gn-hero-actions" style={{ justifyContent: 'center', marginTop: '28px' }}>
                <a className="btn btn-primary" href="#widget">Connect your wallet
                  <svg viewBox="0 0 24 24" fill="none" style={{ width: '18px', height: '18px' }}><path d="M5 12h14m0 0l-6-6m6 6l-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </a>
              </div>
              <div style={{ marginTop: '22px', fontSize: '13.5px', color: 'var(--faint)' }}>Tron network · Non-custodial · Works with TronLink, TokenPocket &amp; more</div>
            </div>
          </div>
        </section>
      </main>

      {/* ── footer ── */}
      <footer className="footer">
        <div className="wrap">
          <div className="foot-grid">
            <div className="foot-col">
              <a className="brand" href="#/" aria-label="Gasless" style={{ marginBottom: '16px' }}><img src="assets/gasless-logo-dark.svg" alt="Gasless" style={{ height: '40px', width: 'auto', display: 'block' }} /></a>
              <p style={{ color: 'var(--muted)', fontSize: '15px', maxWidth: '34ch' }}>The Gasless Node brings fee optimization to the wallet you already use — pay half, keep your keys.</p>
            </div>
            <div className="foot-col">
              <h5>Node</h5>
              <a href="#how">How it works</a>
              <a href="#mechanism">The 50% fee</a>
              <a href="#compat">Wallets</a>
              <a href="#faq">FAQ</a>
            </div>
            <div className="foot-col">
              <h5>Gasless</h5>
              <a href="#/">Gasless Wallet</a>
              <a href="#/referral">Referral</a>
              <a href="mailto:info@gaslesswallet.io">Contact</a>
            </div>
            <div className="foot-col">
              <h5>Legal</h5>
              <a href="Terms of Use.html">Terms of Use</a>
              <a href="Privacy Policy.html">Privacy</a>
            </div>
          </div>
          <div className="foot-bottom">
            <span>© 2026 Gasless Wallet. All rights reserved.</span>
            <span className="foot-note">The Gasless Node is a non-custodial RPC service. You remain in sole control of your keys and funds. Crypto assets are volatile and not covered by deposit insurance.</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

window.NodePage = NodePage;
