/* global React, StatusBar, AppIcon, APPS */

/* ---------- A · The Pause — clean, classic, warm-but-firm ---------- */
function BlockPause() {
  const suggestions = ["Step outside", "Read a page", "Build something", "Just be bored"];
  return (
    <div className="surface">
      <div className="grain"></div>
      <StatusBar />
      <div className="blk blkA">
        <div className="sun"></div>
        <div className="blk-mark"><span className="d"></span> Daylight</div>
        <div className="inner">
          <div className="tried"><span className="ic">S</span> You reached for YouTube Shorts</div>
          <h1>Let's pause<br/>here.</h1>
          <div className="q">What will you do instead?</div>
          <p className="sub2">The feed will still be there. This minute won't. Pick something real:</p>
          <div className="sugg">
            {suggestions.map((s) => <button key={s}>{s}</button>)}
          </div>
          <div className="enc">
            <span className="dotline"><i></i><i></i><i></i></span>
            You've stepped away 3 times today
          </div>
        </div>
        <div className="blk-foot">
          <div className="req">Genuinely need it? <b>Ask Sarah for 15 minutes</b></div>
        </div>
      </div>
    </div>
  );
}

/* ---------- B · The Horizon — immersive, cinematic dawn ---------- */
function BlockHorizon() {
  return (
    <div className="surface">
      <div className="grain"></div>
      <StatusBar light />
      <div className="blk blkB">
        <div className="stars"></div>
        <div className="hsun"></div>
        <div className="glow"></div>
        <div className="blk-mark"><span className="d"></span> Daylight</div>
        <div className="blkB-badge">☀ 2h 14m reclaimed today</div>
        <div className="body">
          <h1>This door is closed<br/>on purpose.</h1>
          <p className="sub2">Reels can wait. The morning won't. You set this wall when you were thinking clearly — trust that version of you.</p>
          <div className="blkB-actions">
            <button className="pri">Okay, I'm out</button>
            <button className="sec">Ask Sarah for access</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- C · The Breath — novel, deliberate beat ---------- */
function BlockBreath() {
  return (
    <div className="surface">
      <div className="grain"></div>
      <StatusBar light />
      <div className="blk blkC">
        <div className="blk-mark"><span className="d"></span> Daylight</div>
        <div className="inner">
          <div className="ring-wrap">
            <div className="ring1"></div>
            <div className="ring2"></div>
            <div className="core"></div>
            <div className="breath-word">breathe</div>
          </div>
          <h1>Before the feed,<br/>one breath.</h1>
          <p className="trade">Opening X now trades about <b>40 minutes</b> of your afternoon for a feeling that's gone before you've felt it. Spend the minutes on purpose.</p>
          <div className="blkC-actions">
            <button className="pri">I'll do something real</button>
            <button className="sec">Ask Sarah for 15 minutes</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BlockPause, BlockHorizon, BlockBreath });