// Section 4 — The 12-week curriculum. Variants: accordion (default) | timeline | cards
const CURRICULUM = [
  {
    n:'Module 1', weeks:'Weeks 1–4', title:'The Foundation',
    sub:'From tool use to thinking partner',
    color:'#2E5C8A',
    items:[
      'How AI actually works, and why the mechanism changes how you use it',
      'Five prompting methods you will return to all year',
      'TRUST and ARCHED frameworks, applied to your subject',
      'A diagnostic of where your AI practice is right now',
    ],
  },
  {
    n:'Module 2', weeks:'Weeks 5–8', title:'The Working Week',
    sub:'AI in your real teaching practice',
    color:'#7E6CB4',
    items:[
      'Planning and curriculum: backward design, sequence stress-testing, vocabulary scaffolds',
      'Assessment and feedback: the 5-step grading workflow, formative checks, differentiation',
      'Professional practice: parent communication, CPD reflection, meeting prep',
      'Choosing the right tool for the task: Claude, ChatGPT, Gamma, NotebookLM, Gemini',
    ],
  },
  {
    n:'Module 3', weeks:'Weeks 9–12', title:'Integration and Leadership',
    sub:'From practitioner to the educator others come to',
    color:'#E8B225',
    items:[
      'Build a custom AI assistant for your subject or department',
      'Teach students to evaluate AI output as a literacy skill, not a compliance task',
      'Lead the AI conversation in your school, with a working framework',
      'Capstone: your own AI practice document, ready to use and share',
    ],
  },
];

const Curriculum = ({ variant = 'accordion' }) => {
  const [open, setOpen] = React.useState(0);

  const Header = () => (
    <>
      <div className="eyebrow">From foundation to leadership</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}}>
        A structured path through the work that matters.
      </h2>
    </>
  );

  if (variant === 'timeline') {
    return (
      <section id="curriculum" style={{padding:'96px 0', background:'#FBF9F4'}}>
        <div className="container">
          <Header />
          <div style={{marginTop:56, position:'relative', paddingLeft:48}}>
            <div style={{position:'absolute', left:11, top:8, bottom:8, width:2,
                          background:'linear-gradient(to bottom, #2E5C8A, #7E6CB4, #E8B225)'}} />
            {CURRICULUM.map((m, i) => (
              <div key={m.n} style={{position:'relative', marginBottom:i<2?56:0}}>
                <div style={{position:'absolute', left:-44, top:6, width:24, height:24,
                              borderRadius:'50%', background:'#FFFFFF',
                              border:`3px solid ${m.color}`,
                              boxShadow:'rgba(46,92,138,0.12) 0 0 0 4px #FBF9F4'}} />
                <div style={{display:'flex', alignItems:'baseline', gap:14, flexWrap:'wrap'}}>
                  <span style={{fontSize:11, fontWeight:700, letterSpacing:1.6,
                                 textTransform:'uppercase', color:m.color}}>
                    {m.n} · {m.weeks}
                  </span>
                </div>
                <h3 style={{fontFamily:'"Space Grotesk"', fontSize:30, fontWeight:600,
                             color:'#0E1B2E', margin:'8px 0 0', letterSpacing:'-0.5px'}}>
                  {m.title}
                </h3>
                <div style={{fontSize:15, color:'#3F5670', fontStyle:'italic',
                              marginTop:4}}>{m.sub}</div>
                <ul style={{listStyle:'none', padding:0, margin:'20px 0 0',
                             display:'flex', flexDirection:'column', gap:8}}>
                  {m.items.map(it => (
                    <li key={it} style={{display:'flex', gap:10, fontSize:15,
                                          color:'#3F5670', lineHeight:1.5}}>
                      <i data-lucide="arrow-right" style={{width:14, height:14,
                          color:m.color, flexShrink:0, marginTop:5}}></i>
                      {it}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  if (variant === 'cards') {
    return (
      <section id="curriculum" style={{padding:'96px 0', background:'#FBF9F4'}}>
        <div className="container">
          <Header />
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20,
                        marginTop:48}} className="curr-cards">
            {CURRICULUM.map(m => (
              <div key={m.n} style={{
                background:'#FFFFFF', border:'1px solid #DCE4EC', borderRadius:14,
                padding:32, display:'flex', flexDirection:'column',
                boxShadow:'rgba(46,92,138,0.06) 0px 4px 12px',
                borderTop:`4px solid ${m.color}`,
              }}>
                <div style={{fontSize:11, fontWeight:700, letterSpacing:1.6,
                              textTransform:'uppercase', color:m.color}}>
                  {m.weeks}
                </div>
                <h3 style={{fontFamily:'"Space Grotesk"', fontSize:24, fontWeight:600,
                             color:'#0E1B2E', margin:'10px 0 0', letterSpacing:'-0.5px'}}>
                  {m.title}
                </h3>
                <div style={{fontSize:14, color:'#3F5670', fontStyle:'italic',
                              marginTop:6}}>{m.sub}</div>
                <ul style={{listStyle:'none', padding:0, margin:'24px 0 0',
                             display:'flex', flexDirection:'column', gap:10}}>
                  {m.items.map(it => (
                    <li key={it} style={{display:'flex', gap:10, fontSize:14,
                                          color:'#3F5670', lineHeight:1.5}}>
                      <i data-lucide="check" style={{width:14, height:14,
                          color:m.color, flexShrink:0, marginTop:4}}></i>
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 880px) { .curr-cards { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>
    );
  }

  // ACCORDION (default + interactive)
  return (
    <section id="curriculum" style={{padding:'96px 0', background:'#FBF9F4'}}>
      <div className="container">
        <Header />
        <div style={{marginTop:48, display:'flex', flexDirection:'column', gap:12}}>
          {CURRICULUM.map((m, i) => {
            const isOpen = open === i;
            return (
              <div key={m.n} style={{
                background:'#FFFFFF', border:'1px solid #DCE4EC',
                borderLeft:`4px solid ${m.color}`,
                borderRadius:12, overflow:'hidden',
                transition:'box-shadow 200ms',
                boxShadow: isOpen
                  ? 'rgba(46,92,138,0.12) 0px 8px 24px'
                  : 'rgba(46,92,138,0.04) 0px 2px 6px',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} className="curr-acc-btn" style={{
                  width:'100%', background:'transparent', border:'none',
                  textAlign:'left', padding:'24px 28px',
                  display:'grid', gridTemplateColumns:'auto 1fr auto', gap:24,
                  alignItems:'center',
                }}>
                  <div className="curr-acc-meta" style={{minWidth:120}}>
                    <div style={{fontFamily:'"Space Grotesk"', fontSize:14, fontWeight:600,
                                  color:m.color}}>
                      {m.n}
                    </div>
                    <div style={{fontSize:11, fontWeight:600, color:'#6B7E92',
                                  textTransform:'uppercase', letterSpacing:1, marginTop:4}}>
                      {m.weeks}
                    </div>
                  </div>
                  <div>
                    <div style={{fontFamily:'"Space Grotesk"', fontSize:24, fontWeight:600,
                                  color:'#0E1B2E', letterSpacing:'-0.3px', lineHeight:1.2}}>
                      {m.title}
                    </div>
                    <div style={{fontSize:14, color:'#3F5670', marginTop:4}}>{m.sub}</div>
                  </div>
                  <div className="curr-acc-chev" style={{
                    width:36, height:36, borderRadius:'50%',
                    background:'#E1ECF7', display:'flex', alignItems:'center',
                    justifyContent:'center', color:'#2E5C8A',
                    transition:'transform 200ms', flexShrink:0,
                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
                  }}>
                    <i data-lucide="chevron-down" style={{width:18, height:18}}></i>
                  </div>
                </button>
                <div style={{
                  maxHeight: isOpen ? 600 : 0,
                  overflow:'hidden',
                  transition:'max-height 320ms cubic-bezier(0.2,0.8,0.2,1)',
                }}>
                  <div className="curr-acc-body" style={{padding:'4px 28px 28px 152px'}}>
                    <ul style={{listStyle:'none', padding:0, margin:0,
                                 display:'flex', flexDirection:'column', gap:10}}>
                      {m.items.map(it => (
                        <li key={it} style={{display:'flex', gap:12, fontSize:15,
                                              color:'#3F5670', lineHeight:1.5}}>
                          <i data-lucide="check" style={{width:16, height:16,
                              color:m.color, flexShrink:0, marginTop:4}}></i>
                          <span>{it}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <style>{`
          @media (max-width: 760px) {
            .curr-acc-btn {
              grid-template-columns: 1fr auto !important;
              grid-template-areas: "meta chev" "title chev" !important;
              padding: 20px !important;
              gap: 6px 12px !important;
            }
            .curr-acc-btn > .curr-acc-meta { grid-area: meta; min-width: 0 !important; }
            .curr-acc-btn > div:nth-of-type(2) { grid-area: title; }
            .curr-acc-btn > .curr-acc-chev { grid-area: chev; }
            .curr-acc-btn > div:nth-of-type(2) > div:first-child { font-size: 20px !important; }
            .curr-acc-body { padding: 4px 20px 24px !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

window.Curriculum = Curriculum;