/* entry-gate.jsx — Frosted glass entry/disclaimer overlay */
/* Auto-mounts on every page; dismissed state persists in localStorage. */

(function () {
  const ENTRY_KEY = 'ghost.entry.accepted.v1';

  function EntryGate() {
    const [open, setOpen] = React.useState(() => {
      try { return sessionStorage.getItem(ENTRY_KEY) !== '1'; }
      catch { return true; }
    });
    const [agreed, setAgreed] = React.useState(false);

    React.useEffect(() => {
      if (!open) {
        document.body.style.overflow = '';
        return;
      }
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = ''; };
    }, [open]);

    if (!open) return null;

    const enter = () => {
      if (!agreed) return;
      try { sessionStorage.setItem(ENTRY_KEY, '1'); } catch {}
      try { localStorage.removeItem(ENTRY_KEY); } catch {}
      setOpen(false);
    };

    return (
      <div className="entry-gate" role="dialog" aria-modal="true" aria-labelledby="entry-gate-title">
        <div className="entry-gate-bg" aria-hidden="true">
          <span className="entry-ghost entry-ghost-1" aria-hidden="true">👻</span>
          <span className="entry-ghost entry-ghost-2" aria-hidden="true">👻</span>
          <span className="entry-ghost entry-ghost-3" aria-hidden="true">👻</span>
        </div>
        <div className="entry-gate-card">
          <div className="entry-gate-mark-row">
            <span className="entry-gate-mark" role="img" aria-label="GHOST"></span>
          </div>
          <div className="entry-gate-eyebrow">
            <span className="accent">Trading Framework</span>
          </div>
          <h2 id="entry-gate-title" className="entry-gate-title">
            Read The Chart.<br/>Wait For The Stack.<br/>Take The Trade.
          </h2>
          <p className="entry-gate-deck">
            Ghost is a confluence-based trading framework for TradingView, built for education and decision-support.
            It does not predict price, place orders, or guarantee outcomes. You alone are responsible for every trade.
          </p>
          <ul className="entry-gate-points">
            <li><span className="dot" /> For Educational and Informational Purposes Only</li>
            <li><span className="dot" /> Not Investment, Financial, Tax, or Legal Advice</li>
            <li><span className="dot" /> Past Performance Does Not Guarantee Future Results</li>
            <li><span className="dot" /> Trade at Your Own Risk — Paper Trade First</li>
          </ul>
          <label className={'entry-gate-check' + (agreed ? ' is-on' : '')}>
            <input
              type="checkbox"
              checked={agreed}
              onChange={(e) => setAgreed(e.target.checked)}
            />
            <span className="box" aria-hidden="true"></span>
            <span className="lbl">
              I Understand Ghost Is an Educational Tool — Not Financial Advice — and I Accept the Disclaimer Above.
            </span>
          </label>
          <div className="entry-gate-actions">
            <button
              type="button"
              className={'btn btn-primary entry-gate-cta' + (agreed ? '' : ' is-disabled')}
              disabled={!agreed}
              onClick={enter}
            >
              Enter Site →
            </button>
          </div>
        </div>
      </div>
    );
  }

  // Mount on its own root, appended to body, so every page picks it up
  // just by including this script.
  function mount() {
    if (document.getElementById('entry-gate-root')) return;
    const host = document.createElement('div');
    host.id = 'entry-gate-root';
    document.body.appendChild(host);
    ReactDOM.createRoot(host).render(<EntryGate />);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', mount, { once: true });
  } else {
    mount();
  }
})();