/* ASCX Box Walkthrough — sections 3: inside the box (white), vs 75 Hard (white),
   Marks of Mastery (dark), pricing, FAQ (white), final CTA, footer. Exposes window.W3. text/babel. */
(function () {
const NS = window.ASCXDesignSystem_77a68b;
const { Button, Logo, Eyebrow, Badge } = NS;
const LV = window.LV;
const { MarkSeal } = window.LVUI;
const { Wrap } = window.W1;
const { HotFig, HotList } = window.W2;

/* ---------- Ch 02 — inside the box (WHITE) ---------- */
/* Dots sit just off the corner or edge of the piece they name — in the dark
   background between items — rather than centred on it, so nothing they point
   at is covered. x/y are percentages of the photo. */
const BOX_DOTS = [
  { x: 27, y: 6, t: 'The box', d: 'The premium box that houses the entire system, including everything you see below.' },
  { x: 36, y: 33, t: 'The Standard plaque', d: 'The Standard is the culture of Ascend X. You sign your name to it once, and commit to living that way every day.' },
  { x: 5.5, y: 17, t: 'Day 00 · Start Here', d: 'The first card you pull. Five setup steps to run before Day 01.' },
  { x: 78, y: 6, t: '30 daily cards', d: 'Everything you need for the day, organized on one card. Scan it when you finish to log your progress.' },
  { x: 31, y: 60, t: 'Goal cards ×3', d: 'Body, Mind, Domain. You write one identity, benchmark, and protocol for each on Day 00. The Codex shows you how.' },
  { x: 72, y: 60, t: 'Reflection cards ×4', d: 'Pulled as you clear each phase, a short review before the next set of protocols starts.' },
  { x: 52, y: 60, t: 'Two cheat sheets', d: 'The phase timeline and protocol grid, plus the Daily Loop and the rules. Your at-a-glance daily reference.' },
  { x: 5, y: 79, t: 'The Codex', d: '84 pages: orientation, the four phases, every worksheet and log. A living reference you come back to throughout the thirty days.' },
];
function InsideBox() {
  /* 0 = the first dot, so "01 · The box" is highlighted on arrival. */
  const [act, setAct] = React.useState(0);
  const [open, setOpen] = React.useState(-1);
  const [exp, setExp] = React.useState(-1);
  return (
    <section id="box" className="lp-section lt" data-screen-label="Inside the box">
      <Wrap>
        <div className="reveal sec-head">
          <Eyebrow>02 — The box</Eyebrow>
          <h2 className="lp-h2">Inside <span className="red">the box.</span></h2>
          <p className="lp-lead sec-lead">
            The system is laid out on individual cards, one job each, arranged in the order you use them. Open the box and the thirty days are already organized for you.
          </p>
        </div>
        <p className="fig-note fig-hint">Select a number on the photo to read what it is</p>
        {/* dark dots (no ltDots) — the photo itself is black, so they match the day card */}
        <HotFig className="shot-fig reveal" img="landing/img/box-showcase.webp" alt="Everything inside the ASCX box, laid out"
          dots={BOX_DOTS} active={act} setActive={setAct} open={open} setOpen={setOpen} />
        <HotList className="shot-legend reveal" itemClass="sl-item"
          dots={BOX_DOTS} act={act} setAct={setAct} exp={exp} setExp={setExp} />
      </Wrap>
    </section>
  );
}

/* ---------- Ch 06 — vs 75 Hard (WHITE) ---------- */
const CMP = [
  ['What it is', 'A mental-toughness test, 75 days of hard things', 'A discipline system, a code you sign and live by'],
  ['The structure', 'The same five tasks, every day, for 75 days', 'Four phases that stack protocols week by week, built to change you'],
  ['What you hold', 'A checklist you keep in your head or an app', 'A physical box: the Codex, 38 cards, an engraved Standard'],
  ['Miss a day', 'Back to Day 1, no questions', 'Deviation logs teach you to correct the behavior so you stop repeating the same mistake'],
  ['Who climbs with you', 'You, alone', 'Accountability partners, your cohort, and the entire ASCX community'],
  ['Day after it ends', 'It’s over. Day 76 you’re back where you started', 'The habits stay installed, and the Marks you earned prove it'],
];
function Versus() {
  return (
    <section className="lp-section lt" data-screen-label="ASCX vs 75 Hard" style={{ paddingTop: 100 }}>
      <Wrap>
        <div className="reveal sec-head">
          <Eyebrow>06 — 75 Hard vs ASCX</Eyebrow>
          <h2 className="lp-h2">75 Hard proves you can grind.<br /><span className="red">ASCX changes who you are.</span></h2>
          <p className="lp-lead sec-lead">
            Respect to 75 Hard. It showed millions they could endure. But a test you survive is not the same as a habit you keep.
          </p>
        </div>
        <div className="cmp reveal">
          <div className="cmp-row cmp-h"><div className="cmp-cell"></div><div className="cmp-cell">75 Hard</div><div className="cmp-cell x">ASCX</div></div>
          {CMP.map((r, i) => (
            <div className="cmp-row" key={i}>
              <div className="cmp-cell">{r[0]}</div>
              <div className="cmp-cell h75">{r[1]}</div>
              <div className="cmp-cell x">{r[2]}</div>
            </div>
          ))}
        </div>
        <p className="reveal versus-note" style={{ margin: '26px 0 0', color: 'var(--text-muted)' }}>
          Finished 75 Hard? You already know you can do hard things. ASCX is about keeping them.
        </p>
      </Wrap>
    </section>
  );
}

/* ---------- Ch 07 — Marks of Mastery (DARK) ---------- */
function RewardGallery({ r, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, []);
  if (!r) return null;
  const shots = r.shots || [[r.photo, r.item]];
  return (
    <div className="rl-overlay" onMouseDown={onClose}>
      <div className="rl-panel" onMouseDown={(e) => e.stopPropagation()}>
        <button className="rl-close" type="button" onClick={onClose} aria-label="Close">×</button>
        <div className="rl-head">
          <MarkSeal n={r.mark} size={46} red={r.mark === 'asc'} />
          <div className="rl-titles">
            <div className="rl-phase">{r.phase} · {r.kind}</div>
            <div className="rl-item">{r.item}</div>
            <div className="rl-earn">{'Earned · $' + r.value + ' value · not for sale'}</div>
          </div>
        </div>
        <div className="rl-scroll">
          {shots.map(([src, cap], i) => (
            <figure className="rl-shot" key={src}>
              <img src={src} alt={r.item + ' — ' + cap} loading={i === 0 ? 'eager' : 'lazy'} />
              <figcaption>{cap}</figcaption>
            </figure>
          ))}
        </div>
        <div className="rl-foot">{shots.length > 1 ? 'Scroll for more · ' : ''}{r.mark === 'asc' ? 'Earned by finishing all thirty days with zero deviations.' : 'Earned by clearing ' + r.phase + ' with zero deviations.'}</div>
      </div>
    </div>
  );
}
function Marks() {
  const [open, setOpen] = React.useState(null);
  return (
    <section id="marks" className="lp-section" data-screen-label="Marks of Mastery" style={{ borderBottom: '1px solid var(--border-hairline)' }}>
      <Wrap>
        <div className="reveal sec-head">
          <Eyebrow>07 — Marks of Mastery</Eyebrow>
          <h2 className="lp-h2"><span className="red">Earned.</span> Not sold.</h2>
          <p className="lp-lead sec-lead">
            Clear a phase with zero deviations and you earn its Mark of Mastery, plus the premium piece that carries it, free on the Full Experience. None of it is for sale.
          </p>
        </div>
        <div className="mk-grid reveal">
          {LV.REWARDS.map((r) => (
            <div key={r.phase} className={'mk-cell' + (r.mark === 'asc' ? ' asc' : '')}>
              <button className="mk-media" type="button" onClick={() => setOpen(r)} aria-label={'View ' + r.item + ' photos'}>
                <img className="mk-photo" src={r.photo} alt={r.item + ' — ' + r.kind} />
                <span className="mk-view">{(r.shots && r.shots.length > 1) ? r.shots.length + ' photos' : 'View'}</span>
              </button>
              <div className="mk-seal"><MarkSeal n={r.mark === 'asc' ? 'asc' : r.mark} size={64} red={r.mark === 'asc'} /></div>
              <div className="mk-body">
                <div className="mk-ph">{r.phase}</div>
                <div className="mk-t">{r.item}</div>
                <div className="mk-s">{r.kind}</div>
                <div className="mk-v"><b>${r.value}</b> value, earned free</div>
              </div>
            </div>
          ))}
        </div>
        <div className="reveal marks-note" style={{ marginTop: 28, display: 'flex', justifyContent: 'space-between', gap: 18, flexWrap: 'wrap', color: 'var(--text-muted)' }}>
          <span>Up to <b style={{ color: 'var(--text-strong)' }}>${LV.REWARD_TOTAL}</b> in earnable gear. The Ascent quarter-zip is reserved for a perfect 30-for-30 run.</span>
          <span>Finish the thirty days and everything you earned ships to you free. You just pay shipping. That&rsquo;s it.</span>
        </div>
        {open && <RewardGallery r={open} onClose={() => setOpen(null)} />}
      </Wrap>
    </section>
  );
}

/* ---------- pricing (DARK) ---------- */
function Pricing() {
  const addBox = () => { window.ASCXCart.add({ kind: 'box', id: LV.BOX.id, name: LV.BOX.name, sub: LV.BOX.sub, price: LV.BOX.price, list: LV.BOX.list }); window.ASCXCart.openDrawer(); };
  return (
    <section id="pricing" className="lp-section" data-screen-label="Pricing" style={{ borderBottom: '1px solid var(--border-hairline)' }}>
      <Wrap>
        <div className="reveal sec-head ctr">
          <Eyebrow>08 — Pre-order</Eyebrow>
          <h2 className="lp-h2">Reserve your place<br />in <span className="red">Cohort 001.</span></h2>
        </div>
        <div className="tier-2 reveal">
          {LV.TIERS.map((t) => (
            <div key={t.id} className={'tier' + (t.flagship ? ' flag' : '') + (t.comingSoon ? ' soon' : '')}>
              {t.flag && <div className="t-flag"><Badge tone={t.flagTone}>{t.flag}</Badge></div>}
              <div className="t-name">{t.name}</div>
              <div className="t-sub">{t.sub}</div>
              <div className="t-price"><span className="cur">$</span>{t.price}{t.list && <span className="was">${t.list}</span>}<span className="unit">{t.unit}</span></div>
              {t.list && !t.comingSoon && <div className="t-lim">Pre-order price · limited time</div>}
              <p className="t-note">{t.note}</p>
              <ul>
                {t.lines.map((l, i) => <li key={i} className={l.yes ? 'yes' : 'no'}><span className="dash">{l.yes ? '—' : '×'}</span>{l.t}</li>)}
              </ul>
              {t.comingSoon ? <button type="button" className="tier-soon-btn" disabled aria-disabled="true">Coming soon</button>
                : <Button variant="primary" size="lg" fullWidth onClick={addBox}>{t.cta} · <span style={{ letterSpacing: '.04em' }}>${t.price}</span></Button>}
            </div>
          ))}
        </div>
        <div className="reveal pricing-note" style={{ marginTop: 26, textAlign: 'center', color: 'var(--text-muted)' }}>
          {LV.LAUNCH.shipLine} · Add any Drop 01 piece and shipping is free.
        </div>
      </Wrap>
    </section>
  );
}

/* ---------- FAQ (WHITE) ---------- */
function Faq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="lp-section lt" data-screen-label="FAQ">
      <Wrap>
        <div className="reveal sec-head ctr">
          <Eyebrow>09 — Questions</Eyebrow>
          <h2 className="lp-h2">Asked, <span className="red">answered.</span></h2>
        </div>
        <div className="faq-list reveal">
          {LV.FAQ.map((f, i) => (
            <div className="faq-it" key={i}>
              <button type="button" className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                {f.q}<span className="pm">{open === i ? '–' : '+'}</span>
              </button>
              {open === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

/* ---------- final CTA (DARK) + footer ---------- */
function FinalCTA() {
  return (
    <section className="lp-section fcta" data-screen-label="Final CTA" style={{ paddingBottom: 90 }}>
      <div className="glow" />
      <Wrap style={{ position: 'relative' }}>
        <div className="kicker reveal" style={{ color: 'var(--accent)' }}>Pre-order · {LV.LAUNCH.cohort} · {LV.LAUNCH.startLong}</div>
        <h2 className="lp-h2 fcta-h2 reveal">
          30 days will pass either way.<br /><span className="red">Spend them earning who you become.</span>
        </h2>
        <div className="reveal fcta-ctas">
          <Button variant="primary" size="lg" href="#pricing">Pre-order<span className="cta-more"> the box</span> · <span style={{ letterSpacing: '.04em' }}>$99</span></Button>
          <Button variant="default" size="lg" href="#drop">Add Drop 01 gear</Button>
        </div>
        <div className="reveal"><img src="landing/img/box-open-cut2.webp" alt="The ASCX box, open — the Standard plaque inside" /></div>
      </Wrap>
    </section>
  );
}

/* Social marks — 20px monochrome glyphs, deliberately quiet at the very bottom. */
const SOCIAL_ICON = {
  instagram: <React.Fragment><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none" /></React.Fragment>,
  tiktok: <path d="M14 3v11.2a3.6 3.6 0 1 1-3-3.55M14 3c.4 2.6 2 4.2 4.6 4.5" />,
  x: <React.Fragment><path d="M4 4l16 16M20 4L4 20" /></React.Fragment>,
  youtube: <React.Fragment><rect x="2.5" y="5.5" width="19" height="13" rx="4" /><path d="M10.5 9.6l5 2.4-5 2.4z" /></React.Fragment>,
};
function Footer() {
  return (
    <footer className="lp-foot" data-screen-label="Footer">
      <Wrap>
        <div className="foot-row">
          <div className="foot-brand">
            <Logo size={22} wordmark layout="row" style={{ color: 'var(--text-strong)' }} />
            <div className="foot-tag">Break the Loop. Earn Your Ascent.</div>
          </div>
          <div className="foot-links">
            <a href="#box">The Box</a><a href="#system">The System</a><a href="#marks">Rewards</a><a href="#drop">Drop 01</a><a href="#faq">FAQ</a><a href={window.ASCX_APP_URL || 'app.html'}>Platform</a>
          </div>
        </div>
        <div className="foot-fine">Payments are processed securely by Stripe. {LV.LAUNCH.cohort} begins {LV.LAUNCH.startLong}. Consult a physician before beginning any training protocol.</div>
        <div className="foot-bottom">
          <ul className="foot-social" aria-label="ASCX on social">
            {LV.SOCIAL.map((s) => (
              <li key={s.key}>
                <a href={s.href} aria-label={s.name} target="_blank" rel="noopener noreferrer">
                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{SOCIAL_ICON[s.key]}</svg>
                </a>
              </li>
            ))}
          </ul>
          <div className="foot-copy">© {LV.LAUNCH.year} ASCX · The Daily Ascent. All rights reserved.</div>
        </div>
      </Wrap>
    </footer>
  );
}

window.W3 = { InsideBox, Versus, Marks, Pricing, Faq, FinalCTA, Footer };
})();