// Section 7 — About Christi
const Founder = () => (
  <section style={{padding:'96px 0', background:'#FFFFFF'}}>
    <div className="container">
      <div style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:64,
                    alignItems:'flex-start'}} className="founder-grid">
        {/* Photo placeholder */}
        <div>
          <div style={{
            width:'100%', maxWidth:340, aspectRatio:'4/5',
            borderRadius:14, position:'relative', overflow:'hidden',
            boxShadow:'rgba(14,27,46,0.12) 0px 12px 32px',
          }}>
            <img src="assets/christi.jpg" alt="Christi Park, founder of Gnosis Academy"
                 style={{width:'100%', height:'100%', objectFit:'cover',
                          objectPosition:'center top', display:'block'}} />
          </div>

          <div style={{marginTop:24, display:'flex', flexDirection:'column', gap:10}}>
            <a href="https://calendly.com/cpark-gnosis-learning/book-a-consultation" target="_blank" rel="noopener noreferrer" style={{display:'inline-flex', gap:10, alignItems:'center',
                                 fontSize:14, color:'#2E5C8A', fontWeight:500}}>
              <i data-lucide="calendar" style={{width:16, height:16}}></i>
              Book a consultation
            </a>
            <a href="mailto:cpark@gnosis-learning.com"
               style={{display:'inline-flex', gap:10, alignItems:'center',
                       fontSize:14, color:'#2E5C8A', fontWeight:500}}>
              <i data-lucide="mail" style={{width:16, height:16}}></i>
              cpark@gnosis-learning.com
            </a>
          </div>
        </div>

        {/* Body */}
        <div>
          <div className="eyebrow">Who built this</div>
          <h2 style={{fontFamily:'"Space Grotesk"', fontSize:'clamp(32px, 4vw, 48px)',
                       fontWeight:600, color:'#0E1B2E', margin:'12px 0 0',
                       lineHeight:1.1, letterSpacing:'-1px'}}>
            Hi, I'm Christi.
          </h2>

          <div style={{marginTop:24, fontSize:17, color:'#3F5670', lineHeight:1.65,
                        display:'flex', flexDirection:'column', gap:18, maxWidth:600}}>
            <p style={{margin:0}}>
              I'm an educator, a PhD researcher, and the founder of Gnosis Academy.
              I built the Practitioner Cohort because the AI training reaching
              educators was either panic or hype, and neither built the judgment
              teachers actually need.
            </p>
            <p style={{margin:0}}>
              The Cohort is for educators who have moved past the panic and the
              hype, and now want to do the applied work. Twelve weeks, small group,
              structured, real classroom application every week. The format I wish
              someone had built when AI first arrived in my own teaching.
            </p>
          </div>

          <figure style={{margin:'40px 0 0', padding:'24px 28px',
                            background:'#FBF9F4',
                            borderLeft:'3px solid #E8B225',
                            borderRadius:'0 10px 10px 0', maxWidth:560}}>
            <blockquote style={{margin:0, fontFamily:'"Space Grotesk"',
                                fontSize:22, fontWeight:500, color:'#0E1B2E',
                                lineHeight:1.3, letterSpacing:'-0.3px'}}>
              "AI is part of the workflow, not the authority."
            </blockquote>
          </figure>
        </div>
      </div>

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

window.Founder = Founder;