/* ASCX Box Walkthrough — sections 2: disciplines, the climb / protocol
   stacking, and the day card up close. Exposes window.W2. text/babel. */
(function () {
const NS = window.ASCXDesignSystem_77a68b;
const { Button, Eyebrow } = NS;
const LV = window.LV;
const { PillarGlyph, MarkSeal } = window.LVUI;
const { Wrap } = window.W1;

/* ---------- shared hotspot figure ----------
   Hovering a dot highlights it (and its row in the legend); TAPPING one opens a
   popup with that item's description. The popup closes on Escape, on its ×, and
   on a tap anywhere off it — the scrim sits under the dots (z-index 2 vs 3) so
   one tap can move straight from one dot to the next. */
function HotFig({ img, alt, dots, active, setActive, ltDots, className, style, open, setOpen }) {
  const isOpen = open !== null && open !== undefined && open > -1;
  React.useEffect(() => {
    if (!isOpen) return undefined;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(-1); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [isOpen]);
  const sel = isOpen ? dots[open] : null;
  return (
    <div className={className} style={style}>
      <img src={img} alt={alt} />
      {dots.map((d, i) => (
        <button key={i} type="button"
          className={'hdot' + (ltDots ? ' lt-dot' : '') + (active === i || open === i ? ' on' : '')}
          style={{ left: d.x + '%', top: d.y + '%' }}
          onMouseEnter={() => setActive(i)} onFocus={() => setActive(i)}
          onClick={() => { setActive(i); setOpen(open === i ? -1 : i); }}
          aria-expanded={open === i} aria-label={d.t}>{i + 1}</button>
      ))}
      {sel && (
        <React.Fragment>
          <div className="hpop-scrim" onClick={() => setOpen(-1)} />
          <div className={'hpop' + (ltDots ? ' lt-pop' : '')} role="dialog" aria-label={sel.t}
            style={sel.y < 52 ? { top: 'calc(' + sel.y + '% + 26px)' } : { bottom: 'calc(' + (100 - sel.y) + '% + 26px)' }}>
            <button type="button" className="hpop-x" onClick={() => setOpen(-1)} aria-label="Close">×</button>
            <div className="hpop-n">{'0' + (open + 1)}</div>
            <div className="hpop-t">{sel.t}</div>
            <p className="hpop-d">{sel.d}</p>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

/* Legend row shared by both hotspot figures. One line on a phone (number +
   title); tapping it drops the description in place. Full text at 768px up. */
function HotList({ dots, act, setAct, exp, setExp, className, itemClass }) {
  return (
    <div className={className}>
      {dots.map((d, i) => (
        <button key={i} type="button"
          className={itemClass + (act === i ? ' on' : '') + (exp === i ? ' exp' : '')}
          onMouseEnter={() => setAct(i)}
          onClick={() => { setAct(i); setExp(exp === i ? -1 : i); }}
          aria-expanded={exp === i}>
          <span className="hl-row">
            <span className="ai-n">{'0' + (i + 1)}</span>
            <span className="ai-t">{d.t}</span>
            <span className="hl-pm" aria-hidden="true">{exp === i ? '–' : '+'}</span>
          </span>
          <span className="ai-d">{d.d}</span>
        </button>
      ))}
    </div>
  );
}

/* ---------- Ch 04 — the three disciplines (WHITE) ---------- */
/* Definitions only — the actual protocols per phase live in the Climb table. */
const PIL = [
  { key: 'body', name: 'Body', head: 'Physical discipline and energy.', line: 'Train, fuel and recover on a standard, not a mood.' },
  { key: 'mind', name: 'Mind', head: 'Focus and attention.', line: 'One task at a time, and less input competing for it.' },
  { key: 'domain', name: 'Domain', head: 'Environment and responsibilities.', line: 'Close your open loops and lead your own life.' },
];
function Disciplines() {
  return (
    <section id="system" className="lp-section" data-screen-label="Body Mind Domain" style={{ borderBottom: '1px solid var(--border-hairline)' }}>
      <Wrap>
        <div className="reveal sec-head">
          <Eyebrow>04 — The system</Eyebrow>
          <h2 className="lp-h2"><span className="red">Master</span><br />Body. Mind. Domain.</h2>
          {/* this section owns the vocabulary — the three disciplines, what a
              protocol is, and your own goals. How protocols accumulate is the
              next section's job, so it is not explained here. */}
          <p className="lp-lead sec-lead">
            ASCX trains three disciplines: Body, Mind and Domain. <span className="lp-strong">Master each one and you take control of your own life.</span> The daily work is made of <span className="lp-strong">protocols</span>: small, specific commitments you check off the card. On Day 00 you write your own personal goal in each discipline, <span className="lp-strong">held for all thirty days</span> alongside the ASCX protocols. The system is built to set the standard; you decide what direction it takes you.
          </p>
        </div>
        {/* one row per discipline: the mark and its name hold the left column,
            what it covers runs across the row beside it. */}
        <div className="pil-grid reveal">
          {PIL.map((p) => (
            <div className="pil-row" key={p.key}>
              <div className="pil-cell pil-head">
                <span className="pil-glyph"><PillarGlyph name={p.key} size={38} color="#cfcfcf" /></span>
                <span className="pil-name">{p.name}</span>
              </div>
              <div className="pil-cell"><p className="pil-line"><span className="lp-strong">{p.head}</span> {p.line}</p></div>
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

/* ---------- Ch 05 — the climb / habit stacking (DARK) ---------- */
const STACK = [
  { roman: 'I', name: 'Stabilize', days: 'Days 1–7', enemy: 'Boredom',
    d: 'Order first: a fixed wake time, a clean space, less screen time, attention on what you eat. Take away the distraction and boredom shows up. Sitting in it is the point of week one.',
    p: { body: 'Fixed wake time · bed made · daily caloric limit', mind: 'No phone 30 min after waking + before sleep', domain: 'Bedroom + workspace reset before sleep' } },
  { roman: 'II', name: 'Install', days: 'Days 8–14', enemy: 'Friction',
    d: 'The routine holds, so you build on it: real training, a protein target, deep work, time-blocked days. Once it is scheduled you stop renegotiating it every morning.',
    p: { body: 'Weekly training schedule · 30 min activity · protein target', mind: '60 min deep work · one task, zero distractions', domain: 'Time-block your day before it begins' } },
  { roman: 'III', name: 'Stress', days: 'Days 15–21', enemy: 'Emotion',
    d: 'Now you load it. Controlled discomfort, the task you have been avoiding, one System Leak cut for good. This week tests whether the systems hold when you do not want to.',
    p: { body: 'One discomfort selection daily · eliminate one System Leak', mind: 'Avoided task initiated before 12 PM · 30 min minimum', domain: 'Identify and close one open loop daily' } },
  { roman: 'IV', name: 'Embody', days: 'Days 22–30', enemy: 'Complacency',
    d: 'The last stretch. Precision, recovery, and doing something for someone else. Run daily until the protocols are just how you operate.',
    p: { body: 'Morning ritual: outdoor exposure + mobility · track all macros', mind: 'Daily identity line: “I am the kind of person who…”', domain: 'One act of invisible service, daily' } },
];
function Climb() {
  /* 0 = Phase I, so the section opens on Stabilize where the challenge starts. */
  const [ph, setPh] = React.useState(0);
  const Lock = () => <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square"><rect x="5" y="11" width="14" height="9" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></svg>;
  return (
    <section id="climb" className="lp-section" data-screen-label="The Climb — phases" style={{ borderBottom: '1px solid var(--border-hairline)' }}>
      <Wrap>
        <div className="reveal sec-head">
          <Eyebrow>05 — The climb</Eyebrow>
          <h2 className="lp-h2">Four phases. Protocols<br /><span className="red">stack as you climb.</span></h2>
          {/* picks up where the disciplines left off: not what a protocol is,
              but how many arrive when, and why they accumulate. */}
          <p className="lp-lead sec-lead">
            You do not run all twelve protocols on Day 01. Each week-long phase installs three more, one per discipline, and nothing from the earlier phases <span className="lp-strong">retires</span>, so by Phase IV you are running the whole stack every day. Select a phase to see it build. <span className="lp-strong">See the full Phase I now.</span>
          </p>
        </div>
        <div className="ph-tabs reveal" role="tablist">
          {STACK.map((s, i) => (
            <button key={s.roman} type="button" role="tab" aria-selected={ph === i} className={'ph-tab' + (ph === i ? ' on' : '')} onClick={() => setPh(i)}>
              <div className="pt-r">PHASE {s.roman}</div>
              <div className="pt-n">{s.name}</div>
              <div className="pt-d">{s.days}</div>
            </button>
          ))}
        </div>
        <div className="stack-panel reveal">
          <div className="stack-viz" aria-label="Protocol stack by phase">
            <div className="stack-meter" role="tablist" aria-label="Cumulative protocols by phase">
              {STACK.map((s, i) => (
                <button key={i} type="button" className={'sm-step' + (i <= ph ? ' act' : '') + (i === ph ? ' cur' : '')} onClick={() => setPh(i)} aria-label={'Phase ' + s.roman + ', ' + (i + 1) * 3 + ' protocols active'}>
                  <span className="sm-n">{(i + 1) * 3}</span>
                  <span className="sm-bar" style={{ '--h': (18 + i * 26) + 'px' }} />
                  <span className="sm-k">{s.roman}</span>
                </button>
              ))}
            </div>
            <div className="sm-cap">Cumulative protocols by phase</div>
            {/* always I → IV, top to bottom, whichever phase is selected, so the
                stack reads in the order you climb it. Phases you have not
                reached are removed rather than hidden, so nothing reserves
                empty space above or below the layers. */}
            {[0, 1, 2, 3].map((i) => {
              const s = STACK[i];
              const off = i > ph;
              return (
                <div key={i} className={'lay' + (off ? ' off' : '') + (i === ph ? ' cur' : '')} style={{ transitionDelay: off ? '0s' : i * 60 + 'ms' }}>
                  {/* every phase row carries the same chip and the same
                      lock slot — Phase I's slot is empty, not missing, so the
                      four headers stay on one grid */}
                  <div className="lay-head">
                    <span className="lh-t"><span className="plus">+3</span>Phase {s.roman} — {s.name}</span>
                    <span className="lh-s">
                      {i === ph ? 'comes online' : 'still active'}
                      {i > 0 ? <Lock /> : <span className="lock-slot" aria-hidden="true" />}
                    </span>
                  </div>
                  <div className="lay-rows">
                    {['body', 'mind', 'domain'].map((k) => (
                      <div className="lay-p" key={k}>
                        <div className="lp-k"><PillarGlyph name={k} size={13} color="#8f8f8f" />{k}</div>
                        <div className={'lp-v' + (i > 0 ? ' blurred' : '')} aria-hidden={i > 0}>{s.p[k]}</div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Wrap>
    </section>
  );
}

/* ---------- Ch 03 — the day card, up close (LIGHT) ---------- */
const CARD_DOTS = [
  { x: 34, y: 10.5, t: 'The day number', d: 'Day 01 to Day 30. Follow your progress throughout the challenge.' },
  { x: 88, y: 19.5, t: 'The Spark', d: 'One line that sets today’s tone.' },
  { x: 7, y: 28, t: 'The Standard', d: 'A daily reminder to live by the Ascend X Standard.' },
  { x: 7, y: 43, t: 'ASCX protocols', d: 'The phase-stacked system protocols: Body, Mind, Domain. Every phase adds three more on top of the ones you already run.' },
  { x: 49, y: 43, t: 'Personal protocols', d: 'Your own three goals, written on Day 00 and run every day of the challenge in addition to the Ascend X protocols.' },
  { x: 36, y: 58.5, t: 'The Ascent', d: 'The day’s specific task, built to challenge you in a new way. No two Ascents repeat. The protocols build your daily discipline; the Ascent teaches you something about yourself.' },
  { x: 26, y: 79, t: 'The Mark', d: 'Today’s proof. Something meaningful from the day that stuck with you. How did you leave your mark on the day?' },
];
function DayCard() {
  const [act, setAct] = React.useState(0);
  const [open, setOpen] = React.useState(-1);
  const [exp, setExp] = React.useState(-1);
  return (
    <section id="cards" className="lp-section lt" data-screen-label="The Day Card">
      <Wrap>
        <div className="reveal sec-head">
          <Eyebrow>03 — The daily work</Eyebrow>
          <h2 className="lp-h2">The card that<br /><span className="red">runs your day.</span></h2>
          <p className="lp-lead sec-lead">
            The Standard, every protocol you have installed so far, and the day&rsquo;s mission are printed on a single card. You work down it through the day, checking off each line as you finish it.
          </p>
        </div>
        <div className="ana-grid">
          <div className="reveal">
            <HotFig className="ana-fig" img="landing/img/card-front-cut.webp" alt="ASCX Day 01 card, annotated"
              dots={CARD_DOTS} active={act} setActive={setAct} open={open} setOpen={setOpen} />
          </div>
          <HotList className="ana-list reveal" itemClass="ana-item"
            dots={CARD_DOTS} act={act} setAct={setAct} exp={exp} setExp={setExp} />
        </div>
        <div className="ana-back reveal">
          <img src="landing/img/card-back-cut.webp" alt="Day card back — QR code, scan to log" />
          <div>
            <div style={{ fontSize: 11, letterSpacing: '.24em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700 }}>The back of every card</div>
            <div style={{ marginTop: 10, fontSize: 20, fontWeight: 600, color: 'var(--text-strong)', letterSpacing: '-.01em' }}>Scan to log the day.</div>
            <p className="card-back-note" style={{ margin: '10px 0 0', color: 'var(--text-muted)', lineHeight: 1.65, maxWidth: 560 }}>
              The QR opens that day on the ASCX platform: log your completion and watch your streak and Marks build.
            </p>
          </div>
        </div>
        {/* what a miss costs — the rules that govern the logging above */}
        <div className="rules2 rules-solo reveal">
          <div className="rule-c">
            <div className="rule-k">Deviations</div>
            <div className="rule-t">One mistake is a Deviation.</div>
            <div className="rule-d">Miss a protocol, an Ascent, the Standard, or your daily log and you record a Deviation: what happened, why, and how you will prevent it. The challenge is built to teach you how to correct course.</div>
          </div>
          <div className="rule-c">
            <div className="rule-k">Hard Reset</div>
            <div className="rule-t">Deviate twice and you restart at Day 01.</div>
            <div className="rule-d">Any two deviations on consecutive days, or missing the same action twice at any time. One slip is a mistake. Two is a new pattern.</div>
          </div>
        </div>
      </Wrap>
    </section>
  );
}

window.W2 = { Disciplines, Climb, DayCard, HotFig, HotList };
})();