/* ASCX Box Walkthrough — sections 1: nav, hero, movement/cohort. Exposes window.W1. text/babel. */
(function () {
const NS = window.ASCXDesignSystem_77a68b;
const { Button, Logo, Eyebrow } = NS;
const LV = window.LV;
const openCart = () => { if (window.ASCXCart) window.ASCXCart.openDrawer(); };
const openFree = () => { if (window.ASCXFlows) window.ASCXFlows.openFree(); };
const Wrap = ({ children, style, className }) => <div className={'lp-wrap ' + (className || '')} style={style}>{children}</div>;

/* Announcement bar — one line at every width. The phone gets the short form of
   the sentence; the full one returns at 640px where it fits without wrapping. */
function AnnouncementBar() {
  return (
    <div className="lp-ann">
      <Wrap className="lp-ann-row">
        <span className="lp-ann-dot" />
        <span className="lp-ann-txt">
          <b>Pre-orders open.</b>{' '}
          <span className="ann-long">{LV.LAUNCH.cohort} begins {LV.LAUNCH.startLong} · ships before the holidays.</span>
          <span className="ann-short">{LV.LAUNCH.cohort} · {LV.LAUNCH.startShort}</span>
        </span>
        <a href="#pricing" className="lp-ann-cta">Pre-order →</a>
      </Wrap>
    </div>
  );
}

/* Nav — inline links on desktop; below 1024px they collapse into a real
   hamburger menu (button with aria-expanded, Escape to close, closes on tap). */
function Nav() {
  const [open, setOpen] = React.useState(false);
  const loginHref = window.ASCX_LOGIN_URL || 'app.html';
  React.useEffect(() => {
    if (!open) return undefined;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open]);
  return (
    <nav className={'lp-nav' + (open ? ' open' : '')}>
      <Wrap className="row">
        {/* the hamburger leads the bar on phones; it hides at 1024 and the
            logo takes the left edge on its own */}
        <div className="nav-left">
          <button type="button" className="nav-toggle" aria-expanded={open} aria-controls="lp-nav-links"
            aria-label={open ? 'Close menu' : 'Open menu'} onClick={() => setOpen(!open)}>
            <span className="nav-bars" aria-hidden="true"><span /><span /><span /></span>
          </button>
          <a href="#top" className="nav-logo" onClick={(e) => { e.preventDefault(); setOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); }} aria-label="Back to top">
            <Logo size={24} wordmark layout="row" style={{ color: 'var(--text-strong)' }} />
          </a>
        </div>
        <div className="links" id="lp-nav-links" style={{ color: 'var(--text-body)' }} onClick={() => setOpen(false)}>
          <a href="#movement">The Movement</a><a href="#box">The Box</a><a href="#system">The System</a><a href="#marks">Rewards</a><a href="#drop">Drop 01</a>
          <button type="button" className="nav-m-only" onClick={openFree}>Join free</button>
          <a className="nav-m-only nav-m-login" href={loginHref}>Log in</a>
        </div>
        <div className="nav-right">
          <a className="nav-login" href={loginHref}>Log in</a>
          <Button className="nav-free" variant="ghost" size="sm" onClick={openFree} style={{ padding: '10px 14px', whiteSpace: 'nowrap' }}>Join free</Button>
          <button type="button" className="nav-cart" onClick={openCart} aria-label="Pre-order cart">
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="square"><path d="M4 5h2l1.5 11h10L20 8H7" /><circle cx="9" cy="20" r="1.2" fill="currentColor" stroke="none" /><circle cx="18" cy="20" r="1.2" fill="currentColor" stroke="none" /></svg>
          </button>
          <Button className="nav-pre" variant="primary" size="sm" href="#pricing">Pre-order</Button>
        </div>
      </Wrap>
    </nav>
  );
}

/* Hero — the box and the cards, front and center */
function Hero() {
  return (
    <header className="hero2" data-screen-label="Hero" id="top">
      <div style={{ position: 'absolute', inset: 0, background: 'var(--glow-hero-top), var(--glow-hero-red)', pointerEvents: 'none' }} />
      <div aria-hidden="true" className="hero-mark">
        <Logo size={880} style={{ width: 'min(74vw, 860px)', height: 'auto', color: 'var(--text-strong)', opacity: 0.05 }} />
      </div>
      <Wrap className="hero2-inner">
        <div className="kicker reveal" style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
          <span style={{ width: 22, height: 1, background: 'var(--accent)' }} />The 30-day challenge<span style={{ width: 22, height: 1, background: 'var(--accent)' }} />
        </div>
        <h1 className="reveal">Discipline you can<br />hold in <span className="red">your hands.</span></h1>
        <p className="lp-lead hero-lead reveal" style={{ maxWidth: 640, margin: '20px auto 0' }}>
          Ascend X is the world&rsquo;s first physical discipline box, built to install the habits you have been meaning to build. Every morning you pull one card, do what it says, and mark it done. <span className="lp-strong">Thirty days later they are running on their own.</span>
        </p>
        <div className="reveal hero-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="#box">See what&rsquo;s inside</Button>
        </div>
        <div className="reveal hero-ship" style={{ marginTop: 20, color: 'var(--text-muted)', letterSpacing: '.02em' }}>
          Ships before the holidays · {LV.LAUNCH.cohort} starts Day 01 on {LV.LAUNCH.startLong}
        </div>
        <div className="hero-cluster2 reveal">
          <img className="hbox" src="landing/img/box-hero-cut.webp" alt="ASCX — The 30 Day Challenge box" />
          <div className="hcards">
            {/* -hero.webp = alpha cutouts, used ONLY here. Section 03 keeps the full
                photos (card-*-cut.webp) with their background. */}
            <img className="c1" src="landing/img/card-front-hero.webp" alt="Day 01 daily card — front" />
            <img className="c2" src="landing/img/card-back-hero.webp" alt="Day 01 daily card — back, scan to log" />
          </div>
        </div>
      </Wrap>
    </header>
  );
}

/* Movement — one start line, together */
const CD_TARGET = new Date(2027, 0, 1, 0, 0, 0);
function cdParts() {
  const now = new Date();
  let months = (CD_TARGET.getFullYear() - now.getFullYear()) * 12 + (CD_TARGET.getMonth() - now.getMonth());
  const anchor = new Date(now);
  anchor.setMonth(anchor.getMonth() + months);
  if (anchor > CD_TARGET) { months--; anchor.setMonth(anchor.getMonth() - 1); }
  if (months < 0) months = 0;
  let ms = CD_TARGET - anchor; if (ms < 0) ms = 0;
  return { months, days: Math.floor(ms / 86400000), hours: Math.floor(ms % 86400000 / 3600000), minutes: Math.floor(ms % 3600000 / 60000) };
}
function Countdown() {
  const [p, setP] = React.useState(cdParts);
  React.useEffect(() => { const id = setInterval(() => setP(cdParts()), 1000); return () => clearInterval(id); }, []);
  const pad = (n) => String(n).padStart(2, '0');
  const cells = [[p.months, 'Months'], [p.days, 'Days'], [p.hours, 'Hours'], [p.minutes, 'Minutes']];
  return (
    <div className="cd-wrap reveal">
      <div className="cd-cells" aria-label="Countdown to January 1, 2027">
        {cells.map(([n, l]) => <div className="cd-c" key={l}><div className="cd-n">{pad(n)}</div><div className="cd-l">{l}</div></div>)}
      </div>
    </div>
  );
}
function Movement() {
  return (
    <section id="movement" className="lp-section" data-screen-label="The Movement">
      <Wrap>
        <div className="mv-grid">
          <div className="reveal">
            <Eyebrow>01 — The movement</Eyebrow>
            <h2 className="lp-h2">Own the year<br />from <span className="red">day one.</span></h2>
            <Countdown />
          </div>
          {/* Inside .mv-grid so it falls between the countdown and the photo when the
              grid is a single column (mobile). At >=1024px explicit grid placement puts
              it back on its own full-width row under both. */}
          <div className="cohort-line reveal">
            {LV.COHORT.map((s) => (
              <div className="cohort-step" key={s.n}>
                <div className="cohort-node"><span>{s.n}</span></div>
                <div className="cohort-t">{s.t}</div>
                <div className="cohort-d">{s.d}</div>
              </div>
            ))}
          </div>
          <div className="reveal mv-photo">
            <img src="landing/img/community.webp" alt="Two men clasping hands in a gym — one pulling the other up" />
            <div className="date-plate">
              <div className="dp-d">01·01·2027</div>
              <div className="dp-k">{LV.LAUNCH.cohort} · Day 01</div>
            </div>
          </div>
        </div>
      </Wrap>
    </section>
  );
}

/* Theme seam — gradient flow between dark and light */
function Seam({ ch, t, lt, bare }) {
  return (
    <div className={'seam reveal ' + (lt ? 'lt' : 'dk') + (bare ? ' bare' : '')} aria-hidden="true">
      {!bare && <React.Fragment><div className="tick" /><div className="s-ch">{ch}</div><div className="s-t">{t}</div></React.Fragment>}
    </div>
  );
}

const Dot = () => <span className="stamp-dot" />;
function Stamp({ items, lt }) {
  return (
    <div className={'stamp' + (lt ? ' lt' : '')}>
      <Wrap><div className="stamp-row">{items.map((it, i) => <React.Fragment key={i}>{i > 0 && <Dot />}<span>{it}</span></React.Fragment>)}</div></Wrap>
    </div>
  );
}

window.W1 = { AnnouncementBar, Nav, Hero, Movement, Seam, Stamp, Wrap };
})();