// Welcome gate · first-launch choice screen (post license activation).
// Renders when state.onboarded === false. Re-triggers after Settings → Clear all.
// Two choices: load the example portfolio (BTC/ETH/SOL/XRP/ICP) OR start with a blank slate.
// "Start empty" requires a second confirmation so a misclick can't strand the user
// on a blank dashboard wondering if the app is broken.

function WelcomeGate({ children }) {
  const { state, loadDemoPortfolio, startEmpty } = useStore();
  const [confirmEmpty, setConfirmEmpty] = React.useState(false);

  if (state.onboarded) return children;

  function pickDemo() { loadDemoPortfolio(); }
  function askEmpty() { setConfirmEmpty(true); }
  function reallyEmpty() { setConfirmEmpty(false); startEmpty(); }

  return (
    <div className="exos-gate exos-welcome">
      <div className="exos-gate-bg" />
      <div className="exos-welcome-card">
        <div className="exos-kicker mono" style={{ marginBottom: 14, color: "var(--accent)" }}>
          ACTIVATED · WELCOME TO EXITOS
        </div>
        <h1 className="exos-gate-title">How would you like to start?</h1>
        <p className="exos-gate-sub">
          Two clean paths. You can switch anytime in Settings.
        </p>

        <div className="exos-welcome-grid">
          <button className="exos-welcome-choice" onClick={pickDemo}>
            <div className="exos-welcome-choice-icon">
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                <rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
                <rect x="12" y="3" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
                <rect x="3" y="12" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
                <rect x="12" y="12" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
              </svg>
            </div>
            <div className="exos-welcome-choice-body">
              <div className="exos-welcome-choice-title">Load the example portfolio</div>
              <div className="exos-welcome-choice-sub">
                Five holdings, pre-built exit ladders, ready to explore.
                Best way to see every feature in action.
              </div>
              <div className="exos-welcome-choice-tags mono">
                BTC · ETH · SOL · XRP · ICP
              </div>
            </div>
            <div className="exos-welcome-choice-cta mono">RECOMMENDED →</div>
          </button>

          <button className="exos-welcome-choice exos-welcome-choice-alt" onClick={askEmpty}>
            <div className="exos-welcome-choice-icon">
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path d="M3 11h16M11 3v16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
              </svg>
            </div>
            <div className="exos-welcome-choice-body">
              <div className="exos-welcome-choice-title">Start empty</div>
              <div className="exos-welcome-choice-sub">
                Skip the example and add your own holdings now.
                Best if you already know your portfolio.
              </div>
              <div className="exos-welcome-choice-tags mono" style={{ opacity: 0.5 }}>
                Blank slate
              </div>
            </div>
            <div className="exos-welcome-choice-cta mono">START FRESH →</div>
          </button>
        </div>

        <div className="exos-gate-foot">
          <div className="exos-gate-foot-row">
            <span className="exos-gate-dot" />
            <span className="mono">your data stays on this device · nothing uploaded</span>
          </div>
        </div>
      </div>

      {confirmEmpty && (
        <div className="exos-welcome-confirm-wrap" onClick={() => setConfirmEmpty(false)}>
          <div className="exos-welcome-confirm" onClick={e => e.stopPropagation()}>
            <h2 className="exos-welcome-confirm-title">Start with nothing?</h2>
            <p className="exos-welcome-confirm-sub">
              You'll land on an empty dashboard. You can always load the example
              later from Settings → Reset to demo.
            </p>
            <div className="exos-welcome-confirm-row">
              <button className="exos-welcome-confirm-btn alt" onClick={() => setConfirmEmpty(false)}>
                Back
              </button>
              <button className="exos-welcome-confirm-btn primary" onClick={reallyEmpty}>
                Yes, start empty
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

const WELCOME_STYLES = `
.exos-welcome-card {
  position: relative; z-index: 1;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 36px 32px 28px;
  width: 100%; max-width: 640px;
  box-shadow: var(--shadow-lg);
  animation: gate-in .4s cubic-bezier(.16,1,.3,1);
}
.exos-welcome-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  border-radius: 18px 18px 0 0;
}
.exos-welcome-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 18px 0 8px;
}
@media (max-width: 620px) {
  .exos-welcome-grid { grid-template-columns: 1fr; }
}
.exos-welcome-choice {
  text-align: left;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s, transform .1s, background .15s;
  font-family: inherit; color: inherit;
}
.exos-welcome-choice:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.exos-welcome-choice:active { transform: translateY(0.5px); }
.exos-welcome-choice-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--accent);
}
.exos-welcome-choice-alt .exos-welcome-choice-icon { color: var(--text-mute); }
.exos-welcome-choice-body { flex: 1; }
.exos-welcome-choice-title {
  font-size: 16px; font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.exos-welcome-choice-sub {
  font-size: 13px; color: var(--text-mute);
  line-height: 1.5; margin-bottom: 10px;
}
.exos-welcome-choice-tags {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.exos-welcome-choice-cta {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.exos-welcome-choice-alt .exos-welcome-choice-cta { color: var(--text-mute); }

.exos-welcome-confirm-wrap {
  position: fixed; inset: 0; z-index: 1100;
  background: oklch(0 0 0 / 0.55);
  display: grid; place-items: center;
  padding: 20px;
  animation: fade-in .15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.exos-welcome-confirm {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 24px 22px 18px;
  max-width: 400px; width: 100%;
  box-shadow: var(--shadow-lg);
  animation: gate-in .25s cubic-bezier(.16,1,.3,1);
}
.exos-welcome-confirm-title {
  margin: 0 0 8px;
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em;
}
.exos-welcome-confirm-sub {
  margin: 0 0 18px;
  font-size: 13px; color: var(--text-mute);
  line-height: 1.5;
}
.exos-welcome-confirm-row {
  display: flex; gap: 8px; justify-content: flex-end;
}
.exos-welcome-confirm-btn {
  height: 38px; padding: 0 16px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: filter .12s, background .12s;
}
.exos-welcome-confirm-btn.alt {
  background: transparent;
  color: var(--text-mute);
  border: 1px solid var(--line);
}
.exos-welcome-confirm-btn.alt:hover { color: var(--text); background: var(--bg-hover); }
.exos-welcome-confirm-btn.primary {
  background: var(--accent); color: white;
  border: 1px solid var(--accent);
}
.exos-welcome-confirm-btn.primary:hover { filter: brightness(1.08); }

@media (max-width: 540px) {
  .exos-welcome-card { padding: 28px 22px 22px; }
}
`;

(function() {
  if (document.getElementById("exos-welcome-styles")) return;
  const t = document.createElement("style");
  t.id = "exos-welcome-styles";
  t.textContent = WELCOME_STYLES;
  document.head.appendChild(t);
})();

window.WelcomeGate = WelcomeGate;