// Section 3 — Inside the cohort (3 pillars + weekly rhythm)
const InsideCohort = () => {
  const pillars = [
    {
      n:'01', icon:'video',
      title:'Twelve weekly live sessions',
      body:'Ninety minutes each. Method first, then guided application. Not Q&A. Recordings available, but the live cohort is where the learning compounds.',
    },
    {
      n:'02', icon:'pen-tool',
      title:'Applied work between sessions',
      body:'Each week has a small, specific assignment in your own classroom or coaching practice. You bring back what worked, what did not, and what surprised you. The cohort responds.',
    },
    {
      n:'03', icon:'message-square', spark:true,
      title:'Direct instructor time',
      body:'A 1:1 strategy call with Christi during the cohort. A private channel for between-session questions. Personalised feedback on your applied work.',
    },
  ];

  // Weekly rhythm
  const rhythm = [
    { day:'Mon', label:'Live session', sub:'90 min', highlighted:true, icon:'video' },
    { day:'Tue', label:'Apply in class', sub:'~30 min', icon:'pen-tool' },
    { day:'Wed', label:'Apply in class', sub:'~30 min', icon:'pen-tool' },
    { day:'Thu', label:'Reflect & post', sub:'~15 min', icon:'message-square' },
    { day:'Fri', label:'Cohort responds', sub:'async', icon:'users' },
  ];

  return (
    <section style={{padding:'96px 0', background:'#FFFFFF'}}>
      <div className="container">
        <div className="eyebrow">What you actually get</div>
        <h2 style={{fontFamily:'"Space Grotesk"', fontSize:'clamp(32px, 4vw, 48px)',
                     fontWeight:600, color:'#0E1B2E', margin:'12px 0 0',
                     lineHeight:1.1, letterSpacing:'-1px', maxWidth:760}}>
          Inside The Practitioner Cohort
        </h2>
        <p style={{fontSize:18, color:'#3F5670', lineHeight:1.6, marginTop:20,
                    maxWidth:680}}>
          Twelve weeks. One small group. Weekly live sessions where the work gets
          done together, not just talked about.
        </p>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20,
                      marginTop:48}} className="pillar-grid">
          {pillars.map(p => (
            <div key={p.n} style={{
              background:'#FFFFFF', border:'1px solid #DCE4EC', borderRadius:14,
              padding:'32px 28px',
              boxShadow:'rgba(46,92,138,0.06) 0px 4px 12px',
              transition:'transform 200ms, box-shadow 200ms',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.transform = 'translateY(-4px)';
              e.currentTarget.style.boxShadow = 'rgba(46,92,138,0.16) 0px 14px 28px';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.boxShadow = 'rgba(46,92,138,0.06) 0px 4px 12px';
            }}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                <div style={{
                  width:44, height:44, borderRadius:10,
                  background: p.spark ? '#FFF6DC' : '#E1ECF7',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  color: p.spark ? '#E8B225' : '#2E5C8A',
                }}>
                  <i data-lucide={p.icon} style={{width:22, height:22}}></i>
                </div>
                <span style={{fontFamily:'"Space Grotesk"', fontSize:18, fontWeight:600,
                               color:'#9BA4D4', letterSpacing:'0.5px'}}>{p.n}</span>
              </div>
              <h3 style={{fontFamily:'Rubik', fontSize:20, fontWeight:600, color:'#0E1B2E',
                           margin:'24px 0 0', lineHeight:1.25}}>{p.title}</h3>
              <p style={{fontSize:15, color:'#3F5670', lineHeight:1.55, marginTop:10}}>
                {p.body}
              </p>
            </div>
          ))}
        </div>

        <p style={{fontSize:15, color:'#6B7E92', marginTop:32, fontStyle:'italic'}}>
          Everything is included in the £591 cohort fee. No upsells, no add-ons.
        </p>

        {/* Weekly rhythm diagram */}
        <div style={{marginTop:80, padding:'40px 32px', background:'#FBF9F4',
                      border:'1px solid #DCE4EC', borderRadius:14}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline',
                        flexWrap:'wrap', gap:16, marginBottom:32}}>
            <div>
              <div style={{fontSize:11, fontWeight:700, color:'#2E5C8A',
                            textTransform:'uppercase', letterSpacing:1.4}}>
                A week in the cohort
              </div>
              <h3 style={{fontFamily:'"Space Grotesk"', fontSize:26, fontWeight:600,
                            color:'#0E1B2E', margin:'8px 0 0', letterSpacing:'-0.5px'}}>
                Roughly two hours, spread how it actually fits.
              </h3>
            </div>
            <div style={{fontSize:13, color:'#6B7E92'}}>~2 hrs total · 12 weeks</div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:12}}
                className="rhythm-grid">
            {rhythm.map((r, i) => (
              <div key={r.day} style={{
                background: r.highlighted ? '#0E1B2E' : '#FFFFFF',
                color: r.highlighted ? '#FFFFFF' : '#0E1B2E',
                border: r.highlighted ? '1px solid #0E1B2E' : '1px solid #DCE4EC',
                borderRadius:12, padding:'20px 18px',
                display:'flex', flexDirection:'column', gap:14,
                position:'relative',
              }}>
                <div style={{fontSize:11, fontWeight:700, letterSpacing:1.4,
                              textTransform:'uppercase',
                              color: r.highlighted ? '#E8B225' : '#2E5C8A'}}>
                  {r.day}
                </div>
                <i data-lucide={r.icon} style={{width:20, height:20,
                  color: r.highlighted ? '#E8B225' : '#2E5C8A'}}></i>
                <div>
                  <div style={{fontSize:15, fontWeight:600, lineHeight:1.3}}>{r.label}</div>
                  <div style={{fontSize:12, opacity:0.7, marginTop:4}}>{r.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .pillar-grid { grid-template-columns: 1fr !important; }
            .rhythm-grid { grid-template-columns: repeat(2, 1fr) !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

window.InsideCohort = InsideCohort;