/* ASCX — Landing page product visuals. Renders the real physical system from
   the ASCX glyph set (window.ASCX). Exposes window.LVUI. text/babel. */
(function () {
const G = window.ASCX;

/* inject a glyph SVG string */
const Raw = ({ html, style, className }) =>
  <span className={className} style={style} dangerouslySetInnerHTML={{ __html: html }} />;

/* ---- Mark of Mastery seal — uniform marks (assets/ascx-marks.js) in a ring ---- */
function MarkSeal({ n, size = 66, red }) {
  const ring = red ? '#c4302b' : '#cfcfcf';
  const glyph = Math.round(size * 0.52);
  return (
    <div className="badge-seal" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
        <circle cx="50" cy="50" r="47" fill="#0a0a0a" stroke={ring} strokeWidth="1.4" />
        <circle cx="50" cy="50" r="41" stroke={ring} strokeWidth="0.6" opacity="0.5" />
      </svg>
      <span style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', lineHeight: 0 }}
        dangerouslySetInnerHTML={{ __html: n === 3 ? window.ASCXMARKS.xsvg(glyph) : window.ASCXMARKS.svg(n, glyph) }} />
    </div>
  );
}

/* ---- 3D box (3/4 view) ---- */
function BoxRender({ scale = 1 }) {
  const W = 300 * scale, D = 228 * scale, T = 60 * scale;
  const face = (extra) => ({ position: 'absolute', left: 0, top: 0, ...extra });
  const markH = Math.round(58 * scale);
  return (
    <div className="scene" style={{ height: (D + T) * 1.15, alignItems: 'center' }}>
      <div style={{ position: 'relative', width: 0, height: 0 }}>
        <div className="cube">
          {/* top / lid */}
          <div className="c-top" style={face({ width: W, height: D, transform: `translate(-50%,-50%) rotateX(90deg) translateZ(${T / 2}px)` })}>
            <div style={{ color: '#e6e6e6' }} dangerouslySetInnerHTML={{ __html: foilMark(markH) }} />
            <div className="foil" style={{ fontSize: 30 * scale, letterSpacing: '.46em', paddingLeft: '.46em', fontWeight: 600, marginTop: 20 * scale }}>ASCX</div>
            <div className="foil" style={{ fontSize: 9.5 * scale, letterSpacing: '.5em', paddingLeft: '.5em', fontWeight: 600, marginTop: 14 * scale, textTransform: 'uppercase', opacity: .9 }}>Earn Your Ascent</div>
          </div>
          {/* front */}
          <div className="c-front" style={face({ width: W, height: T, transform: `translate(-50%,-50%) translateZ(${D / 2}px)` })}>
            <span className="foil sidewm">ASCX</span>
          </div>
          {/* right */}
          <div className="c-right" style={face({ width: D, height: T, transform: `translate(-50%,-50%) rotateY(90deg) translateZ(${W / 2}px)` })} />
        </div>
        <div className="box-shadow-cast" style={{ width: W * 0.82, bottom: -(T / 2) - 26 }} />
      </div>
    </div>
  );
}
function foilMark(size) {
  const h = Math.round(size * (100 / 106.67));
  return '<svg viewBox="0 0 106.67 100" width="' + size + '" height="' + h + '">' +
    '<defs><linearGradient id="hf' + size + '" x1="0" y1="0" x2="0.12" y2="1"><stop offset="8%" stop-color="#f6f6f6"/><stop offset="54%" stop-color="#a2a2a2"/><stop offset="92%" stop-color="#dcdcdc"/></linearGradient></defs>' +
    '<path d="' + G.MARK_PATH + '" fill="url(#hf' + size + ')"/></svg>';
}

/* ---- mini daily card ---- */
function MiniCard({ day = '01', spark = 'Noise is a choice. Silence is a discipline.', phase = 1, w = 210, style }) {
  const s = w / 210;
  const h = Math.round(w / 0.7);
  const segs = [1, 2, 3, 4].map(p => <i key={p} style={{ width: Math.round(9 * s), height: Math.max(2, Math.round(3 * s)), background: p <= phase ? '#cfcfcf' : '#2a2a2a' }} />);
  const rows = ['Body', 'Mind', 'Domain'];
  const px = (v) => Math.round(v * s * 100) / 100;
  const box = (d) => ({ width: px(d), height: px(d), border: '1.4px solid #b9b9b9', flexShrink: 0, boxSizing: 'border-box' });
  return (
    <div className="mini-card" style={{ width: w, height: h, padding: `${px(15)}px ${px(14)}px`, ...style }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div className="foil" style={{ fontWeight: 700, letterSpacing: '-.02em', lineHeight: .9, fontSize: px(26) }}>
          <span style={{ display: 'block', fontSize: px(6.5), letterSpacing: '.4em', WebkitTextFillColor: '#6f6f6f', marginBottom: px(4), fontWeight: 600 }}>ASCX</span>DAY {day}</div>
        <div style={{ display: 'flex', gap: px(3), marginTop: px(6) }}>{segs}</div>
      </div>
      <div style={{ fontStyle: 'italic', color: '#cfcfcf', fontWeight: 500, lineHeight: 1.38, fontSize: px(10.5), marginTop: px(11) }}>{spark}</div>
      <div style={{ height: 1, background: '#1c1c1c', margin: `${px(10)}px 0` }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: px(8) }}>
        <span style={box(11)} /><span style={{ fontSize: px(7.5), letterSpacing: '.26em', color: '#cfcfcf', fontWeight: 700, textTransform: 'uppercase' }}>The Standard</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: `0 ${px(10)}px`, marginTop: px(9) }}>
        {['ASCX', 'Personal'].map(col => (
          <div key={col}>
            <div style={{ fontSize: px(6.2), letterSpacing: '.14em', color: '#7a7a7a', fontWeight: 700, textTransform: 'uppercase', marginBottom: px(6) }}>{col} Protocols</div>
            {rows.map(r => <div key={r} style={{ display: 'flex', alignItems: 'center', gap: px(6), marginBottom: px(5.5) }}><span style={box(8.5)} /><span style={{ fontSize: px(7.2), letterSpacing: '.06em', color: '#c2c2c2', fontWeight: 600, textTransform: 'uppercase' }}>{r}</span></div>)}
          </div>
        ))}
      </div>
      <div style={{ height: 1, background: '#1c1c1c', margin: `${px(10)}px 0` }} />
      <div style={{ fontSize: px(7.2), letterSpacing: '.3em', fontWeight: 700, color: '#8f8f8f', textTransform: 'uppercase' }}>The Ascent</div>
      <div style={{ fontSize: px(7.8), color: '#a8a8a8', lineHeight: 1.42, marginTop: px(4) }}>Sit in silence for 10 minutes. List your top 3 distractions. Circle the one you will eliminate.</div>
      <div style={{ flex: 1, minHeight: px(6) }} />
      <div style={{ fontSize: px(7.2), letterSpacing: '.3em', fontWeight: 700, color: '#8f8f8f', textTransform: 'uppercase' }}>The Mark</div>
      <div style={{ height: px(11), borderBottom: '1px solid #333' }} /><div style={{ height: px(11), borderBottom: '1px solid #333' }} />
    </div>
  );
}

/* ---- Daily Loop diagram ---- */
function LoopDiagram({ size = 200, numbers = true }) {
  return <div className="glyphc" style={{ color: '#d6d6d6' }} dangerouslySetInnerHTML={{ __html: G.loop(size, { numbers, sw: 2.4 }) }} />;
}

/* ---- pillar glyph ---- */
function PillarGlyph({ name, size = 34, color = '#cfcfcf' }) {
  return <span className="glyphc" style={{ color }} dangerouslySetInnerHTML={{ __html: G.pillar(name, size) }} />;
}

/* ---- Codex (book cover, slight angle) ---- */
function CodexRender({ scale = 1 }) {
  const W = 210 * scale, H = 280 * scale;
  return (
    <div style={{ perspective: 1400 }}>
      <div style={{ position: 'relative', width: W, height: H, transformStyle: 'preserve-3d', transform: 'rotateY(-19deg) rotateX(4deg)',
        background: 'radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255,255,255,.04), transparent 70%), linear-gradient(150deg,#111,#070707)',
        border: '1px solid #262626', boxShadow: '0 34px 60px rgba(0,0,0,.62)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        {/* spine */}
        <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 14 * scale, background: 'linear-gradient(#060606,#020202)', borderRight: '1px solid #1c1c1c', transform: 'translateZ(-1px)' }} />
        {/* ribbon */}
        <div style={{ position: 'absolute', top: 0, right: 30 * scale, width: 9 * scale, height: H + 20 * scale, background: 'linear-gradient(#c4302b,#8f231f)' }} />
        <div style={{ color: '#e6e6e6' }} dangerouslySetInnerHTML={{ __html: foilMark(50 * scale) }} />
        <div className="foil" style={{ fontSize: 26 * scale, letterSpacing: '.4em', paddingLeft: '.4em', fontWeight: 600, marginTop: 22 * scale }}>ASCX</div>
        <div style={{ width: 30 * scale, height: 2, background: '#c4302b', margin: `${20 * scale}px 0` }} />
        <div className="foil" style={{ fontSize: 10 * scale, letterSpacing: '.34em', paddingLeft: '.34em', fontWeight: 600, textTransform: 'uppercase' }}>The Daily Ascent</div>
        <div style={{ position: 'absolute', bottom: 22 * scale, fontSize: 8 * scale, letterSpacing: '.3em', color: '#6f6f6f', fontWeight: 600, textTransform: 'uppercase' }}>The Codex</div>
      </div>
    </div>
  );
}

/* ---- ascent line (4 phases rising) ---- */
function AscentLine() {
  const P = window.LV.PHASES;
  return (
    <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', alignItems: 'end', gap: 0, height: 150 }}>
      <svg viewBox="0 0 400 150" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <polyline points="8,140 108,104 208,68 308,32 396,20" fill="none" stroke="#2a2a2a" strokeWidth="1.5" />
        <polyline points="8,140 108,104 208,68 308,32" fill="none" stroke="#c4302b" strokeWidth="2" opacity="0.85" />
      </svg>
      {P.map((p, i) => {
        const n = i + 1;
        return (
        <div key={p.name} style={{ position: 'relative', textAlign: 'center', paddingBottom: 8, transform: `translateY(${-i * 30}px)` }}>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end', height: 30, marginBottom: 8 }}
            dangerouslySetInnerHTML={{ __html: n === 3 ? window.ASCXMARKS.xsvg(27) : window.ASCXMARKS.svg(n, 27) }} />
          <div style={{ fontSize: 12, fontWeight: 700, color: '#e4e4e4', letterSpacing: '.06em' }}>{p.roman} · {p.name}</div>
          <div style={{ fontSize: 9, letterSpacing: '.16em', color: '#6f6f6f', fontWeight: 600, textTransform: 'uppercase', marginTop: 3 }}>{p.days}</div>
        </div>
      ); })}
    </div>
  );
}

window.LVUI = { Raw, MarkSeal, BoxRender, MiniCard, LoopDiagram, PillarGlyph, CodexRender, AscentLine };
})();