/* scope guard: file-scoped IIFE — see index.html */
(function () {
/* Stoic+ — Coach: one daily read, a single committable action, cold-start.
   Subscriber-only product → no upsell here. */

const { Icons, SectionLabel, Card, PrimaryButton, GlassButton } = window;

const ACTIONS = ["Protect bedtime — lights out by 11", "Train before noon", "No screens after 10pm"];

function CoachScreen({ scenario, committedAction, onCommit, onAsk }) {
  if (scenario === "day1" || scenario === "sparse") {
    const sparse = scenario === "sparse";
    return (
      <div className="screen">
        <SectionLabel style={{ marginBottom: 6 }}>Coach</SectionLabel>
        <h1 style={{ fontSize: 34, fontWeight: 700, letterSpacing: "-0.025em", margin: "0 0 22px", color: "var(--color-text)" }}>{sparse ? "Almost there." : "Day one."}</h1>
        <Card glass style={{ borderRadius: 24, padding: 26, textAlign: "center" }}>
          <div style={{ width: 52, height: 52, borderRadius: 9999, background: "var(--grad-amber)", boxShadow: "var(--glow-amber)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }}><Icons.Message size={24} /></div>
          <p style={{ fontSize: 17, fontWeight: 500, color: "var(--color-text)", margin: "0 0 6px" }}>{sparse ? "Two more check-ins." : "Your Coach is listening."}</p>
          <p style={{ fontSize: 14, color: "var(--color-text-faint)", margin: 0, lineHeight: 1.5 }}>{sparse ? "A few more days and the Coach can read your patterns and name the one thing to fix." : "Log a few days and the Coach gives you a daily read — one clear thing to act on."}</p>
        </Card>
      </div>
    );
  }

  return (
    <div className="screen">
      <SectionLabel style={{ marginBottom: 6 }}>Coach</SectionLabel>
      <h1 style={{ fontSize: 34, fontWeight: 700, letterSpacing: "-0.025em", margin: "0 0 22px", color: "var(--color-text)" }}>One thing.</h1>

      <Card glass style={{ borderRadius: 24, marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
          <div className="glass glass-lit glass-amber" style={{ width: 40, height: 40, borderRadius: 9999, color: "var(--color-amber)", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icons.Message size={19} /></div>
          <SectionLabel>Today's read</SectionLabel>
        </div>
        <p style={{ fontSize: 19, fontWeight: 500, lineHeight: 1.45, margin: 0, color: "var(--color-text)" }}>{(window.__BOOT && window.__BOOT.coach && window.__BOOT.coach.read) || "Your monitor climbs on the days you sleep seven hours. Last night you got five. Protect the next bedtime — everything else follows it."}</p>
      </Card>

      {committedAction ? (
        <Card glass style={{ borderRadius: 20, marginBottom: 16 }}>
          <SectionLabel style={{ marginBottom: 10 }}>Committed for today</SectionLabel>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ width: 34, height: 34, borderRadius: 9999, background: "var(--grad-amber)", color: "#1a1206", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icons.Check size={18} sw={2.6} /></span>
            <span style={{ flex: 1, fontSize: 15, fontWeight: 600, color: "var(--color-text)" }}>{committedAction}</span>
          </div>
          <p style={{ fontSize: 13, color: "var(--color-text-faint)", margin: "12px 0 0", lineHeight: 1.5 }}>We'll check tomorrow whether it moved your Monitor.</p>
        </Card>
      ) : (
        <div style={{ marginBottom: 16 }}>
          <SectionLabel style={{ marginBottom: 12 }}>Commit to one action</SectionLabel>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {((window.__BOOT && window.__BOOT.coach && window.__BOOT.coach.actions) || ACTIONS).map((a) => (
              <button key={a} onClick={() => onCommit(a)} className="glass glass-lit press" style={{ display: "flex", alignItems: "center", gap: 12, borderRadius: 16, padding: "15px 16px", cursor: "pointer", fontFamily: "var(--font-sans)", textAlign: "left", border: "1px solid var(--glass-border)" }}>
                <span style={{ width: 22, height: 22, borderRadius: 9999, border: "2px solid var(--color-text-faint)", flex: "none" }} />
                <span style={{ flex: 1, fontSize: 15, fontWeight: 600, color: "var(--color-text)" }}>{a}</span>
              </button>
            ))}
          </div>
        </div>
      )}

      <GlassButton icon={false} onClick={onAsk}>Ask the Coach</GlassButton>
    </div>
  );
}

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