// Discovery Lab — community invite (Circle), the "not sure if ready" band
const DiscoveryLab = () => {
  const URL = 'https://gnosis-academy.circle.so/'; // replace with your Circle invite URL

  return (
    <section style={{padding:'80px 0', background:'#FBF9F4',
                      borderTop:'1px solid #DCE4EC', borderBottom:'1px solid #DCE4EC'}}>
      <div className="container">
        <div style={{
          display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:48,
          alignItems:'center', padding:'48px',
          background:'#FFFFFF', border:'1px solid #DCE4EC', borderRadius:18,
          boxShadow:'rgba(46,92,138,0.06) 0px 4px 16px',
        }} className="discovery-grid">
          <div>
            <div style={{fontSize:12, fontWeight:700, color:'#2E5C8A',
                          textTransform:'uppercase', letterSpacing:1.6}}>
              Free community
            </div>
            <h3 style={{fontFamily:'"Space Grotesk"', fontSize:'clamp(28px, 3vw, 40px)',
                          fontWeight:600, color:'#0E1B2E', margin:'14px 0 0',
                          lineHeight:1.15, letterSpacing:'-0.5px'}}>
              Not sure if you're ready for the cohort?<br/>
              <span style={{color:'#2E5C8A'}}>Join the AI Literacy Lab community.</span>
            </h3>
            <p style={{fontSize:16, color:'#3F5670', marginTop:18, lineHeight:1.6,
                        maxWidth:540}}>
              A free community of educators figuring out AI together. Ask questions,
              swap workflows, and see what other teachers are actually doing in
              their classrooms. Drop in any time — and when you're ready for
              structure, the cohort is waiting.
            </p>

            <div style={{display:'flex', gap:24, marginTop:24, flexWrap:'wrap',
                          fontSize:13, color:'#3F5670'}}>
              {[
                ['users', 'Educators-only'],
                ['message-circle', 'Active discussion'],
                ['gift', 'Free to join'],
              ].map(([icon, text]) => (
                <div key={text} style={{display:'inline-flex', alignItems:'center', gap:8}}>
                  <i data-lucide={icon} style={{width:16, height:16, color:'#2E5C8A'}}></i>
                  {text}
                </div>
              ))}
            </div>
          </div>

          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            <a href={URL} target="_blank" rel="noopener noreferrer" style={{
              background:'#2E5C8A', color:'#FFFFFF', textDecoration:'none',
              fontSize:14, fontWeight:700, textTransform:'uppercase', letterSpacing:0.6,
              padding:'18px 24px', borderRadius:13,
              display:'inline-flex', alignItems:'center', justifyContent:'center', gap:10,
              transition:'background 160ms',
            }}
            onMouseEnter={e=>{e.currentTarget.style.background='#234A70';}}
            onMouseLeave={e=>{e.currentTarget.style.background='#2E5C8A';}}>
              Join the community
              <i data-lucide="arrow-up-right" style={{width:16, height:16}}></i>
            </a>
            <div style={{padding:'12px 14px', background:'#FBF9F4',
                          border:'1px solid #DCE4EC', borderRadius:10,
                          fontSize:11, color:'#6B7E92',
                          lineHeight:1.5}}>
              <div style={{fontFamily:'Rubik', fontSize:10, fontWeight:700,
                            color:'#2E5C8A', textTransform:'uppercase',
                            letterSpacing:1.2, marginBottom:6}}>
                Or, if you need bespoke 1:1 work
              </div>
              <a href="https://calendly.com/cpark-gnosis-learning/book-a-consultation"
                 target="_blank" rel="noopener noreferrer"
                 style={{color:'#2E5C8A', fontWeight:600, fontSize:12,
                          borderBottom:'1px solid #A8C8E6', paddingBottom:1}}>
                Book a consultation →
              </a>
            </div>
          </div>
        </div>

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

window.DiscoveryLab = DiscoveryLab;