/* intro.jsx — first-visit orientation + the simple stacked fallback.
 * The intro is one-time and skippable; it's also where someone chooses
 * station-vs-simple. It is never a wall or a captcha.
 */
function IntroOverlay({ onEnter, onSimple }) {
  return (
    <div className="intro-scrim">
      <div className="intro nopan">
        <img src="assets/gold-paws.jpg" className="intro__mark" alt="Nate Builds AI"/>
        <span className="intro__kicker">NATE BUILDS AI</span>
        <h1 className="intro__title">A workshop you walk around, not a page you scroll.</h1>
        <p className="intro__body">
          This is the front door for one person building AI tools in the open.
          The nine stations float on a galaxy you move through — drag to pan,
          scroll or pinch to zoom, double-click empty space to fit it all.
          Closed something? Bring it back from the <strong>WINDOWS</strong> tray, bottom-left.
        </p>
        <div className="intro__actions">
          <button className="btn btn--warm" onClick={onEnter}>Enter the station</button>
          <button className="btn btn--ghost" onClick={onSimple}>Simple view</button>
        </div>
        <p className="intro__foot">You'll only see this once. Simple view is a plain vertical list if the canvas isn't your thing.</p>
      </div>
    </div>
  );
}

function SimpleView({ stations, renderBody, onStationView, theme, onTheme, account, onSignIn, onSignOut }) {
  return (
    <div className="simple allow-scroll">
      <header className="simple__top">
        <div className="simple__brand">
          <img src="assets/gold-paws.jpg" className="simple__mark" alt=""/>
          <div className="col" style={{ gap: 1 }}>
            <span className="simple__title">NATE BUILDS AI</span>
            <span className="simple__sub">one person, building in the open</span>
          </div>
        </div>
        <div className="simple__controls">
          {account
            ? <span className="simple__acct">@{account.handle} · <button className="linkbtn" onClick={onSignOut}>sign out</button></span>
            : <button className="linkbtn" onClick={onSignIn}>sign in</button>}
          <button className="btn btn--ghost btn--sm" onClick={onStationView}>Station view</button>
        </div>
      </header>

      <main className="simple__list">
        {stations.map((s) => (
          <section key={s.id} className="simple__card" style={{ "--ac": s.accent }} data-screen-label={s.title}>
            <div className="simple__card-head">
              <span className="simple__n">{s.n}</span>
              <div className="col" style={{ gap: 2 }}>
                <span className="simple__card-title">{s.title}</span>
                <span className="simple__card-sub">{s.sub}</span>
              </div>
            </div>
            <div className="simple__card-body">{renderBody(s)}</div>
          </section>
        ))}
      </main>
      <footer className="simple__foot">Built in the open. 🐾</footer>
    </div>
  );
}

Object.assign(window, { IntroOverlay, SimpleView });