// CHAPTERS — the value stack with chapter numbering, rule, title, items
// Shared between V1 and V2. V3 presents this differently (in-chat).

function ChapterBlock({ chapter, onCTA, ctaLabel, ctaNumber }) {
  return (
    <section style={{maxWidth:640,margin:'0 auto 56px',position:'relative'}}>
      <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:16}}>
        <span style={{fontSize:13,fontWeight:800,letterSpacing:2,color:'var(--purple)',fontVariantNumeric:'tabular-nums'}}>
          {chapter.num}
        </span>
        <div style={{flex:1,height:1,background:'linear-gradient(90deg,rgba(124,58,237,0.5) 0%,rgba(99,102,241,0.35) 50%,rgba(59,130,246,0.12) 100%)'}}/>
        <div style={{fontSize:11,fontWeight:700,letterSpacing:2.5,textTransform:'uppercase',color:'var(--mute)'}}>
          {chapter.label}
        </div>
      </div>

      <h3 style={{
        fontFamily:'DM Sans,sans-serif',
        fontSize:'clamp(26px,5vw,38px)',fontWeight:700,
        color:'var(--ink)',letterSpacing:'-0.8px',lineHeight:1.1,marginBottom:10,
      }} dangerouslySetInnerHTML={{__html: chapter.title.replace(/<em>(.*?)<\/em>/g,
        '<em style="font-style:normal;background:'+BRAND.gradient+';-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">$1</em>')}}/>

      <p style={{fontSize:15,color:'var(--mute)',lineHeight:1.55,marginBottom:26,maxWidth:560}}>
        {chapter.lede}
      </p>

      <ul style={{listStyle:'none',padding:0,margin:'0 0 28px'}}>
        {chapter.items.map((it, i) => {
          const [name, desc, gold] = it;
          return (
            <li key={i} style={{
              display:'flex',alignItems:'flex-start',gap:14,
              padding:'16px 2px',
              borderBottom: i < chapter.items.length-1 ? '1px solid var(--border)' : 'none',
              fontSize:15,color:'var(--ink)',lineHeight:1.5,fontWeight:500,
            }}>
              <span style={{
                flexShrink:0,width:26,height:26,borderRadius:'50%',
                background: gold
                  ? 'linear-gradient(135deg,#f3d78a 0%,#e8c16e 45%,#c79a3e 100%)'
                  : BRAND.gradient,
                color: gold ? '#3a2d0c' : '#fff',
                display:'flex',alignItems:'center',justifyContent:'center',
                fontWeight:800,fontSize:13,marginTop:1,
                boxShadow: gold ? '0 3px 12px rgba(232,193,110,0.45)' : '0 3px 10px rgba(124,58,237,0.28)',
              }}>{gold ? '★' : '✓'}</span>
              <span><strong style={{fontWeight:700}}>{name}</strong> — {desc}</span>
            </li>
          );
        })}
      </ul>

      {onCTA && (
        <div style={{position:'relative',textAlign:'center',marginTop:4}}>
          <div style={{
            position:'absolute',top:'50%',left:'50%',
            width:320,height:160,transform:'translate(-50%,-50%)',
            background:'radial-gradient(ellipse at center, rgba(124,58,237,0.14) 0%, rgba(99,102,241,0.08) 40%, transparent 70%)',
            pointerEvents:'none',zIndex:0,
          }}/>
          <Button size="md" onClick={onCTA} style={{
            position:'relative',zIndex:1,maxWidth:360,width:'100%',
          }}>
            <span>{ctaLabel || 'See it live →'}</span>
          </Button>
        </div>
      )}
    </section>
  );
}

function ChapterStack({ onCTA }) {
  return (
    <div>
      <div style={{maxWidth:620,margin:'0 auto 40px',textAlign:'center'}}>
        <Eyebrow>On this free live walkthrough</Eyebrow>
        <h2 style={{
          marginTop:10,
          fontSize:'clamp(24px,4vw,34px)',fontWeight:700,
          color:'var(--ink)',letterSpacing:'-0.6px',lineHeight:1.15,
        }}>Everything Apex actually does.</h2>
      </div>
      {CHAPTERS.map((c, i) => (
        <ChapterBlock key={c.num} chapter={c} onCTA={onCTA}
          ctaLabel={['See Apex close with you →','See the training live →','See the marketing engine →','See the Ambassador deal →'][i]}/>
      ))}
    </div>
  );
}

Object.assign(window, { ChapterBlock, ChapterStack });