/* scope guard: file-scoped IIFE — see index.html */
(function () {
/* Stoic+ — Welcome / Intro screen.
   Shows ONCE, right after a paid member's first sign-in, before Today.
   Orientation, not a sales pitch. CTA leads into the first check-in. */

const { GlassButton, SectionLabel } = window;

const STEPS = [
  { icon: "Sliders", label: "Check in",         tab: "Today",   desc: "Rate five signals: energy, sleep, focus, mood, drive." },
  { icon: "Trend",   label: "See your numbers", tab: "Journey", desc: "They roll into one score, out of ten." },
  { icon: "Message", label: "Daily focus",      tab: "Coach",   desc: "Your Coach turns the pattern into one focus." },
];

function WelcomeScreen({ onBegin }) {
  const Wic = window.Icons;
  return (
    <div className="screen welcome" style={{ display: "flex", flexDirection: "column", minHeight: "100%", padding: "8px 4px 0" }}>
      {/* Brand */}
      <div style={{ display: "flex", alignItems: "center", gap: 3, marginBottom: 22 }}>
        <img src="assets/stoic-wordmark-white.png" alt="STOIC" style={{ height: 19, display: "block" }} />
        <span style={{ fontSize: 19, fontWeight: 800, color: "var(--color-amber)", lineHeight: 1 }}>+</span>
      </div>

      {/* Headline + subline */}
      <h1 style={{ fontSize: 33, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.1, margin: "0 0 14px", color: "var(--color-text)" }}>
        Know where you<br />stand. <span style={{ color: "var(--color-amber)" }}>Every day.</span>
      </h1>
      <p style={{ fontSize: 15, fontWeight: 500, lineHeight: 1.5, color: "var(--color-text-muted)", margin: 0, maxWidth: "33ch" }}>
        Check in each day. Your inputs roll into one Live Monitor, scored /10 — and you watch it move over time, with a Coach in your corner.
      </p>

      {/* The explainer — 3 points, mapped to the tabs */}
      <div style={{ display: "flex", flexDirection: "column", gap: 12, margin: "auto 0", padding: "20px 0" }}>
        {STEPS.map((s, i) => {
          const Ico = Wic[s.icon];
          return (
            <div key={s.label} className="welcome-row glass glass-lit" style={{ display: "flex", alignItems: "center", gap: 15, borderRadius: 18, padding: "14px 16px", flex: "none", "--d": (i * 90 + 150) + "ms" }}>
              <span className="glass-lit glass-amber" style={{ width: 44, height: 44, borderRadius: 13, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-amber)", background: "var(--glass-tint-amber)", border: "1px solid rgba(187,176,101,0.28)" }}>
                <Ico size={21} sw={2} />
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8, marginBottom: 4 }}>
                  <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.02em", textTransform: "uppercase", color: "var(--color-text)", whiteSpace: "nowrap" }}>{s.label}</span>
                  <span style={{ fontSize: 12, fontWeight: 600, color: "var(--color-amber)", display: "inline-flex", alignItems: "center", gap: 3, flex: "none", whiteSpace: "nowrap" }}>{s.tab}<Wic.ChevronRight size={12} sw={2.6} /></span>
                </div>
                <div style={{ fontSize: 13, fontWeight: 400, lineHeight: 1.4, color: "var(--color-text-muted)" }}>{s.desc}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* CTA pinned bottom */}
      <div style={{ paddingBottom: 8 }}>
        <GlassButton onClick={onBegin}>Start your first check-in</GlassButton>
      </div>
    </div>
  );
}

Object.assign(window, { WelcomeScreen });
})();