// Account
function AccountScreen({ nav, onSignOut, onReset }) {
  return (
    <section className="account-page container">
      <div className="eyebrow" style={{ marginBottom: 10 }}>Account</div>
      <h1>Your account</h1>
      <div className="account-card">
        <div className="account-row">
          <span className="k">Email</span>
          <span className="v inline">
            {COURSE.creator.email}
            <Chip tone="soon" className="chip">Demo</Chip>
          </span>
          <span />
        </div>
        <div className="account-row">
          <span className="k">Signed in with</span>
          <span className="v inline"><Icon.Google size={16}/> Google</span>
          <span />
        </div>
        <div className="account-row">
          <span className="k">Purchases</span>
          <span className="v">1 module · Your Body as a Compass</span>
          <a className="btn-link">View history</a>
        </div>
        <div className="account-actions">
          <Button variant="ghost" onClick={onReset}>Reset demo data</Button>
          <a className="btn-link" onClick={onSignOut}>Sign out</a>
        </div>
      </div>
      <div className="account-note">Demo accounts can reset purchases and watch progress anytime.</div>
    </section>
  );
}

// Demo purchase modal
function BuyModal({ moduleId, onCancel, onConfirm }) {
  return (
    <div className="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="buy-title" onClick={onCancel}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>Demo purchase</div>
        <h3 id="buy-title">You're in preview mode.</h3>
        <p>You're signed in as a demo account. No card is required. Confirming will unlock this module in your library immediately.</p>
        <div className="modal-actions">
          <Button variant="terra" onClick={onConfirm}>Confirm demo purchase</Button>
          <Button variant="ghost" onClick={onCancel}>Cancel</Button>
        </div>
      </div>
    </div>
  );
}

function SuccessScreen({ nav, moduleId }) {
  const [count, setCount] = React.useState(4);
  React.useEffect(() => {
    if (count <= 0) { nav(`/v/meeting-body-wisdom`); return; }
    const t = setTimeout(() => setCount((c) => c - 1), 1000);
    return () => clearTimeout(t);
  }, [count]);
  const m = findModule(moduleId || "body-compass").module;
  return (
    <section className="success-page container">
      <div className="check"><Icon.Check size={32}/></div>
      <h1>You're in.</h1>
      <p className="sub"><em style={{ fontStyle: "italic" }}>{m.title}</em> is now in your library.</p>
      <div className="countdown">Taking you to the first video · {count}s</div>
      <Button variant="ghost" onClick={() => nav(`/m/${m.id}`)}>Or go to the module →</Button>
    </section>
  );
}

Object.assign(window, { AccountScreen, BuyModal, SuccessScreen });