// FAQ + cohort vs self-study vs 1:1 mini comparison
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q:'I have only done a couple of AI workshops. Is that enough?',
      a:'Yes. The Cohort is for educators who have moved past first contact with AI and now want a structured way to apply it. If you can name a few tools and have used one of them, you are in the right place.',
    },
    {
      q:'I am not techy. Will I keep up?',
      a:'The Cohort is for educators, not engineers. The method is what makes it work, not the tools. If you can write a lesson plan, you have everything you need.',
    },
    {
      q:'I am a school leader, not a classroom teacher. Does this fit me?',
      a:'Yes. About a third of each cohort is leaders or coaches, and Module 3 is built for leadership work specifically.',
    },
    {
      q:'What if I miss a live session?',
      a:'Sessions are recorded. Attend live when you can. The cohort effect happens in the live work, but the structure does not depend on you making all twelve.',
    },
    {
      q:'What is the difference between the Cohort and 1:1 consultation?',
      a:'1:1 work is fully personalised but isolating. The Cohort gives you most of the personal attention plus the thing 1:1 cannot: a small group of educators thinking alongside you. If you want bespoke work for a school or department, book a consultation — we\'ll scope pricing together.',
    },
    {
      q:'Refund policy?',
      a:'Full refund if you tell us after the first live session that the Cohort is not the right shape. After session one, the cohort runs as a unit.',
    },
  ];

  const compareRows = [
    ['Group',          'Solo',            '15 educators',         '1:1'],
    ['Live time/wk',   '0',                '90 min',              '60 min'],
    ['Personalisation','None',             'Cohort + 1:1 call',   'Fully personal'],
    ['Price',          'Free',             '£591',                'Bespoke'],
  ];

  return (
    <section id="faq" style={{padding:'96px 0', background:'#FBF9F4'}}>
      <div className="container">
        <div className="eyebrow">What you are probably wondering</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}}>
          Honest answers.
        </h2>

        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48,
                      marginTop:48, alignItems:'flex-start'}} className="faq-grid">
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={it.q} style={{
                  background:'#FFFFFF', border:'1px solid #DCE4EC',
                  borderRadius:12, overflow:'hidden',
                }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    width:'100%', background:'transparent', border:'none',
                    textAlign:'left', padding:'18px 24px',
                    display:'flex', alignItems:'center', justifyContent:'space-between',
                    gap:16,
                  }}>
                    <span style={{fontSize:16, fontWeight:600, color:'#0E1B2E',
                                   lineHeight:1.4}}>{it.q}</span>
                    <i data-lucide={isOpen ? 'minus' : 'plus'}
                       style={{width:18, height:18, color:'#2E5C8A', flexShrink:0}}></i>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 280 : 0, overflow:'hidden',
                    transition:'max-height 280ms cubic-bezier(0.2,0.8,0.2,1)',
                  }}>
                    <p style={{margin:0, padding:'0 24px 22px',
                                fontSize:15, color:'#3F5670', lineHeight:1.6}}>
                      {it.a}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>

          <aside style={{position:'sticky', top:96}}>
            <div style={{background:'#FFFFFF', border:'1px solid #DCE4EC',
                          borderRadius:14, overflow:'hidden',
                          boxShadow:'rgba(46,92,138,0.06) 0px 4px 12px'}}>
              <div style={{padding:'20px 24px', background:'#0E1B2E', color:'#FFFFFF'}}>
                <div style={{fontSize:11, fontWeight:700, color:'#E8B225',
                              textTransform:'uppercase', letterSpacing:1.4}}>
                  Three ways · one decision
                </div>
                <div style={{fontFamily:'"Space Grotesk"', fontSize:18, fontWeight:600,
                              marginTop:6}}>Self · Cohort · 1:1</div>
              </div>
              <div style={{padding:'8px 4px'}}>
                {compareRows.map(([label, self, coh, one], i) => (
                  <div key={label} className="faq-cmp-row" style={{
                    display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr',
                    gap:8, padding:'12px 20px', alignItems:'center',
                    borderBottom: i < compareRows.length-1 ? '1px solid #E1ECF7' : 'none',
                    fontSize:12,
                  }}>
                    <div style={{fontWeight:700, color:'#6B7E92', textTransform:'uppercase',
                                  letterSpacing:0.6}}>{label}</div>
                    <div style={{color:'#3F5670'}}>{self}</div>
                    <div style={{color:'#0E1B2E', fontWeight:600,
                                  background:'#FFF6DC', padding:'4px 6px',
                                  borderRadius:6, textAlign:'center'}}>{coh}</div>
                    <div style={{color:'#3F5670'}}>{one}</div>
                  </div>
                ))}
              </div>
            </div>
          </aside>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .faq-grid { grid-template-columns: 1fr !important; }
          }
          @media (max-width: 480px) {
            .faq-cmp-row { padding: 10px 14px !important; gap: 6px !important; font-size: 11px !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

window.FAQ = FAQ;